淺談網頁的色彩搭配

摘 要：網站給人留下的第一印象，既不是豐富的內容，也不是合理的版面配置，而是網站所呈現(xiàn)的色彩。網頁設計的成功與否，在某種程度上取決于設計者對色彩的運用與搭配。本文擬就網頁的色彩搭配談談自己的看法。

關鍵詞：網頁設計；配色原則；配色技巧

中圖分類號：TP393.092

1 網頁色彩基礎知識

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

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

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

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

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

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

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

2 網頁色彩選擇的原則及搭配技巧

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

2.1 網頁色彩選擇與搭配的原則

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

（1）符合網站的風格和主題

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

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

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

（3）色彩應該與眾不同

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

2.2 網頁色彩搭配的技巧

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

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

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

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

（1）無色方式

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

（2）單色方式

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

（3）相鄰配色方式

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

（4）互補配色方式

先選定一種色彩，然后選擇它的對比色，接著調整純度，用于網頁中的不同位置，和諧的對比能夠使整個頁面色彩豐富、不花哨。

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

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

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

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

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

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

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

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

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

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

3 總結

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

參考文獻：

[1]胡崧，于慧.新銳網頁配色設計與案例分析[M].中國青年出版社，2007.

[2]溫馨工作室.頁配色實用手冊[M].科學出版社，2011.

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

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

作者簡介：田亞非（1973-），女，北京人，人民中國雜志社網絡部技術編輯。