陳麗霞，黃卓順

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

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

陳麗霞，黃卓順

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.確定文字的色彩

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

圖4 配色圖

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

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

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

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

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

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

五、結(jié)束語

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

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

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

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

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

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

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

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

[8] 李立偉. 淺談網(wǎng)頁色彩設(shè)計[J]. 鄭州輕工業(yè)學(xué)院學(xué)報（社會科版），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