摘 要：網(wǎng)站給人留下的第一印象，既不是豐富的內(nèi)容，也不是合理的版面配置，而是網(wǎng)站所呈現(xiàn)的色彩。網(wǎng)頁設(shè)計(jì)的成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用與搭配。本文擬就網(wǎng)頁的色彩搭配談?wù)勛约旱目捶ā?/p>

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；配色原則；配色技巧

中圖分類號(hào)：TP393.092

1 網(wǎng)頁色彩基礎(chǔ)知識(shí)

每個(gè)人都生活在五光十色的色彩環(huán)境中，難以想象沒有色彩的世界將是一個(gè)什么樣子。人們除了享受到自然界的繽紛色彩之外，也正在運(yùn)用各種色彩美化著生活。

色彩主要有明度、色相和純度3個(gè)特征。

明度是指物體反射的光的量。反射的光越多，物體色彩的明度就越高?？偟膩碚f，色彩的明度取決于色彩中白色和黑色含量的比例。

在設(shè)計(jì)網(wǎng)頁時(shí)，應(yīng)該注意前景色、背景色及網(wǎng)頁各部分之間的色彩明度要相互協(xié)調(diào)。如果網(wǎng)頁的背景色的明度較低，則網(wǎng)頁中的文字的色彩應(yīng)該選擇明度較高的色彩；否則，文字顏色和背景色差別不大，用戶在瀏覽網(wǎng)頁時(shí)會(huì)感到非常吃力。當(dāng)然，也不能選擇明度太高的色彩；否則，用戶會(huì)感到刺眼。網(wǎng)頁的各個(gè)部分之間的色彩明度盡量做到既有變化，又相協(xié)調(diào)。

色相是色彩最主要的特征，是色彩所表現(xiàn)的“外相”，是色彩的種類。

在設(shè)計(jì)網(wǎng)頁時(shí)，如果選擇暖色相，例如紅色、橙色、黃色等則可以創(chuàng)造出溫馨的效果。如果選擇冷色相，例如藍(lán)色、綠色，則可以使得網(wǎng)頁呈現(xiàn)出清新、高雅的效果。

純度是指色彩含有其它色彩的含量的多少。例如，粉紅色的純度比紅色要低。

2 網(wǎng)頁色彩選擇的原則及搭配技巧

網(wǎng)站色彩的選擇非常重要，當(dāng)用戶打開網(wǎng)站時(shí)，最先看到的就是網(wǎng)站的色彩，其次才是網(wǎng)站的內(nèi)容。色彩的選擇與搭配是否得當(dāng)，會(huì)在很大程度上影響瀏覽者的意愿。下面談一下網(wǎng)頁色彩的選擇與搭配的原則，網(wǎng)頁色彩搭配的技巧，以及頁面中各區(qū)域的色彩分配。

2.1 網(wǎng)頁色彩選擇與搭配的原則

說到色彩的選擇與運(yùn)用，黑、白、灰，這三色是萬能色，可以跟任何色彩搭配。針對(duì)明度較高的網(wǎng)站，為其配上黑色，則可以適當(dāng)降低明度。白色則是網(wǎng)站中應(yīng)用得最普遍的顏色，很多網(wǎng)站甚至留著大塊的白色空間作為組成的一部分，也就是留白的藝術(shù)。適當(dāng)?shù)牧舭讓?duì)網(wǎng)頁的協(xié)調(diào)與均衡有很大的作用，也會(huì)令人感覺舒適、暢快、沒有壓力。網(wǎng)頁的色彩的選擇與搭配大體可以遵循以下三個(gè)原則。

（1）符合網(wǎng)站的風(fēng)格和主題

不同類型的網(wǎng)站就要使用不同的色彩和視覺元素，以求達(dá)到內(nèi)容和形式上的統(tǒng)一，這樣做更符合人們的認(rèn)知習(xí)慣。例如政府部門的網(wǎng)站一般都以紅色為主，體現(xiàn)出一種嚴(yán)肅、莊重的氣氛。新聞?lì)惖木W(wǎng)站應(yīng)該以白底黑字為主，無須太多的顏色。購物類的網(wǎng)站則以橙色、藍(lán)色等明亮輕快的顏色為主。

（2）色彩應(yīng)該符合絕大部分訪問者的審美觀

