彭慧/吉首大學美術學院

隨著互聯(lián)網(wǎng)的發(fā)展與成熟，人們已經(jīng)習慣于通過網(wǎng)頁了解世界，網(wǎng)頁也已經(jīng)成為絕大多數(shù)企業(yè)傳遞企業(yè)信息與塑造企業(yè)形象的主要方式之一。網(wǎng)站作為新興媒體（相對于傳統(tǒng)的報刊、雜志等來說）有著更多的新興元素，比如動畫、聲音等等。而色彩是這些元素中最具識別度與視覺沖擊力的元素，優(yōu)秀的色彩搭配不僅可以激起瀏覽者的興趣提升網(wǎng)頁的視覺美感，還能有效地傳達企業(yè)形象。因此，在網(wǎng)頁設計中科學、合理地色彩搭配應用起著至關重要的作用。

1 基本理論闡述

色彩是設計中不可或缺的元素。網(wǎng)頁設計是伴隨計算機的產(chǎn)生而出現(xiàn)的新型設計類別。人們在工作、娛樂以及學習生活中會使用到各種不同類型的網(wǎng)站，不同類別的網(wǎng)站的功能不同，所傳遞的信息與風格也不同。色彩會產(chǎn)生強烈的視覺沖擊，是網(wǎng)頁設計中的重要元素，對網(wǎng)頁的風格起到至關重要的作用。因此，網(wǎng)頁中的色彩搭配是互聯(lián)網(wǎng)時代一個倍受關注的課題。網(wǎng)頁設計所運用的色彩方案是感性與理性有機結合的結果。通過系統(tǒng)地學習設計色彩搭配原理，人們總結出一系列色彩搭配技巧，用以完善網(wǎng)頁設計中色彩應用的理念。

1.1 網(wǎng)頁設計的基本理論

瀏覽器中所呈現(xiàn)的畫面便是網(wǎng)頁，網(wǎng)頁也是瀏覽器所解析的一份html文件。大多數(shù)網(wǎng)站是由多個網(wǎng)頁組合而成，但單個網(wǎng)頁也可以稱作網(wǎng)站。網(wǎng)頁設計也就是UI設計，即用戶交互界面的設計。網(wǎng)頁設計是一種基于新媒體的新型設計，不同于傳統(tǒng)媒體如報紙、電影電視等[1]。其優(yōu)點是既具備傳統(tǒng)媒體的優(yōu)勢，又能實現(xiàn)更直接、高效的傳播。網(wǎng)頁設計具有強大的視覺效果和互動性，能夠廣泛涉及受眾。設計網(wǎng)頁需要結合感性思考和理性分析，過程相對復雜，方向需要根據(jù)網(wǎng)站主題確定，制作則是實現(xiàn)設計的關鍵。因此，設計網(wǎng)頁需要制定明確的主題和目標，并規(guī)劃網(wǎng)站的整體結構和風格定位。

1.2 色彩的相關理論

美國光學學會（Optical Society of America）的色度學委員會曾經(jīng)把顏色定義為：顏色是除了空間的和時間的不均勻性以外的光的一種特性，即光的輻射能刺激視網(wǎng)膜而引起觀察者通過視覺而獲得的景象。色彩知覺不僅與事物本來的色彩特性有關，還會受時間、空間以及外部環(huán)境的影響，同時還受個人的經(jīng)歷、記憶以及視覺靈敏度等各種因素的影響。色彩可以分為有彩色和無彩色兩大類。光譜中的所有顏色都屬于有彩色，基礎色為紅、綠、黃、藍和紫，不同比例的基礎色混合可以產(chǎn)生各種彩色[2]。黑、白和灰色屬于無彩色，但它們可以在彩色中改變明度和純度，因此在心理學、生理學和化學上可視為完整的色彩性質(zhì)。在網(wǎng)頁色彩體系中，黑白灰三色也扮演著重要的角色[3]。

