淺談色彩在網(wǎng)頁(yè)中的視覺設(shè)計(jì)

華柔遠(yuǎn)+夏一霖

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

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

一：網(wǎng)頁(yè)設(shè)計(jì)為何需要?jiǎng)?chuàng)意風(fēng)格定位

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

二：網(wǎng)頁(yè)設(shè)計(jì)如何來確定創(chuàng)意風(fēng)格

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

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

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

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

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

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

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

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

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

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

二：主色選擇步驟

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

選擇主色有多種方法，可以從不同的角度選擇主色?；蚴菑纳驶緲?gòu)成要素（色相、明度、純度）著手?；蚴菑纳{(diào)著手。

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

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

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

（二）：色階選擇

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

（三）：明度選擇

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

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

一：配色的含義與作用

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

二：配色選擇方法

（一）：配色選擇方法

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

（二）：色相配色

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

（三）：明度配色

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

（四）：純度配色

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

[4]宋玉潔，設(shè)計(jì)密碼：綜合配色完全攻略[M]，清華大學(xué)出版社，2012年

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