2006年3月，本書繁體中文版以《出色網(wǎng)頁大賞》為題名在臺灣上市！

一個(gè)不懂得欣賞優(yōu)秀網(wǎng)頁作品的設(shè)計(jì)師可能永遠(yuǎn)都無法懂得借鑒的真諦；一個(gè)無法將優(yōu)秀作品的精髓融入到現(xiàn)有需求中的設(shè)計(jì)師可能永遠(yuǎn)都無法找到真正的靈感。

即便是那些看似獨(dú)創(chuàng)的設(shè)計(jì)，其靈感也往往來自設(shè)計(jì)師在長期借鑒過程中的不斷積累。

設(shè)計(jì)源于靈感，靈感源于借鑒——這是每個(gè)網(wǎng)頁設(shè)計(jì)師都應(yīng)該牢記的“成功法則”。

下面這些網(wǎng)頁設(shè)計(jì)指南摘自《優(yōu)秀網(wǎng)頁設(shè)計(jì)速查與賞析》一書。

用“原型法”細(xì)化網(wǎng)站設(shè)計(jì)需求

每個(gè)網(wǎng)頁設(shè)計(jì)師都有過被含混、多變的客戶需求折磨得痛苦不堪的經(jīng)歷。在需求分析階段，使用“原型法”可能是細(xì)化并確認(rèn)需求的最好方式。

當(dāng)客戶根本不清楚自己的需求是什么的時(shí)候，網(wǎng)頁設(shè)計(jì)師不妨根據(jù)同類網(wǎng)站的構(gòu)思和實(shí)現(xiàn)方式，用最便捷的工具（比如Dreamweaver）在最短的時(shí)間內(nèi)搭出一個(gè)可以瀏覽、跳轉(zhuǎn)但不一定支持所有功能的網(wǎng)站原型，然后與客戶一起體驗(yàn)并評估這個(gè)網(wǎng)站原型的架構(gòu)、流程、布局、配色、文字等不同層面——這樣的評估結(jié)束后，客戶心中隱藏許久的那份“設(shè)計(jì)需求”也許就已經(jīng)浮出水面了。

網(wǎng)頁鏈接的深度、廣度和泛耦合程度

超級鏈接是網(wǎng)頁設(shè)計(jì)中最重要的信息組織方式，也是整個(gè)Web世界的精髓所在。但糟糕的鏈接設(shè)計(jì)——比如過于泛濫和隨意的超級鏈接——很可能會讓沖浪者迷失在充斥著信息碎片的海洋里。

如果將網(wǎng)站首頁視為鏈接層次中的第一級，那么，由首頁中的超級鏈接得到的，在信息內(nèi)容上具有從屬關(guān)系的站內(nèi)頁面就是網(wǎng)頁鏈接層次中的第二級；從每個(gè)第二級頁面又可以繼續(xù)得出第三級網(wǎng)頁；依此類推，我們多半可以得到一個(gè)完整的樹形鏈接結(jié)構(gòu)。在這個(gè)樹形鏈接結(jié)構(gòu)中，整棵樹的層數(shù)可以被稱為（站內(nèi)）網(wǎng)頁鏈接的深度，頁面最多的一層中包含的頁面總數(shù)可以被稱為（站內(nèi)）網(wǎng)頁鏈接的廣度。一般說來，一個(gè)網(wǎng)站的鏈接深度和廣度最好有一個(gè)合適的均衡關(guān)系，深度過大的網(wǎng)站不利于沖浪者快速獲取相關(guān)信息，廣度過大的網(wǎng)站則容易讓沖浪者在無數(shù)并列的超級鏈接面前不知所措。

當(dāng)網(wǎng)頁中的某個(gè)鏈接既沒有指向下一級網(wǎng)頁，也沒有指向上一級網(wǎng)頁時(shí)，它必然構(gòu)成了由當(dāng)前頁面向跨層級網(wǎng)頁或站外URL的“跳轉(zhuǎn)”，這種跳轉(zhuǎn)的出現(xiàn)頻率可以被稱為網(wǎng)頁鏈接的泛耦合程度。泛耦合程度過低的網(wǎng)站無法有效發(fā)揮Web沖浪的價(jià)值，由此得到的網(wǎng)站過于死板；另一方面，泛耦合程度較高的網(wǎng)站又有可能造成信息內(nèi)容的支離破碎，影響沖浪者的正常閱讀。因此，網(wǎng)頁鏈接的泛耦合程度應(yīng)該與網(wǎng)站的設(shè)計(jì)需求相適應(yīng)——兒童或動漫類的網(wǎng)站應(yīng)鼓勵那些代表跳躍式思維的泛耦合鏈接，而一個(gè)學(xué)術(shù)類的網(wǎng)站則應(yīng)該對泛耦合鏈接持相對謹(jǐn)慎的態(tài)度。

