淺談校園網(wǎng)網(wǎng)頁(yè)色彩的設(shè)計(jì)

陳麗霞，黃卓順

（韓山師范學(xué)院 教育系，廣東 潮州 521041）

淺談校園網(wǎng)網(wǎng)頁(yè)色彩的設(shè)計(jì)

陳麗霞，黃卓順

（韓山師范學(xué)院 教育系，廣東 潮州 521041）

在網(wǎng)頁(yè)設(shè)計(jì)中，色彩的地位和作用是不言而喻的。但從目前來看，校園網(wǎng)網(wǎng)頁(yè)中色彩的設(shè)計(jì)仍存在不少問題。針對(duì)這種情況，本文提出了校園網(wǎng)網(wǎng)頁(yè)色彩的設(shè)計(jì)原則及設(shè)計(jì)步驟，為廣大校園網(wǎng)設(shè)計(jì)者提供參考。

校園網(wǎng)；網(wǎng)頁(yè)；色彩設(shè)計(jì)；應(yīng)用

作為校園文化的具體呈現(xiàn)及對(duì)外交流的載體，校園網(wǎng)扮演著不可替代的角色。其中，作為校園網(wǎng)的基本構(gòu)成元素，校園網(wǎng)網(wǎng)頁(yè)的設(shè)計(jì)和制作更是決定著校園文化傳播的功效。在頁(yè)面的設(shè)計(jì)中，色彩占據(jù)著極其重要的地位，它是網(wǎng)頁(yè)設(shè)計(jì)中容易被忽視而又絕對(duì)不能忽視的因素。有些網(wǎng)頁(yè)看上去十分典雅、有品位，令人賞心悅目，但其頁(yè)面結(jié)構(gòu)卻很簡(jiǎn)單、圖像也不復(fù)雜，這主要是色彩運(yùn)用得當(dāng)?shù)慕Y(jié)果。因此對(duì)于校園網(wǎng)設(shè)計(jì)者來說，掌握精湛的網(wǎng)站制作技術(shù)固然重要，但是對(duì)網(wǎng)站風(fēng)格的把握及配色方案的設(shè)計(jì)也是不容忽視的。

一、色彩在網(wǎng)頁(yè)中的作用

色彩是視覺傳遞的重要手段和方式，色彩若是處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩具有象征性，例如：嫩綠色、翠綠色、金黃色、灰褐色就可以分別象征著春、夏、秋、冬。其次，色彩還具有職業(yè)標(biāo)志性，例如：軍警的橄欖綠，醫(yī)療衛(wèi)生的白色等。色彩還具有明顯的心理感覺，例如冷、暖的感覺，進(jìn)、退的效果等。另外，色彩還有民族性，各個(gè)民族由于環(huán)境、文化、傳統(tǒng)等因素的影響，對(duì)于色彩的喜好也存在著較大的差異。在網(wǎng)頁(yè)設(shè)計(jì)中充分運(yùn)用色彩的這些特性，可以增強(qiáng)網(wǎng)頁(yè)的吸引力，使我們的校園網(wǎng)具有更加深刻的藝術(shù)內(nèi)涵，進(jìn)而提升校園網(wǎng)的文化品位。

二、當(dāng)前校園網(wǎng)色彩設(shè)計(jì)中存在的問題

筆者以高校校園網(wǎng)作為研究對(duì)象，通過中國(guó)教育和科研計(jì)算機(jī)網(wǎng)所提供的中國(guó)大學(xué)鏈接，瀏覽了許多高校網(wǎng)站。通過比較分析，發(fā)現(xiàn)校園網(wǎng)站普遍存在“網(wǎng)頁(yè)色彩缺乏科學(xué)而合理的設(shè)計(jì)”的問題，具體體現(xiàn)在以下幾個(gè)方面:

1.色彩過于單調(diào)或色調(diào)過于花俏

高校網(wǎng)站中界面色彩的使用缺乏設(shè)計(jì)，主要有兩種傾向:一是色調(diào)單一，缺乏生氣，枯燥乏味，如圖1；二是過于花哨，網(wǎng)站色彩雜亂，如圖2。

