網(wǎng)頁(yè)設(shè)計(jì)中色彩視覺(jué)元素探究

張蕾蕾

(長(zhǎng)春大學(xué) 美術(shù)學(xué)院，長(zhǎng)春 130022)

網(wǎng)頁(yè)設(shè)計(jì)中色彩視覺(jué)元素探究

張蕾蕾

(長(zhǎng)春大學(xué) 美術(shù)學(xué)院，長(zhǎng)春 130022)

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

網(wǎng)頁(yè)設(shè)計(jì);色彩視覺(jué)元素;色彩設(shè)計(jì)

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

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

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

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

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

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

(1)RGB色彩模式

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

(2)CMYK色彩模式

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

1.3 網(wǎng)頁(yè)安全色

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

2 網(wǎng)頁(yè)界面中的色彩設(shè)計(jì)

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

2.1 網(wǎng)頁(yè)界面色彩的對(duì)比

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

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

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

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

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

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

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

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

3 網(wǎng)頁(yè)界面色彩視覺(jué)元素的應(yīng)用

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

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

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

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

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

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

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

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

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

4 結(jié)語(yǔ)

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

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

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

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

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

［5］ 李莉婷.色彩構(gòu)成設(shè)計(jì)［M］.合肥:安徽美術(shù)出版社，1999.

［6］ 朱介英.色彩設(shè)計(jì)與配色［M］.北京:中國(guó)青年出版社，2004.

［7］ 雷滬.顯示器色彩管理的研究與實(shí)踐［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－)，女，吉林長(zhǎng)春人，講師，碩士，主要從事藝術(shù)設(shè)計(jì)教學(xué)與研究。

責(zé)任編輯:李鳳英