導(dǎo)航欄的統(tǒng)一和變化

幾乎每個(gè)網(wǎng)頁都有導(dǎo)航欄。對同一個(gè)網(wǎng)站內(nèi)的所有網(wǎng)頁來說，導(dǎo)航欄必須在設(shè)計(jì)風(fēng)格上力求統(tǒng)一。否則，沖浪者就需要分別適應(yīng)每個(gè)頁面的導(dǎo)航界面風(fēng)格，這不但會浪費(fèi)不少時(shí)間，也會嚴(yán)重影響整個(gè)網(wǎng)站的使用美感。

但這里所說的統(tǒng)一并不是要求我們?yōu)槊總€(gè)網(wǎng)頁設(shè)計(jì)出一模一樣的導(dǎo)航欄。完全相同的導(dǎo)航欄會讓沖浪者在瀏覽過程中由疲憊而麻木、由麻木而喪失對網(wǎng)站的瀏覽興趣。也就是說，我們應(yīng)該在統(tǒng)一的整體風(fēng)格下，在每一個(gè)或每一組網(wǎng)頁的導(dǎo)航欄中尋求細(xì)節(jié)上的變化。

比方說，我們可以在確保所有導(dǎo)航欄形狀、布局、字體一致性的基礎(chǔ)上，變換不同導(dǎo)航欄的背景顏色；或者，我們可以在統(tǒng)一了色彩、形狀、字體的情況下，變換不同導(dǎo)航欄的相對位置；再或者，我們還可以變換不同頁面中導(dǎo)航欄的背景圖片——當(dāng)然，所有背景圖片應(yīng)當(dāng)從屬于某種統(tǒng)一的風(fēng)格——同時(shí)保持其他設(shè)計(jì)元素不變。

“在統(tǒng)一的基礎(chǔ)上尋求變化”——除了導(dǎo)航欄以外，網(wǎng)頁設(shè)計(jì)師在處理同一頁面或同一網(wǎng)站內(nèi)的其他設(shè)計(jì)問題時(shí)，這句話也同樣有效。

網(wǎng)頁基本布局

要尋找網(wǎng)頁布局方面的靈感并不難。我建議大家沒事兒時(shí)多做些折紙練習(xí)：隨手拿起一張A4復(fù)印紙，然后根據(jù)自己的心情好壞，或平行、或斜向、或選擇任意角度將紙片折疊幾次，再把紙平攤在面前，紙上呈現(xiàn)出來的折痕沒準(zhǔn)兒就是一種相當(dāng)不錯(cuò)的網(wǎng)頁布局呢！

當(dāng)然，網(wǎng)頁設(shè)計(jì)師還是要盡量熟悉那些典型網(wǎng)頁的基本布局方式，以根據(jù)客戶的需要選擇使用。比如，門戶類網(wǎng)頁為了盡可能多地展現(xiàn)信息內(nèi)容，通常都會設(shè)計(jì)成三欄甚至四欄的縱向布局；公司首頁為了展現(xiàn)強(qiáng)大的企業(yè)實(shí)力，往往會選擇“視野”更寬闊的橫向布局；個(gè)人主頁為了展示網(wǎng)站主人的個(gè)性，其網(wǎng)頁布局方式也會千差萬別，像軸向布局、網(wǎng)格布局、斜角布局、放射布局、多中心布局、離散布局、對比布局等等都是常見的個(gè)人主頁布局方式。

網(wǎng)頁空間中的視覺導(dǎo)向

每個(gè)網(wǎng)頁都是一個(gè)神奇的視覺空間。像我們熟悉的四維時(shí)空一樣，網(wǎng)頁空間也有深度、廣度和時(shí)間流逝的感覺，甚至還會在設(shè)計(jì)元素引發(fā)的“力”的作用下產(chǎn)生運(yùn)動或扭曲。

每當(dāng)我們打開一個(gè)新的網(wǎng)頁后，我們的視線首先會聚焦在網(wǎng)頁中最引人注意的那一點(diǎn)上——我們通常稱其為視覺焦點(diǎn)。隨后，我們的思路會受到視覺焦點(diǎn)周邊設(shè)計(jì)元素的形狀和分布方式的影響，并在不知不覺中把視線轉(zhuǎn)移到另一個(gè)值得停留的地方（例如，一段醒目的線條，一種色彩到其近似色的漸變，它們都會讓我們的視線按照設(shè)計(jì)師預(yù)先安排的軌跡移動）。如此繼續(xù)下去，視線經(jīng)過的所有關(guān)注點(diǎn)可以連接成一條完整的視覺路徑。

