我最喜歡的設計書(shū)籍之一就是《Robin Williams Design Workshop》.它深入實(shí)際的設計理論，并且包含許多極棒的設計實(shí)例。其中一個(gè)值得關(guān)注的地方就是4項主要的設計原則，它們已經(jīng)在設計中為我所用。這4項原則就是：反差, 重復, 排列, 和分類(lèi)。
本文將討論這4項與web設計相關(guān)的原則。只要在腦海中牢牢記住了這4項原則，你就一定可以設計出更加整潔漂亮的網(wǎng)頁(yè)。
1.反差效果
好的反差效果設計可以給用戶(hù)一個(gè)極好的第一印象。如果用戶(hù)的眼睛沒(méi)有焦點(diǎn)，注意力就會(huì )在處處是相同尺寸的元素和排版界面中迷失。設計師需要設計出很明顯的突出視覺(jué)元素來(lái)引導用戶(hù)的體驗。你可以通過(guò)選擇圖片、顏色和字體等來(lái)形成良好的反差效果。
圖片反差
當需要在很多小元素后面展示一個(gè)大尺寸的插圖時(shí)，這種方法很有效。嗯，我的意思就是，比如：
The Invoice Machine
這個(gè)網(wǎng)頁(yè)利用一張大圖片來(lái)吸引用戶(hù)的注意。而同時(shí)網(wǎng)頁(yè)很自然的單色又讓很少的藍色應用有了更好的效果。
Instabox
當你眼睛看到這個(gè)頁(yè)面的時(shí)候，首先你會(huì )注意到什么?最有可能的就是盒子上面的那個(gè)星星了。跟 The Invoice Machine 一樣，它們都是通過(guò)用一張大圖片和很少的顏色來(lái)制造一個(gè)視覺(jué)焦點(diǎn)。
顏色反差
恰到好處地使用少量顏色，是網(wǎng)頁(yè)中另一種制造視覺(jué)反差的有效方法?？梢栽诰W(wǎng)頁(yè)的頭部和文本拷貝中使用不同的顏色，也可以在一張圖片或插圖的顏色里面應用。
Fatburgr
這個(gè)網(wǎng)站是極出色的一個(gè)所有設計原則的應用實(shí)例。關(guān)于顏色反差我們來(lái)看看它大大的黃色頭部和小小的淡灰文字。排列、圖片反差、重復和分類(lèi)這幾個(gè)原則做得都很徹底。
I Love Typography
一個(gè)用來(lái)展示排版的網(wǎng)站如果在它自己的頁(yè)首就為我們展示了一個(gè)極好的排版效果，那讓人覺(jué)得多驚奇啊!我喜歡他們所用的字體，也喜歡他們良好的青色和深灰色搭配。
字體反差
如果你想通過(guò)字體來(lái)產(chǎn)生反差效果，就應該避免使用2個(gè)很相像的字體外觀(guān)和大小。很相像的字體會(huì )造成混淆，并讓設計變得模糊。不過(guò)把字體大小弄得很不一樣就會(huì )非常有效果，或者是把字體最細和最粗的版本拼合到一起也同樣有效。同樣的，如果你將兩種外形差別明顯的兩種字體排在一塊，就會(huì )對它們帶來(lái)的視覺(jué)沖擊效果感到驚奇。把一個(gè) san serif 字體和一個(gè)手寫(xiě)字體放在一起就是一個(gè)例子。
Fixie Consulting
哇噻，我真的非常喜歡這個(gè)網(wǎng)站上使用的排版和顏色。注意看他們標語(yǔ)的大小和筆畫(huà)。頁(yè)面上灑水效果和少量藍色的使用，都讓我非常欣賞。
2.重復原則
跟web設計相比，重復原則在書(shū)本設計中應用得更加普遍，不過(guò)它在兩者之間都是一樣有效的。重復的設計元素可以使頁(yè)面顯得很連貫，還能提升品牌。在web設計中，可以很好地達到這個(gè)目的的一個(gè)方式是在網(wǎng)頁(yè)的頭部和腳部重復放元素?？纯聪旅孢@些例子吧。
Ten24 Media
Ten24 Media 在頭部和腳部都使用了很有創(chuàng )意的插畫(huà)。
Silverback
這個(gè)網(wǎng)站絕對是超贊的!我絕對可以在前面“反差原則”部分就可以把它作為一個(gè)好例子亮出來(lái)的，可它在“重復原則”部分也是一個(gè)好例子，因為它的界面風(fēng)格和品牌部分都很明顯地應用了這個(gè)原則。仔細看它用香蕉來(lái)當做列表前面的圖標，還有頭部、腳部的森林插畫(huà)。
3.排列原則
你的網(wǎng)站外觀(guān)設計得很業(yè)余還是很專(zhuān)業(yè)，排列原則在其中扮演了一個(gè)很復雜的角色。最近我很主張在設計網(wǎng)頁(yè)時(shí)使用格欄。這么做可以讓你的設計很干凈，也可以提供一個(gè)很好的設計框架。如果你有興趣想學(xué)習更多關(guān)于格欄設計的知識，去看看我最近的文章吧(在這王婆賣(mài)瓜，自賣(mài)自夸一下)，Design A Fresh Blog Theme On The 960 Grid.
Black Estate Vineyard
這個(gè)網(wǎng)站在960 Grid website上有展示。它的版面排列很連貫也很引人注目。我很欣賞它將主要內容整齊地排在左邊的做法，盡管有些大級別的頭部破壞了這個(gè)規則并排到了左側邊欄里面。對留空的大量使用和字體反差大小的使用都非常不錯。
A List Apart
A List Apart中使用的可視格欄非常有特色。里面的欄目設計良好，把所有包含內容都變得易于閱讀。研究表明過(guò)寬的欄目會(huì )造成嚴重的閱讀困難。在跟隨那么寬的欄目中的文字時(shí)，你的眼睛會(huì )變得很累。
4.分類(lèi)原則
最后一個(gè)原則是分類(lèi)。只有在將相關(guān)元素分組，將無(wú)關(guān)元素分開(kāi)的時(shí)候才會(huì )用到這個(gè)原則。假如你將所有東西都分到同一塊文本塊中，絕對會(huì )摧毀用戶(hù)的體驗。這就是為什么使用頭部標簽和適當的留空是那么的重要。
Envato
這個(gè)網(wǎng)站漂亮地將內容規整地組織到三個(gè)主要分類(lèi)下，這些內容的定義既清晰又規整。
Paradigm Reborn
這個(gè)網(wǎng)站結構良好。頭部既整潔又簡(jiǎn)單明了?？瞻琢舻暮芎?，內容分開(kāi)放得很有邏輯。
最終思想
當你腦中時(shí)刻惦記著(zhù)這4個(gè)基本原則時(shí)，你會(huì )發(fā)現你的設計有了不可思議的改進(jìn)。當然肯定還有許許多多別的東西也需要考慮，但是以反差、重復、排列和分類(lèi)作為基礎你的設計會(huì )取得長(cháng)足進(jìn)步。
