从业余到专业：02网页设计理论的重复准则

 

从业余到专业：02网页设计理论的重复准则

 

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

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

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

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

 

 

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

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

 

 

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

 

 

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

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

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

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

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

 

 

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

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

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

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

 

 

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

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

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

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

5.总结

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

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

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

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