使用視覺路徑引導(dǎo)沖浪者按某種內(nèi)在的邏輯順序?yàn)g覽網(wǎng)頁信息的過程可以被稱為網(wǎng)頁空間中的視覺導(dǎo)向。是否能自發(fā)、自覺地使用視覺導(dǎo)向的設(shè)計(jì)方法并根據(jù)視覺路徑的走向排列關(guān)鍵信息，這是區(qū)別專業(yè)網(wǎng)頁設(shè)計(jì)師和業(yè)余網(wǎng)頁設(shè)計(jì)師的一個(gè)重要依據(jù)。

網(wǎng)頁空間的秩序及運(yùn)動趨勢

網(wǎng)頁空間的秩序是網(wǎng)頁中所有視覺元素相互作用的結(jié)果。分析某個(gè)特定網(wǎng)頁空間的秩序時(shí)，最好把視覺元素抽象為“點(diǎn)”、“線”、“面”三大類，然后分別考察每一類元素之間以及不同類型元素之間的相互作用。

在設(shè)計(jì)師眼中，每一個(gè)視覺元素都可以被看成是“力”的源泉。不同視覺元素釋放出來的“力”的方向和大小不同。一個(gè)向右傾斜的三角形可以同時(shí)釋放出類似“重力”的垂直作用力和向右的水平作用力。視覺元素和視覺元素通過“力”相互作用，共同影響著整個(gè)網(wǎng)頁的空間秩序。

當(dāng)網(wǎng)頁空間中所有作用力處于平衡狀態(tài)時(shí)，空間秩序最為穩(wěn)定，整個(gè)網(wǎng)頁看起來比較和諧、均衡；反之，當(dāng)所有作用力可以在某個(gè)方向上形成合力時(shí)，空間秩序就會處于不穩(wěn)定的狀態(tài)，整個(gè)網(wǎng)頁看起來則會充滿動感和活力。

網(wǎng)頁中的留白

網(wǎng)頁中的留白就像情感小說中的心理描寫或是動作電影中的抒情段落一樣，可以讓網(wǎng)頁的視覺效果更加自由、流暢。很遺憾，許多網(wǎng)頁設(shè)計(jì)師都不懂得這個(gè)淺顯的道理，他們或是在客戶需求的壓力下，或是在不良設(shè)計(jì)習(xí)慣的驅(qū)使下，將整個(gè)頁面塞滿了圖片、文字、鏈接或是廣告，以至于所有視覺元素都不得不在擁擠的空間內(nèi)茍延殘喘、痛苦掙扎。

留白并不特指網(wǎng)頁中的白色區(qū)域。事實(shí)上，網(wǎng)頁中凡是沒有前景元素干擾的視覺區(qū)域都可以被稱為留白。橫向通欄的留白可以讓網(wǎng)頁擁有一種水平的流動感；縱向的留白可以平衡文字、導(dǎo)航欄等視覺元素在水平方向的作用力；標(biāo)題區(qū)域的大面積留白可以突出公司名稱或網(wǎng)頁標(biāo)題信息；正文區(qū)域內(nèi)的大面積留白既可以豐富頁面布局的內(nèi)涵，也可以緩解沖浪者在閱讀時(shí)可能產(chǎn)生的視覺疲勞。

文字信息的設(shè)計(jì)和編排

編排網(wǎng)頁上的文字信息時(shí)需要考慮字體、字號、字符間距和行間距、段落版式、段間距等許多要素。從美學(xué)觀點(diǎn)看，既保證網(wǎng)頁整體視覺效果的和諧、統(tǒng)一，又保證所有文字信息的醒目和易于識別，這是評價(jià)此類工作的最高標(biāo)準(zhǔn)。從技術(shù)方面來說，今天的網(wǎng)頁設(shè)計(jì)師大多使用CSS樣式來控制和編排文字信息，但在使用某種客戶端未必安裝的特殊字體時(shí)，設(shè)計(jì)師通常會將文字信息保存為圖片或Flash對象，以確保所有設(shè)計(jì)元素在客戶端瀏覽器中的正確展現(xiàn)。

“對比”是另一個(gè)設(shè)計(jì)和編排文字信息時(shí)必須考慮的問題。不同的字體、不同的字號、不同的文字顏色、不同的字符間距在視覺效果上都可以形成強(qiáng)烈的對比。精心設(shè)計(jì)的文字對比可以為網(wǎng)頁空間增添活力，而過于泛濫的對比因素也會讓整個(gè)網(wǎng)頁混亂不堪。

圖片和動畫

