《Robin Williams Design Workshop》是絕對是我最喜歡的一本設(shè)計書之一。它的設(shè)計理論更具有實踐價值，展示的例子也都很棒。最重要的被崇尚為我的設(shè)計理念的總管包含有四條，他們是：反差、重復(fù)、排列和分類。本文將討論這4個優(yōu)秀的網(wǎng)站設(shè)計原則。只要在腦海中牢牢記住了這4項原則，你就一定可以設(shè)計出更加整潔漂亮的網(wǎng)頁。
1.反差效果
好的反差效果設(shè)計可以給用戶一個極好的第一印象。如果用戶的眼睛沒有焦點，注意力就會在處處是相同尺寸的元素和排版界面中迷失。設(shè)計師需要設(shè)計出很明顯 的突出視覺元素來引導(dǎo)用戶的體驗。你可以通過選擇圖片、顏色和字體等來形成良好的反差效果。
圖片反差
當(dāng)需要在很多小元素后面展示一個大尺寸的插圖時，這 種方法很有效。比如：
The Invoice Machine
這個網(wǎng)頁利用一張大圖片來吸引用戶的注意。而同時網(wǎng)頁 很自然的單色又讓很少的藍(lán)色應(yīng)用有了更好的效果。
Instabox
當(dāng)你眼睛看到這個頁面的時候，首先你會注意到什么?最 有可能的就是盒子上面的那個星星了。跟 The Invoice Machine 一樣，它們都是通過用一張大圖片和很少的顏色來制造一個視覺焦點。
顏色反差
恰到好處地使用少量顏色，是網(wǎng)頁中另一種制造視覺反差的有效方法。可以在網(wǎng)頁的頭部和文本拷貝中使用不同的顏色，也可以在一張圖片或插圖的顏色里面應(yīng)用。
Fatburgr
這個網(wǎng)站是極出色的一個所有設(shè)計原則的應(yīng)用實例。關(guān)于 顏色反差我們來看看它大大的黃色頭部和小小的淡灰文字。排列、圖片反差、重復(fù)和分類這幾個原則做得都很徹底。
I Love Typography
一個用來展示排版的網(wǎng)站如果在它自己的頁首就為我們展 示了一個極好的排版效果，那讓人覺得多驚奇!
字體反差
如果你想通過字體來產(chǎn)生反差效果，就應(yīng)該避免使用2個很相像的字體外觀和大小。很相像的字體會 造成混淆，并讓設(shè)計變得模糊。不過把字體大小弄得很不一樣就會非常有效果，或者是把字體最細(xì)和最粗的版本拼合到一起也同樣有效。同樣的，如果你將兩種外形 差別明顯的兩種字體排在一塊，就會對它們帶來的視覺沖擊效果感到驚奇。把一個 san serif 字體和一個手寫字體放在一起就是一個例子。
Fixie Consulting
這個網(wǎng)站上使用的排版和顏色，都非常的出色，尤其是他 們標(biāo)語的大小和筆畫，頁面上灑水效果和少量藍(lán)色的使用，都非常不錯。
2.重復(fù)原則
跟web設(shè)計相比，重復(fù)原則在書本設(shè)計中應(yīng)用得更加普遍，不過它在兩者之間都是一樣有效的。重復(fù)的設(shè)計元素可以使頁面顯得很連貫，還能提升品牌。在 web設(shè)計中，可以很好地達(dá)到這個目的的一個方式是在網(wǎng)頁的頭部和腳部重復(fù)放元素。看看下面這些例子吧。
Ten24 Media
Ten24 Media 在頭部和腳部都使用了很有創(chuàng)意的插畫。
Silverback
這個網(wǎng)站絕對是超贊的!絕對可以在前面“反差原則”部分就可以把它作為一個好例 子亮出來的，可它在“重復(fù)原則”部分也是一個好例子，因為它的界面風(fēng)格和品牌部分都很明顯地應(yīng)用了這個原則。仔細(xì)看它用香蕉來當(dāng)做列表前面的圖標(biāo)，還有頭 部、腳部的森林插畫。
3.排列原則
你的網(wǎng)站外觀設(shè)計得很業(yè)余還是很專業(yè)，排 列原則在其中扮演了一個很復(fù)雜的角色。最近我很主張在設(shè)計網(wǎng)頁時使用格欄。這么做可以讓你的設(shè)計很干凈，也可以提供一個很好的設(shè)計框架。
Black Estate Vineyard
這個網(wǎng)站在960 Grid website上有展示。它的版面排列很連貫也很引人注目。我很欣賞它將主要內(nèi)容整齊地排在左邊的做法，盡管有些大級別的頭部破壞了這個規(guī)則并排到了左側(cè) 邊欄里面。對留空的大量使用和字體反差大小的使用都非常不錯。
A List Apart
A List Apart 中使用的可視格欄非常有特色。里面的欄目設(shè)計良好，把所有包含內(nèi)容都變得易于閱讀。研究表明過寬的欄目會造成嚴(yán)重的閱
