以用戶為中心的高校網站界面設計

李 葳

（福州職業技術學院，福建 福州 350001）

如何搭建完整的網站架構并設計出一個出色的學校網站？關于這個問題，很難提出一個絕對權威和正確的設計思路，但任何網站的設計都需要遵循一個循序漸進的步驟。根據Web標準：結構(Structure)，表現(Presentation)和行為(Behavior)，網站的設計大致可具體分為網站模型構建、審美與交互設計、風格設計、代碼設計、可用性測試等五方面，這五個方面的設計均是建立在用戶分析和需求分析的基礎上。[1]

一、高校網站用戶分析

1.網站設計最重要目的

網站設計最重要目的是滿足用戶查詢信息的需求，所以網站界面設計的第一步就需要決策者和設計師從確定用戶群體入手，分析群體特征及需求，繼而確定整體界面設計方案。首先從用戶分類、用戶需求定位及訪問頻率三個方面對學校網站進行用戶分析，如表所示。

表 用戶分類及需求分析

2.在校學生及準學生是學校網站的主要訪問人群

從不同用戶的數量上看，學校網站雖然有別于專門的網絡教育站點，但在校學生及準學生（perspective students）由于基數大，仍作為學校網站的主要訪問人群，貢獻了學校網站大部分的訪問量。教師及行政工作人員在訪問次數和訪問頻率方面較少，如圖1所示。

圖1 用戶數量分布

依據以上兩點分析，學生是學校網站的主要服務對象，所以學生群體的使用需求、使用習慣和使用特征都是學校網站設計的重要考量內容和指導方向。

二、以用戶為中心的高校網站設計項目分析

一個成功的以用戶體驗為中心的設計項目，應該正確處理和協調以下五個層面的關系，如圖2所示。

圖2 以用戶為中心的網站設計五層次

1.從戰略層分析

作為教育類型網站，高校站點設計的決策者由高校分管的校領導承當，由設計師具體實施，通常站點的內容大致由以下三個功能模塊構成：

（1）向社會（包括國內外）展示校園文化和教研成果，樹立良好的教育形象；

（2）介紹學校的機構設置并及時發布學校的通知公告和新聞動態，讓社會了解學校的最新動態；

（3）為全校師生提供一個良好的教學與學習的網絡平臺。

2.從范圍層分析

以學生作為學校網站的中心用戶，必須對學生的具體使用需求進行分析。網站界面設計流程，最重要的是考慮學生所要檢索的信息版塊均能在首頁中得到清晰的指向，并使站點有合理的結構，最終抵達有價值的信息。

3.從結構層分析

良好的信息架構（Information Architecture），可以讓用戶快速準確地定位到相關信息，節省在無用鏈接中浪費的時間；合理的交互設計，能夠使用戶更便捷地使用網站提供的服務。

4.從框架層分析

用戶對于一個網站的認知由它的界面、導航和信息三個方面構成。導航和信息的合理編排構成了界面。

5.從表現層分析

即視覺設計方面，好的頁面布局和設計能夠提高用戶的使用效率，更好引導和啟發用戶。對于教師及其他教育者，簡潔合理的設計能夠讓他們感到網站的權威和實用性；對于學生群體，網站鮮明的特征更能增加他們對網站的好感，引導他們的視線，從網站瀏覽中獲得更多信息。對于引導用戶視線，主要可應用以下兩種方式：

（1）應用古騰堡圖表

訪問者在瀏覽頁面的時候，視線通常趨向于從左上角移動到右下角。因為人們通常的閱讀習慣，都是從左至右、從上往下，久而久之，瀏覽視線就本能地會沿著這一路徑移動。古騰堡圖表描述了“對角線平衡”這一和諧的閱讀軌跡規律：“左上角是第一視覺落點區（Primary Optical Area，POA），而右下角則是最終視覺落點區（Terminal Anchor，TA）。與之相對，右上角和左下角則是視覺盲點”。[2]為了體現“對角線平衡”的視覺設計布局，設計師可以運用不同的頁面元素創建出這條虛擬的“線”，引導用戶視線從左上移至右下，并在視線的起落點上安置有起始和延續作用的重要布局信息。以清華大學網站為例，如圖3所示。首先，學校的LOGO標志出現在頁面左上角，形成鮮明的印象；其次，中部及下部分布的是學院網站最主要的信息版塊，包括導航欄和頁面新聞，中間由一副較大通欄圖片或加深印象或提示重要學校活動；在視線末端的右下方，網站提供了多個鏈接到其他功能子站，引導瀏覽者將獲得更多類別的信息。

