網頁設計中色彩視覺元素探究

張蕾蕾

(長春大學 美術學院，長春 130022)

網頁設計中色彩視覺元素探究

張蕾蕾

(長春大學 美術學院，長春 130022)

以網頁界面中的色彩視覺元素為研究對象，總結網頁界面中的色彩元素特性，結合色彩屬性與實際網頁色彩設計表象，探討基于網頁界面的配色方法，并通過分析影響網頁界面色彩視覺效果的各種因素，指出網頁色彩設計中存在的問題與實際設計中的經驗，力求為國內網頁設計的美化與創新提供一定的理論依據與實例參考。

網頁設計;色彩視覺元素;色彩設計

在人類的視覺感受中，色彩是不可或缺的重要元素，好的色彩組合能給人們帶來強烈的視覺沖擊力及藝術感染力［1］。在網頁界面中運用不同的色彩搭配，會影響網站的整體風格及視覺感受，色彩作為展示網站形象的首要視覺要素，對于網站個性特征的傳達，以及使網站在眾多同類競爭者中脫穎而出，都起著重要作用。因此分析和研究網頁界面中的色彩視覺元素、探討網頁配色方案，既可豐富色彩美學相關理論又富有極大的實踐價值。

1 網頁界面中的色彩特征

1.1 數字色彩的基本原理

能喚起人們色感的關鍵在于光，色是被光感知的結果。而數字色彩的獲取與生成，與自然界的色彩不同，它離不開產生它的數字設備。早期的數字色彩獲取主要是通過計算機鍵盤輸入執行應用程序來實現，是利用計算機系統特殊的演算規律來生成圖形和色彩的方法，目前有專門的學科及機構研究這種“規則系統藝術”［2］。我們最為常用的數字色彩獲取方法是通過掃描儀、數碼相機、數字攝像機等操作簡單、使用方便的設備來搜集圖像及色彩。

1.2 數字化色彩模式

網頁設計作為新興數字藝術的一大門類，它與傳統的藝術設計在形式與方法上都有著明顯的不同，其中最大的特征是幾乎所有的設計都是在計算機上完成，這也使得網頁界面的色彩設置與傳統藝術的調色有著很大的區別。我們設計中最為常使用的數字色彩模式是RGB與CMYK模式。

(1)RGB色彩模式

我們用放大鏡觀察電腦顯示器或電視機的屏幕，會看到數量極多的分為紅、綠、藍三種顏色的小點。電腦屏幕上的所有顏色都由紅、綠、藍三種色光按照不同的比例混合而成的，因此，紅、綠、藍被稱為三原色光，英文簡寫為R(red)、G(green)、B(blue)。在RGB模式下，每種成分都可使用0～255的數字值:當三個值相等時，產生灰色;當三個值均為255時，為純白色;當該值為0時，為純黑色。RGB總共能組合16777216(2563)種色彩，被稱為真彩色或24位色(224次方)［3］。

(2)CMYK色彩模式

這是一種專門針對印刷業設定的顏色標準，CMYK是代表青、洋紅、黃、黑四種印刷專用的油墨顏色，通過四色油墨的變化以及它們相互之間的疊加來得到各種顏色。CMYK模型的色彩不如RGB色豐富飽滿，在設計軟件中部分功能將無法使用，當圖像由RGB轉為CMYK后，顏色會有部分損失，但它是唯一一種能用來進行四色分色印刷的顏色標準。CMYK四色通道各按百分率計算，100%時最深，0%時最淺。

1.3 網頁安全色

網頁中的顏色會受到各種不同環境的影響，我們解決這一問題的方法就是網頁安全色——即在不同硬件環境、不同操作系統、不同瀏覽器中都能夠正常顯示的顏色集合(調色板)，網絡安全色是當紅色、綠色、藍色值為 0、51、102、153、204、255 時構成的顏色組合，共有216(63)種顏色(其中有彩色為210種，無彩色為6種)［4］。在制作網頁的時候，盡量使用網頁安全色進行網頁配色，這樣可以避免原有的顏色失真問題。

2 網頁界面中的色彩設計

