淺談網頁色彩的配色

王　萍

[摘要]在網頁設計中，色彩有著不可或缺的重要地位。提出色彩運用應注意的原則、色彩搭配的建議，從美學角度探討色彩在網頁設計中的運用，以發揮色彩在網頁中的視覺沖擊作用，以高超的配色技巧大膽創新，創造出更時尚、更具吸引力的網頁設計作品。

[關鍵詞]網頁設計 色彩 色彩搭配 視覺效果

中圖分類號：TP3 文獻標識碼：A 文章編號：1671-7597（2009）0110124-01

色彩是藝術設計中重要的視覺元素之一，好的色彩搭配能夠給人以強烈的視覺沖擊力和藝術感染力，留下深刻的印象。

繼書籍、報刊、廣播、電視等媒體，網絡成為新型傳播信息的載體。在網頁設計中也不例外，除文字、圖像、版式設計、聲音等元素外，色彩設計貫穿于以上各個元素之中，是不可或缺的重要元素。網頁設計中色彩搭配肩負著瀏覽者是否有興趣深入了解和閱讀的重要任務。

一、網頁色彩搭配作用

（一）突出主題：設計師可以利用色彩自身的表現力和情感，通過“色彩”這一無聲的語言告訴讀者所要表達的主題，使網頁形式與內容相得益彰，體現網站特色和風格，突出主題。

（二）劃分區域：網頁內容豐富、信息量大、種類繁雜，設計者可以通過不同的色彩進行網頁界面的視覺區域劃分，按其功能、種類進行網頁信息的分類劃分，使網頁有良好的易讀性和視覺導向性。利用網頁的色彩設計，可以給瀏覽者留下有序、完整的視覺印象。

（三）吸引視線：“遠看色彩近看花，先看顏色后看花，七分顏色三分花”，打開網站首先吸引瀏覽者的并不是漂亮的版式、有價值內容，而是整個網頁的色彩設計，因此，網頁的色彩搭配不但可以留下深刻印象而且能夠起到吸引視線的作用。

二、網頁色彩搭配原則

（一）整體性：網頁色彩要保持用色的整體性。同一個網站的不同頁面能夠大面積或小面積的使用同一色彩，甚至是一個小標志，通過色彩給瀏覽者一個說明，告知瀏覽者這幾個頁面之間的聯系，因而產生韻律、和諧之美。

（二）適應性：色彩本身有自己的情感，不同的色彩能夠表達不同的心理感受，色彩的選擇應有針對性，要針對自身的特點，選擇與主題相一致的色彩。

不同的類型的網站選擇不同的色彩，例如教育機構類網站一般選擇冷色系，以藍色、灰色居多，表達一種含蓄、睿智，有一種內斂的、濃濃的書香氣息；再例如面對大眾服務的咨詢類、娛樂類、搜索服務類網站大多以飽和、鮮艷的色彩為主。不同行業的網站用色也能夠體現其行業的特征，比如航空航天類網站同樣也是以象征天空的藍色為背景色；兒童類網站以色彩豐富的鮮艷色彩為主。同樣，網頁的色彩還要迎合瀏覽者的喜好，盡可能的采用符合瀏覽者審美傾向的色彩，以吸引其注意力。

（三）獨特性：在蕓蕓眾生的互聯網中，要想給瀏覽者留下深刻印象，能夠脫穎而出，就必須具備與眾不同的色彩設計，從而形成自己的風格與個性。在內容決定形式的基礎上，對網頁的色彩搭配進行大膽的嘗試與創新，使色彩的獨特性充分發揮魅力，創造出個性鮮明的網頁。在一些個人網站上有時會見到采用反差強烈的黑、白兩色搭配的網頁，產生了視覺張力，表達鮮明的個性。

三、網頁中色彩的配置

