跳至主要内容

设计良好网页的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这 4项原则就是:反差, 重复, 排列, 和分类。

本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则,你就一定可以设计出更加整洁漂亮的网页。

1.反差效果

好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点,注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。

图片反差

当需要在很多小元素后面展示一个大尺寸的插图时,这种方法很有效。嗯,我的意思就是,比如:

The Invoice Machine

这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。

Instabox


当你眼睛看到这个页面的时候,首先你会注意到什么?最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样,它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。

颜色反差

恰到好处地使用少量颜色,是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色,也可以在一张图片或插图的颜色里面应用。

Fatburgr

这个网站是极出色的一个所有设计原则的应用实例。关于颜色反差我们来看看它大大的黄色头部和小小的淡灰文字。排列、图片反差、重复和分类这几个原则做得都很彻底。

I Love Typography

一个用来展示排版的网站如果在它自己的页首就为我们展示了一个极好的排版效果,那让人觉得多惊奇啊!我喜欢他们所用的字体,也喜欢他们良好的青色和深灰色搭配。

字体反差

如果你想通过字体来产生反差效果,就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆,并让设计变得模糊。不过把字体大小弄得很 不一样就会非常有效果,或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的,如果你将两种外形差别明显的两种字体排在一块,就会对它们带来的视觉 冲击效果感到惊奇。把一个 san serif 字体和一个手写字体放在一起就是一个例子。

Fixie Consulting


哇噻,我真的非常喜欢这个网站上使用的排版和颜色。注意看他们标语的大小和笔画。页面上洒水效果和少量蓝色的使用,都让我非常欣赏。

2.重复原则

跟web设计相比,重复原则在书本设计中应用得更加普遍,不过它在两者之间都是一样有效的。重复的设计元素可以使页面显得很连贯,还能提升品牌。在web设计中,可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。看看下面这些例子吧。

Ten24 Media

Ten24 Media 在头部和脚部都使用了很有创意的插画。

Silverback

这个网站绝对是超赞的!我绝对可以在前面"反差原则"部分就可以把它作为一个好例子亮出来的,可它在"重复原则"部分也是一个好例子,因为它的界面风格和品牌部分都很明显地应用了这个原则。仔细看它用香蕉来当做列表前面的图标,还有头部、脚部的森林插画。

3.排列原则

你的网站外观设计得很业余还是很专业,排列原则在其中扮演了一个很复杂的角色。最近我很主张在设计网页时使用格栏。这么做可以让你的设计很干净, 也可以提供一个很好的设计框架。如果你有兴趣想学习更多关于格栏设计的知识,去看看我最近的文章吧(在这王婆卖瓜,自卖自夸一下),Design A Fresh Blog Theme On The 960 Grid.

Black Estate Vineyard

这个网站在960 Grid website上有展示。它的版面排列很连贯也很引人注目。我很欣赏它将主要内容整齐地排在左边的做法,尽管有些大级别的头部破坏了这个规则并排到了左侧边栏里面。对留空的大量使用和字体反差大小的使用都非常不错。

A List Apart

A List Apart中使用的可视格栏非常有特色。里面的栏目设计良好,把所有包含内容都变得易于阅读。研究表明过宽的栏目会造成严重的阅读困难。在跟随那么宽的栏目中的文字时,你的眼睛会变得很累。 A List Apart

4.分类原则

最后一个原则是分类。只有在将相关元素分组,将无关元素分开的时候才会用到这个原则。假如你将所有东西都分到同一块文本块中,绝对会摧毁用户的体验。这就是为什么使用头部标签和适当的留空是那么的重要。

Envato

这个网站漂亮地将内容规整地组织到三个主要分类下,这些内容的定义既清晰又规整。

Paradigm Reborn

这个网站结构良好。头部既整洁又简单明了。空白留的很好,内容分开放得很有逻辑。

最终思想

当你脑中时刻惦记着这4个基本原则时,你会发现你的设计有了不可思议的改进。当然肯定还有许许多多别的东西也需要考虑,但是以反差、重复、排列和分类作为基础你的设计会取得长足进步。



 

评论

此博客中的热门博文

简单评测4个最好的PDF搜索引擎