網頁設計中的色彩設計是運用色彩學的理論知識，在實際網頁設計、制作中進行用色、調色、配色的技巧，是我們了解、掌握色彩理論知識的目的所在。

2.1 網頁界面色彩的對比

在我們的視知覺中，所謂色彩對比是當兩種或兩種以上的色彩在一起相互關聯，對視覺產生的影響，顯示出的差別現象。網頁界面的色彩對比主要體現在:

(1)將不同色相并立在一起產生的對比稱為色相對比，通過色相對比使各方色彩的特征更為凸顯［5］。色相對比的程度取決于色相在色環中的位置關系:兩色相間角度越小，呈現的色相的對比越弱。強對比中色彩豐富、飽滿，但不安定，適用于在短時間內給人強烈印象的網站首頁。

(2)將不同明度的兩色放置在一起將出現明暗的對比現象稱為明度對比，明度對比后明的更明、暗的更暗［5］。色彩明度的差別可以是同種色相自身的明度差異，也可以是多色相的明度關系。色彩中無色彩黑白灰的明度關系非常重要，它們不同程度的明度對比能夠呈現出多種色調變化，產生空間感、層次感等，使我們的網頁設計更為獨特、生動。

(3)將不同純度的色彩并置，使鮮的更鮮、濁的更濁的對比方法稱為純度對比。這種對比較之明度對比與色相對比更為柔和、含蓄。控制好色彩純度對比關系，有助于我們營造各種不同的界面視覺的氛圍，調動瀏覽者不同的思維情感［6］。

(4)將兩種屬性的色彩并置會產生冷暖關系，冷暖色的對比，會使冷暖感更加明顯。這里的冷暖不能用物理學的溫度衡量，冷暖都是色彩給我們的感受，色彩的冷暖對比也是相對存在的。

2.2 網頁界面色彩的調和

頁面色彩的調和是指兩個或兩個以上的色彩相互配合、相互協調，達到和諧。色彩調和的基本原理:一是統一性調和，二是對應性調和［6］。統一性調和是以統一為基調，將一種或兩種色彩屬性做同一或近似的組合，消除不統一因素，這是一種簡單而便利的配色方法，可分為同一調和與近似調和。對應性調和是基于變化的基礎之上，并且應用范圍更廣、適應性更強，這種調和效果強烈、生動、活潑，也更加富有挑戰性。它分為秩序調和、單性強對比調和、調性調和、失去平衡的調和。

無論是應用哪種調和，都應本著和諧中求變化的原則——單調貧乏不好，惡性刺激也不好，關鍵是對比統一要恰到好處。我們通常在網站頁面中定下一個主色調(主題色)，所有色彩元素都跟隨其變化(如藍主調下，其它對比調和都與藍色相關)。調和決不是色彩單調的一致，它與對比相輔相成、互相制約，都是構成網頁界面藝術美感的重要因素。

3 網頁界面色彩視覺元素的應用

3.1 影響網頁色彩視覺效果的軟硬件因素

網頁設計中，由于工具(如使用計算機等)本身的差異，即使是同樣數值的顏色也會因顯示設備、操作系統、制作軟件、硬件配置等諸多因素而產生不同的色彩效果。目前我們使用最為廣泛的操作系統包括 Windows、MAC、Linux、UNIX 等，由于這些操作系統中內置的調色板存在差異，因此即使在同一條件下用同一臺顯示器來顯示同一種顏色，其效果也會不盡相同。此外，顯示器也是其中一個重要因素，顯示器是設計的視覺中心，RGB色彩模式的數字圖像要顯示器表現，CMYK色彩模式的數字圖像也要經過轉換在顯示器上顯示出來［7］。還有，不同的軟件內設置的調色板模塊不同，也會造成顏色在顯示器中的差異(如我們設計時經常使用的Photoshop和CorelDraw兩個軟件間的色差就十分明顯)，并且計算機配置顯卡的優劣也是影響顏色顯示效果主要原因之一。

3.2 基于色相的網頁配色方案

