基于高校校園網(wǎng)站的界面設計研究
——以武漢紡織大學外經(jīng)貿(mào)學院為例

金子維

（武漢紡織大學 外經(jīng)貿(mào)學院，湖北 武漢 430070）

0 引言

本文將以武漢紡織大學外經(jīng)貿(mào)學院門戶網(wǎng)站為研究主體進行研究，針對官網(wǎng)界面存在的問題進行適當?shù)卦僭O計，希望通過本次研究可以優(yōu)化網(wǎng)站布局、提高使用率，并擴大高校的影響力。

1 校園網(wǎng)頁面建設背景

1.1 校園網(wǎng)定位

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

1.2 界面再設計的必要性

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

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

2 網(wǎng)站現(xiàn)存問題分析

2.1 問卷調(diào)查報告

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

2.2 調(diào)研結(jié)果問題分析

2.2.1 頁面布局不完善

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

2.2.2 網(wǎng)站元素缺少鮮明的特征

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

3 校園網(wǎng)設計實現(xiàn)

3.1 預期設計目標

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

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

3.2 設計實現(xiàn)

3.2.1 網(wǎng)頁布局合理

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

3.2.2 突出特色

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

4 結(jié)語

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