圖3 清華大學首頁

（2）利用顏色吸引特定注意

在頁面形成整體一致性的同時，若頁面上某個元素的顏色和其他的形成反差，瀏覽者通常會被這種差異性吸引。所以，在頁面中合理加入一些與主色系互補或者反差的顏色，可以有效把瀏覽者的視線吸引到我們希望他看到的地方。同樣以清華大學網站為例，頁面底板、LOGO及導航部分選擇了紫紅色，中間通欄圖及部分新聞內容就選擇了與之接近互補的黃色。

三、適用于高校網站的設計流行趨勢

舊形式的網頁隨著設計和應用不斷發展和更新，逐漸無法適應新的需求，主要的缺陷表現在：表格布局繁瑣、訪問速度緩慢、瀏覽器兼容性差以及改版成本高等四個方面。[3]為了保障學校宣傳工作的時效性和準確性，必須對在遵循Web標準的基礎上，按照新的應用需求和設計趨勢對網頁進行改版。對于高校的門戶網站來說，總體的頁面風格已經從原來的信息集中式改變為現在的名片式，這點在首頁設計上尤其明顯。下文仍將以清華大學的網站為例，分析近年在高校網站設計中的流行趨勢。

1.醒目的站點名稱（LOGO）及標頭（HEADERS）

從清華大學的首頁上看到，LOGO的白字在紫色底上顯得鮮明又突出，大小恰當。整個標頭區域以紫色塊為主，圖案以低透明度的方式顯示在標頭處，既不影響色塊的純粹性，又為標頭帶來豐富的感覺。

在LOGO顯示區域，應盡量避免如標語、飛出頁面等的干擾，這樣影響了瀏覽者對網站第一印象的形成，容易在初始瀏覽階段就產生混沌，影響后續的瀏覽效果。

2.巨幅圖片

清華大學首頁展示的圖片占據頁面接近一半的視覺面積，為了更加突出其效果，設計師選擇了與底板紫色互補的黃色，更好地吸引了瀏覽者的眼光。這與之前的飛出頁面（Splash pages）功能相近，但飛出界面或者彈出窗口的設計已經非常過時。訪問者通常對強迫點擊非常反感，這讓飛出界面非但不能起到預期的作用，往往還造成瀏覽者對網站的排斥心理，所以這種設計逐漸被現在的巨幅照片所取代。

3.減少首頁文字信息

在一些傳統網站的設計中，設計者或者網站擁有者通常希望用戶在首頁上就能盡可能多地獲得信息，所以提供了各種類型信息的預覽，甚至有更長的介紹性文字。但許多研究表明，用戶都希望盡快定位到他所需要瀏覽的信息群，而不會在其他不相關版塊和文字中花費時間。諾曼集團負責人Jakob Nielson在他的專欄中指出，人們通常不會在首頁上閱讀文字，他們只是掃描，如果是更長的介紹性文字，人們往往會直接忽略。[4]所以，首頁應側重其設計的功能性、交互性和吸引力，而不需要在閱讀性上花費大量精力。重要信息稍微提示即可，導航的設計才是將用戶引導到大量有用信息的最重要的交互元素。

4.單頁布局

單頁布局是使用一個單獨的頁面來呈現網頁內容。有些單頁布局的設計者是遵循“少即是多”的極簡主義原則，盡可能刪除不必要的信息，僅呈現最重要的功能；新的設計喜歡在單個頁面中包含豐富而生動的圖像動畫效果，讓信息和交互功能以更鮮明的方式呈現。

總的來說，高校網頁設計和開發，是一個十分詳細的項目拆解和建構的過程，在認真分析用戶需求的基礎上，才能開發出適應高校教學、管理和宣傳等功能的網站，并且提供準確、高效的交互服務。

[1]李超.CSS網站布局實錄——基于Web標準的網站設計指南[M].北京:科學出版社,2006.

[2][美]Robert Hoekman,Jr.向怡寧譯.瞬間之美:Web頁面設計如何讓用戶行動[M].北京:人民郵電出版社,2009.

[3]侯靜,歐陽榮彬,種連榮,王珂平.基于 Web標準的高校網站建設與實現[J].中山大學學報自然科學版,2009(3):91-99.

[4][美]Jakob Nielson.Blah-Blah Text:Keep,Cut,or Kill?[DB/OL].http://www.useit.com/alertbox/intro -text.html October 1,2007.