華柔遠+夏一霖

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

第一階段：網(wǎng)頁創(chuàng)意風格定位階段

一：網(wǎng)頁設計為何需要創(chuàng)意風格定位

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

二：網(wǎng)頁設計如何來確定創(chuàng)意風格

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

第二階段：網(wǎng)頁主色調(diào)選擇階段

一：主色調(diào)含義跟作用

（一）：主色調(diào)作用

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

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

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

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

（三）：有明確顏色變化方向色調(diào)的主色含義

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

二：主色選擇步驟

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

選擇主色有多種方法，可以從不同的角度選擇主色?；蚴菑纳驶緲嫵梢兀ㄉ唷⒚鞫?、純度）著手?；蚴菑纳{(diào)著手。

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

（一）：色調(diào)選擇

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

（二）：色階選擇

色階表示圖像亮度強弱的指數(shù)標準，即顏色深淺。色彩千變?nèi)f化，即使選擇同一色調(diào)，其顏色的深淺所體現(xiàn)的視覺效果可能有截然相反的結(jié)果。同一色調(diào)，顏色深，一般會有沉穩(wěn)、嚴肅的效果；顏色淺，一般會有一種鮮活的效果。

（三）：明度選擇

色彩的明度指的是色彩的明暗程度。因明度分為不同色系之間跟同一色系之間，為了不搞混，就從同一色系中的色彩明度選擇。例，暖色調(diào)中紅色系，粉紅色稍亮，紫紅色稍暗；冷色調(diào)中天藍稍亮，深藍稍暗?？雌饋砑兌让鞫认嗨?，但明度跟純度卻不一定成正比。

第三階段：網(wǎng)頁配色選擇階段

一：配色的含義與作用

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

二：配色選擇方法

（一）：配色選擇方法

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

（二）：色相配色

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

（三）：明度配色

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

（四）：純度配色

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

（五）：強調(diào)冷暖色傾向的配色

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

（六）：冷暖協(xié)調(diào)的配色

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

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

參考文獻：

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

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

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

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

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