淺談視覺要素在高校網站頁面設計中的應用

曲俊燕　安容宇

摘 要：互聯網的高速發展，使得越來越多的高校通過建設自己的網站進行展示和宣傳。作為高校宣傳的門戶，高校網站頁面設計也就顯得尤為重要。本文主要從文字、圖形圖像、版面、色彩及動態元素這五個視覺要素的設計來論述如何實現高校網站界面設計。

關鍵詞：網頁視覺要素；文字；圖形圖像；版面；色彩；動態元素

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

1 文字

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

2 圖形圖像

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

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

3 版面

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

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

4 色彩

高校網站是高校對外宣傳的窗口，良好、恰當的色彩運用可以提升高校網站品質與網絡形象，正確傳達出高校的文化內涵。在高校網站色彩運用時，應當莊重、大氣，整體色調協調統一，避免使用怪誕與另類的色彩。

在為高校網站頁面設計選擇色彩方案時，應當先確定一種主色調，這一色調應有利于體現網站主題宗旨。主色調應當根據學校的整體風格、學科特色、地域特色、人文特色、傳統特色等各方面的因素來確定。二是確定配色方案。主色調確定后，就要合理運用色彩規律，以主色調為中心，利用色彩的明度、純度、色相三要素的變化，適當增加其他色彩作為對比色和補色，選取輔色調、點睛色、背景色等組成配色方案。三是正確使用色彩。確定好主色調和配色方案后，在色彩的使用中應注意“總體協調、局部對比”，即網頁的整體色彩效果應該是和諧的，只有局部小范圍的地方可以有一些強烈的色彩對比。

5 動態元素

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

網頁作為一種新的視覺表現形式，兼容了傳統平面設計的特征，又具備其所沒有的優勢，成為今后信息交流的一個非常有效的途徑。高校網站頁面設計，作為宣傳和展示高校的門戶，我們要從高等學校的教育主旨出發，同時學習和借鑒國內外優秀網站作品的設計經驗，并且從傳統的藝術思想理論和形式美法則中汲取營養，對高校網站建設進行更多、更深入的藝術設計實踐活動。

[參考文獻]

[1]王愉.論網頁視覺要素設計[J].北京印刷學院學報.2005（4）.

[2]襲永曉.論高校門戶網站的建設[J].電腦學習.2009（6）.

[3][韓]姜恩正，黃靜慧，著.周欽華，譯.設計師談成功網頁設計原則.北京：電子工業出版社，2006.