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

2016-01-29 11:41 12 1 收藏

从业余到专业: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

延伸阅读
半扁平化设计 过去纯粹的扁平化设计几乎统治了整个网页设计市场,但今年由于具体化设计的影响,今年的网页设计会变得更加趋向于立体化。这种转变将体现在一些光和阴影的运用,成为所谓“半扁平化设计”。扁平化设计的兴起是为了适应现代科技推崇的极简化设计风格。扁平化设计仍会存在,但已不再被大量发展并使用。适量渐变阴影的使用将会...
标签: Web开发
所谓产品其实最终展现在用户面前的只是界面而已,所谓界面绝大多数时候只包括两个部分:图片、文字。 重视界面上的每一个像素和每一个文字是UED的基本素质,关于如何设计好界面上的文字(一般在UED里面我们把这个职位叫做内容优化)我以前写过创业团队的界面文字优化和用户在每个情景中的角色感,这一期的话题中其他伙伴也说到了很多。 这个话...
标签: PS PS教程
1.直接展示法   这是一种最常见的运用十分广泛的表现手法。它将某产品或主题直接如实地展示在广告版面上,充分运用摄影或绘画等技巧的写实表现能力。细臻刻划和着力渲染产品的质感、形态和功能用途,将产品精美的质地引人入胜地呈现出来,给人以逼真的现实感,使消费者对所宣传的产品产生一种亲切感和信任感。  这种手法由于直接...
标签: Web开发
原文:http://andymao.com/andy/post/80.html 这段时间我一直在说设计需要有层次感,这种层次感可能有很多类型,比如色彩的层次感,或是元素的层次感。当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能,一种是单调,一种是花哨。在设计中我们常常陷于对于某一种色彩或是某一种效果的偏爱,而这种情况会使我们的设计缺乏长久的生命...
一扯上文化二字,总觉虚无缥缈、漫无边际,或者老气横秋,如何有趣地利用中华文化的思想和符号,结合现代的元素,使其成为有意思的传播手法,这个问题的思考过程形成了一套腾讯桌面产品的宣传广告及此文。 这段时间大家浏览 PC.QQ.COM 首页的时候,在头部的广告位里会发现一套水墨风格的系列广告,这是设计中心为桌面产品系列进行的一次整...

经验教程

93

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部