您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 设计理论 >> 浏览设计教程

从业余到专业系列--02:网页设计理论的重复准则

上一篇文章讲述了网页设计的对齐准则,今天则开始分析重复准则。

运用重复准则,网页不会像对齐之后发生显著变化。重复可以在细节上提升网页的设计。

1.先看运用过对比的设计

这是上一篇运用完对比准则后的网页,但是网页整体上看还是平淡无味。各个设计元素通过对齐链接起来还不够,我们应该用重复准则增强它们的视觉联系。

2.为网页的标志部分应用重复

首先先回顾一下运用过对比的标志

下面开始运用重复来改善这部分的设计。

首先我们为公司名称和描述之间添加一条黑线,这里重复使用了logo图形的设计元素:白线。同样将公司名称轻微往左边移动,使位置排列得和logo的图形相呼应。

注意到网页header中间的联系信息以及右边的搜索框,调整它们的位置,使他们的中心和这条黑线水平对齐。

增加这条黑线目的在于,为后续的网页增加可运用重复的设计元素。

3.在网页上重复色彩和字体

现在增加一些重复的设计元素,效果如下图:

网页的内容部分,H2的标题都重复用了和logo相同的颜色,而且H2标题使用了新的字体,这个字体也很容易和H1标题字体区分开来。

网页左边的导航栏部分,导航链接都使用了相同的蓝色和相同的字体。导航栏标题的字体和H2字体是一样的,为了区分它们,导航栏标题颜色保留为黑色。

4.再为网页设计增加重复元素

让我们再增加一些重复的设计元素。

我们为每个H2标题下方添加一条粗黑线,同样黑线稍微向右移动一些,这样就变成logo部分设计元素的重复运用。

黑线在浏览网页起着视觉引导作用。一般而言,浏览网页会先看logo部分,随后视觉会落到页面上和logo有重复设计元素的内容上。

网页左边的导航栏,我们为每个连接下方增加细黑线,这里同样使用线这个设计元素,将网页内容在视觉上联系起来。

从心理学角度上讲,粗黑线可以传递一种稳重的感觉,蓝色可以给人信任、理性的感觉。

5.总结

观察对比运用重复之前和之后的图片,虽然网页没有像用对比一样起了显著的变化,但也使网页设计的感觉更好。

在设计网页时,思考哪些地方应该运用重复,以让网页的设计元素有一个视觉联系,通常网页标题部分是运用重复的地方。

但是注意网页不能过多运用重复,细微重复可以增加网页设计的整体感和规划感。

下一次我们在网页设计时,将运用对比准则。对比和对齐一样可以明显改善网页设计的整体效果。

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/di1066.html
从业余到专业系列--01:网页设计理论的对齐准则
从业余到专业系列--03:网页设计理论的对比准则
图趣网微信
建议反馈
×