圖1 湖南商學(xué)院北津?qū)W院網(wǎng)頁(yè)界面圖

圖2 石家莊經(jīng)濟(jì)學(xué)院網(wǎng)頁(yè)界面圖

2.不注重細(xì)節(jié)，不夠人性化

由于設(shè)計(jì)者在文字、導(dǎo)航、內(nèi)容區(qū)域的顏色使用和色彩過渡上的疏忽，使瀏覽者感覺不到整個(gè)界面的完整統(tǒng)一性，在查找內(nèi)容時(shí)感覺比較困難。這些細(xì)節(jié)在很大程度上決定了一個(gè)網(wǎng)頁(yè)的成效，所以在校園網(wǎng)頁(yè)設(shè)計(jì)過程中，廣大的設(shè)計(jì)者都要特別注重細(xì)節(jié)，使其更加人性化，瀏覽者也更加容易瀏覽。

三、網(wǎng)頁(yè)色彩的設(shè)計(jì)原則

網(wǎng)頁(yè)色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對(duì)比”，也即是網(wǎng)頁(yè)的整體色彩效果應(yīng)該是突出而不乏和諧、大眾化而不乏新潮，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。具體可從以下幾個(gè)方面考慮：

1.應(yīng)與網(wǎng)站主題相協(xié)調(diào)

在網(wǎng)頁(yè)設(shè)計(jì)中要充分利用色彩的力量美化頁(yè)面，對(duì)其中的重要信息進(jìn)行強(qiáng)調(diào)，不同的顏色在不同的地區(qū)所代表的寓意大不相同，以中國(guó)大陸為例，每個(gè)學(xué)校都包含一些黨建或?qū)W生工作的宣傳網(wǎng)站，而據(jù)統(tǒng)計(jì)，多數(shù)此類網(wǎng)站使用與國(guó)旗顏色相同的主體色彩。而一些心理輔導(dǎo)類的校園網(wǎng)站則多數(shù)采用暖色調(diào)為主的網(wǎng)頁(yè)色彩。這樣符合人們的心理特點(diǎn)，能夠引導(dǎo)瀏覽者的注意力，這有利于推廣宣傳學(xué)校。對(duì)需要強(qiáng)調(diào)的內(nèi)容適當(dāng)運(yùn)用色彩加以突出，使瀏覽者加深記憶，提高信息傳遞效率。在重要信息或最新通知等內(nèi)容中，色彩的強(qiáng)調(diào)功用尤為明顯。不同的色彩有著不同的象征意義，給人的心理感受也不同，網(wǎng)頁(yè)的色彩設(shè)計(jì)要有針對(duì)性，應(yīng)體現(xiàn)出自身的特色。色彩對(duì)比是通過制造中心色與主調(diào)色的對(duì)比，構(gòu)造醒目的視覺中心，突出主題，傳達(dá)情緒。通常有明度對(duì)比、色相對(duì)比、純度對(duì)比、補(bǔ)色對(duì)比、冷暖對(duì)比、面積對(duì)比、形狀對(duì)比等，其中色相對(duì)比更能使視覺效果生動(dòng)、強(qiáng)烈、感人。色相的對(duì)比關(guān)系越清晰，視覺效果就越強(qiáng)烈，色相對(duì)比中最強(qiáng)烈的是互補(bǔ)色對(duì)比，如紅與綠、黃與紫、藍(lán)與橙對(duì)比，在設(shè)計(jì)需要強(qiáng)烈視覺沖擊時(shí)，往往會(huì)用到這些對(duì)比。

2.應(yīng)能體現(xiàn)學(xué)校的獨(dú)特風(fēng)格

