網(wǎng)頁設計中色彩視覺元素探究

張蕾蕾

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

網(wǎng)頁設計中色彩視覺元素探究

張蕾蕾

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

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

網(wǎng)頁設計;色彩視覺元素;色彩設計

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

1 網(wǎng)頁界面中的色彩特征

1.1 數(shù)字色彩的基本原理

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

1.2 數(shù)字化色彩模式

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

(1)RGB色彩模式

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

(2)CMYK色彩模式

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

1.3 網(wǎng)頁安全色

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

2 網(wǎng)頁界面中的色彩設計

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

2.1 網(wǎng)頁界面色彩的對比

在我們的視知覺中，所謂色彩對比是當兩種或兩種以上的色彩在一起相互關(guān)聯(lián)，對視覺產(chǎn)生的影響，顯示出的差別現(xiàn)象。網(wǎng)頁界面的色彩對比主要體現(xiàn)在:

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

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

(3)將不同純度的色彩并置，使鮮的更鮮、濁的更濁的對比方法稱為純度對比。這種對比較之明度對比與色相對比更為柔和、含蓄?？刂坪蒙始兌葘Ρ汝P(guān)系，有助于我們營造各種不同的界面視覺的氛圍，調(diào)動瀏覽者不同的思維情感［6］。

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

2.2 網(wǎng)頁界面色彩的調(diào)和

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

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

3 網(wǎng)頁界面色彩視覺元素的應用

3.1 影響網(wǎng)頁色彩視覺效果的軟硬件因素

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

3.2 基于色相的網(wǎng)頁配色方案

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

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

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

藍色是大海和天空的顏色，給人們開闊、清涼的感受。作為冷色系代表的藍色，它帶給人強烈的安定感，表現(xiàn)出淡雅的氣質(zhì)。低對比度的藍色主要用來營造寧靜、安詳?shù)姆諊?高對比度的藍色給人整潔、輕快的印象，因此藍色被廣泛應用于商業(yè)、體育、高校、旅游等網(wǎng)站之中。

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

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

4 結(jié)語

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

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

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

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

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

［5］ 李莉婷.色彩構(gòu)成設計［M］.合肥:安徽美術(shù)出版社，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－)，女，吉林長春人，講師，碩士，主要從事藝術(shù)設計教學與研究。

責任編輯:李鳳英