1.3 網(wǎng)頁設計中的色彩搭配

網(wǎng)頁設計是將互聯(lián)網(wǎng)技術與藝術設計相融合的跨學科領域，其在實踐中涵蓋了互聯(lián)網(wǎng)的理性特質(zhì)和藝術設計的感性特點。好的色彩搭配會對人產(chǎn)生較強的視覺刺激，瀏覽者瀏覽網(wǎng)站時，會首先被好的色彩搭配所吸引，色彩搭配在網(wǎng)頁設計中起著至關重要的作用。色彩作為一種視覺語言，不僅起著美化網(wǎng)頁整體的作用還具有突出重點內(nèi)容的功能。因此，設計師在進行設計網(wǎng)頁時，必須重視網(wǎng)頁中的色彩搭配與運用，應本著和諧、平衡以及突出重點的原則，將色彩進行搭配組合進而形成功能與形式并存的網(wǎng)頁。

2 網(wǎng)頁設計色彩搭配的重要性

近些年來，網(wǎng)絡早已蔓延至生活的方方面面，人們對網(wǎng)頁的要求早已不滿足于簡單的元素堆砌，他們對網(wǎng)頁是否美觀的要求越來越高。色彩是美學的重要組成部分，不同的顏色能表現(xiàn)不同的情感，根據(jù)網(wǎng)頁的內(nèi)容進行合理的色彩搭配，使頁面所傳達的信息與視覺效果相統(tǒng)一，能更快地與人們產(chǎn)生心靈共鳴，更有效地進行信息傳達與情感表達。色彩作為網(wǎng)頁設計中最具視覺沖擊力的元素，還可以起到提高用戶瀏覽效率、對內(nèi)容進行分類的作用。具體來說，色彩在網(wǎng)頁設計的重要性主要體現(xiàn)在以下幾方面。

2.1 營造風格與表達主題

我們處在五彩斑斕的世界，色彩不僅會讓我們有視覺美的感受，也會觸動我們的心靈，讓我們展開對色彩背后內(nèi)容的想象。以梅賽德斯-奔馳的官網(wǎng)網(wǎng)頁為例（圖1），該網(wǎng)頁整體上以黑色為主，以不同車型的色彩作為輔助，黑色一直以來都是高貴與典雅的代表，在視覺上又不至于搶了宣傳圖的風頭，將車身顏色與黑色相結合既體現(xiàn)了品牌高端的路線，配合車型色彩又準確地傳達了頁面所想傳達的轎車廣告信息。

圖1 梅賽德斯-奔馳官網(wǎng)

2.2 明確頁面分區(qū)功能

網(wǎng)頁具有內(nèi)容豐富、信息含量大的特點，設計師可以利用不同色彩所帶來的不同心理感受對網(wǎng)頁不同的功能分區(qū)賦予不同的顏色，讓網(wǎng)頁達到主次分明、視覺流程完整的效果，讓網(wǎng)頁具有優(yōu)秀的易讀性和導向性。

2.3 視覺引導與強調(diào)內(nèi)容

在網(wǎng)頁設計中要充分發(fā)揮色彩的功能對重要信息進行強調(diào)，起到引導用戶瀏覽順序的作用，這對品牌推廣新產(chǎn)品是有利的[4]。對需要強調(diào)的內(nèi)容選擇更為顯眼的色彩進行強調(diào)，將用戶的注意力引導到所強調(diào)的內(nèi)容上去，可以從顏色的鮮艷程度以及色塊大小方面入手。該圖片中背景色為視覺效果較弱的灰色（圖2），瀏覽者第一眼肯定是被鮮艷的產(chǎn)品圖吸引；右側小塊面的產(chǎn)品圖也是利用了與灰色的對比，小塊面的色彩既能讓瀏覽者注意到產(chǎn)品圖，卻也不會喧賓奪主蓋過主打產(chǎn)品。

圖2 圣羅蘭美妝官網(wǎng)

