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

蔡雨林

摘 要：色彩是網(wǎng)頁中最具視覺沖擊力的元素之一，設(shè)計(jì)精良的網(wǎng)頁離不開色彩的合理搭配與應(yīng)用。文章從色彩的原理、網(wǎng)頁色彩配色、網(wǎng)頁色彩搭配原則、網(wǎng)頁色彩搭配方法等幾個(gè)方面探討色彩在網(wǎng)頁設(shè)計(jì)中的重要意義。

關(guān)鍵詞：色彩；網(wǎng)頁；網(wǎng)頁色彩配色

中圖分類號：TP393.092 文獻(xiàn)標(biāo)識碼：A 文章編號：1005-5312（2017）11-0023-02

一、前言

隨著數(shù)字化時(shí)代的到來，新型媒體的崛起，人們的生活發(fā)生了翻天覆地的變化。通過互聯(lián)網(wǎng)，人們可以最快的速度了解實(shí)時(shí)資訊、查詢天氣、網(wǎng)上購物等?？梢娀ヂ?lián)網(wǎng)圍繞在人們的生活中，促進(jìn)著社會(huì)的發(fā)展，人類社會(huì)早已離不開互聯(lián)網(wǎng)。當(dāng)然互聯(lián)網(wǎng)也帶動(dòng)其他行業(yè)，如藝術(shù)設(shè)計(jì)領(lǐng)域的發(fā)展，網(wǎng)頁設(shè)計(jì)在這個(gè)時(shí)代孕育而生。在互聯(lián)網(wǎng)流行初，網(wǎng)頁只用作傳遞信息，隨著人們對“美”的需求提高，如何設(shè)計(jì)出漂亮的網(wǎng)頁來吸引更多的瀏覽者成為眾多網(wǎng)頁設(shè)計(jì)師需要解決的問題。

網(wǎng)頁中包含著文字，圖片，色彩等許多設(shè)計(jì)元素，其中色彩是具有最強(qiáng)表現(xiàn)力、高刺激性的視覺元素。打開一個(gè)網(wǎng)頁，首先吸引瀏覽者目光的是色彩，色彩是網(wǎng)頁設(shè)計(jì)重要的情感語言之一，它能激發(fā)人的情感，給瀏覽者帶來視覺上的審美享受，還能有效傳遞企業(yè)品牌形象與價(jià)值。學(xué)會(huì)認(rèn)識、了解和應(yīng)用網(wǎng)頁的色彩能幫助我們更好的創(chuàng)作出優(yōu)秀的網(wǎng)頁。

二、關(guān)于色彩的原理

針對網(wǎng)頁設(shè)計(jì)，了解和掌握色彩知識十分重要。掌握色彩的理論知識，能激發(fā)我們的創(chuàng)作熱情，促使我們進(jìn)行發(fā)散式思維，更好的完成網(wǎng)頁設(shè)計(jì)作品。

（一）色彩的分類與屬性

我們生活在一個(gè)充滿色彩的世界里，盡管色彩千差萬別，但大致可歸為有彩色與無彩色兩類。有彩色是指紅、橙、黃、綠、藍(lán)等有彩度的顏色，無彩色相對于有彩色而言，沒有明顯的色相偏向，是指黑、白、灰等沒有彩度的顏色。

除無彩色外，任何一種色彩都有其自身的屬性，包括色相、明度與純度。

色相是色彩呈現(xiàn)給人的第一視覺感受，即色彩的外部相貌，其中紅、橙、黃、綠、藍(lán)、紫是六個(gè)基本色相，它們可以相互區(qū)分開來。

明度是指色彩的明與暗，表現(xiàn)顏色的淺與深。如在顏色中添加白色，可以提高色彩的亮度；相反添加黑色，則可降低色彩的亮度。

純度是指色彩的飽和程度，也可以說是色彩的鮮艷或者灰暗的程度。任何一種色彩添加無彩色如黑、白或灰都可以降低其純度，且添加越多無彩色，純度就越低。

（二）網(wǎng)頁色彩模式

通過光成色的原理可以將網(wǎng)頁色彩模式分為RGB色彩模式和Indexed色彩模式兩類。

