色彩元素在網頁設計中的運用

喻蕓　張延玲

摘要：網頁作為現代生活中不可或缺的一種信息載體，如何使信息更有效的傳遞并被人們所正確的接受成為設計者們所要研究的新課題。而網頁設計中的色彩作為信息傳達最直接的元素，成為本文所要研究的主要對象。該文將從色彩元素在網頁設計中所表現的作用出發(fā)，分析了色彩在傳達過程中對人所產生的心理反應。之后分析了當今網頁中色彩所存在的問題，從而針對性的對所存在的問題提出網頁色彩運用原理的相關注意事項，依據這些原則并于文章最后對不同類型的網站所應采取的色彩提供了參考性的方案，以期使信息更有效合理的傳達給瀏覽者。

關鍵詞：色彩；色調；飽和度；網頁設計；風格

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2016）02-0168-02

一個優(yōu)秀的網頁設計師制作出的網頁往往會給人帶來記憶深刻，好用易用的感覺。而網頁設計中的版式、圖片、色彩等視覺元素的運用都直接影響著瀏覽者對本文從色彩在網頁設計中的作用及存在的問題出發(fā)，提出在網頁設計中對色彩的運用需要注意的事項，并在文章最后結合自己實際操作中可能會用到的不同色彩給出參考性方案，以期幫助學習者在日后的網頁設計中更好地把握色彩的運用。網站的感受，在這些內容中，網站整體的定位、風格都需要通過顏色來給用戶直接感官上的刺激，使其產生共鳴，所以色彩在網頁制作中就顯得尤為重要了。

1 色彩在網頁設計中的作用

1）視覺區(qū)域的劃分

色彩可以創(chuàng)造出有序的視覺感，設計者可以通過不同的色彩區(qū)域來對信息進行分類劃分。在網頁中常?？梢酝ㄟ^色彩不同的飽和度來體現網頁的主次順序，使瀏覽者有不同的心理效果。

2）重點主題的突出

在浩瀚的網絡信息中，為使瀏覽者能盡快在網絡漫游中尋找出自己所需要的信息，網頁設計師可以運用色彩自身的表現力、情感效應來使網頁的內容與形式進行有機的結合，以色彩的內在力量來美化頁面，從而突出主題，幫助瀏覽者實現更有效的溝通。

3）目光焦點的吸引

在眾多的網站中想要脫穎而出是不是件容易的事情，只有通過色彩的力量增強網頁的吸引力去“討好”瀏覽者挑剔的眼睛。

4）藝術性的增強

好的色彩設計會給網頁作品帶來生命力，它不僅反映在視覺上，也會體現在網頁的心理影響和象征意義上，會給網頁設計的作品增強藝術性。

2 色彩在網頁設計中存在的問題

瀏覽者打開一個網站，首先映入眼簾的是這個網站的色彩，而不是其他元素。從某種程度而言，網頁設計師對色彩的運用和搭配直接決定了網站設計的成功與否。因為在平面圖上，色彩給人帶來的視覺沖擊力是最強的，給人留下的印象也是最深刻的。

目前一些網頁往往會使用很多種顏色，使網頁效果看起來很豐富。比如有些設計師為了能使網頁做得更具有視覺沖擊力，更具有藝術性，從而將風格不同顏色各異的圖片、文字放在同一個頁面上，而瀏覽者看完此類網站后往往會感覺沒有藝術感。這就是因為色彩的過度使用使得頁面缺乏統(tǒng)一的協調感和內在美感，從而干擾了用戶瀏覽網頁的效率。

另外，一些網頁色彩的使用沒有考慮到視覺因素對人的制約，如采用深色圖片作為頁面背景，嚴重干擾了用戶識別信息主體的能力。還有一些網站對色彩的運用沒有注重網站信息的性質，沒有獨特的風格和鮮明的個性，給瀏覽者沒有留下深刻的印象。

3 色彩在網頁設計中的注意事項

1）控制色彩數