在網(wǎng)頁中使用圖片時(shí)，同樣需要考慮美學(xué)和技術(shù)兩方面的問題。首先，圖片的色彩、形狀、風(fēng)格等一定要與網(wǎng)頁的整體風(fēng)格相適應(yīng)，圖片所要傳達(dá)的理念或信息內(nèi)容應(yīng)當(dāng)盡可能清晰、準(zhǔn)確——這是美學(xué)方面的考量。其次，網(wǎng)頁設(shè)計(jì)師必須知道二值、灰度、256色及真彩色圖片之間的差異，懂得矢量圖片和點(diǎn)陣圖片各自的優(yōu)缺點(diǎn)，并盡量優(yōu)化圖片的比特大小以減少網(wǎng)頁的傳輸時(shí)間——這是技術(shù)方面的考量。只有在美學(xué)和技術(shù)兩方面都讓人滿意的圖片才有資格出現(xiàn)在網(wǎng)頁的整體設(shè)計(jì)中。

動畫元素通?？梢院茏匀坏爻蔀榫W(wǎng)頁上最吸引人的視覺焦點(diǎn)，因?yàn)檫\(yùn)動的東西總是比靜止的東西更容易抓住人們的眼球。也正是基于這樣的原因，我們需要用更為慎重的態(tài)度來決定在何時(shí)或何地使用動畫元素。我見過太多被動畫元素搞“砸”的網(wǎng)頁，那些網(wǎng)頁的設(shè)計(jì)師無一例外地犯了濫用動畫的錯(cuò)誤。其實(shí)，要判斷一個(gè)動畫元素是否有存在的必要，大家可以使用下面這個(gè)簡單的法則：如果某個(gè)動畫元素只具有裝飾網(wǎng)頁的作用，而無法讓信息的展示更清晰或更生動，那么，你應(yīng)該毫不猶豫地刪掉它。

網(wǎng)頁空間中的運(yùn)動趨勢線

許多網(wǎng)頁的視覺空間中都隱藏了一條富有活力的運(yùn)動趨勢線。當(dāng)你觀察某個(gè)頁面時(shí)，如果你的直覺不斷告訴你，頁面中的某些設(shè)計(jì)元素（比如某些連接在一起的色塊，某些相互影響的圖片，特別是某些具有強(qiáng)烈暗示作用的線條）構(gòu)成了一個(gè)隱約可見的、朝某個(gè)方向運(yùn)動的元素集合，那么，你不妨直接用畫筆勾出一條能夠反映該元素集合運(yùn)動趨勢的線條，就像畫家在做人體寫生時(shí)通常要先畫出一條反映人體運(yùn)動趨勢的線條一樣——我們可以把這條線叫做網(wǎng)頁空間中的運(yùn)動趨勢線。

從運(yùn)動趨勢線的方向和形狀出發(fā)，我們可以很容易地找出每一個(gè)視覺元素與整體視覺空間的交互關(guān)系。一旦我們發(fā)現(xiàn)，某個(gè)視覺元素并沒有為運(yùn)動趨勢線做出任何貢獻(xiàn)，反而有可能阻礙運(yùn)動趨勢線的流暢延伸，那么，這個(gè)視覺元素多半就沒有任何存在的必要。

此外，在開始一個(gè)新的網(wǎng)頁設(shè)計(jì)前，如果設(shè)計(jì)師能根據(jù)靈感的暗示，在紙上首先畫出一條運(yùn)動趨勢線，然后根據(jù)運(yùn)動趨勢線的延伸規(guī)律設(shè)計(jì)所有視覺元素的形狀、色彩和位置，如此得到的網(wǎng)頁設(shè)計(jì)就更有可能表現(xiàn)出非同一般的視覺效果來。

使用Web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁

很多網(wǎng)頁設(shè)計(jì)師只考慮網(wǎng)頁的視覺效果，卻從不關(guān)心網(wǎng)頁的具體實(shí)現(xiàn)技術(shù)。結(jié)果，現(xiàn)在的Web世界里有太多太多足夠漂亮但卻不符合技術(shù)標(biāo)準(zhǔn)的網(wǎng)頁，它們要么無法支持Firefox、Safari等非IE瀏覽器，要么不能在用戶改變?nèi)笔∽煮w大小時(shí)保持原貌。更可怕的是，這些不符合技術(shù)標(biāo)準(zhǔn)的網(wǎng)頁內(nèi)部多半是一堆充斥著<TABLE>、<FONT>標(biāo)簽的“意大利面條”，沒有哪個(gè)瀏覽器會喜歡這些下載和顯示效率都異常低下的代碼，也沒有哪個(gè)程序員會愿意維護(hù)這些毫無頭緒可言的數(shù)字垃圾。

