从业余到专业:02网页设计理论的重复准则,本教程结合案例介绍如何在网页设计中运用重复准则。是系列文章网页设计四个准则之一,帮助读者提高网页设计水平。
【 tulaoshi.com - Html 】
上一篇文章讲述了网页设计的对齐准则,今天则开始分析重复准则。
运用重复准则,网页不会像对齐之后发生显著变化。重复可以在细节上提升网页的设计。
1.先看运用过对比的设计这是上一篇运用完对比准则后的网页,但是网页整体上看还是平淡无味。各个设计元素通过对齐链接起来还不够,我们应该用重复准则增强它们的视觉联系。
2.为网页的标志部分应用重复首先先回顾一下运用过对比的标志
下面开始运用重复来改善这部分的设计。
首先我们为公司名称和描述之间添加一条黑线,这里重复使用了logo图形的设计元素:白线。同样将公司名称轻微往左边移动,使位置排列得和logo的图形相呼应。
注意到网页header中间的联系信息以及右边的搜索框,调整它们的位置,使他们的中心和这条黑线水平对齐。
增加这条黑线目的在于,为后续的网页增加可运用重复的设计元素。
3.在网页上重复色彩和字体现在增加一些重复的设计元素,效果如下图:
网页的内容部分,H2的标题都重复用了和logo相同的颜色,而且H2标题使用了新的字体,这个字体也很容易和H1标题字体区分开来。
网页左边的导航栏部分,导航链接都使用了相同的蓝色和相同的字体。导航栏标题的字体和H2字体是一样的,为了区分它们,导航栏标题颜色保留为黑色。
4.再为网页设计增加重复元素让我们再增加一些重复的设计元素。
我们为每个H2标题下方添加一条粗黑线,同样黑线稍微向右移动一些,这样就变成logo部分设计元素的重复运用。
黑线在浏览网页起着视觉引导作用。一般而言,浏览网页会先看logo部分,随后视觉会落到页面上和logo有重复设计元素的内容上。
网页左边的导航栏,我们为每个连接下方增加细黑线,这里同样使用线这个设计元素,将网页内容在视觉上联系起来。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)从心理学角度上讲,粗黑线可以传递一种稳重的感觉,蓝色可以给人信任、理性的感觉。
5.总结观察对比运用重复之前和之后的图片,虽然网页没有像用对比一样起了显著的变化,但也使网页设计的感觉更好。
在设计网页时,思考哪些地方应该运用重复,以让网页的设计元素有一个视觉联系,通常网页标题部分是运用重复的地方。
但是注意网页不能过多运用重复,细微重复可以增加网页设计的整体感和规划感。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)下一次我们在网页设计时,将运用对比准则。对比和对齐一样可以明显改善网页设计的整体效果。
来源:http://www.tulaoshi.com/n/20160129/1482949.html
看过《从业余到专业:02网页设计理论的重复准则》的人还看了以下文章 更多>>