《Robin Williams Design Workshop》是¾l对是我最喜欢的一本设计书之一。它的设计ç†è®ºæ›´å…ähœ‰å®žè·µä»·å€û|¼Œå±•ç¤ºçš„例å也都很‹‚’。最é‡è¦çš„被崇尚为我的设计ç†å¿ëŠš„æ€È®¡åŒ…å«æœ‰å››æ¡ï¼Œä»–们是：åå·®ã€é‡å¤ã€æŽ’列和分类。本文将讨论˜q?个优¿U€çš„网站设计原则。åªè¦åœ¨è„‘æ“vä¸ç‰¢ç‰¢è®°ä½äº†˜q?™å¹åŽŸåˆ™ï¼Œä½ 就一定å¯ä»¥è®¾è®¡å‡ºæ›´åŠ æ•´æ´æ¼‚亮的网™åüc€?/p>
1.å差效果
好的å差效果设计å¯ä»¥¾l™ç”¨æˆ·ä¸€ä¸ªæžå¥½çš„½W¬ä¸€å°è±¡ã€‚如果用æˆïLš„眼ç›æ²¡æœ‰ç„¦ç‚¹åQŒæ³¨æ„力ž®×ƒ¼šåœ¨å¤„处是相匞®ºå¯¸çš„å…ƒç´ å’ŒæŽ’ç‰ˆç•Œé¢ä¸è¿·å¤±ã€‚设计师需è¦è®¾è®¡å‡ºå¾ˆæ˜Žæ˜?çš„çªå‡ø™§†è§‰å…ƒç´ æ¥å¼•å¯¼ç”¨æˆ·çš„ä½“éªŒã€‚ä½ å¯ä»¥é€šè¿‡é€‰æ‹©å›„¡‰‡ã€é¢œè‰²å’Œå—体½{‰æ¥å½¢æˆè‰¯å¥½çš„å差效果ã€?/p>
囄¡‰‡åå·®
当需è¦åœ¨å¾ˆå¤šž®å…ƒç´ åŽé¢å±•½CÞZ¸€ä¸ªå¤§ž®ºå¯¸çš„æ’图时åQŒè¿™ ¿U方法很有效。比如：
The Invoice Machine
˜q™ä¸ª¾|‘é¡µåˆ©ç”¨ä¸€å¼ å¤§å›„¡‰‡æ¥å¸å¼•ç”¨æˆïLš„注æ„。而åŒæ—¶ç½‘™å?很自然的å•è‰²åˆè®©å¾ˆå°‘çš„è“色应用有了更好的效果ã€?/p>
Instabox
å½“ä½ çœ¼ç›çœ‹åˆ°˜q™ä¸ª™åµé¢çš„æ—¶å€™ï¼Œé¦–å…ˆä½ ä¼šæ³¨æ„åˆîC»€ä¹?最 有å¯èƒ½çš„ž®±æ˜¯ç›’å上é¢çš„那个星星了。跟 The Invoice Machine 一æ øP¼Œå®ƒä»¬éƒ½æ˜¯é€šè¿‡ç”¨ä¸€å¼ 大囄¡‰‡å’Œå¾ˆž®‘的颜色æ¥åˆ¶é€ 一个视觉焦ç‚V€?/p>
颜色åå·®
æ°åˆ°å¥½å¤„åœîC‹É用少é‡é¢œè‰ÔŒ¼Œæ˜¯ç½‘™åµä¸å¦ä¸€¿Uåˆ¶é€ è§†è§‰å差的有效æ–ÒŽ(gu¨©)³•ã€‚å¯ä»¥åœ¨¾|‘页的头部和文本拯‚´ä¸ä‹É用ä¸åŒçš„颜色åQŒä¹Ÿå¯ä»¥åœ¨ä¸€å¼ 图片或æ’图的颜色里é¢åº”用ã€?/p>
Fatburgr
˜q™ä¸ª¾|‘站是æžå‡ø™‰²çš„一个所有设计原则的应用实例。关äº?颜色å差我们æ¥çœ‹çœ‹å®ƒå¤§å¤§çš„黄色头部和ž®å°çš„æÙEç°æ–‡å—。排列ã€å›¾ç‰‡åå·®ã€é‡å¤å’Œåˆ†ç±»˜q™å‡ 个原则åšå¾—都很彻底ã€?/p>
I Love Typography
一个用æ¥å±•½CºæŽ’版的¾|‘站如果在它自己的页首就为我们展 ½CÞZº†ä¸€ä¸ªæžå¥½çš„排版效果åQŒé‚£è®©äh觉得多惊å¥?
å—体åå·®
å¦‚æžœä½ æƒ³é€šè¿‡å—体æ¥äñ”生å差效果，ž®±åº”该é¿å…ä‹Éç”?个很相åƒçš„å—体外观和大å°ã€‚很相åƒçš„å—体会 é€ æˆæ·äh·†åQŒåƈ让设计å˜å¾—模¾pŠã€‚丘q‡æŠŠå—体大å°å¼„得很ä¸ä¸€æ ·å°±ä¼šéžå¸¸æœ‰æ•ˆæžœåQŒæˆ–者是把å—体最¾l†å’Œæœ€¾_—的版本拼åˆåˆîC¸€èµ·ä¹ŸåŒæ ·æœ‰æ•ˆã€‚åŒæ ïLš„åQŒå¦‚æžœä½ ž®†ä¸¤¿U外å½?差别明显的两¿Uå—体排在一å—，ž®×ƒ¼šå¯¹å®ƒä»¬å¸¦æ¥çš„视觉冲击效果感到惊奇。把一ä¸?san serif å—体和一个手写å—体放在一起就是一个例åã€?/p>
Fixie Consulting
˜q™ä¸ª¾|‘站上ä‹É用的排版和颜è‰ÔŒ¼Œéƒ½éžå¸¸çš„å‡ø™‰²åQŒå°¤å…¶æ˜¯ä»?ä»¬æ ‡è¯çš„大å°å’Œç¬”画，™åµé¢ä¸Šæ´’水效果和ž®‘é‡è“色的ä‹É用，都éžå¸æ€¸é”™ã€?/p>
2.é‡å¤åŽŸåˆ™
è·Ÿweb设计相比åQŒé‡å¤åŽŸåˆ™åœ¨ä¹¦æœ¬è®¾è®¡ä¸åº”ç”¨å¾—æ›´åŠ æ™®éåQŒä¸˜q‡å®ƒåœ¨ä¸¤è€…之间都是一æ ähœ‰æ•ˆçš„。é‡å¤çš„è®¾è®¡å…ƒç´ å¯ä»¥ä½‰K¡µé¢æ˜¾å¾—很˜qžè¯åQŒè¿˜èƒ½æå‡å“牌。在 web设计ä¸ï¼Œå¯ä»¥å¾ˆå¥½åœ°è¾¾åˆ°è¿™ä¸ªç›®çš„的一个方å¼æ˜¯åœ¨ç½‘™å늚„头部和脚部é‡å¤æ”¾å…ƒç´ 。看看下é¢è¿™äº›ä¾‹åå§ã€?/p>
Ten24 Media
Ten24 Media 在头部和脚部都ä‹É用了很有创æ„çš„æ’ç”…R€?/p>
Silverback
˜q™ä¸ª¾|‘ç«™¾l对是超赞的!¾l对å¯ä»¥åœ¨å‰é?ldquo;å差原则”部分ž®±å¯ä»¥æŠŠå®ƒä½œä¸ÞZ¸€ä¸ªå¥½ä¾?å亮出æ¥çš„，å¯å®ƒåœ?ldquo;é‡å¤åŽŸåˆ™”部分也是一个好例ååQŒå› 为它的界é¢é£Žæ ¼å’Œå“牌部分都很明显地应用了˜q™ä¸ªåŽŸåˆ™ã€‚ä»”¾l†çœ‹å®ƒç”¨é¦™è•‰æ¥å½“åšåˆ—表å‰é¢çš„å›¾æ ‡åQŒè¿˜æœ‰å¤´ 部ã€è„šéƒ¨çš„‹‚®æž—æ’ç”»ã€?/p>
3.排列原则
ä½ çš„¾|‘站外观设计得很业余˜q˜æ˜¯å¾ˆä¸“业，æŽ?列原则在其ä¸æ‰®æ¼”了一个很å¤æ‚的角艌Ӏ‚最˜q‘æˆ‘å¾ˆä¸»å¼ åœ¨è®¾è®¡¾|‘页时ä‹Éç”¨æ ¼æ 。这么åšå¯ä»¥è®©ä½ 的设计很òq²å‡€åQŒä¹Ÿå¯ä»¥æ供一个很好的设计框架ã€?/p>
Black Estate Vineyard
˜q™ä¸ª¾|‘ç«™åœ?60 Grid website上有展示。它的版é¢æŽ’列很˜qžè¯ä¹Ÿå¾ˆå¼•äh注目。我很欣èµå®ƒ?y¨u)®†ä¸»è¦å†…å®Ò?gu¨©)•´é½åœ°æŽ’在左边的åšæ³•ï¼Œž®½ç®¡æœ‰äº›å¤§çñ”åˆ«çš„å¤´éƒ¨ç ´å了这个规则åƈ排到了左ä¾?è¾ÒŽ(gu¨©) 里é¢ã€‚对留空的大é‡ä‹É用和å—体å差大å°çš„ä‹É用都éžå¸¸ä¸é”™ã€?/p>
A List Apart
A List Apart ä¸ä‹É用的å¯è§†æ ¼æ éžå¸¸æœ‰ç‰¹è‰ŒÓ€‚里é¢çš„æ 目设计良好åQŒæŠŠæ‰€æœ‰åŒ…å«å†…定wƒ½å˜å¾—æ˜“äºŽé˜…è¯»ã€‚ç ”½I¶è¡¨æ˜Žè¿‡å®½çš„æ ç›®ä¼šé€ æˆä¸¥é‡çš„阅
è¯Õd›°éš¾ã€‚在跟éšé‚£ä¹ˆå®½çš„æ ç›®ä¸çš„æ–‡å— æ—Óž¼Œä½ 的眼ç›ä¼šå˜å¾—很累ã€?/p>
4.分类原则
最åŽä¸€ä¸ªåŽŸåˆ™æ˜¯åˆ†ç±»ã€‚åªæœ‰åœ¨ž®†ç›¸å…›_…ƒ ç´ åˆ†¾l„，ž®†æ— å…›_…ƒç´ 分开的时候æ‰ä¼šç”¨åˆ°è¿™ä¸ªåŽŸåˆ™ã€‚å‡å¦‚ä½ ž®†æ‰€æœ‰ä¸œè¥‰Kƒ½åˆ†åˆ°åŒä¸€å—文本å—ä¸ï¼Œ¾l对会摧æ¯ç”¨æˆïLš„体验。这ž®±æ˜¯ä¸ÞZ»€ä¹ˆä‹Éç”¨å¤´éƒ¨æ ‡½{‘Ö’Œé€‚当的留½Iºæ˜¯ 那么的é‡è¦ã€?/p>
Envato
˜q™ä¸ª¾|‘站漂亮地将内容规整地组¾l‡åˆ°ä¸‰ä¸ªä¸»è¦åˆ†ç±»ä¸‹ï¼Œ˜q™äº›å†…容的定义既清晰åˆè§„ æ•´ã€?/p>
Paradigm Reborn
˜q™ä¸ª¾|‘ç«™¾l“构良好。头部既整æ´åˆç®€å•æ˜Žäº†ã€‚空白留的很好，内容分开攑־—很有é€?辑ã€?/p>
最¾lˆæ€æƒ³
å½“ä½ è„‘ä¸æ—¶åˆ»æƒ¦è®°ç€˜q?个基本原则时åQŒä½ 会å‘çŽîC½ çš„è®¾è®¡æœ‰äº†ä¸ å¯æ€è®®çš„改˜q›ã€‚当然肯定还有许许多多别的东西也需è¦è€ƒè™‘åQŒä½†æ˜¯ä»¥åå·®ã€é‡å¤ã€æŽ’列和分类作äØ“åŸºç¡€ä½ çš„è®¾è®¡ä¼šå–å¾—é•¿‘Œ™¿›æ¥ã€‚（¾|‘站设计åQ?/p>