（一）主色與輔色：主體色應用在網頁設計中，可能是靜態的結構色彩、背景顏色、表格顏色，也可能是即時變化的插圖、照片、動畫廣告。網頁設計的顏色并不是越多越好，如果使用多種顏色會使整個頁面變得很“花哨”缺乏內在的美感，色彩一般控制在三種以內，通過調整色彩的相關屬性來產生變化。并且以一種顏色作為主體色彩并配以輔色，主體色彩就是具有行業特色的顏色。色彩搭配不僅體現著美學的訴求而且是可以強化的識別信號，能夠使瀏覽者加強對企業形象識別系統地認識。比如：可口可樂公司以紅色作為其公司的主體色，百事可樂則以藍色作為其公司的主體色。

（二）色彩的對比調和

1.運用色彩對比，強調視覺中心，突出主題。通常有明度對比、純度對比、色相對比、冷暖對比、面積對比，其中色相對比是最生動、效果最強烈的一種對比。比如：紅色與綠色，黃色與紫色、藍色與橙色等，色相對比關系越清晰，視覺效果就越強烈。運用對比強調視覺中心，一般來說，頁面中的導航色彩、靜態框架色彩比較重要，其次是信息區的背景色彩以及文字的色彩；如微軟的頁面設計就采用了對比比較強烈的藍色和紅色。

2.運用調和統一美化頁面效果。色彩的調和方法有：隔離調和、近似調和、同一調和、秩序調和等等，比如紅色和藍色是兩個對比強烈的顏色，分別加上黃色，變成橙色和綠色，使視覺效果達到調和。色彩的對比和統一是相互對立的兩個方面，既相互矛盾又相輔相成，當色彩搭配和諧時，視覺上有審美快感。

網頁色彩設計總的遵循的原則就是：對立中統一，具體有以下幾種手法：

1.同類色對比：運用同一色相，改變色彩的明度對比、純度對比，例如深淺不同的藍色搭配在一起，或是紅色、橘紅色的同一色相搭配在一起，對比不強烈，使頁面容易達到統一和諧的效果，這也是比較常見的配色方法。同一色相，明度和純度對比相似的會營造出色調柔和、神秘、深沉幽暗的不同氛圍。如聯想集團的藍色系列、海爾集團的綠色系列；同一色相，明度和純度對比強烈的配色能夠營造出活潑、有趣、輕快的氛圍。

2.鄰近對比：即色譜中鄰近顏色的對比，比如藍色和紫色、黃色和橙色等，這種搭配色彩豐富而不花哨，如荷蘭博物館的網頁色彩以藍色和紫色為主。

3.對比色對比：以一種顏色為主體色，再輔以對比色加以點綴于裝飾。色相對比色對比，明度和純度對比相似的配色也能夠達到柔和的網頁設計效果。色相對比色對比，明度和純度對比強烈的配色會營造出具有強烈的變化感和視覺落差的效果。強烈的色彩對比可以加深印象，產生特殊的色彩情感。為了能夠產生統一和諧的效果可以適當的調整色彩分布的面積、位置等。柯達公司運用藍色與黃色體現該公司的快樂與迅速的一貫形象。

4.無彩色和有彩色配色：無彩色通常指黑、白、灰。無彩色與有彩色進行搭配也是常見的配色形式。當網站采用多種不同色相或在畫面中包含強烈色彩時，都可以加入黑色，來穩住這些跳躍的色彩，使頁面和諧，以達到統一的視覺效果。一個名為progression的有關音樂俱樂部的網頁就是在深灰的背景下，配上鮮亮的黃綠色與湖藍色，整個頁面效果和諧響亮。通常在網絡上，以白色和灰色作為背景色比較常見，因為它們對視覺沒有刺激，適合閱讀。人們總是忽略它們，其實白與灰在協調各種色彩的關系上起了很大的作用，可以分割色彩，使對比弱化，以便容易在視覺上統一。

（三）背景色與文字：背景一般采用素淡清雅的顏色，避免使用花紋繁雜和高純度的色彩，同時背景要與文字的色彩有足夠的明暗對比，才能達到視覺清晰的效果。

參考文獻：

[1]梁景洪，網站設計與網頁配色實例精講[M].北京：人民郵電出版社.

[2]張帆、羅琦、宮曉東，網頁界面設計藝術教程[M]北京：人民郵電出版社.

[3]李莉婷，色彩構成[M].武漢：湖北美術出版社.