淺談網(wǎng)頁設(shè)計中顏色的搭配

巨　峰

[摘要]在網(wǎng)頁的設(shè)計中，顏色的搭配至關(guān)重要，從主題色的確定、輔助色的選取、文本顏色的搭配、背景顏色和背景圖像的設(shè)置四個方面對網(wǎng)頁設(shè)計中的顏色搭配進(jìn)行探討。

[關(guān)鍵詞]色彩主題色輔助色

中圖分類號：TP3文獻(xiàn)標(biāo)識碼：A文章編號：1671—7597(2009)0620118-01

一、色彩的分類及基本一性

現(xiàn)行色彩理論將自然界中的顏色分為彩色(有彩色)和無彩色兩大類。無彩色指黑色、白色和各種深淺不一的灰色，而其他所有顏色均屬于彩色。任何一種彩色具有三個基本屬性：1色相。顏色的基本特征，例如，紅、綠。2純度。也稱飽和度，指顏色的純潔程度。無彩色的飽和度為0.3明度。也稱亮度，體現(xiàn)顏色的深淺程度。白色明度最高，黑色最低。無彩色只有明度特征，沒有色相和飽和度的區(qū)別。

二、網(wǎng)頁中色彩的配置

(一)主題色的確定

1根據(jù)現(xiàn)實企業(yè)形象決定主題色。對于首先在物理世界中擁有實體的企業(yè)、機(jī)構(gòu)以及團(tuán)體來說，他們的網(wǎng)站形象實際上是自身整體形象的一部分，或者說應(yīng)當(dāng)被視為固有形象在網(wǎng)絡(luò)媒介中的延伸。這類站點的主題色應(yīng)當(dāng)保持與其實體周有形象的一致性，從而形成統(tǒng)一的視覺認(rèn)知。諸多知名企業(yè)的形象站點是這類用色模式的代表。例如：高戤潔的站點，以強(qiáng)烈北美風(fēng)格的紅、藍(lán)為主題色，這也是高露潔公司的企業(yè)標(biāo)準(zhǔn)色。同樣的色彩風(fēng)格也出現(xiàn)在該公司主要日化產(chǎn)品的包裝上。

2根據(jù)站點定位確定主題色。對于并沒有一個既定色彩形象作為用色依據(jù)的站點來說，采用何種色彩或色彩組合作為主題色，應(yīng)當(dāng)視網(wǎng)站的性質(zhì)、功能、風(fēng)格特色等因素的具體定位而定。例如：認(rèn)證公司網(wǎng)站采用藍(lán)色為主色調(diào)代表了公正：一般農(nóng)林業(yè)、教育類網(wǎng)站常使用綠色代表希望與活力；紅色等暖色調(diào)的使用則體現(xiàn)了政府部門網(wǎng)站的嚴(yán)肅性與親和力；面向大眾的咨詢類、娛樂類、搜索服務(wù)類網(wǎng)站，大多選用飽和、鮮艷、視覺度較高的色彩作為主色調(diào)，以傳達(dá)豐富活躍的氣氛。

3注意色彩的公共聯(lián)想。色彩具有廣泛的象征性。但由于人類生理構(gòu)造和生活環(huán)境等方面的共性，大多數(shù)人在色彩心理方面，存在麩同的感情。例如紅，橙、黃色使人聯(lián)想到陽光、活力、溫暖；藍(lán)、青色使人聯(lián)想到大海、天空、寒冷；明亮而鮮艷的色彩感覺興奮、明快、跳躍：深暗而混濁的色則感覺憂郁。

(二)輔助色的選取

頁面中主題色以外的其他顏色都可以歸類為輔助色，但其中并不包括頁面內(nèi)那些不確定的、經(jīng)常更新的圖片里的色彩。輔助色的使用能夠增加頁面的色彩層次，豐富視覺；同時，輔助色也可能執(zhí)行著一些具體功能，如視覺引導(dǎo)等。主要的輔助色與主題色共同建立起網(wǎng)頁的色彩基調(diào)。輔助色的選取遵循的原則是：對立中統(tǒng)一，具體有以下幾種手法：

1色彩的對比調(diào)和則指強(qiáng)調(diào)變化而組合的和諧色彩關(guān)系，富于活潑、生動、鮮明的視覺效果。它往往不是依賴要素的一致，而是靠某種組合秩序來實現(xiàn)。例如可在在對比各色中混入同一色素或置入相同的色彩結(jié)構(gòu)，使各色具有和諧感：或利用色環(huán)尋求具有某種規(guī)律的色彩組合。

2色彩的類似調(diào)和和對比調(diào)和手法分別代表色彩調(diào)和中的兩種主要傾向。在實際的色彩應(yīng)用中，為了取得統(tǒng)一而豐富的色彩關(guān)系，往往需要將兩者有所側(cè)重地綜合運用，以形成具有一定主從結(jié)構(gòu)的多層次的色彩調(diào)和。

(三)文本顏色的設(shè)定