網(wǎng)頁的色彩與網(wǎng)頁的內(nèi)容應(yīng)該相輔相成。色彩的選擇應(yīng)該適應(yīng)絕大部分網(wǎng)站用戶的審美情趣。各部分的色彩搭配要層次分明，能夠?qū)?nèi)容清晰地展示給訪問者。國內(nèi)的許多購物網(wǎng)站都不約而同地采用了橘黃色作為主色調(diào)，這是由于網(wǎng)上購物的絕大部分是年輕人，而橘黃色既有紅色的熱情，又有黃色的光明、活潑，正是年輕人非常喜歡的顏色。

（3）色彩應(yīng)該與眾不同

網(wǎng)頁色彩的選擇應(yīng)該突出獨(dú)特性，設(shè)計(jì)者應(yīng)該在前面兩個(gè)原則的基礎(chǔ)上，大膽地使用色彩，展示自己的個(gè)性，創(chuàng)造出與眾不同的視覺效果。一般來說，這種色彩的獨(dú)特性與網(wǎng)站的內(nèi)容是密不可分的。

2.2 網(wǎng)頁色彩搭配的技巧

明白色彩的基本概念及搭配原理之后，網(wǎng)頁頁面中各個(gè)要素的色彩又該如何搭配呢？

首先，一個(gè)網(wǎng)站不可能只使用一種顏色，否則會(huì)讓人感覺單調(diào)、乏味；但是也不能將所有顏色都用到網(wǎng)站中，這會(huì)讓人感覺輕浮、花哨。一個(gè)網(wǎng)站最好有一至三種主體色，所以確定網(wǎng)站的主體色是設(shè)計(jì)者最重要的課題。在頁面上，除白色為背景外大量使用的顏色，就是這個(gè)網(wǎng)頁的主體顏色。例如，騰訊網(wǎng)的主頁以藍(lán)色作為主色彩，新浪網(wǎng)則以黃色作為主色彩，美國微軟公司的主頁則以天藍(lán)色為主色彩。

其次，一頁網(wǎng)頁盡量不要使用超過四種顏色，用太多色彩會(huì)讓人感覺不夠穩(wěn)重。當(dāng)主體色確定之后，考慮其它配色時(shí)，記得要留意其與主體色的關(guān)系，以及要呈現(xiàn)的效果。此外還要考慮配色中的哪種因素占主要地位，是明度、純度還是色相。

使用以下幾種搭配技巧可以快速地找到網(wǎng)頁配色的最佳方案。

（1）無色方式

所謂無色，是指在網(wǎng)頁設(shè)計(jì)中，不選擇彩色，只使用黑色、白色及灰色。這種設(shè)計(jì)方案簡(jiǎn)潔、質(zhì)樸，而又不失凝重感。此外，還透露出懷舊的感覺。例如：香奈兒公司的主頁，層次分明，給人以很強(qiáng)的視覺沖擊效果，散發(fā)出高貴的氣息。

（2）單色方式

該方案只選擇單一色相的色彩，然后對(duì)該色彩的明度及純度進(jìn)行調(diào)整，產(chǎn)生新的色彩，用于網(wǎng)頁中的不同位置，這樣的頁面看起來色彩統(tǒng)一，又有層次感。

（3）相鄰配色方式

這種配色方案比較簡(jiǎn)單，其原理是根據(jù)實(shí)際情況，在色相環(huán)上任意選擇3個(gè)或者4個(gè)相鄰顏色作為網(wǎng)頁的色彩。由于都是相鄰的色彩，所以色彩之間的過渡非常自然。

（4）互補(bǔ)配色方式

先選定一種色彩，然后選擇它的對(duì)比色，接著調(diào)整純度，用于網(wǎng)頁中的不同位置，和諧的對(duì)比能夠使整個(gè)頁面色彩豐富、不花哨。

2.3 頁面中各區(qū)域的色彩分配

每個(gè)頁面都是由多個(gè)區(qū)域組成的。由于每個(gè)區(qū)域的功能不同，在頁面中的地位也不同，所以色彩的分配也會(huì)不同。色彩的分配，可以按照以下原則來進(jìn)行。

（1）網(wǎng)頁內(nèi)容：內(nèi)容是展示信息的主要區(qū)域，背景顏色的明度應(yīng)該較高，文字顏色的明度則較低，背景與文字色彩的對(duì)比度要高。一般來說是白底黑字，如果是黑底，也可以是灰字。

有些網(wǎng)站為了讓瀏覽者對(duì)其留下深刻的印象，會(huì)在背景上做文章，例如，一頁空白的某處用了大塊的亮色，給人豁然開朗的感受。為了吸引瀏覽者的視線，突出背景，那么文字又要顯得暗一些，如此才能跟背景跳脫，便于閱讀。