目前被業(yè)界普遍認(rèn)可的客戶端網(wǎng)頁技術(shù)標(biāo)準(zhǔn)是XHTML＋CSS＋JavaScript。但即便是使用了這些標(biāo)準(zhǔn)的技術(shù)，我們也不能保證自己的設(shè)計(jì)一定會符合最好的設(shè)計(jì)習(xí)慣。有關(guān)利用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)，以及培養(yǎng)良好設(shè)計(jì)習(xí)慣的問題，建議大家參考電子工業(yè)出版社2004年5月出版的《網(wǎng)站重構(gòu)——應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)》一書。

另一方面，Web標(biāo)準(zhǔn)總是處于發(fā)展和更新之中。每個(gè)網(wǎng)頁設(shè)計(jì)師都應(yīng)該定期關(guān)注W3C網(wǎng)站上的相關(guān)內(nèi)容（盡管W3C的網(wǎng)站在視覺效果上糟糕得一塌糊涂）。

Flash和RIA技術(shù)

Flash的大名四海皆知，似乎沒有在這里刻意強(qiáng)調(diào)的必要。有關(guān)Flash我只想說兩點(diǎn)：其一，F(xiàn)lash動畫是手段而不是目的，如果單純?yōu)榱遂乓诰W(wǎng)頁中不加限制地使用Flash動畫，以至于沖浪者一進(jìn)網(wǎng)站就頭暈?zāi)垦＃强删偷貌粌斒Я?；其二，有許多網(wǎng)頁動畫效果既可以用CSS+JavaScript實(shí)現(xiàn)，也可以用Flash實(shí)現(xiàn)，二者各有利弊——網(wǎng)頁設(shè)計(jì)師在選擇時(shí)應(yīng)多考慮效率、標(biāo)準(zhǔn)、易用性等與沖浪者關(guān)系最為密切的問題。

除了純客戶端的Flash應(yīng)用之外，網(wǎng)頁設(shè)計(jì)師們也該對客戶端與服務(wù)端結(jié)合的RIA（Rich Internet Applications）技術(shù)給予足夠的關(guān)注。在Macromedia倡導(dǎo)的RIA架構(gòu)中，網(wǎng)頁設(shè)計(jì)師可以和程序員一起利用Macromedia Flex編寫運(yùn)行在Web服務(wù)器上、可以動態(tài)產(chǎn)生Flash應(yīng)用的服務(wù)端代碼。與以往那些輸出HTML或XHTML的服務(wù)端代碼相比，RIA可以讓交互式的Web頁面（比如購物類網(wǎng)頁）像Flash動畫一樣動感、靚麗。

Blog和Wiki的啟示

Blog和Wiki是這幾年才流行開來的Web應(yīng)用模式（千萬不要告訴我你不知道Blog和Wiki是什么）。盡管今天大多數(shù)Blog和Wiki站點(diǎn)在設(shè)計(jì)方面都沒有任何亮點(diǎn)可言，網(wǎng)頁設(shè)計(jì)師還是應(yīng)該花些時(shí)間研究一下Blog和Wiki的應(yīng)用理念。

我的意思是說，Blog和Wiki為網(wǎng)友們提供了兩種全新的展示自我價(jià)值、實(shí)現(xiàn)“人”、“網(wǎng)”互動的平臺。這兩種全新的信息發(fā)布與傳播模式其實(shí)也為新一代的網(wǎng)頁設(shè)計(jì)提出了嚴(yán)峻的挑戰(zhàn)。例如，設(shè)計(jì)師該如何組織一個(gè)可能有多人參與、可能隨時(shí)有信息變更的頁面，才能保證該頁面中每個(gè)視覺元素都完美、和諧？設(shè)計(jì)師該如何處理一個(gè)可以由用戶自行定義的頁面，才能保證該頁面的設(shè)計(jì)風(fēng)格總是與站點(diǎn)的整體風(fēng)格協(xié)調(diào)一致？更進(jìn)一步地說，在一個(gè)賦予用戶最大自由的網(wǎng)頁中，設(shè)計(jì)師的職責(zé)是增加了還是減少了？像Blog和Wiki這樣的站點(diǎn)，它們一定無法在視覺效果上達(dá)到完美嗎？

選擇最適合自己的軟件工具

每個(gè)網(wǎng)頁設(shè)計(jì)師都有自己最得心應(yīng)手的軟件工具。在選擇軟件工具這個(gè)方面，人云亦云的盲從態(tài)度是最不可取的。

