網站設計中的色彩搭配技巧探討

張 爽

(遼寧廣播電視臺,遼寧 沈陽 110000)

人與人第一次交往中給人留下的印象，在對方的頭腦中形成并占據著主導地位，這種效應即為第一印象效應，.同樣的，網站的視覺美觀也有這樣的作用。在人們訪問網站的同時，首先映入眼簾的便是網站的整體外觀，美觀舒適的網站設計會給訪問者形成良好的印象，對于其他內容的觀看也是帶著這種好印象開始的，而這種好印象主要是由合理的色彩搭配來營造的，色彩能夠傳遞信息，也能夠引起人們的共鳴。因此，在網站設計中色彩搭配有著至關重要的作用。

一、認識色彩

1.物理學角度的色彩

（1）可見光。可見光通過字面上的理解很簡單，即為人眼可以感知的電磁波譜的部分，它沒有精確的范圍；一般人的眼睛可以感知的電磁波的波長在400到700納米之間，但還有一些人能夠感知到波長大約在380到780納米之間的電磁波。

（2）光的吸收與反射。在光波投射到某物體時會發生折射的現象，由于不同物體所具有的結構與特性不同，因此在反映光波時就造成了我們肉眼所看到的不同的顏色。例如自然中最常見的樹葉，除了其本身具有的葉綠素之外，很大一部分是因為光波的折射與反射現象，樹葉吸收了光波中的一部分，而反射出了綠色光波，就是我們所看到的綠色樹葉。

2.色彩的特征

色彩在色彩學中可以通過三個屬性來描述，分別是色彩的色相、明度和純度。從功能上看，色彩也具有冷暖、輕重、軟硬和縮擴的特點，例如在網站設計中就可以根據不同的顏色來表達不同的主題，其中采用橙色、黃色或者紅色等暖色系就可以給人一種溫馨溫暖的畫面，藍色、黑色等冷色系則可以給人呈現出時尚、都市、干練等印象。

（1）色相。指色彩的容貌，用來區分不同的顏色，熟知的紅、橙、黃、綠、青、藍、紫就是色彩的基本稱謂，不同的單色混合就出現另外一種色相。

（2）明度。是色彩的亮度，淺而亮的顏色明度就高，深而暗的顏色明度則低。明度可以影響人們的情感變化，相同的色相也可以有不同的明度，明度高給人更加明快與活潑，明度低則感覺更深沉、莊重，適當調節明度還能夠營造出夢幻、朦朧的效果。

（3）純度。指色彩鮮艷的程度，與明度不同，亮度越高，色相的純度反之就越低。

3.色環

色環就是在彩色光譜中使首尾的紅色與紫色連接在一起形成一個環，其中兩兩交互形成新的顏色，通常色環包含12種不同的顏色。色環將配色的效果顯示的非常明了，提高了配色的效率。

4.心理學上的色彩

色彩有著非常顯著的心理效應，不同的顏色能夠表達出豐富的人的情感，至于具體的顏色所代表的含義也會隨著地域與傳統的不同而有所差異。顏色會引發聯想，看到黃色我們就能想到秋天，看到紅色就想到太陽等。因此，在網站設計中利用色彩的心理效應更有利于加深受眾的印象。

二、網站設計中色彩搭配原則

在網站設計中選擇合適的色彩搭配非常重要，在眾多色系中正確挑選出適合的搭配，就要根據網站的內容特點以及受眾群體來進行判斷。成功的網站設計不僅要能夠給人留下強烈的印象，還要掌握好適度的視覺效果，以免造成反效果。網站設計中可以遵循以下原則進行色彩搭配。

1.色彩獨特原則

在設計之前首先應明確了解網站的主題，要有一個清晰的設計思路，以突出主題為目的，考慮選用的色彩，形成獨特個性的網站風格。例如從事金融經濟的公司網站，一般多采用灰色、藍色等冷色系，在體現公司文化和內涵的同時，也給訪問者以沉穩、專業的印象。

