基于高校校園網站的界面設計研究
——以武漢紡織大學外經貿學院為例

金子維

（武漢紡織大學 外經貿學院，湖北 武漢 430070）

0 引言

本文將以武漢紡織大學外經貿學院門戶網站為研究主體進行研究，針對官網界面存在的問題進行適當地再設計，希望通過本次研究可以優化網站布局、提高使用率，并擴大高校的影響力。

1 校園網頁面建設背景

1.1 校園網定位

校園網站與普通的企業門戶、公眾媒介平臺是大不一樣的，高校網站的設計要保證網站的可擴展性和易維護性，制作賞心悅目的圖文界面，力求把網站建成合理性與藝術性相結合的產物[1]。因為校園網不僅包含對內的服務與日常辦公功能，還是對外界進行校園文化輸出的窗口，所以校園網的呈現方式會一定程度上體現一個學校的辦學理念與管理水平。由此，在界面布局上要避免過于花哨和過分活潑的表現手法，而以沉穩、大氣為主旋律進行延展。高校作為人才培養和學術研究的最高殿堂，同時還肩負著服務社會和文化傳承的重要使命，因此高校門戶網站有突出的教育性和學術性[2]。

1.2 界面再設計的必要性

在高度信息化的社會里，校園網成為最直接的宣傳方式。通過建立優秀的校園門戶網站，不僅能對本校的校園文化做好宣傳，還有關學校的各項重要信息都能夠及時對外公布與查詢。除此之外，校園網站將作為一個開放的、公共的平臺供師生及全校職工之間交流的全新方法，也將不再受到傳統課堂教育的制約。

而武漢紡織大學校園網在發展過程中存在著一些亟待解決的問題，這些不足可能會對校園形象產生一定的負面影響。由此，建設并優化我校網絡平臺，刻不容緩、意義深遠。同時，如果想要與眾多高校官網做出明顯區分，學校應當重視用戶的體驗感，除了基本的功能模塊需合理化外，還需提升網頁的視覺形象設計，加深用戶對于網站以至于對校園的印象[3]。

2 網站現存問題分析

2.1 問卷調查報告

筆者使用“問卷星”網站作為調研平臺，發放“武漢紡織大學外經貿學院（以下簡稱“外經貿”）官網界面設計調查問卷”，對外經貿網站的目標群體進行意見征詢。共回收有效問卷 203份，數據真實有效。通過問卷所得數據分析，結果如下：36%的受訪者認為在校園網獲取信息較為方便；64%的受訪者表示一般或是不太方便，部分受訪者認為較難進一步獲取想要的詳細信息；42%的受訪者認可目前學校官網的布局；58%的受訪者希望調整頁面布局與信息投放比重，并增加圖片部分，且相當一部分受訪者認為應當突出地域特色。除此之外，筆者還走訪了校園的各行政部門，受訪者表示校園網在運行的這段時間中，某些功能板塊需要根據使用頻率進行增減，以便與工作的開展。對于網站的導航、布局、功能、配色這幾個方面被多次提及，說明用戶在瀏覽網頁過程中對這些是十分在意的。

2.2 調研結果問題分析

2.2.1 頁面布局不完善

校園網首頁作為門戶網站至關重要的一環內容可以更加的豐富化，而外經貿學院首頁采取的是全橫屏banner輪播圖加上簡單的三欄布局，這樣就會顯得組織編排形式上較為單一。同時，各個學院的主頁也存在著同樣的問題，在布局上使用的是年代較久的分欄模式，完全服務于內容，卻缺失了對院系文化的輸出部分。

2.2.2 網站元素缺少鮮明的特征

目前，外經貿校園網的首頁分區結構為首頁、校情總覽、教學管理、校務管理、學工管理、黨建工作、招生就業、信息公開，整體界面除放置必要信息外，對于展現校園活力與魅力的板塊略有不足，最為明顯的體現在校園網站的版頭與頁腳處理方式過于籠統，只有一個純色塊作為背景，無法從視覺上彰顯校園活力。另外，各項板塊欄目的圖標使用的是已退出界面設計主舞臺的擬物風格圖標，使校園網看上去風格偏于老舊。并且本校的各個專業學院的網站首頁基本上是套用的統一模板，無法體現出學科各自不同的特點與風采。

3 校園網設計實現

3.1 預期設計目標

通過整合校園網的各項功能與導航分支，網站將利用率不高的頁面和功能刪減，添加上有必要的功能和空間，同時預留出將來會使用的部分模塊。將利用率高的窗口和欄目分布在更為顯眼的位置，對整體框架進行調整形成一個更加清晰的網站脈絡，使其結構更加嚴謹、合理。

改變當前校園網繁復的擬物風格，而擬采用現代化簡約的表現形式，以點、線、面等抽象形體作為裝飾、點綴元素，用線條和大面積色塊來劃分版面，同時還需注重高品質圖片的投放，讓校園界面看起來更具有層次感和空間感，使之能夠在同類院校中獨樹一幟。

3.2 設計實現

3.2.1 網頁布局合理

網頁當中版面的編排主要針對的對象為文字、圖形與圖片（含動圖），一個好的版面可指引來訪者按照正確的、順暢的閱讀秩序進行瀏覽。在排版方面，校園網一般使用新聞式的排版布局，是因為該布局在信息獲取的效率及準確性上都高于大部分布局方式。外經貿學院主頁的版面采用的是較為單一的布局結構，尤其是導航欄放置的位置居右，不符合人的閱讀習慣，其他相關信息的編排采用此種布局雖然結構清晰、主次分明，但由于缺少變化，易使閱讀者落入循規蹈矩的俗套，甚至有點乏味的印象。此次，改版的頁面布局在結構清晰的基礎上對美觀性進行提升。整個頁面頂端部分除導航欄放置位置要與版頭居中編排外，學院LOGO和輪播圖不變；中間學院相關信息部分將劃分為兩部分內容，除原新聞動態與通知消息外，新增學術講座、學生活動等內容；頁面底部為學院風光多圖展示；這樣的頁面結構清晰、簡潔、美觀、大方，看上去一目了然、主次分明。

3.2.2 突出特色

學院的logo仍然將放置在頂部的左側，而原本純色的背景使得層次感單一，其留白面積過多，從視覺感上會使人覺得單調，由此在右側部分添加校園主建筑的去色圖片，使用正片疊底的圖層模式至于底層。同樣，頁腳部分也疊加上校園建筑、風光的圖片，對圖片進行去色處理。這樣一來可以保證網頁的整體特性又增加了畫面層次，二來達到了突出我校特色的目的。在頁面底部還設置了專欄，展現學院的風光，讓瀏覽者有身臨其境的感覺。另外，對于界面上偏老舊的擬物風格圖標，例如信箱圖標、新聞圖標、麥克風圖標等，替換成幾何感更強的訂制圖標。除了圖標風格，也將在網站首頁添加相關的社交平臺賬號，如：外經貿官方微博、官方微信公眾號、各個學院官方微信公眾號，這些功能的添加為用戶節省時間的同時也方便信息溝通。

4 結語

提供豐富的教育教學信息和資源是校園網的生命力，校園網絡具有距離短、延時少、相對成本低和傳輸速率高等優點，它的低層協議較簡單，控制選擇等問題大大簡化，而很多網站在構建中忽略了實用性與用戶體驗及視覺感受的結合，導致最終效果大打折扣，所以如何真正做到實用性與藝術性兼顧的優秀網站也是本文考量與探究的創新之處。