从业余到专业:网页设计的四个基本准则(概述篇)
许多网页设计师或者爱好者都并非是科班出身,他们没有接受过系统的设计理论的教育。所以做网页设计时,往往是凭自己灵感或者参考别人作品,导致设计出来的作品无论在整体还是细节上都不能达到一些专业水准的水平。
但是,实际上只要掌握本教程所介绍的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. **业余无线电台定义**:业余...这些知识点涵盖了业余电台操作的基本法规、操作要求、通信规范和道德准则,是业余无线电爱好者必须了解和遵守的内容。
利用关系型数据库的特征,将系统设计为1个数据库,包含2个基本表: 1、主表:编号,主题,票数。 2、附表:编号,选项编号,选项内容,票数。 DB_51aspx下为Sql数据库文件,附加后修改App_Code下的数据库连接信息
在互联网时代,网站是信息传播的重要平台,因此理解和掌握网页设计与制作技术对计算机相关专业的学生至关重要,无论他们是专业的网站设计师还是业余爱好者。 本教程的目的是引导初学者有效地学习网页设计,避免在...
熟练运用表格是专业网页设计师与业余爱好者的区别之一。 在实际操作中,插入表格是实现布局设计的关键步骤。你可以直接绘制表格,或者导入数据并转换成表格。一个表格由行、列和单元格组成,通过插入表格并组织数据...
课程的首个单元是网页设计概述与经典网站赏析,引导学生从浏览者的角度转变为设计者的视角,理解网络、网站和网页的概念,了解网站在企业发展中的重要性,以及网页设计对于用户体验的影响。 在网页设计的基础部分,...
这些实际操作经验让我深入了解了网页设计的全过程,从需求分析到界面设计,再到前端开发和后台管理,我都积累了丰富的实战经验。 此外,我非常重视身体健康,积极参与体育锻炼,提高身体素质。同时,我也热衷于校园...
Adobe Photoshop CS是一款由Adobe公司开发的专业图像处理软件,广泛应用于平面艺术设计、摄影后期、多媒体制作、影像编辑以及网页设计等多个领域。它的强大功能和丰富的特性使其成为业界标准,尤其在图像修复、文本...
毕业设计:Java毕业设计(业余草微信公众号)
在网页设计中,菜单是至关重要的元素之一,它引导用户...这个工具不仅适合专业设计师,也适合对网页设计有一定了解的业余爱好者。利用提供的各种功能,你可以轻松实现富有创意和实用性的网页菜单,提升网站的用户体验。
大学信息学院05级信息专业学生业余生活调查,可以进行选择或自定义 (一)设计如下面的数据项和数据结构。 1、题目信息,包括的数据项有:编号,主题,票数。 2、选项信息,包括的数据项有:编号,选项编号,选项...
下面我们将从基本原理到实现细节对业余超短波发信机和收信机进行详细介绍。 基本原理 超短波发信机和收信机的基本原理是基于电磁理论。电磁波是一种波长在1 mm到1 m之间的电磁波,它们可以被用来传输信息。在业余...
标题 "业余框架整合-SSHD-(1)-整体概述(2011-12-03更新)" 提供的信息表明,这是一个关于集成开源框架 SSHD (Secure Shell Daemon) 的初步介绍。SSHD 是一个用于创建安全远程访问服务的 Java 实现,它允许用户通过 ...
网页设计与制作是一门涵盖了多个领域的综合技能,它涉及到网站规划、页面制作、上传测试以及后期维护等多个环节。以下是对这些知识点的详细说明: 一、网站规划 1. **确定主题与名称**:这是网站设计的第一步,需要...
Logo设计是品牌识别的核心元素,对企业形象的塑造起着至关重要的作用。一个好的Logo不仅需要美观...遵循以上设计准则,设计师能够创建出既能吸引眼球又能准确传达品牌信息的Logo,为企业的品牌形象建设奠定坚实的基础。
某大学信息学院05级信息专业学生业余生活调查,可以进行选择或自定义 (一)设计如下面的数据项和数据结构。 1、题目信息,包括的数据项有:编号,主题,票数。 2、选项信息,包括的数据项有:编号,选项编号,选项...
总的来说,“80套经典网页设计模版”是一份宝贵的资源,无论是专业人士还是业余爱好者,都能从中受益。通过灵活运用这些模版,你可以创造出独特且引人入胜的网页,提升你的网站在众多互联网平台中的竞争力。
【NBA篮球个人网页】是一个以NBA篮球为主题的个人网页设计作品,主要展示了制作者对篮球的热爱,并利用业余时间进行创作。这个网页设计涵盖了多种IT领域的知识点,包括前端开发技术、网页布局、数据获取与展示、用户...
这套HTML源代码文件为您呈现了一个完整的网页模板,适用于各类网站开发需求。...总之,这套HTML源代码文件是一个高效、实用且易于上手的工具,无论您是专业的网页设计师,还是业余的编程爱好者,都值得一试。