RGB色彩模式是指紅、綠、藍(lán)三個(gè)顏色通道相互疊加而得到各種顏色，這種色彩模式主要用于計(jì)算機(jī)上圖像的顯示。在RGB色彩模式中，每個(gè)圖像元素都被賦予0到255之間的三個(gè)值，RGB分別代表紅、綠、藍(lán)，這三種顏色可以被調(diào)整稱任何一種其他顏色。

Indexed色彩模式把圖像限制成不超過256種顏色，主要為了保證文件具有很小的尺寸，為了在網(wǎng)頁頁面和其他計(jì)算機(jī)多媒體上顯示圖像。

（三）網(wǎng)頁安全色

在網(wǎng)頁設(shè)計(jì)中應(yīng)盡量使用安全色彩，可避免在顯示器處于底分辨率時(shí)，發(fā)生顏色抖動(dòng)，影響視覺效果。我們可以通過計(jì)算機(jī)得到相應(yīng)的安全色彩。如使用十進(jìn)制表示色彩，RGB顏色的值必須是51的倍數(shù)，而十六進(jìn)制時(shí)，只要包含00，33，66，99，CC，F(xiàn)F等，就是網(wǎng)頁安全顏色了。

三、色彩聯(lián)想與網(wǎng)頁配色

無論是有彩色還是無彩色，他們都有各自的表情特征。色彩是表達(dá)網(wǎng)站情感最直觀的設(shè)計(jì)元素，不同色彩的頁面會(huì)激發(fā)瀏覽者的色彩聯(lián)想，引發(fā)不同的心理感受。

白色象征著光明、圣潔、潔白、質(zhì)樸、神圣，讓我們聯(lián)想到純真、雅致、明快、清爽、絕望、恐懼等。白色又稱全色光，是由所有可見光均勻混合而成。在商業(yè)設(shè)計(jì)中，白色有科技、高級的意象，通常與其他顏色搭配。純白有寒冷的感覺，在搭配中會(huì)添加其他的色彩，如乳白、米白等。在網(wǎng)頁設(shè)計(jì)中，白色與冷色搭配，如紫色、藍(lán)色等可以表達(dá)輕快、干凈的感覺；白色與暖色搭配，如紅色、黃色等，會(huì)增添頁面豐富華麗的感覺。

橙色通常給人一種朝氣蓬勃、活潑可愛的感覺，讓本來郁悶的心情豁然開朗。橙色象征著健康、活力、愛情與幸福，不同色調(diào)的橙色能展現(xiàn)不一樣的視覺效果，亮度純度較高的橙色能表達(dá)青春活力，亮度降低色調(diào)偏深的橙色表現(xiàn)出沉穩(wěn)老練的感覺，所以橙色是在網(wǎng)頁配色中使用范圍較廣的顏色。

紅色讓我們想到了愛情、熱情、溫暖、能量、喜慶等，紅色的刺激效果能讓人沖動(dòng)，產(chǎn)生攻擊感與憤怒，當(dāng)然也能讓人感受火熱與激情。在網(wǎng)頁中，紅色是較突出的色彩，極易吸引人們的眼球。高亮度的紅色與非彩色黑、灰搭配，可得到現(xiàn)代激進(jìn)的感覺；低亮度的紅色能營造古典的氛圍。

綠色是網(wǎng)頁設(shè)計(jì)配色中使用最廣泛的色彩之一，讓我們聯(lián)想到健康、植物、希望、生命力等。綠色在健康網(wǎng)站、教育網(wǎng)站或招聘企業(yè)網(wǎng)站運(yùn)用較多。綠色與白色搭配，清新自然 ；綠色與紅色搭配，豐富鮮明；綠色與黃色搭配，溫暖和諧。

藍(lán)色讓我們聯(lián)想到天空、大海、深邃、永恒、清爽、舒服、冰冷、科技、哀傷等。藍(lán)色與白色、綠色的搭配隨處可見，主色選用藍(lán)色搭配白色的背景易給網(wǎng)頁干凈清爽的感覺。

紫色讓我們聯(lián)想到神秘、高貴、浪漫、優(yōu)雅、智慧、憂郁、沉悶等，通常用于以女性、奢侈品、藝術(shù)品、高端企業(yè)為主的網(wǎng)站。紫色，特別是暗調(diào)的，可以表現(xiàn)出神秘與成熟的感覺。