一個網站最好有一個主色調，并利用這個主色調貫穿所有的頁面，這一色調應有利于體現網站主題宗旨，而根據不同的單元，可再以輔色搭配做出區(qū)域劃分。同一個畫面色彩最好不要超過三種，過多的色彩會降低網站的閱讀性，也會分散用戶的注意力?，F在設計師在對網頁色彩設計時，多以淺顏色為背景，配上深顏色的字，這樣瀏覽者閱讀起來會顯得自然流暢、柔和淡雅，符合人們的視覺認知習慣，也有利于突出頁面的重點。

2）注意色彩的對比

① 明度對比

在網頁設計中，往往通過明度對比來突出形態(tài)特征。明度越高越能突出主題。例如，文字的色彩與底色間如果存在較大的明度差，瀏覽者往往更會有易于閱讀的感覺。

② 純度對比

強純度對比的色彩表現出的效果明確肯定，弱對比的色彩表現出柔和單一。在實際設計中，對色彩的運用往往并非飽和色，而恰恰是帶有一定灰度的非飽和色。這里需要知道的是：純度從高到低的排列為：紅色>橙色>紫色>藍色>綠色。

③ 面積對比

色彩學家歌德認為，色彩的明度和面積決定著色彩的力量。明度越高，色彩力量越強，并給出了各補色力量平衡的面積比例關系。

黃：紫=1：3 橙：藍=1：2 紅：綠=1：1

在對大面積的顏色選用上宜采用低純度的背景，如果需要一定的變化來加強網頁背景的厚重感和縱深感，則需要在盡可能顏色統(tǒng)一的前提下尋求色彩的變化。

4 色彩在網頁設計中的參考方案

1）喜慶、動感型的網站

設計此類網站時，網頁的主色調多采用紅色。因為紅色會使人感覺喜慶、動感、溫暖，還具有很好的明視效果。如若紅色與白色連用，會給人一種現代感，還會產生輕松、愉悅、休閑的氛圍，常常被用于食品類型的網站中；而在體育網站及一些與運動相關的畫冊或宣傳單中，常常會用紅色與黑色連用，因為紅色與黑色同用會給人一種跳躍、律動的感覺。

2）可愛、溫馨型的網站

比如在很多的母嬰或兒童教育類網站中，由于瀏覽者多為女性，所以在設計此類網站色彩時，多以粉色、黃色、橙色為主色調，在色彩上保持高純度和高明度。另外還可以與白色連用，使其色感變得柔和，給人一種賓至如歸的感覺。此類配色還多用于生活用品、紡織品或服務行業(yè)中。

3）科技智慧型的網站

此類網站通?？梢赃x藍、灰、或綠色等。

在一些商務型的網站中，比如注重穩(wěn)健形象的金融和電信機構，運用最多的就是藍色。而強調高科技型的網站中則會以黑色作為主色調，渲染出敏銳、先進的印象。在大多數的校園網站中多以藍綠色作為其基本色，因為藍綠色不僅能營造出沉靜、收斂的效果，還具有學生特有的青春洋溢，朝氣蓬勃的氣息。

此外，在一些辦公用品或者是高檔西服等宣傳頁面中，常常用灰色來渲染，因為灰色給人穩(wěn)重柔和的感覺，同時可以營造出簡練、灑脫、充滿智慧感的氣氛。

5 結束語

總之，網站整體的色彩設計是個系統(tǒng)工程，只有充分認識色彩的心理反映，了解色彩的表現特征及其應用的基本原理和法則，才可在設計網站時做到統(tǒng)一規(guī)劃，統(tǒng)一風格，這樣才可以形成整個網頁的整體性，讓網頁設計的個性創(chuàng)造和審美意識得到淋漓盡致的展現。

參考文獻：

[1]何建華.視覺有溫度——網頁色彩情感研究[J]. 韶關學院學報·社會科學，2010（2）.

[2]游婷.網頁界面設計中的配色方案研究[J]. 科技資訊，2009.

[3]李向來.網頁界面設計中的配色藝術[J]. 濮陽職業(yè)技術學院學報，2007（2）.

[4]劉永翔，唐良瑞.網頁設計中的視覺構成分析[J]. 北京工商大學學報（自然科學版），2004（1）.

[5]張亞妮.網頁設計配色原理淺析[J]. 科技信息，2009.

[6]馬曉娟.色彩在網頁設計中的運用[J]. 山西大同大學學報（自然科學版），2011（8）.