紅色在人類歷史上始終代表著激情與活力，鮮明的紅色極易吸引人的眼球，在網頁中多作為突出色。高明度的紅色與無色彩搭配組合，能夠得到熱情、時尚的效果;而低明度的紅色沉穩凝重，可以營造出古典神秘的氛圍。多被用于餐飲(肯德基)、時尚網站(服裝、汽車)等。

橙色給人帶來朝氣、活力，是可以通過變換色調營造不同氛圍的典型色彩，是網頁配色中常見的色相。它既能表現青春活力又能實現沉穩成熟的效果，多用于青年網站(Chinaren)、食品網站等，也是是商業網站的新寵。

綠色是大自然的色彩，代表著生命與力量，也是網頁設計中使用最多的顏色之一。綠色給人們帶來健康與安全的氣息，所以經常被用于與教育科研、衛生醫療等相關的網站，以傳達清新和諧、易于親近的信息。

藍色是大海和天空的顏色，給人們開闊、清涼的感受。作為冷色系代表的藍色，它帶給人強烈的安定感，表現出淡雅的氣質。低對比度的藍色主要用來營造寧靜、安詳的氛圍;高對比度的藍色給人整潔、輕快的印象，因此藍色被廣泛應用于商業、體育、高校、旅游等網站之中。

紫色在藝術家們眼中是神秘和尊貴的象征。在古代，由于提取紫色染料耗費的成本很高，所以昂貴的紫色布料被王公貴族們獨享［8］。在網頁中，紫色通常用于以女性為對象或以藝術作品展示為主的站點中:暗紫色可以表現成熟高貴，是很多房地產網站的寵兒;清澈的紫紅色、粉紅色給人浪漫、輕盈、幽雅之美，是女性化色彩中的代表(KITTY、芭比娃娃購物網站等)。

黑白是兩種極端亮度的顏色，通常在現代派網站中用以突出有色彩強烈的沖擊力。只要合理地使用搭配，就不難成為表現現代文化獨特美感、張揚個性的最佳拍檔。多被用于影視、音樂及個人網站中。

4 結語

目前網頁界面設計考究、藝術創意獨特的中文網站鮮見。在我國的網站制作領域，人們往往在技術的層面上探討網頁設計，但優秀的網頁作品所展現的絕不僅僅是一種高超的技術形式，網頁的藝術性應該得到更為廣泛的關注，網頁界面設計作為一種新的藝術表現形式也值得我們深入研究。分析與研究網頁界面視覺元素的藝術特性與設計方法有著重要的理論和現實意義。

［1］ 保羅·芝蘭斯基，瑪麗·帕特·費希爾.色彩概論［M］.文沛，譯.上海:上海人民美術出版社，2004.

［2］ 廖宏勇，肖永亮.數字色彩基礎［M］.北京:北京師范大學出版社，2008.

［3］ Bill Scott Theresa Neil.Web界面設計［M］.李松峰，譯.北京:電子工業出版社，2009.

［4］ I.R.I色彩研究所.設計師談網頁配色［M］.李強華，譯.北京:電子工業出版社，2002.

［5］ 李莉婷.色彩構成設計［M］.合肥:安徽美術出版社，1999.

［6］ 朱介英.色彩設計與配色［M］.北京:中國青年出版社，2004.

［7］ 雷滬.顯示器色彩管理的研究與實踐［J］.包裝工程.重慶五九期刊社，2009(7):59.

［8］ 哈拉爾德·布拉爾姆.色彩的魔力［M］.陳兆，譯.合肥:安徽人民出版社，2003.

Research on color vision elements in webpage design

ZHANG Lei-lei

(College of Fine Arts，Changchun University，Changchun 130022，China)

This paper，taking color vision elements in web interfaces as a research object，analyzes the features of color elements.It discusses the web interface-based color-matching methods combining with the color attribute and the actual appearance of web color design，finds out the existing problems by analyzing the various factors influencing visual effects and gives actual design experiences，hoping to provide a theoretical basis and example references for China＇s beautification and innovation in web design.

webpage design;color vision element;color design

206.3

A

1009－3907(2011)03－0105－03

2010－12－08

張蕾蕾(1980－)，女，吉林長春人，講師，碩士，主要從事藝術設計教學與研究。

責任編輯:李鳳英