2.色彩鮮明原則

網站中色彩亮麗鮮明能夠讓訪問者在進入網站時首先眼前一亮，通過視覺沖擊給人留下深刻的印象。在色彩鮮明上拿捏適度，讓人看起來舒適又亮麗是網站設計工作者需要長期累積的經驗過程。

3.色彩搭配合理原則

網站作為開放式交流平臺，在進行網站設計中選擇色彩要根據內容主題來確定，同時也要考慮到不同地域和傳統對于色彩理解的不同與禁忌。在選擇色彩搭配上，不能盲目求新，還要講究合理性，體現個性之余給人舒適感。例如女性購物網站就常用粉色為主色，合理搭配其他暖色系的顏色，給人一種柔和、溫馨的感覺。

4.色彩的藝術原則

網站的設計也是一種藝術，也應遵循藝術的規律。網站不僅要具有獨特的風格和深刻的主題，還應滿足人們的審美需求。在進行網站設計時可以大膽創新，設計出既符合要求、又具有藝術特色的網站。

三、網站色彩搭配的應用與技巧

1.色彩搭配方法

網站的色彩搭配非常重要，合理的色彩搭配能夠給人留下良好的印象，以下是常見的色彩搭配方案。

（1）近似色。指兩種相近的顏色，即同為冷色系或同為暖色系。在網站設計中采用近似色的搭配方法使顏色搭配更為融洽，色彩更加統一。

（2）對比色。在色環中兩兩相對的顏色是對比色。對比色能夠產生強烈的視覺沖擊效果，合理的對比色搭配能夠凸顯出網站的個性與特色。例如紅、黃、藍三種顏色對比感最為突出，成功的對比色應用不僅不會使人們感覺視覺上的不舒服，還會對突出主題具有畫龍點睛之妙。

（3）分離補色。分離補色可以由兩種或三種顏色構成，是由色環上左邊或右邊上的色相進行組合。分離補色的特點在于它同時具有對比色與近似色的特點，既可以起到強烈對比突出個性的作用，也具有近似色和諧融洽的特點。

（4）主色與輔色混搭。在網站設計中也可以選擇一種顏色為主要顏色，同時用其他顏色作為輔助顏色與其混合搭配，做到雜而不亂，營造出繽紛活躍的效果。

2.網站設計配色方案

網站設計在選擇色彩搭配時應以網站整體的風格為依據，合理選擇配色。應做到網站的主題、風格與配色一致，則會達到網站整體和諧美觀的效果，成功的色彩搭配更會引起與訪問者的共鳴。

（1）選擇色調。色調是指顏色之間的整體關系構成，是畫面中顏色集成統一的趨向，這種統一的顏色趨向也是主要帶動人們情感的線索。例如在一幅顏色繽紛的畫面中，總體顏色趨向金黃色，就會給人一種黃昏日落的感覺，其中色調明暗與濃度的調節也能夠體現出不同的主題與情感。因此，在網站色彩搭配中可以根據主題與內容選擇適合的色調。

（2）選擇色相。色彩能夠讓人們產生聯想并傳達出某種情感，因此在選擇色彩搭配時應考慮網站想要傳達的主題與針對受眾的特點。色相主要可分為冷色系和暖色系。冷色系包括黃綠、綠、藍綠、藍、藍紫等顏色，冷色系的顏色能夠表現出沉穩、冷靜、清爽，也能體現時尚、專業等情感；暖色系基本上是由太陽的顏色衍生出來的，包括紅紫、紅、紅橙、橙、黃橙等顏色，給人溫暖、舒適、富有朝氣的感覺。

3.如何巧妙的搭配色彩

通常在網站網頁設計時，配色占據很重要的位置，要巧妙地搭配色彩，才會有更多的人點擊和瀏覽網站。

