跳至主要内容

设计良好网页的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个基本原则时,你会发现你的设计有了不可思议的改进。当然肯定还有许许多多别的东西也需要考虑,但是以反差、重复、排列和分类作为基础你的设计会取得长足进步。



 

评论

此博客中的热门博文

前员工称社区网络是Google最大弱点

北京时间3月7日消息,Google员工近日掀起了离职创业之风,并且主要的创业领域为社区网络。有前Google员工指出,社区网络正是Google最大的弱点。以下是今天美国科技博客的主要内容。   Bits:分析师称移动运营商之间将出现价格战   Sanford Bernstein分析师Craig Moffett日前在一份报告中称,由于手机普及率已经很高,因此移动运营商将很难继续实现增长,而运营商之间将出现价格战。来自美国各主要运营商的最新数据显示,用户增长的速度正在大幅放缓。08年美国手机用户数仅同比增长5.9%,而09年可能进一步下降至3%。而一旦出现价格战,运营商的营收增长也将趋于停滞。Moffett甚至表示,整个移动通信产业即将崩溃。移动运营商目前将希望寄托在智能手机上,智能手机用户通常会更多的使用数据业务。   WebProNews:员工称Google最大弱点在社区网络   前Google员工Bindu Reddy和Arvind Sundararajan近日创立了一家社会化网站Likaholix,这是前Google员工近期创立的数家网站之一。分析认为,导致Google员工离职创业的原因有二。首先,Google目前的规模太庞大,因此很难将一些好的创意引入核心业务中。其次,在网页搜索领域对Google发起挑战是愚蠢的,Google最大的弱点在于社区网络和实时搜索。Reddy认为,Google未来最大的威胁来自Facebook和Twitter,而不是微软和雅虎。   Search Engine Land:AdSense发行商起诉Google获胜   AdSense广告平台的一名用户近日对Google提起诉讼并获得胜利。Google此前关闭了该用户的AdSense帐号,理由是该帐号"对广告主造成威胁",但Google并未具体指出这一威胁是什么。该用户随后起诉Google,并要求Google赔偿721美元。尽管Google的法律代表声称Google有权终止用户帐号,并且已经向该用户支付了721美元,但法庭最终判决结果仍然要求Google支付这笔钱,以及40美元的庭审费用。这一诉讼或许将成为其他AdSense发行商未来起诉Google的依据。   VentureBeat:全部iPhone应用程序总售价超7万美元   尽管RIM、微软和Palm等公司均推...

奥运会开模式上的蓝屏靓照

鸟巢的灯光和投影显示系统 使用了上百台Windows XP Embedded系统的服务器产品 此次北京奥运会开幕式共使用了120台HES Axon Media Servers服务器,这也是历届盛会之最。所有的灯光效果以及放映机移动控制都由Axon Media Servers实时处理并通过三台Wholehog 3灯光控制台操纵完成。 位于鸟巢的Axon Media Servers,有关Axon Media Servers的更多信息可参考 这里 。 在开幕式主火炬点火的关键时刻,其中一台投影服务器正巧出现了 奥运开模式上的蓝屏靓照 这幅图来自 gizmodo.com (both Li Ning and the BSOD :-) ) 没有错,正当李宁在空中跑道大步迈进的时候,蓝屏就在他的身旁。 下面的图片 据说 拍摄于H区3层顶棚。 拍摄于H区3层顶棚,2008.8.8,持续了开幕式的一半时间... Windows Blue Screen on the Olympics Openning Ceremony of Beijing 2008 照片上沿的那块蓝色,不过里边的字看不清了,其实从开幕式刚开始没多久,我就注意到顶棚有这么一块蓝色;不过因为是横过来的,所以没发觉是蓝屏;后来坐在我右边的一位老兄提醒了一下,我才反应过来,这时开幕式都快结束了。 李宁点完火炬降下来时,就经过瑞士国旗的左边,而这个蓝屏也就在李宁的左边,可惜我敏感度不高,当时没照下来。 相关链接: 奥运会开幕式上的Windows蓝屏 Blue Screen of Death Strikes Bird's Nest During Opening Ceremonies Torch Lighting 奥运会开幕式后台控制揭秘 XPe是功臣 Windows XP Embedded? 一样会蓝屏 奥运开幕式上的Windows蓝屏新照 奥运开模式上的蓝屏靓照 2008北京奥运会开模式上的蓝屏靓照

Google和雅虎签约加入英国定向广告规则

北京时间3月4日消息,据国外媒体报道,Google、雅虎已经签约加入英国的定向广告规则,以便向消费者提供更好的隐私保护。   定向广告去年成为了英国的热门话题,当时广告技术公司Phorm宣布与英国电信、维京传媒(Virgin Media)等互联网服务供应商合作,一些人士警告说消费者的隐私将受到威胁,互联网广告局英国部门在与Google、AOL、雅虎、微软等公司商讨后制订了若干原则。   互联网广告局监管官员尼克-斯特林格(Nick Stringer)表示:"定向广告占到了网上显示广告的20%,如果这一领域要发展,就必须赢得消费者的信任。"   按照这些原则,所有定向广告平台在获得数据之前都必须明确通知消费者,必须提供一种方式让消费者可以拒绝定向广告,最好能征求消费者的同意。(编译:搜狐IT Unifytruth) ------------------ 洛阳生活信息点评网:http://luoyanglife.com/ 洛阳生活信息,我爱打折论坛:http://bbs.luoyanglife.com/ 河南招生考试网:http://www.edu-ha.com/