网页工作设计四个基本准则.pdf

网页设计的四个基本准则 时间:2011-09-25 15:21 来源:未知 作者:admin 点击: 132 次 本文介绍了四个网页设计的基本准则，其实，设计是相通的，本文也适用于平面 设计和视频设计当中，希望对你有帮助，一起来看。 　　许多网页设计师或者网页设计爱好者都并非是科班出身，他们没有接受过系 统的设计理论的教育。所以做网页设计时，往往是凭自己灵感或者参考别人作品， 导致设计出来的作品无论在整体还是细节上都不能达到一些专业水准的水平。 但是，实际上只要掌握本教程所介绍的 4 基本的设计准则，那么就能显着提高网 页设计师的设计水平，让你完成从业余设计师到专业设计师的蜕变。 事实上，这四个基本准则不仅仅适用于网页设计领域，在平面设计、视频设计等 领域也被广泛被运用，因为设计是相通的。这四个基本准则有一个好记的名字“鲤 鱼（CRAP）”，英文单词鲤鱼是由CRAP 四个字母组成的，分别是是四个单词的 首字母缩写，这四个准则是： Contrast：对比 Repetition：重复 Alignment：对齐 Proximity：相似 这四个准则可谓实用又好用，所以本教程是一个系列教程，后续文章会对四个准 则分别进行介绍，本文是概述。 1.对齐（Alignment） 对齐是设计理论中一个非常重要的准则，但是却很容易掌握。判断一个网站的设 计是业余水准还是专业水准，通过看是否恰当运用对齐准则就知道了。没有运用 对齐准则的网页，所有东西好像是随意散落在页面上似的，结构很松散，没有较 强的目的性。 对齐准则: 设计网页时，网页上任何设计元素都不应该被随意放置，所有设计元 素和页面上的其他元素要有视觉上的联系，这个联系手段就是对齐。 请参考下面的网页设计 Oxford Garden website （/） 本教程在上图网页加了一些水平和垂直的红线，标出了它们对齐的地方。请读者 注意看页面上这些设计元素是如何和其他元素对其的。 举个例子：如标志部分和内容的第一栏文字是对齐的，这是有意为之，而不是偶 然的。 2.重复（Repetition） 专业的网页设计会保持一个统一的页面风格，各个页面的风格不会互相冲突。保 持这种风格统一性的秘诀就在于运用重复准则。 重复准则: 一些设计元素在整个网页设计过程中要有一些重复。 重复准则也可以帮助访问者知道网站上面哪些元素在功能上是一样的，或者哪些 元素在内容的重要性上是属于哪个等级的。 请参考下面的网页设计 Mullenweg’s personal blog. （http://ma.tt/） 读者可以注意到，每一个评论的标题都是一样的风格，评论正文的背景颜色也是 一样的，评论者的头像都是靠左对齐的。这些虽然是 Wordpress 后台默认的，但 从设计上讲，的确运用了重复准则。 再看侧边栏，每个侧边栏的标题看上去都是相同的，一样的背景，相同的字号和 字体颜色。 重复准则可以让访客知道哪些东西是同一类的，所以，重复准则不仅能改善网页 的设计，而且也能提升整个网站的用户体验。 3.对比（Contrast） 很显然，如果网页设计的时候，所有的元素都设计得相差不大，那么自然很难找 到所需要的内容。因为没有重点和非重点的区别。要把内容区分出来，就必须用 到对比准则。 对比准则: 网页上的内容应该有一定的对比和区分度。 请参考下面的网页设计 Let’s Make it a Date website （/） 一个简单的测试对比的方法是眯眼测试，把眼睛眯起来看，如果对比运用恰当的 话，你应该还是可以分辨出设计页面上不同的内容，对比准则就是帮助区分这些 不同的内容。 举个例子，上面设计稿左下方两个硕大的按钮就是为了突出这两个链接，以便让 访客点击它们，了解更多公司的信息和去联系他们。因为这两个按钮和其他的内 容有很大的对比度，所以很容易被区分出来。 4.相似（Proximity） 一些糟糕的网页设计例子： 你看到一张图片，却不知道描述这张图片的具体文字是那一段。 你花了很长时间才知道某一个设计元素和其他设计元素原来是同一类别。 这些都是因为设计网页时，没有运用到相似准则。 相似准则: 相关联或者类似的项目应该组成一组。 参考下面这个网页设计 Arts Design Studio website （/） 请看上图用红色框起来的部分，Solution 这个总标题和下面 6 个文字段落的距 离比上面的文字要更接近一点。同样，下面 6 块段落文字，它们自己的标题、图 标和文字都会靠在一起，每一块都会和其他块保持一定距离，以便读者容易区分。 这样你就可以轻松知道这些标题、图标是描述哪一些