1靜態(tài)文本的顏色。靜態(tài)文本是功能相對單純的閱讀型文本，在網(wǎng)頁中常以大段文字的形式出現(xiàn)。對于感必趣的文字內(nèi)容，瀏覽者需要集中注意力和花費時間，因此這類文本與背景的顏色搭配應(yīng)以易于提取信息、利于減小視疲勞為原則。

若眼睛同時聚焦于兩種對比明顯的鮮艷彩色上，眼部周圍的肌肉會特別緊張。一些鮮艷補(bǔ)色、準(zhǔn)補(bǔ)色的組合方式是不利于用戶閱讀的，例如紫色為背景的黃色顯示，綠色為背景的紫紅色顯示，以及純紅與純藍(lán)色的組合等。

相較于注視無彩色，人們持續(xù)注視鮮艷的彩色更容易疲累和厭煩。一般而言，底色與文字色的色彩跳躍度越低，即越接近無彩色，越有利于長時間閱讀。越高明度差的色彩配伍，越具有高認(rèn)識度，用戶也就越易于從中獲取信息。低純度、高明度對比的文本與背景色搭配，是適用于靜態(tài)文本的顯示色彩。在無彩色的搭配中，白底黑字的顯示方式比黑底自字的顯示方式可讀性更強(qiáng)。

2超文本的色彩。與僅供閱讀的靜態(tài)文本不同，超文本加入了鏈接功能，能夠響應(yīng)點擊跳轉(zhuǎn)頁面。為了有效提示點擊，超文本在外觀上應(yīng)當(dāng)與靜態(tài)文本有所區(qū)分。區(qū)分方式可以是使用不同的字體、字號，加下劃線，也可以通過不同顏色來加以甄別。

超文本應(yīng)當(dāng)使用比靜態(tài)文本強(qiáng)度高、視覺度高的色彩。例如靜態(tài)文本為黑色，超文本為有彩色。需要注意的是，超文本仍是文字信息，文本色應(yīng)與底色保持足夠明度差以利識別。在一條超文本上可以同時使用幾種色彩，以產(chǎn)生響應(yīng)交互的色彩變化。

(四)網(wǎng)頁背景顏色和背景圖像的設(shè)置

1網(wǎng)頁背景顏色的設(shè)置。少數(shù)網(wǎng)頁會直接使用主題色作為背景顏色，例如一些首頁和全包圍型網(wǎng)頁。但更多設(shè)置有色背景的網(wǎng)頁會遵循這樣的視覺層次關(guān)系：頁面加載完畢后，主題色為頁面內(nèi)最醒目的色彩，為視覺注意的第一層，頁面內(nèi)容為清晰易辨的中間層，背景色或背景圖像為退居最后，襯托前景，裝飾頁面的底層或邊飾。

符合常見層次關(guān)系的背景色，多數(shù)與主題色星一致調(diào)性。例如是主題色的同系色，或臨近色中的低純度色彩。在明度對比上，當(dāng)前景明亮對，背景色應(yīng)當(dāng)較暗；前景深暗時，背景則應(yīng)稍亮些。在冷暖因素上，背景色整體較前景色冷時，前后層次感較強(qiáng)。一些網(wǎng)頁的前景與背景都使用了彩色。當(dāng)網(wǎng)頁的前景與背景為鄰近色關(guān)系時，效果比較柔和。對比過于強(qiáng)烈的色彩關(guān)系會干擾視覺，在以文本信息為主的頁面中不建議使用。

2背景圖像的色彩設(shè)置。背景圖像首先造成的是一種整體上的顏色感覺，其次才是紋理風(fēng)格。頁面加載完成后，背景圖像應(yīng)退居于次要地位，成為頁面主體的襯托和反復(fù)出現(xiàn)的形象環(huán)境。為了避免在用戶瀏覽網(wǎng)頁內(nèi)容時造成過量的視覺干擾，背景圖像整體上的視覺跳躍度與色彩飽和度、對比度均應(yīng)明顯低于前層內(nèi)容。一般地，根據(jù)空間混和原理，背景圖像中各色間的明度差越小，花紋越細(xì)密，越有利于襯托前景。

主題色或主題色的同系輔助色加入無彩色、含灰色、鄰近色圖案所構(gòu)成的背景圖像，與前景色彩的一致性強(qiáng)。與頁面主題色有補(bǔ)色因素的背景圖像，與前景的對比鮮明悅目。設(shè)置背景圖像時需要注意圖案單元的大小和色彩數(shù)量。在網(wǎng)絡(luò)較慢時，文件體積較大的背景圖像可能顯示遲緩，造成等待延長。

三、總結(jié)

在網(wǎng)頁設(shè)計中，不僅要注重技術(shù)和經(jīng)驗的積累，同時也要注重顏色的搭配。所以，要對色彩的基礎(chǔ)知識的良好掌控，才能在網(wǎng)頁設(shè)計中才能做到游刃有余。