在琳瑯滿目的校園網(wǎng)站上，網(wǎng)頁(yè)的色彩只有與眾不同、有自己獨(dú)特的風(fēng)格，才能顯得個(gè)性鮮明，給瀏覽者留下深刻的印象。尤其在同類網(wǎng)站中，網(wǎng)頁(yè)的色彩不但要符合此類網(wǎng)站的用色特點(diǎn)，還要有其獨(dú)到之處。網(wǎng)頁(yè)設(shè)計(jì)是一種藝術(shù)活動(dòng)，只有按照內(nèi)容決定形式的原則，大膽進(jìn)行藝術(shù)創(chuàng)新，才能設(shè)計(jì)出既符合網(wǎng)站主題，又有一定藝術(shù)特色，風(fēng)格獨(dú)特、個(gè)性鮮明的網(wǎng)頁(yè)。比如綜合性大學(xué)的代表——北京大學(xué)，網(wǎng)頁(yè)的主體顏色采用最為簡(jiǎn)單的白色調(diào)，多用顏色的飽和度不同形成視覺的差異，而起內(nèi)容過渡和布局的作用，合理的顏色搭配使龐大而繁多的內(nèi)容布置得井然有序，方便不同瀏覽者快速獲取有效信息，也體現(xiàn)其“思想自由、兼容并包”的北大校訓(xùn)。

3.應(yīng)符合瀏覽者的情趣愛好及網(wǎng)頁(yè)配色的發(fā)展潮流

校園網(wǎng)站作為以知識(shí)分子為主要對(duì)象的教育科研型網(wǎng)站，一般來說，適合使用以中性色為主的色彩，顯得和諧而具有文化氣息。但在不同的時(shí)期瀏覽者對(duì)顏色的愛好也略有不同，所以設(shè)計(jì)者要適當(dāng)關(guān)注流行色的發(fā)展。流行色是特定時(shí)期內(nèi)社會(huì)風(fēng)行的時(shí)髦色彩，是一種時(shí)尚色、鮮活色，具有很強(qiáng)的誘惑力和沖擊力。若能抓住瀏覽者緊跟潮流、追趕時(shí)尚的心理，適時(shí)地選用流行色作為網(wǎng)頁(yè)的主色調(diào)，必定能產(chǎn)生更好的傳播效果。

4.應(yīng)保持實(shí)用性和藝術(shù)性的統(tǒng)一

多數(shù)的校園網(wǎng)頁(yè)都包含豐富的信息資料，網(wǎng)頁(yè)色彩設(shè)計(jì)要注意方便瀏覽者的讀取，注意文字與背景色彩的明暗對(duì)比，以使人們?cè)跒g覽大量網(wǎng)頁(yè)信息的時(shí)候，減少屏幕刺激，減輕視覺疲勞。同時(shí)美觀的界面可以保持瀏覽者愉悅的心情，有利于集中精力讀取，從而達(dá)到實(shí)用性與藝術(shù)性的統(tǒng)一。

5.應(yīng)突出延續(xù)與創(chuàng)新