我自己在設(shè)計(jì)網(wǎng)頁時(shí)用得最多的工具其實(shí)是UltraEdit（Windows環(huán)境）和BBEdit（Mac OS X環(huán)境），但我絕不會因此而否定FrontPage或Dreamweaver在可視化領(lǐng)域的巨大優(yōu)勢；我最喜歡的圖形圖像工具是Photoshop、Painter與Illustrator的組合，但我從不認(rèn)為使用Windows畫板來描繪點(diǎn)陣圖或使用PowerPoint來勾勒矢量圖就是水平低下的表現(xiàn)；在制作動畫時(shí)，F(xiàn)lash對我而言只是一個(gè)最后的合成工具，此前還會有Illustrator、Swift 3D等許多軟件發(fā)揮它們各自的價(jià)值——大家一定猜不到，我還經(jīng)常在微軟的OneNote軟件中繪制Flash動畫的分鏡頭草稿呢；此外，懂得編程的網(wǎng)頁設(shè)計(jì)師還可以在開發(fā)工具和腳本語言的幫助下，讓設(shè)計(jì)過程更加輕松——不知道大家是否嘗試過，用JavaScript或AppleScript來操控Photoshop，就可以根據(jù)某個(gè)數(shù)據(jù)庫中預(yù)先存儲的數(shù)據(jù)批量生成網(wǎng)站中的所有按鈕圖片，這可是一種十分愜意的使用體驗(yàn)??！

認(rèn)識和使用色環(huán)

色環(huán)就是將常用色彩按照某種規(guī)律排列成圓環(huán)之后的結(jié)果。千萬不要以為色環(huán)只有一種。例如，以計(jì)算機(jī)顯示器使用的紅、綠、藍(lán)三原色為基礎(chǔ)，經(jīng)兩兩混合得到間色，再進(jìn)一步得到下一級間色，最終得到的12色、24色或更多顏色的色環(huán)通常被稱為RGB色環(huán)或光源色色環(huán)；而從美術(shù)顏料中的紅、黃、藍(lán)三原色出發(fā)得到的色環(huán)也被稱為美術(shù)色環(huán)；還有一些設(shè)計(jì)師會根據(jù)自己的需要，僅僅用某個(gè)色調(diào)區(qū)域的色彩組合成專用的色環(huán)。

經(jīng)常觀察和分析色環(huán)中隱藏的色彩規(guī)律是網(wǎng)頁設(shè)計(jì)師的必修課之一。在RGB色環(huán)中，我們可以很容易找到那些最適于在顯示器中表現(xiàn)的色彩。但RGB色環(huán)隱藏了較多暖色系的細(xì)節(jié)，我們最好用美術(shù)色環(huán)來探索顏色與顏色之間的相互關(guān)系。

在美術(shù)色環(huán)中，相距180°的兩種顏色是反差最強(qiáng)烈的補(bǔ)色，間距在60°以內(nèi)的色彩是關(guān)系最為協(xié)調(diào)的近似色，兩兩相距60°的三種顏色則可以構(gòu)成一個(gè)視覺效果非常強(qiáng)烈的色彩組合……如果我們自己創(chuàng)建出了一個(gè)由不同深淺的藍(lán)色組成的色環(huán)，那么，只要簡單地將色環(huán)中心區(qū)域填充為某種色彩，就能很快找到與該顏色最為相配的藍(lán)色了。

色彩的心理效應(yīng)

每種色彩都會引起人們特定的心理感覺。我們常說的冷色和暖色就是心理感覺的體現(xiàn)。一些設(shè)計(jì)師喜歡為自己熟悉的每種色彩配上兩三個(gè)特定的形容詞，比如為深紫色配上“憂郁－陶醉－哀婉”，然后根據(jù)這些形容詞，將不同的色彩分門別類，以便在需要時(shí)選用。韓國I.R.I色彩研究所用類似的方法將標(biāo)有形容詞的常用色彩及色彩組合置于“生硬－柔和/動態(tài)－靜態(tài)”的坐標(biāo)系（印象空間）中，這樣，設(shè)計(jì)師只要在坐標(biāo)系中圈出與網(wǎng)站主題吻合的印象區(qū)域，就可以很容易地找到自己需要的色彩組合了（參見電子工業(yè)出版社2002年9月出版的《Web Color Design——設(shè)計(jì)師談網(wǎng)頁配色》一書）。

色彩的心理效應(yīng)不是固定不變的。特定色彩在與其他不同色彩搭配時(shí)，往往會表現(xiàn)出不同的心理效應(yīng)。比如，當(dāng)我們把紫色放在藍(lán)色和綠色中間時(shí)，紫色看起來是典型的暖色，而當(dāng)我們把同樣的紫色放在紅色和橙色之間時(shí)，它看起來就是典型的冷色了。再比如，單獨(dú)看起來明亮、純凈的黃色一旦被置于淺棕色的背景中，似乎一下子就變得模糊和晦澀了。

