曲俊燕　安容宇

摘 要：互聯(lián)網(wǎng)的高速發(fā)展，使得越來越多的高校通過建設(shè)自己的網(wǎng)站進(jìn)行展示和宣傳。作為高校宣傳的門戶，高校網(wǎng)站頁面設(shè)計(jì)也就顯得尤為重要。本文主要從文字、圖形圖像、版面、色彩及動(dòng)態(tài)元素這五個(gè)視覺要素的設(shè)計(jì)來論述如何實(shí)現(xiàn)高校網(wǎng)站界面設(shè)計(jì)。

關(guān)鍵詞：網(wǎng)頁視覺要素；文字；圖形圖像；版面；色彩；動(dòng)態(tài)元素

隨著互聯(lián)網(wǎng)的高速發(fā)展和高校網(wǎng)絡(luò)化、信息化步伐的加快，高校網(wǎng)站受到越來越多人的關(guān)注，它不僅向社會(huì)各界展示高校辦學(xué)特點(diǎn)、文化內(nèi)涵，同時(shí)還和外界信息資源形成了互通，擴(kuò)大了學(xué)術(shù)交流的范圍，使大學(xué)校園走向了世界。目前，高校網(wǎng)站作為網(wǎng)絡(luò)宣傳的信息平臺，正在充分發(fā)揮著高校教育資源的優(yōu)勢。如今的高校網(wǎng)站界面設(shè)計(jì)，早已脫離單純追求功能的時(shí)代，網(wǎng)站界面設(shè)計(jì)不僅要考慮如何把有效的信息放在界面上，還要考慮到瀏覽者是如何感知網(wǎng)站界面上的各種視覺要素的。怎樣通過網(wǎng)頁視覺要素設(shè)計(jì)來實(shí)現(xiàn)高校網(wǎng)站界面設(shè)計(jì)？ 本文從文字、圖形圖像、版面、色彩及動(dòng)態(tài)元素這五個(gè)視覺要素的設(shè)計(jì)來論述。

1 文字

在高校網(wǎng)站界面設(shè)計(jì)中，經(jīng)常會(huì)使用大量的文字來對需要傳達(dá)的信息進(jìn)行描述。不同的網(wǎng)頁信息內(nèi)容以及網(wǎng)頁主題決定了網(wǎng)頁中文字的風(fēng)格以及編排形式。文字通常單純作為文本，有時(shí)還可以充當(dāng)圖形來使用，在這一點(diǎn)上應(yīng)該根據(jù)網(wǎng)頁的主題來進(jìn)行設(shè)計(jì)。例如學(xué)校的名稱。網(wǎng)頁上的大多數(shù)中文文字是以容易被大眾接受的宋體字、黑體字來設(shè)置，這是為了在不同系統(tǒng)設(shè)置的電腦上網(wǎng)頁的顯示沒有誤差來設(shè)置的。文字通過各種各樣的巧思妙想，雖然也可以用來美化頁面，對網(wǎng)頁起到一定的裝飾作用，但最終目的還是要傳遞信息，為準(zhǔn)確的傳遞某種信息來服務(wù)。所以文字的裝飾設(shè)計(jì)不應(yīng)該拋離其可讀性，合適的文字能使網(wǎng)民舒適的瀏覽網(wǎng)頁并快速獲取有效信息。

2 圖形圖像

圖形圖像和文字相比，更加的形象具體，不需要進(jìn)行解釋翻譯。在現(xiàn)代的網(wǎng)頁設(shè)計(jì)中，由于信息量的激增，人們更加愿意從圖片獲取所需的信息，圖片能夠打破文字較為呆板的視覺效果，豐富網(wǎng)頁的視覺表現(xiàn)。

網(wǎng)頁中的圖形圖像包括圖標(biāo)、圖片、背景圖片。圖標(biāo)以功能性、操作性、標(biāo)記性信息的傳達(dá)為主旨，力求通過對字體、構(gòu)圖等抽象符號的位置、比例、對比、漸變等關(guān)系濃縮在一方小圖，從而更直接、生動(dòng)的揭示要表達(dá)的信息內(nèi)容。圖片在網(wǎng)頁設(shè)計(jì)中不僅僅是作為裝飾功能來使用，更多的是作為輔助文字信息傳遞的功能來使用的。

3 版面

網(wǎng)頁的版式設(shè)計(jì)需要對信息資源進(jìn)行特定有序的編排，才能夠保證瀏覽者在瀏覽網(wǎng)頁的時(shí)候不用花費(fèi)很多的時(shí)問來從某個(gè)頁面上尋找一些共性鏈接、菜單、按鈕所在的地方，有利于更快更好的信息傳遞。