（1）色彩的調和。兩種以上（包括兩種）的色彩巧妙搭配，形成統一諧調的效果，我們將這種結果叫做色彩調和。本文介紹了如下四種色彩調和的技巧。①同種色調和：同一色相、不同明度和純度的色相調和，會形成有條理的漸進，明度與純度都會發生變化，彌補了相同色調的單一感。相同的色相，通過明度的黑白灰或者純度的不同來稍微加以區別，形成一種微妙的韻律感。②類似色的調和：在色環里，色相之間越是靠近越容易調和，所以使用了類似的顏色讓頁面看著和諧。類似色相比同類色在色彩間的搭配度要大，色彩豐富、富于變化。

③對比色的調和：在色環里，相對位置的顏色被稱為對比色，富有強烈的色彩對比，調和使用對比色時，為使頁面不會太突然，應采用對比鮮明的色彩。④漸變色的調和：顏色層次漸變的色彩被稱為漸變色。兩種顏色之間的混色即是色彩漸變，色彩漸變可以有規律的在不同顏色中體現，黑暗和明亮的色彩會產生距離感和立體的視覺效果。這樣不僅柔化了視覺感，也增強了空間感，反映了審美的節奏和韻律，實現了統一整體頁面的目的。

（2）色彩的對比

在特定的條件中，在不同的顏色之間的對比度將具有不同的效果。不同純色對比會產生不同的色彩效果，很容易使人在視覺和心理上得到滿足。色彩對比的范圍并不限于色的本身，但也指其界面構成的面積、形狀、位置和色調、明度、純度間的差距，使網頁色彩搭配增加更加豐富多彩的頁面。①色相對比：色相間的差別被稱為色相對比。在確定主色相的同時，也要顧及另外顏色與主色相間的關系，體現其內容和效果，從而提高其性能。不同的色相對比會取得不同的結果，越接近的兩種色，更能體現出柔和的對比，越接近補色對比效果越強烈。②明度對比：明度對比度可分為：彩色差與非彩色差之間的明度相比較。指的是色彩明暗間的差別所產生的比較，是形成一個適當的黑、白、灰效果頁面的主要方法。在視覺上對色彩的層次以及空間造成影響主要原因為明度對比，如檸檬黃明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。③純度對比：不同色彩間純度差別產生的對比被稱為純度對比，高、中、低三種純度是色彩純度的只要分類。純度對比能夠使色彩效果更明確。④面積對比：同種色彩，其面積范圍大，明度及純度越強，面積范圍小，則反之。當面積大時，亮色顯得輕，暗色咋顯得較重。我們將這種現象叫做色彩的面積效果。不同色彩在網頁上占據的面積大小、多少被稱為面積對比，網頁的層次會受到它們的影響。

4.色彩搭配的注意事項

在設計網站時，要特別注重網頁顏色的設計，設計不好會使整個網頁看起來眼花繚亂，缺少了協調感，雖然表面看起來好像很豐富，卻少了內在的美，設計中并非顏色用的越多越好，通常一個網頁中存在3到4種顏色就可以了，通過對不同顏色屬性的調整來達到想要的效果。為了使網頁看起來更加吸引眼球，盡可能避免使用復雜的圖案、圖片作為背景色，應采用一些能夠與文字產生強烈對比的背景色，這樣會提高可視效果。

四、結語

色彩的運用展現的不僅是美觀的外表，還能夠通過色彩的選擇表達不同的情感意向。在網頁設計中利用色彩搭配的原則、技巧與方法，充分發揮色彩搭配的優勢，可使網站形象更加生動，突出主題內容，給訪問者留下良好的印象。

[1]田芳.網頁色彩設計的研究[J].黑龍江科技信息，2009，(28).

[2]何建華.視覺有溫度——網頁色彩情感研究[J].韶關學院學報，2010，(2).

[3]薛曼君.網頁設計中的視覺傳達應用[J].科技資訊，2010，(12).

[4]陳陽.現代多媒體技術在網站藝術設計中的應用[J].中國西部科技，2009，(10).

[5]劉艾俠.網頁設計中的幾個美學問題[J].科技風，2010，(17).