配色方案

在我的前幾篇文章中，我討論了在網(wǎng)頁中注意使用顏色的重要性。根據(jù)我所得到的一些問題和請求來看，你們有些人希望了解如何使用這一信息在站點設計過程中實施配色方案。所以這個月我將對配色方案作一些介紹，并說明如何將某些內(nèi)容組織起來，以有助于您的網(wǎng)頁最大限度地利用當前存在的豐富的顏色。

為了便于進行這次討論，首先我們必須提供一個可視模板，用以比較不同的配色方案。盡管組織網(wǎng)頁的方式數(shù)不勝數(shù)，我還是選擇了一個相對標準的版式，其中所包含的組件足以構(gòu)成某些有趣和有用的顏色組合。

我們假想中的網(wǎng)頁由以下組件構(gòu)成：

• 網(wǎng)頁標題
  
  
• 網(wǎng)頁內(nèi)容
  
  
• 導航菜單
  
  
• 邊欄
  
  
• 頁腳

在與此類似的網(wǎng)頁中確定可能采用的配色方式時，首先您必須考慮每一部分對用戶的不同重要性。然后使用我在前幾篇文章中提供的有關(guān)顏色的一些信息，試著確定一個配色方案，從而正確地強調(diào)網(wǎng)頁中的各部分。

假定用戶很可能對網(wǎng)頁的內(nèi)容最感興趣，我們希望盡可能使這一部分容易閱讀?？赡苡脩魧撃_信息的興趣最小。導航菜單很重要，但也只有用戶希望清楚地了解如何轉(zhuǎn)到站點別的位置時才用到。網(wǎng)頁標題應該與網(wǎng)頁本身稍微分開一點，作為一個“您當前所在位置”的標志。依據(jù)這些原則，我們試著為這一假想的站點設計一個灰度配色方案。

單擊此處可查看更大的圖像 (6.23K)

網(wǎng)頁內(nèi)容：作為最重要的部分，這一部分的可讀性應該最強。這就意味著背景要非常亮，文字要非常暗，對比度要高。此處最顯而易見的選擇就是白底黑字。

網(wǎng)頁標題：這一區(qū)域也應具有較高的對比度，以便用戶能夠非常方便看到他在該站點的所在位置。標題通常與頁面其它部分有不同的“風貌”，它可以使用與網(wǎng)頁內(nèi)容非常不同的字體或顏色組合。要選擇一種簡單易行的方式，可以采用網(wǎng)頁內(nèi)容的反色；盡管效果未必都那么好，在這一示例中，黑底白字無疑是相當完美的選擇。

導航菜單：菜單本身不應太顯眼。盡管它對用戶很重要，但也不應該與網(wǎng)頁內(nèi)容競爭。相對于考慮用作網(wǎng)頁內(nèi)容背景的顏色而言，我為菜單背景設置的顏色總是暗一些；我會依靠較高的顏色對比度、比較強烈的圖形元素或獨特的字體將網(wǎng)頁內(nèi)容和菜單的不同目的準確地區(qū)分開。至于這個例子，我們選擇在灰色背景上設置黑色字。菜單區(qū)域中版權(quán)信息等不會被點擊到的文字，不需要同一級別可見度，我們將其設置為暗灰色。

側(cè)欄：盡管不是所有網(wǎng)頁都使用側(cè)欄，它不失為顯示附加信息的一個有用方式。它應與網(wǎng)頁內(nèi)容清楚地區(qū)分開，同時也需要易于閱讀。這就意味著它也應該使用亮色背景、暗色文字以及足夠（且適宜）的對比度，以易于閱讀。要是不堅持用灰度級方案的話，可以為它選擇非常明亮的藍色或黃色；也可以選擇銀底黑字。

頁腳：這一項的最不重要，不應該喧賓奪主。要選擇對比度為中等的顏色，但要確保它仍能賞心悅目。網(wǎng)頁上的任何內(nèi)容都不應該使讀者在閱讀時發(fā)生困難。基于此，我們選擇銀底灰字。

看看，這并不難，是吧？

方案起步

得出自己的配色方案相對來說很直接了當。先著手選擇您認為適合于整個設計的一套顏色。可以從公司徽標或某些要顯示的重要圖形中選擇顏色，也可能您只是認為某些顏色非常清新或輕快，所以就選用了它們。

舉一個能迅速說明問題的例子，我做了一個代表秋天的一個配色方案。首先我找出了可用的一套顏色。這一過程很簡單：在某一站點上找一幅帶秋葉的圖片，然后將它拖動到某一圖像編輯工具，從中選擇出一套有代表性的顏色。（我對這一選擇作了一定程度的改動，以便使用相對瀏覽器穩(wěn)定的調(diào)色板中的顏色。）

