淺談色彩在網頁中的視覺設計

華柔遠+夏一霖

在視覺設計中的色彩搭配跟網頁設計中的色彩搭配會有很多的相似之處。因此我開始尋找把視覺傳達設計當中的色彩技巧運用到網頁設計的方法。經調查研究，此過程可分為三個階段。

第一階段：網頁創意風格定位階段

一：網頁設計為何需要創意風格定位

設計網頁前要注意，設計一個網站前首先需要了解是為什么東西設計網頁。每個網站都會有自己的風格。風格主要按該網頁展示內容設定，因此需要了解網站展示的內容來確定風格。

二：網頁設計如何來確定創意風格

網頁最常見的大致有辦公行政、服務、各式企業、純商業網站或產品推廣網站四大類。辦公行政展現的是嚴謹、大方、內容為本；服務型的是以浪漫、溫馨為主；各類企業一般都是采取清新、簡潔、大方（跟辦公行政類有點像，但形式上沒有那么嚴謹，跟公司發展路線有關）；純商業網站或產品推廣網站則是抒情活潑的風格，畫面上或許會大量采用圖畫。

第二階段：網頁主色調選擇階段

一：主色調含義跟作用

（一）：主色調作用

一個網頁必有其主色調，確認風格后，就可挑主色調，一般一個網站只有一個主色調，這樣好控制顏色搭配，若主色調多，頁面容易混亂。

為什么設計師一開始設計就要確定主色調呢？如何理解主色調的作用？從視覺設計角度打個比方，一個企業往往會設計一個logo代表它，logo設計越出色、越適合企業形象，就證明它的代表性很強。例，看到銅錢，也許會想到工商銀行logo也是銅錢的樣子。它會不知不覺的打廣告。經調查研究，主色調可分為兩種形式，一是明確純色的主色，二是有明確顏色變化方向的色調。

（二）：有明確純色的主色含義

網頁中有明確純色的主色一般代表性強，視覺性強。例如淘寶，它的主色便是橙色了。橙色就成為淘寶的代表色了，看到淘寶我們便能想到橙色，反之也是如此。這便是視覺設計的效果了。

（三）：有明確顏色變化方向色調的主色含義

這種主色調不一定有第一種那么明確，反而更容易產生朦朧美，它也許是一張有明確顏色主色調的背景圖片，也許是漸變色，或是明度變換后運用在網頁各處，在整體上形成一種主色調。兩者都能統一網頁的風格，烘托主題。

二：主色選擇步驟

（一）：主色選擇步驟概論

選擇主色有多種方法，可以從不同的角度選擇主色。或是從色彩基本構成要素（色相、明度、純度）著手。或是從色調著手。

經調查研究，最上手的方法是先從色調入手，選中色調后，再考慮色階、明度。此法挑主色的范圍可以簡單的一層層縮小，不會因為顏色范圍太大不知所措。純度又指飽和度，簡單理解為飽和度低，顏色暗沉；飽和度高，顏色鮮艷。一般純商業網站或產品推廣網站會使用較鮮艷的顏色吸引顧客。

（一）：色調選擇

色調有冷暖之分，冷色調多為安靜、清新、簡潔；暖色調多為活潑、視覺沖擊性強。例，環保型大多為綠色系，企業型大多為藍、綠色，許多會選擇跟logo搭配顏色。在確認啟用主色調之后，開始挑色階、明度。

（二）：色階選擇

色階表示圖像亮度強弱的指數標準，即顏色深淺。色彩千變萬化，即使選擇同一色調，其顏色的深淺所體現的視覺效果可能有截然相反的結果。同一色調，顏色深，一般會有沉穩、嚴肅的效果；顏色淺，一般會有一種鮮活的效果。

（三）：明度選擇

色彩的明度指的是色彩的明暗程度。因明度分為不同色系之間跟同一色系之間，為了不搞混，就從同一色系中的色彩明度選擇。例，暖色調中紅色系，粉紅色稍亮，紫紅色稍暗；冷色調中天藍稍亮，深藍稍暗。看起來純度明度相似，但明度跟純度卻不一定成正比。

第三階段：網頁配色選擇階段