網(wǎng)頁(yè)色彩設(shè)計(jì)要保持用色的延續(xù)性。雖然網(wǎng)頁(yè)的信息會(huì)不斷更新，網(wǎng)頁(yè)的版式也會(huì)定期調(diào)整，但網(wǎng)頁(yè)色彩的基調(diào)和風(fēng)格一旦形成后，不宜大幅度或頻繁地改換，而應(yīng)保持一定的延續(xù)性。 但為了保持新鮮感、提高吸引力，也可小范圍地對(duì)網(wǎng)頁(yè)色彩的明度、純度進(jìn)行適當(dāng)?shù)恼{(diào)整和變換。根據(jù)瀏覽者緊跟潮流、追趕時(shí)尚的心理，適時(shí)地選用流行色作為網(wǎng)頁(yè)的輔助色或點(diǎn)睛色，也能為網(wǎng)頁(yè)平添幾份新意。

四、網(wǎng)頁(yè)色彩的設(shè)計(jì)步驟

1.確定網(wǎng)站的主色調(diào)及輔助色和背景色

網(wǎng)頁(yè)色彩設(shè)計(jì)首先需要確定畫面的主要色彩傾向，即主色調(diào)。主色調(diào)就猶如音樂中的主旋律，如圖3中國(guó)農(nóng)業(yè)大學(xué)的網(wǎng)頁(yè)，主色調(diào)為綠色RGB為（0，128，0）色調(diào)80，飽和度240，亮度60，綠色對(duì)整個(gè)網(wǎng)頁(yè)起著主導(dǎo)作用，頁(yè)面中的其它色彩都是圍繞著綠色來進(jìn)行搭配。輔助色在網(wǎng)頁(yè)中所占的比例不大，它是主色的襯托，使用恰當(dāng)能起到畫龍點(diǎn)睛的作用，通常應(yīng)用于圖標(biāo)、文字、表格、線條、輸入框及超鏈接，但卻對(duì)整個(gè)頁(yè)面的色彩起著調(diào)和的作用。它讓頁(yè)面更活潑、富有生氣，并使主色調(diào)更加流暢地貫穿整體。輔助色可以使用跟主色調(diào)相鄰近的顏色，也可以用主色調(diào)的對(duì)比色。背景色是網(wǎng)頁(yè)的底色，有時(shí)和主色是同一色彩。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字、圖片）;反之，底色淺，文字的顏色就要深，以淺色的背景襯托深色的內(nèi)容（文字、圖片）。需要注意的是，應(yīng)盡可能在瀏覽器的安全顏色范圍內(nèi)選擇主色。

圖3 中國(guó)農(nóng)業(yè)大學(xué)網(wǎng)頁(yè)網(wǎng)頁(yè)界面圖

2.確定文字的色彩

文字的顏色在網(wǎng)頁(yè)設(shè)計(jì)中很重要，文字顏色一定要與網(wǎng)頁(yè)背景顏色相諧調(diào)，一般來說網(wǎng)頁(yè)背景顏色大多較柔和、素淡，這種背景色配上深色的文字，讓人看起來自然舒暢。例如，淺綠色網(wǎng)頁(yè)背景配黑色文字，或白色背景配藍(lán)色文字，都很醒目，前者突出背景，后者突出文字。而比較深的背景色配黃色文字比較有特色，如下圖4配色圖。在網(wǎng)頁(yè)設(shè)計(jì)中不同格調(diào)的網(wǎng)頁(yè)在文字顏色的使用中都有不同的個(gè)性化設(shè)計(jì)，但應(yīng)注意的是對(duì)于文字的顏色，只可少量運(yùn)用，如果什么都想強(qiáng)調(diào)，其實(shí)是什么都沒強(qiáng)調(diào)，而且過多的顏色會(huì)影響網(wǎng)頁(yè)瀏覽者的閱讀，使人眼花繚亂，達(dá)不到利用網(wǎng)頁(yè)向讀者傳遞信息的目的。在網(wǎng)頁(yè)設(shè)計(jì)中文字的顏色的運(yùn)用，直接影響瀏覽者的情感，所以在設(shè)計(jì)中要根據(jù)網(wǎng)頁(yè)內(nèi)容來把握文字顏色的對(duì)比度，使網(wǎng)頁(yè)文字通過對(duì)顏色的運(yùn)用實(shí)現(xiàn)想要達(dá)到的設(shè)計(jì)效果，設(shè)計(jì)情感和設(shè)計(jì)思想。

圖4 配色圖

3.確定網(wǎng)頁(yè)色彩的搭配組合

在網(wǎng)頁(yè)設(shè)計(jì)中要突出內(nèi)容，就應(yīng)當(dāng)盡量少用圖片，多用色塊保持版面的美觀性、醒目性。下面色彩組合較易使版面醒目：黑白、藍(lán)白、黑灰白、藍(lán)黑、紫黃。值得注意的是，網(wǎng)頁(yè)的搭配的色彩最好不要超過三種，為了保持內(nèi)容在頁(yè)面上的突出醒目，可以只采用黑白色調(diào)。網(wǎng)頁(yè)的背景和前文的色彩比較盡量要大，不要用花紋繁雜的圖案作背景。

4.確定網(wǎng)頁(yè)中所使用的圖片及其色彩

圖像在網(wǎng)頁(yè)中起著畫龍點(diǎn)睛的作用，不但能裝飾頁(yè)面，還能表達(dá)風(fēng)格與情感。該怎么選擇適合自己網(wǎng)站的圖片呢？從內(nèi)容上講，要能切合網(wǎng)站的主題；從顏色方面來講，若一個(gè)網(wǎng)頁(yè)是藍(lán)色的底色，但整個(gè)網(wǎng)頁(yè)的圖片卻亂七八糟，各種顏色紛紛出籠，更糟的是，藍(lán)色是屬于冷色系的顏色，若以藍(lán)色為底的網(wǎng)頁(yè)，卻盡都是大紅色、橘色的圖片，那將會(huì)使整張網(wǎng)頁(yè)看起來就像垃圾堆，雜亂無章。所以，可以簡(jiǎn)單的歸納出網(wǎng)頁(yè)與圖片的顏色，色系一致或是視覺效果一致，將會(huì)使網(wǎng)頁(yè)看起來更為美觀且有自己的風(fēng)格。

5.確定網(wǎng)站導(dǎo)航的色彩

網(wǎng)站導(dǎo)航的超鏈接應(yīng)清晰無誤地向讀者標(biāo)識(shí)出來，所有導(dǎo)航性質(zhì)的設(shè)置，像圖像按鈕，都要有清晰的標(biāo)識(shí)鏈接文本的顏色，最好用約定俗成的，比如未訪問，點(diǎn)擊時(shí)，點(diǎn)擊過的都要規(guī)范使用顏色，要讓人看得明白，千萬(wàn)別光顧視覺效果的熱鬧，而讓讀者不知東西南北。

五、結(jié)束語(yǔ)

總之，影響校園網(wǎng)視覺效果的因素有很多，但色彩無疑是確立網(wǎng)站風(fēng)格的靈魂，是樹立網(wǎng)站形象的關(guān)鍵因素。只有將色彩自然和諧地運(yùn)用到校園網(wǎng)網(wǎng)頁(yè)的設(shè)計(jì)中，才能使校園網(wǎng)獲得生命的力量，吸引瀏覽者的眼球，真正起到傳遞校園文化、擴(kuò)大學(xué)校影響力的作用。

[1] http://www.51jzhan.cn/news_view.asp?id=141

[2] 梁景紅（Relen）. 網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)配色[M]. 北京：人民郵電出版社，2004.