3 網(wǎng)頁設計色彩搭配原則分析

色彩搭配是一項藝術含量很高的工作，具有很強的感性特征，但是作為設計作品的一部分它又必須具有理性特征。因此，在進行色彩搭配時既要考慮到網(wǎng)站本身的特點，又要考慮受眾的審美和心理方面的特點，從而做出既具有網(wǎng)頁本身特點又符合受眾審美的網(wǎng)頁設計。

3.1 符合網(wǎng)站主題、體現(xiàn)網(wǎng)站個性

視覺傳達設計是有明確的主題和內(nèi)容的設計，在設計時應當利用各種視覺元素將所需傳達的信息準確無誤地傳達給受眾。這就要求主題設計者能夠運用設計手段表現(xiàn)主題，使主題能被人們在短時間內(nèi)快速接受。這就要求在設計作品不僅要簡潔、易識別，具有相當?shù)乃囆g性，還要有強烈的視覺沖擊力與獨特的風格，體現(xiàn)出設計作品的主題和個性。

作為視覺傳達設計范疇的網(wǎng)頁設計，其最終目的是準確地表達網(wǎng)頁主題、傳達信息，起到與用戶溝通的作用。為了達到這種目的與作用，一方面要對網(wǎng)頁內(nèi)容進行邏輯性處理，符合用戶獲取信息的生理與心理習慣，讓用戶能更快地理解與接收網(wǎng)站信息；另一方面通過對網(wǎng)頁視覺元素的藝術性處理，打造出體現(xiàn)設計主題的視覺效果，吸引用戶的視覺注意力，加深用戶對網(wǎng)頁信息的印象，幫助用戶理解網(wǎng)頁內(nèi)容。只有對邏輯與視覺進行了有機且和諧的處理，才能更好的表現(xiàn)網(wǎng)站主題。

只關注網(wǎng)頁設計中的邏輯性而忽視其中的藝術性，或者只重視網(wǎng)頁設計的藝術性而忽視其中的邏輯性，都難以達到準確傳達網(wǎng)頁信息的效果，更無法給用戶留下深刻的印象，這樣設計出的網(wǎng)頁界面容易出現(xiàn)同質(zhì)化嚴重的問題，無法完成網(wǎng)頁的最終目的。要使網(wǎng)頁設計從視覺上體現(xiàn)優(yōu)秀的引導力，準確地突出網(wǎng)頁主題，可以通過把握網(wǎng)頁色彩關系中的主次關系、空間虛實、視覺順序以及邏輯關系來實現(xiàn)，充分發(fā)揮色彩所具備的功能，強化網(wǎng)頁傳遞信息的功能。

3.2 形式與內(nèi)容的統(tǒng)一

設計是內(nèi)容與形式的統(tǒng)一。內(nèi)容是指設計作品中的一切要素，是構成設計作品的基礎條件，主題、色彩、形象、題材等要素組成了設計的內(nèi)容。形式就是設計作品的表現(xiàn)方式，例如設計語言、結構以及風格等等。形式由內(nèi)容決定，同時又能優(yōu)化內(nèi)容。優(yōu)秀的設計是形式與內(nèi)容的完美結合。

優(yōu)秀的網(wǎng)頁設計前提是形式美與網(wǎng)頁主題內(nèi)容相契合。只注重網(wǎng)頁的表現(xiàn)形式以及過于在乎其是否獨特而忽視網(wǎng)頁本身的內(nèi)容與主題，或者只注重內(nèi)容而忽視網(wǎng)頁設計中的藝術性，網(wǎng)頁設計的精彩程度都會大打折扣，顯得空洞。只有將色彩與思想情感以及主題精髓相結合，才能打造出差異化的網(wǎng)頁設計，體現(xiàn)出其獨特的價值；另一方面，不要為了炫技而加入不必要的元素，應確保頁面中每一設計元素都有其存在的價值，否則可能對用戶接收頁面信息造成干擾。所以，在設計之前應當進行全面地規(guī)劃和考慮，只有這樣才能做出功能與形式兼?zhèn)涞木W(wǎng)頁設計。

