淺談校園網網頁色彩的設計

陳麗霞，黃卓順

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

淺談校園網網頁色彩的設計

陳麗霞，黃卓順

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

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

校園網；網頁；色彩設計；應用

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

一、色彩在網頁中的作用

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

二、當前校園網色彩設計中存在的問題

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

1.色彩過于單調或色調過于花俏

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

圖1 湖南商學院北津學院網頁界面圖

圖2 石家莊經濟學院網頁界面圖

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

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

三、網頁色彩的設計原則

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

1.應與網站主題相協(xié)調

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

2.應能體現(xiàn)學校的獨特風格

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

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

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

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

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

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

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

四、網頁色彩的設計步驟

1.確定網站的主色調及輔助色和背景色

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

圖3 中國農業(yè)大學網頁網頁界面圖

2.確定文字的色彩

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

圖4 配色圖

3.確定網頁色彩的搭配組合

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

4.確定網頁中所使用的圖片及其色彩

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

5.確定網站導航的色彩

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

五、結束語

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

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

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

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

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

[5] 吳方. 網頁的色彩設計思考[J]. 江蘇廣播電視大學學報. 2006，6.

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

[7] 楊麗麗. 色彩在網頁設計中的協(xié)調與應用[J]. 中國科技信息，2007，23.

[8] 李立偉. 淺談網頁色彩設計[J]. 鄭州輕工業(yè)學院學報（社會科版），2007，2.

[9] 張祖鷹. 網站建設中的色彩與色彩搭配[J]. 電腦開發(fā)與應用，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