《Robin Williams Design Workshop》是l对是我最喜欢的一本设计书之一。它的设计理论更h实践价|展示的例子也都很。最重要的被崇尚为我的设计理늚ȝ包含有四条,他们是:(x)反差、重复、排列和分类。本文将讨论q?个优U的网站设计原则。只要在脑v中牢牢记住了(jin)q?原则,你就一定可以设计出更加整洁漂亮的网c(din)?/p>
1.反差效果
好的反差效果设计可以l用户一个极好的W一印象。如果用L(fng)眼睛没有焦点Q注意力׃(x)在处处是相同寸的元素和排版界面中迷失。设计师需要设计出很明?的突?gu)觉元素来引导用户的体验。你可以通过选择囄、颜色和字体{来形成良好的反差效果?/p>
囄反差
当需要在很多元素后面展CZ个大寸的插图时Q这 U方法很有效。比如:(x)
The Invoice Machine
q个|页利用一张大囄来吸引用L(fng)注意。而同时网?很自然的单色又让很少的蓝色应用有?jin)更好的效果?/p>
Instabox
当你眼睛看到q个面的时候,首先你会(x)注意C?最 有可能的是盒子上面的那个星星了(jin)。跟 The Invoice Machine 一P它们都是通过用一张大囄和很的颜色来制造一个视觉焦炏V?/p>
颜色反差
恰到好处C用少量颜Ԍ是网中另一U制造视觉反差的有效Ҏ(gu)。可以在|页的头部和文本拯中用不同的颜色Q也可以在一张图片或插图的颜色里面应用?/p>
Fatburgr
q个|站是极?gu)的一个所有设计原则的应用实例。关?颜色反差我们来看看它大大的黄色头部和小的E灰文字。排列、图片反差、重复和分类q几个原则做得都很彻底?/p>
I Love Typography
一个用来展C排版的|站如果在它自己的页首就为我们展 CZ(jin)一个极好的排版效果Q那让h觉得多惊?
字体反差
如果你想通过字体来生反差效果,应该避免?个很相像的字体外观和大小。很相像的字体会(x) 造成hQƈ让设计变得模p。不q把字体大小弄得很不一样就?x)非常有效果Q或者是把字体最l和最_的版本拼合C起也同样有效。同L(fng)Q如果你两U外?差别明显的两U字体排在一块,׃(x)对它们带来的视觉冲击效果感到惊奇。把一?san serif 字体和一个手写字体放在一起就是一个例子?/p>
Fixie Consulting
q个|站上用的排版和颜Ԍ都非常的?gu)Q尤其是?们标语的大小和笔画,面上洒水效果和量蓝色的用,都非怸错?/p>
2.重复原则
跟web设计相比Q重复原则在书本设计中应用得更加普遍Q不q它在两者之间都是一h效的。重复的设计元素可以佉K面显得很q诏Q还能提升品牌。在 web设计中,可以很好地达到这个目的的一个方式是在网늚头部和脚部重复放元素。看看下面这些例子吧?/p>
Ten24 Media
Ten24 Media 在头部和脚部都用了(jin)很有创意的插甅R?/p>
Silverback
q个|站l对是超赞的!l对可以在前?ldquo;反差原则”部分可以把它作Z个好?子亮出来的,可它?ldquo;重复原则”部分也是一个好例子Q因为它的界面风格和品牌部分都很明显地应用了(jin)q个原则。仔l看它用香蕉来当做列表前面的图标Q还有头 部、脚部的林插画?/p>
3.排列原则
你的|站外观设计得很业余q是很专业,?列原则在其中扮演?jin)一个很复杂的角艌Ӏ最q我很主张在设计|页时用格栏。这么做可以让你的设计很q净Q也可以提供一个很好的设计框架?/p>
Black Estate Vineyard
q个|站?60 Grid website上有展示。它的版面排列很q诏也很引h注目。我很欣赏它?yu)主要内?gu)齐地排在左边的做法,管有些大别的头部破坏?jin)这个规则ƈ排到了(jin)左?Ҏ(gu)里面。对留空的大量用和字体反差大小的用都非常不错?/p>
A List Apart
A List Apart 中用的可视格栏非常有特艌Ӏ里面的栏目设计良好Q把所有包含内定w变得易于阅读。研I表明过宽的栏目?x)造成严重的阅
d难。在跟随那么宽的栏目中的文字 Ӟ你的眼睛?x)变得很累?/p>
4.分类原则
最后一个原则是分类。只有在相兛_ 素分l,无兛_素分开的时候才?x)用到这个原则。假如你所有东襉K分到同一块文本块中,l对?x)摧毁用L(fng)体验。这是Z么用头部标{֒适当的留I是 那么的重要?/p>
Envato
q个|站漂亮地将内容规整地组l到三个主要分类下,q些内容的定义既清晰又规 整?/p>
Paradigm Reborn
q个|站l构良好。头部既整洁又简单明?jin)。空白留的很好,内容分开攑־很有?辑?/p>
最l思想
当你脑中时刻?ch)记着q?个基本原则时Q你?x)发C的设计有?jin)?可思议的改q。当然肯定还有许许多多别的东西也需要考虑Q但是以反差、重复、排列和分类作ؓ(f)基础你的设计?x)取得长步。(|站设计Q?/p>