網(wǎng)頁還具有多屏、分頁、嵌套等特性，在設計時可以針對這一特性做出形式上更為豐富的變化，設計者在設計時不能只關注單個頁面的形式與內(nèi)容是否統(tǒng)一，也不能忽視由多個頁面組合而成的同一內(nèi)容的形式與內(nèi)容是否統(tǒng)一。根據(jù)網(wǎng)站主題確認主體色，再圍繞主體色以及頁面內(nèi)容進行色彩搭配，可以給用戶帶來較強的視覺沖擊感。

3.3 注意網(wǎng)頁整體性

網(wǎng)頁的整體性可以從內(nèi)容與形式兩方面討論，這里主要說的是形式上的整體性。網(wǎng)頁是企業(yè)傳播信息的重要途徑之一，需要傳達出企業(yè)想傳達的內(nèi)容，并要求所傳達的信息能被特定的群體在特定的時間內(nèi)所接受，滿足目標群體的閱讀需求是一切的前提。網(wǎng)頁設計具有整體性可以讓瀏覽者更快速的了解所傳達的信息、對信息傳達主題形成初步印象，更好地理解網(wǎng)頁主題。同時，具有整體性也能更快地在瀏覽者腦海中形成記憶點，加強網(wǎng)頁的獨特性，有利于提高網(wǎng)頁在市場中的競爭力。

網(wǎng)頁是由視覺元素與聽覺元素共同組成。在網(wǎng)頁設計時，通過提取各元素之間的共同特征是加強網(wǎng)頁設計的主要方法。例如從布局、色彩、文字排列方向等方面入手。但是，過度強調(diào)網(wǎng)頁設計形式上的整體感會讓其顯得呆板，喪失靈活性。因此，在強調(diào)網(wǎng)頁整體性設計的同時必須注重對比元素的運用，在注重網(wǎng)頁整體性的同時也不失亮點，起到吸引瀏覽者眼球的作用，不至于讓瀏覽者失去瀏覽興趣。

4 網(wǎng)頁設計色彩搭配方法

4.1 單色彩的應用

網(wǎng)頁界面中，除了白色背景，那些頻繁出現(xiàn)的顏色通常被視為主題色，直接影響著網(wǎng)頁主題的表現(xiàn)。設計師在進行網(wǎng)頁設計時，首先要根據(jù)網(wǎng)站主題和目標用戶來確定網(wǎng)頁的主題色，再在遵循主次關系前提下，搭配以合適的輔助色，讓網(wǎng)頁既具有層次感又不失和諧。下文主要從冷暖兩個色系入手，對主體色彩的搭配應用進行分析。

4.1.1 冷色系色彩的應用

冷色系可見度低，給人冷靜、嚴肅的心理感受。設計師也常利用冷色系的這一特點來表現(xiàn)網(wǎng)頁的嚴肅性。比如，公安系統(tǒng)的網(wǎng)頁中大量使用藍色來表現(xiàn)警察這一職業(yè)的嚴肅。冷色系色彩還會給人帶來清涼、舒爽的感受，在夏季我們可以在網(wǎng)頁設計上大量使用冷色給瀏覽者帶來愉悅的視覺感受。

4.1.2 暖色系色彩的應用

暖色系色彩可見度高，給觀者帶來歡快、熱情、活力滿滿的感覺，紅、黃、橙三色及其鄰近色都屬于暖色系。在網(wǎng)頁設計中，設計師常常利用暖色帶來的歡快感表達畫面主題。例如，在國慶、春節(jié)這樣舉國歡慶的日子，網(wǎng)頁往往會以紅色為主題色來迎合這段時間瀏覽者的心理狀態(tài)，為節(jié)日增添歡快的氛圍，提升網(wǎng)頁的吸引力。