一：配色的含義與作用

確認主色后，開始挑配色。一個網頁不可能只有一種顏色，網頁中有文字、logo、小圖標、導航欄、背景等方面需要配色。在避免配色搶奪視覺效果下，適當運用配色，保持視覺的平衡、色調統一，主色占大部分，配色占小部分。為了讓網頁更美觀，我們可以把視覺設計中學到的配色技巧運用到網頁設計中。

二：配色選擇方法

（一）：配色選擇方法

配色可以通過色相配色、明度配色、純度配色、強調冷暖色傾向配色、冷暖協調的配色。不同配色方法所呈現的視覺效果也不同。

（二）：色相配色

色相配色中單暖色調的配色，利用紅、橙、黃在畫面中占優勢地位，會給人溫暖感，有積極效果；在色相配色中單冷色調的配色，利用青、藍、紫的冷色在畫面中占優勢地位，會給人寒冷感，有鎮靜、安神的效果。

（三）：明度配色

色彩的明度能夠體現色彩的輕重感，明度配色能很好地表現網頁空間感。例，黑、白、灰的配色。明度配色也可以運用到導航欄上。選擇一種與主色適配的顏色作為導航欄背景色。因導航欄分多個模塊，每個模塊都可點擊進入下個頁面。在點擊的過程中，為了突出點擊的模塊，增添動感跟空間感，一般會在鼠標放在模塊上面的同時更換同一色系的明度。因需要保持網頁整體色調的統一，顏色不能隨意跟換，被更換的顏色大多與導航欄的顏色保持統一，在明度上進行變換。

（四）：純度配色

純度配色的作用是能簡單明了的看出網頁主題、重點。因為純度的對比會形成視覺焦點。如網頁產品展示圖片，產品是高純度比較鮮艷的顏色，背景一般使用低純度顏色。那么在人體視覺上很容易能忽略背景，更能突出產品。

（五）：強調冷暖色傾向的配色

如果一個網頁中把冷暖色調放在一起，冷暖對比則會比類似色的對比視覺效果更強烈，也會讓畫面更加豐富。當然，要注意冷暖色在網頁中的主次地位。小面積使用鮮艷的冷暖色對比色相，即便整體顏色偏素雅，也可以給人生機勃勃的感覺。例如小圖標的顏色運用，可參照此法。導航欄中，為了使畫面更加活潑，也可運用此法，鼠標放到模塊上，模塊的背景顏色與原來的顏色可進行冷暖對比。

（六）：冷暖協調的配色

冷暖協調的配色會給人較強的韻律感，穩定的感覺，此法雖然沒有以上三種方法的視覺沖擊力強，但它的平衡感最穩定，因此也是讓人看著最舒服的配色。黑色跟高純度色彩放一起，在視覺上讓高純度的色彩顯得更亮麗。因此在網頁設計上文字大多用黑色襯托其他顏色的亮麗。白色跟高純度色彩同一畫面時，可以在視覺上提高純色的明度，且會有透氣、舒暢的感覺，不會很沉悶。導航欄上，若背景色較深，黑色的文字無法很好的顯示，就可以運用白色文字，簡單又透氣。

在研究這個課題的過程中，主要通過了網頁的創意風格定位階段、網頁的主色選擇階段、網頁的配色選擇階段這三個步驟，把視覺傳達中的色彩技巧運用在網頁設計中，解釋了如何進行網頁創意風格定位，解釋了為何要選擇網頁的主色以及如何選擇主色，解釋了如何在網頁中進行配色。

參考文獻：

[1]曹軍，王詩彥，劉志農，陳德潤，色彩形態構成[M]，中國民族攝影藝術出版社。

[2]曹軍，王詩彥，劉志農，陳德潤，色彩形態構成[M]，中國民族攝影藝術出版社。

[3]張曉景，設計師專業色譜與配色設計[M]，電子工業出版社，第1版（2011年10月1日）

[4]宋玉潔，設計密碼：綜合配色完全攻略[M]，清華大學出版社，2012年

[5]張曉景，設計師專業色譜與配色設計[M]，電子工業出版社，第1版（2011年10月1日）