在我的前幾篇文章中，我討論了在網(wǎng)頁(yè)中注意使用顏色的重要性。根據我所得到的一些問(wèn)題和請求來(lái)看，你們有些人希望了解如何使用這一信息在站點(diǎn)設計過(guò)程中實(shí)施配色方案。所以這個(gè)月我將對配色方案作一些介紹，并說(shuō)明如何將某些內容組織起來(lái)，以有助于您的網(wǎng)頁(yè)最大限度地利用當前存在的豐富的顏色。
為了便于進(jìn)行這次討論，首先我們必須提供一個(gè)可視模板，用以比較不同的配色方案。盡管組織網(wǎng)頁(yè)的方式數不勝數，我還是選擇了一個(gè)相對標準的版式，其中所包含的組件足以構成某些有趣和有用的顏色組合。
我們假想中的網(wǎng)頁(yè)由以下組件構成：
在與此類(lèi)似的網(wǎng)頁(yè)中確定可能采用的配色方式時(shí)，首先您必須考慮每一部分對用戶(hù)的不同重要性。然后使用我在前幾篇文章中提供的有關(guān)顏色的一些信息，試著(zhù)確定一個(gè)配色方案，從而正確地強調網(wǎng)頁(yè)中的各部分。
假定用戶(hù)很可能對網(wǎng)頁(yè)的內容最感興趣，我們希望盡可能使這一部分容易閱讀?？赡苡脩?hù)對頁(yè)腳信息的興趣最小。導航菜單很重要，但也只有用戶(hù)希望清楚地了解如何轉到站點(diǎn)別的位置時(shí)才用到。網(wǎng)頁(yè)標題應該與網(wǎng)頁(yè)本身稍微分開(kāi)一點(diǎn)，作為一個(gè)“您當前所在位置”的標志。依據這些原則，我們試著(zhù)為這一假想的站點(diǎn)設計一個(gè)灰度配色方案。
網(wǎng)頁(yè)內容：作為最重要的部分，這一部分的可讀性應該最強。這就意味著(zhù)背景要非常亮，文字要非常暗，對比度要高。此處最顯而易見(jiàn)的選擇就是白底黑字。
網(wǎng)頁(yè)標題：這一區域也應具有較高的對比度，以便用戶(hù)能夠非常方便看到他在該站點(diǎn)的所在位置。標題通常與頁(yè)面其它部分有不同的“風(fēng)貌”，它可以使用與網(wǎng)頁(yè)內容非常不同的字體或顏色組合。要選擇一種簡(jiǎn)單易行的方式，可以采用網(wǎng)頁(yè)內容的反色；盡管效果未必都那么好，在這一示例中，黑底白字無(wú)疑是相當完美的選擇。
導航菜單：菜單本身不應太顯眼。盡管它對用戶(hù)很重要，但也不應該與網(wǎng)頁(yè)內容競爭。相對于考慮用作網(wǎng)頁(yè)內容背景的顏色而言，我為菜單背景設置的顏色總是暗一些；我會(huì )依靠較高的顏色對比度、比較強烈的圖形元素或獨特的字體將網(wǎng)頁(yè)內容和菜單的不同目的準確地區分開(kāi)。至于這個(gè)例子，我們選擇在灰色背景上設置黑色字。菜單區域中版權信息等不會(huì )被點(diǎn)擊到的文字，不需要同一級別可見(jiàn)度，我們將其設置為暗灰色。
側欄：盡管不是所有網(wǎng)頁(yè)都使用側欄，它不失為顯示附加信息的一個(gè)有用方式。它應與網(wǎng)頁(yè)內容清楚地區分開(kāi)，同時(shí)也需要易于閱讀。這就意味著(zhù)它也應該使用亮色背景、暗色文字以及足夠（且適宜）的對比度，以易于閱讀。要是不堅持用灰度級方案的話(huà)，可以為它選擇非常明亮的藍色或黃色；也可以選擇銀底黑字。
頁(yè)腳：這一項的最不重要，不應該喧賓奪主。要選擇對比度為中等的顏色，但要確保它仍能賞心悅目。網(wǎng)頁(yè)上的任何內容都不應該使讀者在閱讀時(shí)發(fā)生困難?；诖?，我們選擇銀底灰字。
看看，這并不難，是吧？
方案起步
得出自己的配色方案相對來(lái)說(shuō)很直接了當。先著(zhù)手選擇您認為適合于整個(gè)設計的一套顏色?？梢詮墓净諛嘶蚰承┮@示的重要圖形中選擇顏色，也可能您只是認為某些顏色非常清新或輕快，所以就選用了它們。
舉一個(gè)能迅速說(shuō)明問(wèn)題的例子，我做了一個(gè)代表秋天的一個(gè)配色方案。首先我找出了可用的一套顏色。這一過(guò)程很簡(jiǎn)單：在某一站點(diǎn)上找一幅帶秋葉的圖片，然后將它拖動(dòng)到某一圖像編輯工具，從中選擇出一套有代表性的顏色。（我對這一選擇作了一定程度的改動(dòng)，以便使用相對瀏覽器穩定的調色板中的顏色。）
接著(zhù)，我使用這些顏色測試了與整個(gè)頁(yè)面布局相合并的幾種不同方式，直到我認為產(chǎn)生的效果看起來(lái)頗具吸引力為止。
我選擇在頂端的標題區域 (#CC3333) 和底端的頁(yè)腳區域 (#CC6633) 使用更暗一些的顏色。由此建立了一個(gè)比較明顯的放置頁(yè)面的邊界。我為導航菜單 (#FFCC00) 的背景選用了普通金色，然后為菜單文字選用了網(wǎng)頁(yè)標題背景的暗色，與網(wǎng)頁(yè)內容區域中的標題文字相同。
我喜歡為網(wǎng)頁(yè)的主要內容選擇白底黑字這一直觀(guān)簡(jiǎn)單的方式，這里我就是這樣做的。最后，我為側欄背景選擇了有趣的黃色陰影 (#FFFF00), 為其標題文字選擇頁(yè)腳中的暗色。
將導航菜單的背景設置為較為柔和的顏色，防止其與主要內容區域發(fā)生沖突，轉移用戶(hù)的注意力?；蛟S側欄的顏色稍嫌強烈了點(diǎn)。如果必須使用過(guò)大的側欄，就可能需要將這一區域的顏色較大幅度地柔和化，即使這樣必須采用 256 色模式的用戶(hù)所無(wú)法顯示的顏色，也必須如此。
在上個(gè)月的文章中，我提供了一個(gè)交互式示例，它用幾種不同的配色方案對同一幅圖像進(jìn)行潤色。對于目前這個(gè)可視模板，我們也使用這樣的幾個(gè)配色方案。某些情況下，我會(huì )增強或減弱顏色的飽和度，以有助于獲得良好的對比度 — 但基本上會(huì )采用最初選擇的顏色：
單擊每幅圖像可查看更大的版本。
 模擬顏色  | 冷色 |
暖色 | 單一的藍色 |
您可以看到我為“模擬”方案選用了顏色背景的地方，甚至在這一小型的縮略圖中，都可以看出整個(gè)頁(yè)面的色調所發(fā)生的根本性變化。有時(shí)候這樣做效果不錯，但卻并不是經(jīng)常能奏效。
現在，只是為了娛樂(lè )一下，看一看我們的可視模板模擬萬(wàn)維網(wǎng)中某些實(shí)際站點(diǎn)所用配色方案的效果。
單擊每幅圖像可查看更大的版本。
MSN Communities 上所用的顏色 | MSDN Online 上所用的顏色 |
Amazon.com 上所用的顏色 | C|Net News 上所用的顏色 |
MSN Communities（英文）
MSDN Online（英文） 站點(diǎn)的版式就不是那么接近。圖形元素在 MSDN Online 站點(diǎn)中扮演了一定的角色，而我們這個(gè)快速完成的模板實(shí)際上不允許加入這類(lèi)元素。您可以看到基本配色方案所起的作用。只要有了基本方案，即可設計出支撐網(wǎng)頁(yè)的圖形，同時(shí)又確保不會(huì )與已經(jīng)使用的基本顏色沖突。
Amazon.com（英文）
最后，顯示 C|Net news 站點(diǎn)（英文）
提供幫助的工具
看我這個(gè)人多好，我還為您準備了一個(gè)基于 DHTML 的工具（英文），以幫助您試驗自己的配色方案。它在 Internet Explorer 4.x 或 Internet Explorer 5.x 兩種環(huán)境下都可使用。
在藍色外隨意選擇顏色并不能培養起觀(guān)眾對您所提供信息的信心。您需要花時(shí)間考慮網(wǎng)頁(yè)的版式和設計，而正確地選擇顏色只是這項工作的一個(gè)方面。希望我此處提供的信息用助于您將這些概念中的一部分應用到您所設計的網(wǎng)頁(yè)上。
聯(lián)系客服