不同的色彩模型

在電腦中，網(wǎng)頁設(shè)計(jì)師可以使用不同的色彩模型來表示特定的色彩。打開Photoshop軟件的調(diào)色板，我們可以看到最常用的四種色彩模型——RGB、CMYK、HSB和Lab。

RGB是設(shè)計(jì)師在網(wǎng)頁中指定色彩的基本模型。作為一名網(wǎng)頁設(shè)計(jì)師，我們應(yīng)當(dāng)對RGB色彩模型有足夠的了解，至少，我們應(yīng)能快速說出大多數(shù)典型色彩的RGB近似值，或是在看到某一組RGB值后馬上知道那大致是一種什么樣的色彩。

CMYK是打印機(jī)等印刷設(shè)備使用的色彩模型。大多數(shù)網(wǎng)頁設(shè)計(jì)師無須考慮CMYK模型。但在設(shè)計(jì)那些專用于打印的彩色網(wǎng)頁時(shí)，我們就必須解決某種色彩轉(zhuǎn)換到CMYK模型后可能存在的失真問題，因?yàn)樵S多明亮的RGB色彩都無法準(zhǔn)確映射到CMYK空間。使用Photoshop提供的“Proof Colors”功能可以看到色彩在打印輸出時(shí)的實(shí)際效果——如果某種色彩失真較大，那么最好提前換掉它。

HSB色彩模型可以反應(yīng)出某種色彩的色調(diào)（Hue，也譯作“色相”，但中文Windows和Mac OS X系統(tǒng)的調(diào)色板均使用“色調(diào)”的譯法）、飽和度、亮度這三個(gè)基本屬性。HSB模型最接近人們對色彩的感知方式，因此，在選擇特定色彩或色彩組合的時(shí)候，我們可以先從HSB模型出發(fā)定位色彩，然后再將其轉(zhuǎn)換為網(wǎng)頁中使用的RGB值。

Lab模型是一種非常出色的技術(shù)模型，非常適于精確地表達(dá)、存儲、壓縮或轉(zhuǎn)換色彩信息。盡管也可以用較直觀的方式理解Lab模型，但目前使用Lab模型尋找或定位特定色彩的設(shè)計(jì)師還寥寥無幾。

色調(diào)變化

在色調(diào)（Hue，也譯作“色相”）的基礎(chǔ)上尋求變化是最常用的色彩搭配方式之一。

從RGB色環(huán)或美術(shù)色環(huán)出發(fā)，我們可以很容易地找到相距180°左右的補(bǔ)色組合以及相距60°以內(nèi)的近似色組合。使用補(bǔ)色可以在網(wǎng)頁中制造出強(qiáng)烈的視覺對比效果，這適于表達(dá)那些鮮明、突出的主題；使用近似色則可以讓網(wǎng)頁的整體視覺效果更加和諧，這適于表現(xiàn)那些含蓄、內(nèi)斂的主題。

還有一種值得注意的色調(diào)組合方式：選出一種特定色彩后，在色環(huán)上找到其補(bǔ)色所在的位置，然后從補(bǔ)色兩邊同時(shí)選出兩種或多種補(bǔ)色的近似色，并將它們與原色彩搭配起來。這樣的色彩組合一方面包含視覺上的對比因素，另一方面也包含統(tǒng)一、和諧的效果。如果變換每種色彩在網(wǎng)頁上的分布位置和分布面積，還可以得到許多意想不到的結(jié)果。

飽和度變化

飽和度是反應(yīng)色彩純凈或灰濁程度的指標(biāo)。將飽和度相近的色彩搭配在一起，可以在統(tǒng)一的視覺效果中引入節(jié)奏上的變化；將飽和度差異較大的色彩搭配在一起，可以讓飽和度高的色彩更加突出，也可以讓網(wǎng)頁中的視覺沖突更加明顯。

飽和度為0時(shí)，色彩就變成了白色、灰色或黑色。因此，有些設(shè)計(jì)師也把特定色彩與白色、灰色、黑色的搭配歸入到飽和度對比的范疇中。從這個(gè)意義上說，白色、灰色、黑色等中性色在突出其他色彩的“彩色屬性”方面有著非常重要的價(jià)值。

亮度變化

保持色調(diào)和飽和度一定的情況下，單純改變某種色彩的亮度，也可以得到許多漂亮的色彩組合。

