3.2 網(wǎng)頁配色規(guī)范

配色，簡單來說就是將合適的顏色擺在適當?shù)奈恢谩５氪钆浜蒙蕝s并不容易。大多數(shù)人對色彩的敏感度往往大于文字，因此在網(wǎng)頁設(shè)計中，網(wǎng)頁配色就顯得尤為重要，通過配色能調(diào)節(jié)頁面視覺的舒適度，是吸引瀏覽者目光的重要手段。

通常網(wǎng)頁的配色基礎(chǔ)為三原色（RGB），下面從三原色開始講解網(wǎng)頁配色的原則及方法。如圖3-4所示的色環(huán)顯示了最基礎(chǔ)的顏色種類。

黃色：給人以青春、樂觀、豁達的感覺，常被用作點睛之色。

紅色：給人以活力、速度、緊迫的感覺，常用于打折促銷等。

藍色：給人以信任、安全、有底蘊的感覺，常用于銀行、安全中心等機構(gòu)。

綠色：給人以生命力、輕松、天然的感覺，常用于保健品等行業(yè)。

橙色：給人以積極、進取、有活力的感覺，常用于喚起行動，如按鈕的顏色常用橙色。

粉色：給人以浪漫、女性化的感覺，常用于女性消費行業(yè)、女性產(chǎn)品等。

黑色：給人以沉重、有影響力、嚴肅的感覺，常用于奢侈品營銷等。

紫色：給人以冷靜、神秘的感覺，常用于美妝等女性產(chǎn)品。

3.2.1 網(wǎng)頁配色的原則

關(guān)于網(wǎng)頁配色，首先要區(qū)分一下網(wǎng)頁設(shè)計與平面設(shè)計的區(qū)別。網(wǎng)頁是顯示在顯示器上的，設(shè)計時受顯示器屏幕空間和互聯(lián)網(wǎng)傳輸帶寬的約束。其次，網(wǎng)頁配色要以Web顏色為基礎(chǔ)，色彩種類有限；而平面設(shè)計的顏色種類卻不受制約。因此網(wǎng)頁配色有自己獨特的搭配原則和技巧。

1．配色要圍繞主題來選擇

不同的網(wǎng)頁主題要選擇不同的色彩進行表達。例如，科技類網(wǎng)站多以藍色調(diào)為主，能夠傳達深遠、沉靜、睿智的理念。再如，過年時網(wǎng)站多以紅色調(diào)為主，能夠傳達熱鬧、溫暖、吉祥的年味。

2．配色要保持風(fēng)格統(tǒng)一

色彩的風(fēng)格很多，如古典風(fēng)格、動漫風(fēng)格、時尚風(fēng)格等，在同一頁面中切忌將不同風(fēng)格混雜，那樣會使頁面失去信息傳遞的方向，給人以混亂的感覺。

3．配色要突出藝術(shù)感

單純用文字和圖片堆砌的頁面會讓瀏覽者產(chǎn)生厭煩的情緒，通過藝術(shù)處理，讓文字和圖片以優(yōu)美的方式展現(xiàn)出來，能讓瀏覽者身心愉悅，更好地接受網(wǎng)頁傳遞的信息。

3.2.2 網(wǎng)頁配色的常用方法

1．規(guī)劃頁面整體色調(diào)

在網(wǎng)頁設(shè)計中，主題是靈魂，布局和配色是表達手段。規(guī)劃頁面整體色調(diào)是網(wǎng)頁設(shè)計的開始，需要從顏色選擇和各自所占面積等因素入手。一般來說，網(wǎng)頁設(shè)計主張色彩搭配選擇不超過3種顏色（主色、輔助色、點綴色），在配色中主色占大面積，以主色為中心選擇其他顏色，形成網(wǎng)頁整體色調(diào)。不同的主色調(diào)表現(xiàn)不同的氣氛，如采用紅色系作為主色，頁面呈現(xiàn)熱鬧、溫暖的感覺。

2．合理搭配背景色與前景色

在頁面設(shè)計中，背景主要是襯托作用，在構(gòu)造前景主體時，往往會推遠、虛化背景，這就需要前景色和背景色要有一定的對比，突出前景色，避免喧賓奪主。

3．基礎(chǔ)配色方法

1）單色搭配。

這是由一種色相的不同明度組成的搭配。這種搭配能很好地體現(xiàn)顏色的明暗變化。單色搭配可通過調(diào)整色彩的飽和度和透明度等產(chǎn)生層次變化，如圖3-5所示。

2）近似色搭配。

所謂近似色，就是在色環(huán)上相鄰近的顏色，如圖3-6所示的橙色、褐色、黃色搭配，這種搭配具有低對比度，較和諧，讓人賞心悅目。

3）對比色搭配。

這是由色環(huán)中相對的兩個色相組成的搭配。對比色可以突出重點，產(chǎn)生了強烈的視覺效果。在設(shè)計時一般以一種顏色為主色調(diào)，對比色作為點綴，可以起到畫龍點睛的作用，如圖3-7所示。

4）分裂補色搭配。

同時用補色及類比色的搭配確定顏色關(guān)系，稱為分裂補色搭配。這種顏色搭配既有類比色的低對比度，又有補色的力量感，形成一種既和諧又有重點的顏色關(guān)系，如圖3-8所示。

4．恰當運用配色的平衡

配色的平衡就是顏色的強弱、輕重、濃淡這些關(guān)系的平衡，運用恰當會使整個畫面變得美觀、自然和舒適。

1）保持冷暖色調(diào)平衡。

暖色調(diào)給人以陽光的感覺，冷色調(diào)給人以清涼的感覺，要合理搭配冷暖色調(diào)，平衡視覺心理，過冷或過暖都會導(dǎo)致情感失衡。如圖3-9所示為同一導(dǎo)航區(qū)域中的兩個圖片超鏈接。通過Photoshop拾色器可以發(fā)現(xiàn)，紅色是偏冷的紅，藍色是偏冷的藍，這樣就保證了圖片在一個調(diào)子上。

2）利用互補色保持色調(diào)平衡。

利用互補色也能夠?qū)崿F(xiàn)色調(diào)的平衡，能補充色彩情感表達的缺失感。調(diào)節(jié)互補色的明度、飽和度能改變情感的走向。例如，在圖3-10中都采用暖色，關(guān)注的重點不是很明顯；在圖3-11中利用冷色來突出重點，實現(xiàn)了色調(diào)的平衡。在設(shè)計中，一般用暖色作為前景色，冷色作為背景色。

3）通過添加黑、白、灰保持色調(diào)平衡。

在色彩搭配中，往往會出現(xiàn)色彩辣眼睛的情況，最明顯的就是互補色搭配時。平衡這種色調(diào)時，可通過添加中性色黑、白、灰來實現(xiàn)。

將RGB色盤調(diào)成灰度模式后，可以檢測畫面的黑白灰層級關(guān)系和比重。圖3-12中的漸變是按照黑白灰平衡的原理，漸變出來的顏色不會亂，很有韻律，所以黑白灰平衡能有效把控色彩的穩(wěn)定，控制互補色的平衡。想要讓色彩更突出或更協(xié)調(diào)，可單獨使用黑、白、灰，也可綜合使用黑、白、灰。

網(wǎng)頁色彩搭配是一個高難度的技術(shù)活，要讓色彩在視覺上達到平衡，布局完美，需要設(shè)計師們不斷地嘗試、琢磨、積累、創(chuàng)新。