根據(jù)我國大部分高校網(wǎng)站進(jìn)行觀察分析，所采用的版式結(jié)構(gòu)大概分成以下幾種：（1）上左右結(jié)構(gòu)。上部為校名、校標(biāo)或廣告，下方左邊為導(dǎo)航菜單，右邊為內(nèi)容。這種結(jié)構(gòu)布局清晰、主次分明，被我國絕大部分高校網(wǎng)站采用。（2）左右結(jié)構(gòu)。里面填上所要內(nèi)容，一半深色，一半淺色，這種設(shè)計(jì)性較強(qiáng)的結(jié)構(gòu)，一般在國外高校網(wǎng)站設(shè)計(jì)中常見。比如哈佛大學(xué)網(wǎng)站的主頁，就是采取這種布局方式。（3）上左中右結(jié)構(gòu)。一般上下都有廣告條，左右兩邊為導(dǎo)航和鏈接，中間為主要內(nèi)容。這種結(jié)構(gòu)在我國高校網(wǎng)站中也較常見。

4 色彩

高校網(wǎng)站是高校對外宣傳的窗口，良好、恰當(dāng)?shù)纳蔬\(yùn)用可以提升高校網(wǎng)站品質(zhì)與網(wǎng)絡(luò)形象，正確傳達(dá)出高校的文化內(nèi)涵。在高校網(wǎng)站色彩運(yùn)用時(shí)，應(yīng)當(dāng)莊重、大氣，整體色調(diào)協(xié)調(diào)統(tǒng)一，避免使用怪誕與另類的色彩。

在為高校網(wǎng)站頁面設(shè)計(jì)選擇色彩方案時(shí)，應(yīng)當(dāng)先確定一種主色調(diào)，這一色調(diào)應(yīng)有利于體現(xiàn)網(wǎng)站主題宗旨。主色調(diào)應(yīng)當(dāng)根據(jù)學(xué)校的整體風(fēng)格、學(xué)科特色、地域特色、人文特色、傳統(tǒng)特色等各方面的因素來確定。二是確定配色方案。主色調(diào)確定后，就要合理運(yùn)用色彩規(guī)律，以主色調(diào)為中心，利用色彩的明度、純度、色相三要素的變化，適當(dāng)增加其他色彩作為對比色和補(bǔ)色，選取輔色調(diào)、點(diǎn)睛色、背景色等組成配色方案。三是正確使用色彩。確定好主色調(diào)和配色方案后，在色彩的使用中應(yīng)注意“總體協(xié)調(diào)、局部對比”，即網(wǎng)頁的整體色彩效果應(yīng)該是和諧的，只有局部小范圍的地方可以有一些強(qiáng)烈的色彩對比。

5 動(dòng)態(tài)元素

動(dòng)態(tài)元素主要指聲音、動(dòng)畫和視頻文件。聲音是多媒體技術(shù)的重要組成元素，在網(wǎng)頁里，瀏覽者可以通過享受音樂獲取所需要的信息。動(dòng)畫一般為GIF或FLASH。優(yōu)秀的動(dòng)畫和具有震撼力的音效結(jié)合，常常使觀者身臨其境。考慮到目前的網(wǎng)絡(luò)技術(shù)和視頻文件的播放效果，在設(shè)計(jì)上應(yīng)首選較小的顯示尺寸。視頻在傳遞聲音和影像上的優(yōu)勢，將會(huì)為未來網(wǎng)絡(luò)信息傳播提供更大的發(fā)展空間。

網(wǎng)頁作為一種新的視覺表現(xiàn)形式，兼容了傳統(tǒng)平面設(shè)計(jì)的特征，又具備其所沒有的優(yōu)勢，成為今后信息交流的一個(gè)非常有效的途徑。高校網(wǎng)站頁面設(shè)計(jì)，作為宣傳和展示高校的門戶，我們要從高等學(xué)校的教育主旨出發(fā)，同時(shí)學(xué)習(xí)和借鑒國內(nèi)外優(yōu)秀網(wǎng)站作品的設(shè)計(jì)經(jīng)驗(yàn)，并且從傳統(tǒng)的藝術(shù)思想理論和形式美法則中汲取營養(yǎng)，對高校網(wǎng)站建設(shè)進(jìn)行更多、更深入的藝術(shù)設(shè)計(jì)實(shí)踐活動(dòng)。

[參考文獻(xiàn)]

[1]王愉.論網(wǎng)頁視覺要素設(shè)計(jì)[J].北京印刷學(xué)院學(xué)報(bào).2005（4）.

[2]襲永曉.論高校門戶網(wǎng)站的建設(shè)[J].電腦學(xué)習(xí).2009（6）.

[3][韓]姜恩正，黃靜慧，著.周欽華，譯.設(shè)計(jì)師談成功網(wǎng)頁設(shè)計(jì)原則.北京：電子工業(yè)出版社，2006.