接著，我使用這些顏色測試了與整個頁面布局相合并的幾種不同方式，直到我認為產(chǎn)生的效果看起來頗具吸引力為止。

單擊此處可查看更大的圖像 (6.33K)

我選擇在頂端的標題區(qū)域 (#CC3333) 和底端的頁腳區(qū)域 (#CC6633) 使用更暗一些的顏色。由此建立了一個比較明顯的放置頁面的邊界。我為導航菜單 (#FFCC00) 的背景選用了普通金色，然后為菜單文字選用了網(wǎng)頁標題背景的暗色，與網(wǎng)頁內(nèi)容區(qū)域中的標題文字相同。

我喜歡為網(wǎng)頁的主要內(nèi)容選擇白底黑字這一直觀簡單的方式，這里我就是這樣做的。最后，我為側(cè)欄背景選擇了有趣的黃色陰影 (#FFFF00), 為其標題文字選擇頁腳中的暗色。

將導航菜單的背景設置為較為柔和的顏色，防止其與主要內(nèi)容區(qū)域發(fā)生沖突，轉(zhuǎn)移用戶的注意力?；蛟S側(cè)欄的顏色稍嫌強烈了點。如果必須使用過大的側(cè)欄，就可能需要將這一區(qū)域的顏色較大幅度地柔和化，即使這樣必須采用 256 色模式的用戶所無法顯示的顏色，也必須如此。

在上個月的文章中，我提供了一個交互式示例，它用幾種不同的配色方案對同一幅圖像進行潤色。對于目前這個可視模板，我們也使用這樣的幾個配色方案。某些情況下，我會增強或減弱顏色的飽和度，以有助于獲得良好的對比度 — 但基本上會采用最初選擇的顏色：

單擊每幅圖像可查看更大的版本。

模擬顏色	冷色
暖色	單一的藍色

您可以看到我為“模擬”方案選用了顏色背景的地方，甚至在這一小型的縮略圖中，都可以看出整個頁面的色調(diào)所發(fā)生的根本性變化。有時候這樣做效果不錯，但卻并不是經(jīng)常能奏效。

現(xiàn)在，只是為了娛樂一下，看一看我們的可視模板模擬萬維網(wǎng)中某些實際站點所用配色方案的效果。

單擊每幅圖像可查看更大的版本。

MSN Communities 上所用的顏色	MSDN Online 上所用的顏色
Amazon.com 上所用的顏色	C|Net News 上所用的顏色

MSN Communities（英文） 站點的版式幾乎就是我們可視模板的嚴格對照，我們的模型與實際的東西非常接近。您可以注意到該站點使用的是單色配色方案。

MSDN Online（英文） 站點的版式就不是那么接近。圖形元素在 MSDN Online 站點中扮演了一定的角色，而我們這個快速完成的模板實際上不允許加入這類元素。您可以看到基本配色方案所起的作用。只要有了基本方案，即可設計出支撐網(wǎng)頁的圖形，同時又確保不會與已經(jīng)使用的基本顏色沖突。

Amazon.com（英文） 的版式與我們的模板相當接近。然而別忘了，該站點實際上是大量站點的集合；盡管它們需要遵循緊密結(jié)合的方案，它們中的每一個還是需要某些獨特的視覺線索。Amazon .com 實現(xiàn)這一效果的主要方式就是：更改我所謂的標題欄采用的顏色。在這一示例中，我顯示的是他們“Book”站點所采用的配色方案。如果您的站點有這類要求，確保您可以修改整個方案中的一個或兩個顏色，以便稍微區(qū)別一下每一區(qū)域。

最后，顯示 C|Net news 站點（英文）的顏色的模板并未與他們站點的版式匹配，但卻顯示了所有顏色之間的相互配合。我還可以想象出同一配色方案與一家著名膠片沖洗公司的網(wǎng)頁的完美契合。您知道我所談論的是哪一家公司，這就說明了顏色所能攜帶的重要信息。

提供幫助的工具

看我這個人多好，我還為您準備了一個基于 DHTML 的工具（英文），以幫助您試驗自己的配色方案。它在 Internet Explorer 4.x 或 Internet Explorer 5.x 兩種環(huán)境下都可使用。

在藍色外隨意選擇顏色并不能培養(yǎng)起觀眾對您所提供信息的信心。您需要花時間考慮網(wǎng)頁的版式和設計，而正確地選擇顏色只是這項工作的一個方面。希望我此處提供的信息用助于您將這些概念中的一部分應用到您所設計的網(wǎng)頁上。