在許多現(xiàn)代企業(yè)的網(wǎng)頁中，亮度不同的藍(lán)色既可以讓整個(gè)網(wǎng)頁保持統(tǒng)一的商務(wù)風(fēng)格，也可以讓不同的網(wǎng)頁區(qū)域形成一定的對比和變化關(guān)系。有時(shí)候，前景信息和背景信息分別使用亮度不同的色彩（比如暗綠色背景上的淺綠色文字）也會收到奇效——這些網(wǎng)頁看上去似乎沉浸在某種獨(dú)特而強(qiáng)烈的感情色彩中；同時(shí)，前景顏色和背景顏色既保持了一定的相似性，又存在較明顯的對比關(guān)系，不會妨礙我們閱讀文字信息。

Web安全色和其他調(diào)色板

選擇顏色時(shí)，可以直接利用一些現(xiàn)成的調(diào)色版。

網(wǎng)頁設(shè)計(jì)師比較熟悉的216種網(wǎng)頁安全顏色在前幾年一度成了配色領(lǐng)域里的首選調(diào)色板。據(jù)說這216種安全顏色在所有操作系統(tǒng)和所有顯示設(shè)備上的顯示效果都完全一致——這種說法當(dāng)然不夠準(zhǔn)確，這216種色彩只是相對而言不那么容易受到設(shè)備影響罷了。今天，在絕大多數(shù)顯卡和顯示器都已經(jīng)使用24位真彩色的情況下，216種安全顏色的重要程度已經(jīng)大不如前。但是，如果設(shè)計(jì)師希望網(wǎng)頁能在PC以外的設(shè)備（如PDA和手機(jī)）上保持足夠出色的顯示品質(zhì)，我們還是應(yīng)該堅(jiān)持從這216種顏色組成的調(diào)色板中尋找配色方案。

在Photoshop或Illustrator軟件的“Swatches”窗格中，我們還可以載入許多經(jīng)典的調(diào)色板。比如，PANTONE系列的調(diào)色板就非常受設(shè)計(jì)師們的歡迎。直接從這些經(jīng)典的調(diào)色板中選取顏色可以省去尋找或嘗試色彩組合時(shí)的許多麻煩。

使用配色工具

網(wǎng)頁設(shè)計(jì)師應(yīng)善于利用軟件工具幫助自己選擇色彩和色彩組合。比如，我自己就經(jīng)常在Illustrator中用矩形拼湊出基本的網(wǎng)頁布局，然后不斷改變每個(gè)矩形的填充色，以尋找最佳的配色方案。

有一些非常專業(yè)的配色軟件可以幫我們解決很多問題，比如ColorImpact軟件可以讓我們在RGB色環(huán)或美術(shù)色環(huán)中自由選取特定的色彩，可以根據(jù)我們選擇的主色調(diào)和配色思路（比如以補(bǔ)色為主或以近似色為主）自動給出示例網(wǎng)頁的顯示效果，還可以讓我們在屏幕范圍內(nèi)自由點(diǎn)選顏色并完成RGB、HSB等色彩模型間的轉(zhuǎn)換。另一種名為ColorWheel Pro的小軟件在網(wǎng)頁配色模擬方面的功能比ColorImpact還要強(qiáng)大一些。

網(wǎng)頁設(shè)計(jì)中的人機(jī)界面問題

很多網(wǎng)頁設(shè)計(jì)師只注重布局、文字、色彩等基本設(shè)計(jì)要素，而從不考慮自己設(shè)計(jì)的網(wǎng)頁是否能給用戶帶來最舒適的使用體驗(yàn)。結(jié)果，有許多看上去絢麗無比的頁面使用起來卻極為繁瑣：為了填寫一個(gè)簡單的表格，用戶可能要用鼠標(biāo)點(diǎn)上好幾十次；為了通過一個(gè)最基本的身份認(rèn)證，用戶可能要在兩三個(gè)頁面之間跳來跳去；為了進(jìn)入最有價(jià)值的下載頁面，用戶可能要坐等屏幕上的Flash短片嘰嘰喳喳地唱上好幾分鐘……

這些問題其實(shí)都與人機(jī)界面的設(shè)計(jì)相關(guān)。

人機(jī)界面設(shè)計(jì)是一門相當(dāng)深奧的學(xué)問。限于篇幅，我在這里不可能展開討論視覺隱喻、最短交互路徑、信息傳遞效率、典型操作模式等細(xì)節(jié)問題。我只是想提醒大家，一名合格的網(wǎng)頁設(shè)計(jì)師同時(shí)也應(yīng)該是一名合格的人機(jī)界面設(shè)計(jì)師，因?yàn)闊o論從哪個(gè)意義上來說，Web頁面都是一種最典型也最流行的人機(jī)交互平臺，而網(wǎng)頁設(shè)計(jì)在本質(zhì)上就是一種以Web為載體的人機(jī)界面設(shè)計(jì)。