談高校網站的主頁設計

摘 要: 目前，高校網站日益發展起來，通過對高校網站的主頁內容、版式布局、主題定位和其它因素進行分析，本文作者就高校網站主頁如何能更好更合理地用視覺信息來表現和傳達方面談談自己的看法。

關鍵詞: 高校網站 藝術設計 信息

近年來，隨著網絡技術的飛速發展，網絡已滲透到全人類的各個方面，深刻影響著我們的生活和工作方式。高校也紛紛建立了自己的網站，給高等教育帶來了更廣闊的發展空間。高校網站承載著高校信息化管理和對外宣傳之重任，所以網站的主頁設計既要能充分傳播信息，又要能使瀏覽者達到感官上的愉悅，從而對高校留下更深更好的印象，達到對高校的深度認同，促進高校的良好發展。高校網站的設計是一個系統的工作，而主頁的設計又有著舉足輕重的作用，只有對部分高校網站進行分析，找到規律和方法，才能設計出具有較高美學價值和豐富內涵的網頁。

1.高校網站主頁的內容設計

現有的高校校園網大部分存在內容繁多且擁擠的問題，將所有信息不加規整地塞進校園網頁中，整體看起來雜亂無章，更談不上藝術的價值，這樣的網頁看起來很滿，沒有留白給讀者一個遐想的空間。還有一些高校網站的主頁幾乎沒有什么內容，沒有對高校內部資料和信息進行整理策劃就推出了自己的網站。

高校網站與其他網站相比，不需要華麗的外表，而要多增加些校園的氣息，主要還是多注重豐富的內容。高校網站的主頁是校園對外的窗口，是瀏覽者了解高校情況最直觀的平臺。本校的師生都通過高校網站了解校園的發展、最新動態，以及工作安排，所以需要設置公告欄和新聞發布板塊。而校外的瀏覽者則希望通過網頁對高校的整體情況和特色有一個基本了解，并能在這里查詢所需的信息。有些高校根據這一特點在主頁分出兩個入口:校內網和校外網入口，根據瀏覽內容有所不同而設計界面，這也是整合比較好的方法之一。當然網頁的形式只是第一印象，而能持久吸引讀者、發揮其自身作用的還是其豐富的內容。

通過抽取國內50所高校網站進行分析，主頁的內容一般分為以下幾大模塊。

(1)高校概況導航欄。這是網頁中很重要的部分，也是瀏覽者了解高校的基礎部分。所以各個學校富有特色的項目在設計的時候要以顯著的方式表現出來。從全國大部分高校的網頁來看，其內容主要都有:學校概況、機構設置、人才培養(包括本科生教育、研究生教育、留學生和成人教育等)、教室隊伍、科學研究、招生就業、合作交流等。

(2)高校新聞和公告。高校新聞一般包括校內重要新聞、專題新聞、校報電子版、報刊信息等。新聞和公告的設計要以滾動或者翻動的形式出現在校園網的首頁，方便更新和瀏覽。其中重要新聞以圖片滾動的方式能將一些重要事項及時、便捷地告知讀者，免除了通知、發文等許多的行政事務。如:九江學院校園網組建后，會議安排表、重要通知和公示等都在網頁上發布，解決多校區的辦公問題，既降低了辦公成本，又提高了工作效率。

(3)交互窗口。為讀者提供了一個參與學校管理、反映群眾呼聲的窗口，也是領導了解基層、接近群眾的一種途徑。在這一部分，較常見的就是校長信箱。因為網絡通信的隱蔽性和便捷性，較之于傳統的書面意見，人們似乎更樂意通過網絡來表達自己的思想。

(4)高校信息管理系統。校園網為高校教學管理和行政事務管理提供了很大的方便。許多高校將校內公文處理、人事查詢、學籍選課管理、成績查詢與管理等都放在校園網主頁上，教職工和學生都能借助于校園網這個平臺，快捷地進行信息處理和查詢。

(5)信息服務。這一部分為讀者提供站點導航、搜索等相關的信息服務，使讀者能方便地通過網頁進入整個互聯網。

2.高校網站主頁的版式布局設計

確定了高校網主頁的內容，我們就可以開始進行網頁總體版式布局。通常人們閱讀的視覺習慣是:從左到右，自上而下，先左上后右下。因此在整體版面布局時要遵循這個原則，把網頁中的校園概況導航欄和校園新聞公告放到版面的上部，這樣更易引起人們第一時間的注意。

根據搜集高校網站進行觀察分析，大部分高校網的版式結構大概分成以下幾種。

(1)“T”字型結構。“T”字型布局是指上部為橫條標志，廣告欄，下方左邊為導航菜單，右邊為內容。這種結構清晰、主次分明，簡易的版面布局，使用也比較廣泛。但如果細節處理不好，容易顯得單調乏味。

(2)“三”字型結構。“三”字型結構，以兩條色塊橫向分割成四塊版面，對稱對比布局，顧名思義，采取左右或者上下對稱的布局，里面填上所要內容，一半深色，一半淺色，比如哈佛大學網站的主頁，就是采取這種布局方式。優點是視覺沖擊力強，缺點就是不能將兩部分融合在一起。