4.2 多色彩的應用

商業(yè)網(wǎng)站的建立的初衷是宣傳產(chǎn)品，最終目的是達成交易。分類及版面過于復雜網(wǎng)頁不便于瀏覽者閱讀更不能起到很好的宣傳作用，與建立網(wǎng)站的最初目的背道而馳。因此，網(wǎng)頁設計時要根據(jù)整體風格與被宣傳的產(chǎn)品進行色彩搭配，將不同色彩搭配產(chǎn)生不同心理感受的作用發(fā)揮到極致。

4.2.1 鄰近色的應用

鄰近色可以是色相相鄰的色彩，也可以是同一色系但明度和純度不同的色彩。在網(wǎng)頁設計中，可以根據(jù)不同的主題選擇明暗程度以及色彩純度不同的鄰近色進行搭配，一般來說不超過四種[5]。例如，護膚品一般是為了達到皮膚干凈、美白、水嫩的效果，所以在護膚品網(wǎng)站在選取色彩時盡量選取柔和、淡雅的色彩，給瀏覽者產(chǎn)生一種溫暖、值得信賴的感覺，達到促成消費的目的。

4.2.2 對比色的應用

對比色反差較大，能起到吸引瀏覽者注意力的作用。對比色在純度、明度和色相三個方面體現(xiàn)。其中色相對比最強烈、視覺效果也最為顯著，也就是我們常說的互補色，互補色處在色相環(huán)中處于相對的位置，如紅與綠、黃與紫、橙與藍等。這些具有強烈對比度的顏色能夠產(chǎn)生強烈的視覺效果，通常用于網(wǎng)頁設計中的主視覺部分[6]。例如，新浪網(wǎng)藍色與橙色搭配的網(wǎng)頁標題，通過強烈的視覺對比達到宣傳效果。此外，在特定的行業(yè)，例如金融地產(chǎn)等與鮮艷色彩不適配的行業(yè)，一般選用黑色、灰色、藍色形成冷暖對比，既形成了互補又避免過于張揚，符合行業(yè)特征。

4.3 黑白色的應用

黑白色在色彩中被稱為極色，是萬能色。白色是網(wǎng)頁設計中應用最多的顏色，適當?shù)亓舭讜o人以高級的感覺，給瀏覽者留下想象的空間[7]。而黑色雖然不及白色使用普遍，但是在設計網(wǎng)頁色彩時，適當?shù)暮谏梢宰岉撁孀兊酶映练€(wěn)，更利于瀏覽者閱讀。例如，香奈兒官網(wǎng)色彩均以黑白為主，既與香奈兒的品牌調(diào)性相契合，也能體現(xiàn)其高貴典雅的特點。此外，對于很多追求簡約的瀏覽者來說，黑白配色更加簡單大氣，更能激發(fā)他們的閱讀興趣。

5 結語

色彩具有獨特魅力，色彩搭配貫穿企業(yè)生產(chǎn)、設計、營銷的所有環(huán)節(jié)，是迅速提升品牌價值最有效的方法，是設計中不可或缺的元素。網(wǎng)頁設計已經(jīng)成為人們?nèi)粘Ｉ钪蟹浅Ｖ匾囊徊糠?，色彩搭配是網(wǎng)頁設計過程中非常重要的環(huán)節(jié)，色彩更是網(wǎng)頁設計中無法割舍的元素。在市場競爭如此激烈的今天，網(wǎng)頁設計中色彩的運用要達到獨特的創(chuàng)意效果，單純地靠多色彩堆砌搭配是很難達到目的的，根據(jù)設計主題以及從用戶角度出發(fā)進行色彩的合理配置才能行之有效。作為設計的一部分，色彩也不僅僅需要具有審美功能，它還需要具有實用功能，設計師在進行設計時需要將色彩的審美性與實用功能結合起來，才能做出優(yōu)秀的網(wǎng)頁設計。