从业余到专业:网页设计的四个基本准则(概述篇)
许多网页设计师或者爱好者都并非是科班出身,他们没有接受过系统的设计理论的教育。所以做网页设计时,往往是凭自己灵感或者参考别人作品,导致设计出来的作品无论在整体还是细节上都不能达到一些专业水准的水平。
但是,实际上只要掌握本教程所介绍的4基本的设计准则,那么就能显著提高网页设计师的设计水平,让你完成从业余设计师到专业设计师的蜕变。
事实上,这四个基本准则不仅仅适用于网页设计领域,在平面设计、视频设计等领域也被广泛被运用,因为设计是相通的。这四个基本准则有一个好记的名字“鲤鱼(CRAP)”,英文单词鲤鱼是由CRAP四个字母组成的,分别是是四个单词的首字母缩写,这四个准则是:
- Contrast:对比
- Repetition:重复
- Alignment:对齐
- Proximity:相似
这四个准则可谓实用又好用,所以本教程是一个系列教程,后续文章会对四个准则分别进行介绍,本文是概述。
Robin Williams的教程书The Non-Designer’s Design Book对这四个基本准则进行了非常深入和详细的解答,不过是英文的。如果读者时间不多的话,可以只参考本教程。
1.对齐(Alignment)
对齐是设计理论中一个非常重要的准则,但是却很容易掌握。判断一个网站的设计是业余水准还是专业水准,通过看是否恰当运用对齐准则就知道了。没有运用对齐准则的网页,所有东西好像是随意散落在页面上似的,结构很松散,没有较强的目的性。
对齐准则: 设计网页时,网页上任何设计元素都不应该被随意放置,所有设计元素和页面上的其他元素要有视觉上的联系,这个联系手段就是对齐。
请参考下面的网页设计 Oxford Garden website
本教程在上图网页加了一些水平和垂直的红线,标出了它们对齐的地方。请读者注意看页面上这些设计元素是如何和其他元素对其的。
举个例子:如标志部分和内容的第一栏文字是对齐的,这是有意为之,而不是偶然的。
2.重复(Repetition)
专业的网页设计会保持一个统一的页面风格,各个页面的风格不会互相冲突。保持这种风格统一性的秘诀就在于运用重复准则。
重复准则: 一些设计元素在整个网页设计过程中要有一些重复。
重复准则也可以帮助访问者知道网站上面哪些元素在功能上是一样的,或者哪些元素在内容的重要性上是属于哪个等级的。
请参考下面的网页设计 Mullenweg’s personal blog.
读者可以注意到,每一个评论的标题都是一样的风格,评论正文的背景颜色也是一样的,评论者的头像都是靠左对齐的。这些虽然是Wordpress后台默认的,但从设计上讲,的确运用了重复准则。
再看侧边栏,每个侧边栏的标题看上去都是相同的,一样的背景,相同的字号和字体颜色。
重复准则可以让访客知道哪些东西是同一类的,所以,重复准则不仅能改善网页的设计,而且也能提升整个网站的用户体验。
3.对比(Contrast)
很显然,如果网页设计的时候,所有的元素都设计得相差不大,那么自然很难找到所需要的内容。因为没有重点和非重点的区别。要把内容区分出来,就必须用到对比准则。
对比准则: 网页上的内容应该有一定的对比和区分度。
请参考下面的网页设计 Let’s Make it a Date website
一个简单的测试对比的方法是眯眼测试,把眼睛眯起来看,如果对比运用恰当的话,你应该还是可以分辨出设计页面上不同的内容,对比准则就是帮助区分这些不同的内容。
举个例子,上面设计稿左下方两个硕大的按钮就是为了突出这两个链接,以便让访客点击它们,了解更多公司的信息和去联系他们。因为这两个按钮和其他的内容有很大的对比度,所以很容易被区分出来。
4.相似(Proximity)
一些糟糕的网页设计例子:
- 你看到一张图片,却不知道描述这张图片的具体文字是那一段。
- 你花了很长时间才知道某一个设计元素和其他设计元素原来是同一类别。
这些都是因为设计网页时,没有运用到相似准则。
相似准则: 相关联或者类似的项目应该组成一组。
参考下面这个网页设计 Arts Design Studio website
请看上图用红色框起来的部分,Solution这个总标题和下面6个文字段落的距离比上面的文字要更接近一点。同样,下面6块段落文字,它们自己的 标题、图标和文字都会靠在一起,每一块都会和其他块保持一定距离,以便读者容易区分。这样你就可以轻松知道这些标题、图标是描述哪一些文字的。
总结
要更加深入的学习这个四个准则?不用担心,很快将翻译发布出剩下的文章。
学习完了大概介绍,如果你想学习运用这四个准则,那么从现在起浏览网页时,看别人的网页设计是如何运用这四个准则的。
如果看到了一个你喜欢的网页设计,看看是否能找到以上提到的准则,当看到一个不令人喜欢的网页设计时,看看是否因为没有恰当运用这些准则。一旦你在设计网页的时候意识到了这些准则的存在,那么请大胆去运用它们。
当然,网页设计的准则都是可以被打破的,但是设计网页时,要打破这些准则,你必须先知道这些准则是如何影响网页设计的。
分享到:
相关推荐
利用关系型数据库的特征,将系统设计为1个数据库,包含2个基本表: 1、主表:编号,主题,票数。 2、附表:编号,选项编号,选项内容,票数。 DB_51aspx下为Sql数据库文件,附加后修改App_Code下的数据库连接信息
从业余到专业 京内网的蜕变成长史.docx
大学信息学院05级信息专业学生业余生活调查,可以进行选择或自定义 (一)设计如下面的数据项和数据结构。 1、题目信息,包括的数据项有:编号,主题,票数。 2、选项信息,包括的数据项有:编号,选项编号,选项...
某大学信息学院05级信息专业学生业余生活调查,可以进行选择或自定义 (一)设计如下面的数据项和数据结构。 1、题目信息,包括的数据项有:编号,主题,票数。 2、选项信息,包括的数据项有:编号,选项编号,选项...
学生业余生活调查系统asp.net源码,可以进行选择或自定义,暂没有管理...利用关系型数据库的特征,将系统设计为1个数据库,包含2个基本表: 1、主表:编号,主题,票数。 2、附表:编号,选项编号,选项内容,票数。
参考资料-工程勘察设计单位组织业余设计有关问题的规定.zip
从业余到职业-一名散户的炒股成长编年史(完整版)
设计:从业余成为一名专业设计师 ;演示设计师:成为一名专业演示设计师;摄影:从业余成为一名专业摄影师 ;时间管理:不浪费没必要的任何时间;读书、知识输出管理:读100本各行各业的书,并写100篇读书笔记,我...
在新产品/服务开发中,业余爱好者是没有专业设计师职业但仍然有能力或愿意参与创新过程的人。 这里讨论的“业余”概念与“用户”不同。 文献分析和案例研究的结果证明,业余爱好者的参与已经促进了公司的创意产生,...
篇二:平面设计求职信范文 平面设计自荐书范文 各位领导您好: 虽然我是刚从学校踏出社会,但是我却热爱我所选的专业,因为每当我做出一个作 品出来时,我都很高兴也使我自豪,虽然我没什么社会经验,但是我相信贵...
四级《业余电台操作证书》考题 申请呼号必须通过本考试
四级业余电台操作证书>答案 申请呼号必须通过此考试
它不仅介绍了什么是业余无线电活动及业余无线电活动的内容,还从理论知识到实践指导,囊括了电子基础概念、元器件和电路模块、模拟和数字电路设计、故障检修技术、收发信操作技巧、无线电收发设备制作、天线设计等...
这套HTML源代码文件是一个完整的网页模板,适用于各种类型的网站。...总的来说,这套HTML源代码文件是一个高效、实用、易用的工具,无论你是专业的网页设计师,还是业余的编程爱好者,都值得拥有。
这篇文章适合编程初学者,包括学生、业余爱好者,以及对设计模式感兴趣的读者。无论你是刚开始学习编程,还是有一定基础但想提高代码水平的开发者,这篇文章都能为你提供有价值的信息。 **使用场景及目标**: 使用...
它不仅介绍了什么是业余无线电活动及业余无线电活动的内容,还从理论知识到实践指导,囊括了电子基础概念、元器件和电路模块、模拟和数字电路设计、故障检修技术、收发信操作技巧、无线电收发设备制作、天线设计等...
*假设你在业余时间经营一个会员制的CD出租销售店,需要一个管理程序: *增加、删除会员 *出租、销售CD *进货、统计
它不仅介绍了什么是业余无线电活动及业余无线电活动的内容,还从理论知识到实践指导,囊括了电子基础概念、元器件和电路模块、模拟和数字电路设计、故障检修技术、收发信操作技巧、无线电收发设备制作、天线设计等...
某大学信息学院05级信息专业学生业余生活调查,可以进行选择或自定义 (一)设计如下面的数据项和数据结构。 1、题目信息,包括的数据项有:编号,主题,票数。 2、选项信息,包括的数据项有:编号,选项编号,选项...