(3)“口”字型結構。“口”字型結構的特點是:能容納較多的信息，一般上下都有廣告條，左右兩邊為導航和鏈接，中間為主要內容。這種頁面的缺點就是顯得畫面擁擠，不太靈活。如何設計出布局合理的校園網頁?首先整體要簡練精準，而且在強調藝術性的同時，要通過網頁頁面結構的分割和造型空間的確立，合理安排組成各內容的合理位置，使頁面內容和形式有所統一，具有整體美感。要考慮頁面的美觀和可讀性，還要考慮網頁瀏覽的特點，網頁版式設計是通過視覺元素實現傳播的視覺傳達過程，為了達到好的效果，版式設計必須依據人們在視覺上的心理和生理特點，確定各種視覺構成元素之間的視覺關系和瀏覽順序。合理的視覺流程應是在人們認識過程的心理順序和思維發展的邏輯一致的基礎上，根據信息的主次來確定各元素的順序，并通過精心安排引導瀏覽者。在進行高校網站的主頁設計時，版式布局既要實現“功能”又要實現“美”，而“功能”和“美”都是為了更好地表達主題。

3.高校網站主頁的主題定位與統一

高校的門戶網站往往只有一個主題，網頁設計風格應體現高校的社會性質、辦學特色、校園風貌與校園文化，充分展示自己的優勢和形象，才能讓瀏覽者有認同認知感。根據調查的高校網頁的設計，這種效果的取得并不明顯，一方面沒有通過運用邏輯規律對網頁主題思想進行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，沒有讓瀏覽者快速理解和吸收，另一方面缺乏運用藝術的形式美法則對網頁構成元素進行條理性處理，沒有營造出符合設計主題思想的視覺環境、主題，使瀏覽者缺乏對網頁的興趣和內容的理解。有些高校網站注意到以上幾點，對改版后的網站主題定位能準確表達。例如武漢大學網站的主頁設計以“傳承百年輝煌，盡展名校風采”為主題思想，融合了古建筑和珞珈山文化的元素進行設計，尤其在色彩上，運用淡雅的色調，各元素色彩間對比柔和，具有文化底蘊和校園氣息。

在高校的主題定位確定之后，保持風格統一也相當重要。在被調查的高校網站中，有一小部分網頁沒有做到風格統一，既會讓人對網站甚至高校的形象感到混亂，又會給瀏覽者帶來不便。舉個例子來說，假如每個網頁上的導航排列或者顏色不同，那么瀏覽者進入不同頁面之后就會無所適從，難以準確找到所需的信息。網頁上所有的圖像、文字，包括色彩、版面編排、區分線、字體、標題、注腳等頁面元素，要統一風格，讓風格貫穿于整個網站。保持風格的統一，既能強化風格定位所帶來的作用，又能在閱覽體驗上給讀者帶來方便和順暢。

4.九江學院網站的主頁設計

九江學院是經國家教育部批準設立的國有公辦全日制本科普通高等院校，面向全國30個省(市、自治區)招生。學校坐落在長江中下游的歷史文化名郡——江西省九江市，位于廬山之麓、長江之濱、鄱陽湖之畔，校園美麗宜居，生態環境優越。名城、名山、名江、名湖，造就了九江學院的靈氣，尤其是具有千年歷史、享有“天下書院之首”美譽的白鹿洞書院，更為九江學院賦予深厚的文化氣息和辦學氛圍。就學院的概況來看，我們選擇“名城、名山、名江、名湖”為主題。首先，根據主頁內容分為:學校導航、新聞公告、專題通道、站內搜索、常用服務、友情鏈接等欄目。根據內容的主次關系，來做整體布局設計，從版式上來看，整體采用“三”字版式構圖，以廬山作為九江學院的背景圖案，但在上半部分打破以往的格局，把九江學院標志及具有代表校園風景照片作為畫面的注視點，大幅照片以激起片片漣漪貫穿整個畫面，配以校訓及文字的介紹，更能體現出優美的校園環境和校園氛圍，使瀏覽者第一時間就能關注到，起到很好的宣傳作用;在色彩方面，用九江學院標志標準色做延伸，配以灰色與灰綠色的畫面，給人以穩重感。(見圖1)除此之外，在設計時考慮到子頁面的風格，也根據主頁的元素和結構做一個延展，沿用了上半部分圖案和色彩，由“三”轉變為“T”字結構，左邊用校園風光引出導航一目了然，更利于讀者閱覽。(見圖2)

圖2

在整個網頁設計中，不僅僅是把各種文字和圖案等元素放上去就行了，還要科學地考慮如何使受眾能更多、更有效地接受網頁上的信息，這就需要從“審美”配合“功能”的要求，設計出內容表達清晰、整體性好、具有藝術內涵的頁面。所以，網頁設計不但需要運用平面設計、版式編排、視聽藝術，而且應懂得計算機、網絡等方面的技術原理。在這次九江學院改版的設計中我們實現了一些動態網頁功能。

以往的高校網站設計往往會有偏向性，如果界面比較具有藝術感，功能技術方面就有所缺少，如果功能技術方面實現比較完善，則藝術設計方面又有欠缺。高校網站的主頁，網頁美觀性和實用性都是重要目標，所以在設計高校網站主頁時，應集中技術與藝術的專業人員，綜合考慮，便會制作出既實用功能完善，又具有藝術內涵的高校網頁作品，把瀏覽者帶入一個全新的網絡高校時代。

參考文獻:

[1]陸樂編著.網頁設計.南京:東南大學出版社，2004.

[2][韓]崔美善著.馬曉陽，劉娟譯.設計師談網頁風格構成.北京:電子工業出版社，2006.

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