借此机会将专业PDF 搜索引擎单独列出,并作简单的评测分析! 简单评测4个专业PDF搜索引擎 http://mygogou.com/mm-713/ 1、Search pdf 今天刚刚发现的专业级PDF 搜索引擎,也是基于Google,与PDFGeni十分相似,收录有225,000,000 本Ebook,支持中文关键词。界面清爽,没有广告,搜索结果可选择浏览或直接下载,支持iPaper阅读器(不推荐,速度慢!) hx9opyze 4个最好的PDF搜索引擎(简单评测) 网址:http://search-pdf-books.com/ 2、PdfGeni PdfGeni是一个专业的PDF文件搜索引擎,搜索的PDF文件可以直接下载。与Search pdf基于同一数据库,支持中文搜索,搜索结果几乎完全一样。搜索结果一页显示量大,减少分页浏览的繁琐。不过上面都是英文的PDF文档,没有中文PDF 资料。去淘一下吧,应该能找到一些不错的资源:) xcwcfmnt 4个最好的PDF搜索引擎(简单评测) 网址:http://www.pdfgeni.com/ 3、pdf-search 开 始一直和Search pdf 混淆,两者是完全独立的搜索引擎,但功能有的一拼。就功能而言,我倾向于pdf-search,提供专业的PDF文件搜索,支持中文,结果有三种分享方式:下载、浏览、代码,并且提供同一关键词doc文件、ppt文件专业搜索的入口,也就是说输入一次关键词,你可以得到三种文件的专业搜索!但是,最为遗憾的是速度较慢,甚至有打不开的现象。速度可是一个好的搜索引擎不可缺少的基本素质! v0fyk8ye 4个最好的PDF搜索引擎(简单评测) 网址:http://www.pdf-search-engine.com/ 4、Pdfdatabase Pdfdatabase 是一个不错的专项华搜索引擎,提供免费的PDF及doc文件的搜索服务,尤其是PDF搜索服务更是以大亮点。就数据库而言,与以上两者势均力敌,只是在用户操作性上更为灵活方便!不过,最大的缺陷是不支持中文搜索。 fvmhtxp4 4个最好的PDF搜索引擎(简单评测) 网址:http://pdfdatabase.com/ ------------------ 洛阳生活信息点评网:http://luoyanglife.com/ 洛阳生活信息...

新年的12个健康礼物

如果你对自己的健康不够满意的话,那么,在又一个365天即将到来的时刻,不妨送给自己的身体12个健康承诺,作为珍爱自己的特别礼物:新年的12个健康礼物  http://luoyanglife.com/blog/luoyang-faq-3146/ 1 每天半斤粮——五谷为养,粮食能滋养大脑,也能养护肠胃,适量吃主食并不会使人发胖。 2 每天一餐粗——粗粮富含维生素B族、矿物质和膳食纤维,让我们有顺畅的肠道和持久的精力。 3 每天一把豆——豆子和豆制品能帮助补充蛋白质,更是多种保健成分的来源,让我们不容易发胖,而且不容易衰老。 4 每天一斤菜——蔬菜是健康生活的永恒话题,它供应的保健成分、维生素和膳食纤维帮助人们远离多种癌症。 5 每天半斤绿——在蔬菜当中,深绿色叶菜是营养之精华,无论是强健骨骼,还是预防大脑衰老,绿叶菜都有意想不到的效用! 6 每天半斤果——水果不仅味道甘甜,还能提供多种抗氧化成分和大量的钾,对于稳定血压、控制血胆固醇和预防癌症都有益处。 7 每天一两肉——肉类和水产中的血红素铁、锌和蛋白质能帮助女性拥有红润容颜和温暖的身体,只要适量摄入,就能美味与健康兼得。 8 每天一个蛋——最新研究确信蛋黄是营养素的宝库,其中含有12种维生素和多种保健成分。它不仅无害于心脏,而且有利于延缓衰老。 9 每天一杯奶——奶类中大量的钙和多种维生素对女性不可或缺。如果不喜欢喝牛奶,没关系,酸奶毫不逊色,而且其中的益生菌好处多多。 10 每天一勺仁——坚果和种子是营养密集的食品,每天早上吃一勺,令人食欲满足,能补充多种微量元素,同时润肤美颜。 11 每天六千步——运动是保持强健心脏和苗条身材的不二法门。走路时脚步尽量快一些,加上每周两次有氧运动,能够有效延缓衰老。 12 每天8小时——睡眠是身体自我修复和充电的时间。高质量睡眠是美容的最佳方法,也是减少癌症危险的最简单方法。 2009年,一定是你人生中一个充实的年份,2010年,将是收获更加丰富的一年。但是,无论多么繁忙,对于重要的事情,人们总是有时间去做的。维护健康是每个人最重要的事业,也是期待未来成功的前提条件,因此,要把健康生活排在日程的最重要位置上,就像奥巴马和普京那样。 如果能改变自己的不健康行为,哪怕只有一项,只要切实坚持一年,那么在明年的今日,一定会感觉更加健康和自信! 最后,在新年来临之际,祝各位朋友健...

In winter, cold not do a woman

Women are yin, yang in itself on the weak, the physical largely biased towards cold, but you know what? Many women in order to control calorie intake, the daily life of selected health food mostly cold thing. As long as they can be beauty, and believe that the more the better, in fact, is not at a good body, excessive intake of cold food, the cold will let you add, thoroughly into "cold woman." In winter, cold not do a woman http://luoyanglife.com/blog/luoyang-faq-3233/  "Cold woman" self-test: see below consistent with the performance and you have several?  The morning feeling tired, do not want to get out of bed.  Irregular menstruation and dysmenorrhea often.  Shoulder, cervical and lumbar pain frequently.  Color is poor, is not young.  Regular air-conditioned room and left alone, do not love sports.  Drink too much or too tired, the body easily edema.  Chinese medicine, diet, life - to see how we should do it.  Chinese medicine beauty to ...