黃色也是網(wǎng)頁中運(yùn)用較多的顏色，它本身明快愉悅的感覺，常被用于兒童網(wǎng)站中。黃色讓我們聯(lián)想到希望、陽光、溫暖、可愛、快樂等。高亮度的黃色與黑色搭配在網(wǎng)頁中可以營造一種時(shí)尚整潔的感覺，當(dāng)然明了的黃色還帶給人們開心快樂的感受。

褐色讓人聯(lián)想到咖啡、木質(zhì)、質(zhì)樸、昏暗、誠實(shí)、土地等，在網(wǎng)頁設(shè)計(jì)中，褐色通常表現(xiàn)材質(zhì)的質(zhì)感、咖啡等飲品的味感、古典的企業(yè)或商業(yè)形象等。傳統(tǒng)的褐色給人以素雅、古色古香的感受。

黑色讓人聯(lián)想到權(quán)威、黑暗、難過、時(shí)尚、力量等。黑色與其他任何色彩都能很好的搭配起來，在網(wǎng)頁設(shè)計(jì)中常用來表現(xiàn)高科技產(chǎn)品，如攝影機(jī)、跑車、電影、音響等。當(dāng)然黑色也市場運(yùn)用于服飾設(shè)計(jì)、生活用品和空間設(shè)計(jì)中。

四、色彩在網(wǎng)頁設(shè)計(jì)中的搭配原則

為了設(shè)計(jì)出精美的網(wǎng)頁，在選擇網(wǎng)頁色彩時(shí)，要遵循網(wǎng)頁色彩搭配的藝術(shù)規(guī)律。

（一）色彩的鮮明性

色彩鮮明的網(wǎng)頁能以最快的速度吸引瀏覽者的注意力。

（二）色彩的風(fēng)格性

網(wǎng)頁色彩的選擇要與眾不同，有風(fēng)格有獨(dú)特性，這樣可以加深瀏覽者的視覺感受。

（三）色彩的合理性

根據(jù)不同的主題，選用合理的色彩進(jìn)行搭配，使整個(gè)畫面的色彩氛圍與表達(dá)的主題內(nèi)容相符合。

（四）色彩的想象性

色彩能讓人產(chǎn)生不同的聯(lián)想，網(wǎng)頁色彩的選擇要和網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。

四、色彩在網(wǎng)頁設(shè)計(jì)中的搭配方法

（一）暖色調(diào)搭配

暖色調(diào)的頁面色彩搭配是指運(yùn)用紅、黃、橙、赭色等色彩的搭配。運(yùn)用暖色調(diào)可以使整個(gè)頁面呈現(xiàn)出溫暖、熱情的氛圍。

（二）冷色調(diào)搭配

冷色調(diào)的色彩搭配與暖色調(diào)相反，是指綠、紫、藍(lán)、青等色彩的搭配。運(yùn)用冷色調(diào)可使主頁呈現(xiàn)高雅、寧靜清爽的氛圍。

（三）同類色調(diào)搭配

運(yùn)用同類色調(diào)搭配可使整個(gè)頁面呈現(xiàn)色彩層次感強(qiáng)，且和諧統(tǒng)一的頁面效果。這種色彩搭配方法特別適用初學(xué)者。

（四）對比色調(diào)搭配

對比色調(diào)的搭配，如紅配綠、藍(lán)配紫等。這種將色相發(fā)差對比大的色彩放置在同一個(gè)頁面中，會(huì)產(chǎn)生強(qiáng)烈的視覺對比效果，讓頁面具有很強(qiáng)的時(shí)尚感，突出網(wǎng)頁頁面效果與內(nèi)容。

（五）主色與輔色的合理搭配

主色是頁面中占較大面積的色彩，它決定整個(gè)網(wǎng)頁頁面基調(diào)與風(fēng)格，輔色是頁面中相對面積較小的色彩，常見于網(wǎng)頁頁面中的文字、圖標(biāo)、超鏈接、輸入框等，主要用于襯托主色，起到畫龍點(diǎn)睛的作用，所以主色與輔色的合理搭配也十分重要。

（六）背景色與網(wǎng)頁文字、圖片的搭配

在進(jìn)行網(wǎng)頁色彩搭配時(shí)，還應(yīng)注意頁面背景色的深淺與網(wǎng)頁文字、圖片的搭配，應(yīng)將他們控制在合適的范圍內(nèi)。深色的背景色應(yīng)與淺色的文字、圖片結(jié)合，淺色的背景色應(yīng)與深色的文字、圖片相搭配。