網(wǎng)頁設(shè)計(jì)的初學(xué)者可能習(xí)慣使用漂亮的圖片作為網(wǎng)頁的背景，但是當(dāng)人們?yōu)g覽一些著名、專業(yè)的大型的商業(yè)網(wǎng)站時(shí)，會(huì)發(fā)現(xiàn)其運(yùn)用最多的是白色、藍(lán)色、黃色等單色，這樣會(huì)讓網(wǎng)頁顯得典雅、大方和溫馨，最重要的是極大地增進(jìn)了瀏覽者開啟網(wǎng)頁的速度。一般而言，網(wǎng)頁的背景色應(yīng)該柔和、素雅，配上深色的文字之后，看起來自然、舒適。

（2）網(wǎng)頁頭部：頭部是放置網(wǎng)頁標(biāo)志（LOGO）與橫幅（Banner）的地方，這是宣傳網(wǎng)站最重要的工具，所以這兩個(gè)部分一定要在頁面上脫穎而出。怎樣做到這一點(diǎn)呢？可以將它們做的像象形文字，色彩跟網(wǎng)頁的主體分離。有時(shí)為了更突出，也可以使用與主體色相反的顏色。

（3）導(dǎo)航菜單：這是網(wǎng)站的導(dǎo)游。瀏覽者在不同的網(wǎng)頁中跳轉(zhuǎn)，要了解網(wǎng)站的架構(gòu)與內(nèi)容，都必須通導(dǎo)航菜單。所以導(dǎo)航菜單可以使用具有跳躍性的色彩，吸引瀏覽者的目光，讓人感覺架構(gòu)清晰、層次分明。

（4）側(cè)欄：側(cè)欄主要顯示一些輔助信息，只要與網(wǎng)頁的主要內(nèi)容清楚地區(qū)分開來就可以了。

（5）頁腳：頁腳主要顯示版權(quán)信息，是次要的區(qū)域，不應(yīng)該喧賓奪主?？梢钥紤]使用與側(cè)欄相同的顏色。

（6）超鏈接：一個(gè)網(wǎng)站不可能只有單一網(wǎng)頁，所以文字與圖片的超鏈接也是不可缺少的部分?，F(xiàn)代人的生活節(jié)奏相當(dāng)快，無法浪費(fèi)太多時(shí)間去搜尋網(wǎng)站的超鏈接，因此要為它們?cè)O(shè)計(jì)獨(dú)特的顏色，讓人自然而然地去點(diǎn)選。若要明顯區(qū)分超鏈接文字與一般文字，最好設(shè)計(jì)不同的色彩。

3 總結(jié)

色彩擁有無窮的魅力，可以讓本身平淡無奇的事物瞬間變得活潑生動(dòng)。隨著科技的發(fā)展與普及，社會(huì)進(jìn)入信息時(shí)代，網(wǎng)絡(luò)世界也開始變得多姿多彩。人們不再滿足于簡(jiǎn)單的文字與圖片的組合，而是要求網(wǎng)頁看上去舒適、貼近主題，所以當(dāng)代設(shè)計(jì)者不僅要掌握基本的網(wǎng)頁制作技術(shù)，還需要了解網(wǎng)站的整體風(fēng)格、配色等設(shè)計(jì)藝術(shù)。然而設(shè)計(jì)不可能通過一句話、一本書、一個(gè)案例就得到提升，而是要不斷積累、增加閱歷、增長見識(shí)、提高審美、以量變實(shí)現(xiàn)質(zhì)變，最終設(shè)計(jì)出優(yōu)秀的作品。

參考文獻(xiàn)：

[1]胡崧，于慧.新銳網(wǎng)頁配色設(shè)計(jì)與案例分析[M].中國青年出版社，2007.

[2]溫馨工作室.頁配色實(shí)用手冊(cè)[M].科學(xué)出版社，2011.

[3]張春，黃勇等.網(wǎng)頁制作與網(wǎng)站建設(shè)寶典[M].電子工業(yè)出版社，2012.

[4]（美）Ann Navarrp，Tabinda Khan.著Web設(shè)計(jì)輕松進(jìn)階[M].電子工業(yè)出版社，1998.

作者簡(jiǎn)介：田亞非（1973-），女，北京人，人民中國雜志社網(wǎng)絡(luò)部技術(shù)編輯。