[3] 黎芳（Redfall）. 網(wǎng)頁(yè)設(shè)計(jì)與配色實(shí)例分析[M]. 北京：兵器工業(yè)出版社，北京希望電子出版社，2006.

[4] 趙素蕊，柳冬青. 網(wǎng)站設(shè)計(jì)風(fēng)格與色彩[J]. 商場(chǎng)現(xiàn)代化，2007.

[5] 吳方. 網(wǎng)頁(yè)的色彩設(shè)計(jì)思考[J]. 江蘇廣播電視大學(xué)學(xué)報(bào). 2006，6.

[6] 孫榮. 淺論高校校園網(wǎng)站界面設(shè)計(jì)的視覺創(chuàng)意[J]. 常州工學(xué)院學(xué)報(bào)，2007，4.

[7] 楊麗麗. 色彩在網(wǎng)頁(yè)設(shè)計(jì)中的協(xié)調(diào)與應(yīng)用[J]. 中國(guó)科技信息，2007，23.

[8] 李立偉. 淺談網(wǎng)頁(yè)色彩設(shè)計(jì)[J]. 鄭州輕工業(yè)學(xué)院學(xué)報(bào)（社會(huì)科版），2007，2.

[9] 張祖鷹. 網(wǎng)站建設(shè)中的色彩與色彩搭配[J]. 電腦開發(fā)與應(yīng)用，2007，11.

The Design and Application of color in the Webpage Campus

CHEN li-xia，HUANG Zhuo-shun

It goes without saying that the position and role of color in the design of webpage. But there are many problems in the design and application of color in the construction of campus webpage. To the problems,the paper puts forward the design principle and procedure of webpage color,and gives relevant advices on how to promote the application effect of color in campus network.

Network in campus Webpage Color Design Application

TP393.18

A

1008-7427（2010）04-0097-02

2010-02-28