六、色彩在各類網(wǎng)站中的運(yùn)用技巧

（一）綜合型網(wǎng)站

綜合型網(wǎng)站是眾多網(wǎng)站中訪問瀏覽量最高的。網(wǎng)頁在色彩的設(shè)計(jì)搭配上要求大方直觀、簡潔明了，使瀏覽者鏈接網(wǎng)頁的速度得到保證。

（二）娛樂型網(wǎng)站

娛樂型網(wǎng)站在網(wǎng)頁色彩的選擇上應(yīng)偏重風(fēng)格化、個(gè)性化，注重頁面視覺美感，使瀏覽者能夠放松心情，感受愉悅。

（三）商業(yè)型網(wǎng)站

商業(yè)型網(wǎng)站在網(wǎng)頁色彩的選擇上最好避免使用太多稚嫩的色彩搭配，在色彩設(shè)計(jì)上要求秩序感、統(tǒng)一而嚴(yán)肅，給人以誠實(shí)守信的視覺印象，多選用極具親和力的色彩。

（四）藝術(shù)型網(wǎng)站

藝術(shù)型網(wǎng)站在色彩設(shè)計(jì)上應(yīng)多選用清新、樸素、淡雅的色彩，烘托藝術(shù)的典雅的氛圍。

（五）政府型網(wǎng)站

政府型網(wǎng)站代表了各個(gè)政府的網(wǎng)頁形象，在色彩的選擇上可選飽和度較高的冷色調(diào)如藍(lán)、綠色，顯示政府機(jī)構(gòu)莊重肅穆、嚴(yán)謹(jǐn)?shù)男蜗蟆?/p>

（六）體育型網(wǎng)站

體育型網(wǎng)站在網(wǎng)頁色彩的選擇上應(yīng)偏重前衛(wèi)、活潑且高明度的色彩。

（七）行業(yè)型網(wǎng)站

行業(yè)型網(wǎng)站在色彩選擇上應(yīng)以代表本行業(yè)的象征色彩為主色調(diào)，其他輔色根據(jù)主色調(diào)合理搭配。

（八）個(gè)人型網(wǎng)站

個(gè)人型網(wǎng)站在色彩選擇上應(yīng)選用代表本人個(gè)性的色彩，彰顯自己的風(fēng)格和審美情趣。

七、結(jié)語

總之，色彩在網(wǎng)頁設(shè)計(jì)中的運(yùn)用十分重要，設(shè)計(jì)師要想設(shè)計(jì)出好的網(wǎng)頁設(shè)計(jì)作品，就要對網(wǎng)頁色彩進(jìn)行更為深入而細(xì)致的研究，運(yùn)用色彩在網(wǎng)頁設(shè)計(jì)中的搭配原則和搭配方法，且考慮瀏覽者的社會(huì)背景、文化和年齡特征等。認(rèn)真學(xué)習(xí)前人作品，不斷積累經(jīng)驗(yàn)，在摸索中創(chuàng)新。只有提高色彩在網(wǎng)頁設(shè)計(jì)中的應(yīng)用能力，才能使頁面的視覺效果達(dá)到和諧統(tǒng)一，才能更好的吸引瀏覽者，有效傳遞信息。

參考文獻(xiàn)：

[1]朱麗娟，鄭國強(qiáng)，鄭雪芹.平面設(shè)計(jì)綜合配色手冊[M].北京：科學(xué)出版社，2011.

[2]王爽，徐仕猛，張晶.網(wǎng)站設(shè)計(jì)與網(wǎng)頁配色[M].北京：科學(xué)出版社，2011.

[3]王曉峰，焦燕.網(wǎng)頁美術(shù)設(shè)計(jì)原理及實(shí)踐策略[M].北京：清華大學(xué)出版社，2009.

[4]張祖鷹，郝玉秀.實(shí)用網(wǎng)站藝術(shù)設(shè)計(jì)基礎(chǔ)[M].北京：化學(xué)工業(yè)出版社，2010.

[5]張新紅，呂文靜.網(wǎng)頁設(shè)計(jì)與制作[M].北京：化學(xué)工業(yè)出版社，2009.