基于用戶體驗(yàn)的高校門戶網(wǎng)站建設(shè)研究

李盈頡

摘 要：文章基于高校門戶網(wǎng)站的用戶體驗(yàn)，從網(wǎng)站建設(shè)出發(fā)，以東華大學(xué)校園網(wǎng)主站為例，探討了高校門戶網(wǎng)站內(nèi)容規(guī)劃和網(wǎng)頁界面設(shè)計(jì)等方面的問題。

關(guān)鍵詞：高校門戶網(wǎng)站；用戶體驗(yàn)；網(wǎng)站內(nèi)容規(guī)劃；網(wǎng)頁界面設(shè)計(jì)

近年來，隨著高等教育信息化的飛速發(fā)展，作為學(xué)校對外形象展示的重要工具及校內(nèi)信息化管理的主要載體，高校門戶網(wǎng)站的建設(shè)在校園文化建設(shè)中占據(jù)了更加舉足輕重的位置。高校門戶網(wǎng)站的建設(shè)除遵循一般網(wǎng)站建設(shè)的基本流程外，還需結(jié)合高校具體特點(diǎn)及用戶使用需求進(jìn)行優(yōu)化，從設(shè)計(jì)到功能均應(yīng)充分考慮用戶體驗(yàn)以滿足實(shí)際需要。

一、用戶體驗(yàn)對高校門戶網(wǎng)站建設(shè)的制約

用戶體驗(yàn)（User Experience，簡稱UE），是指人們在與產(chǎn)品、服務(wù)或品牌交互過程中的道德印象總和，是人與機(jī)器通過輸入和反饋形成的抽象關(guān)系。網(wǎng)站作為新媒體的核心，最大的特點(diǎn)在于用戶交互。用戶體驗(yàn)是使用者的心里感受，屬于用戶的純主觀感受，通常情況下無法完全模擬或在線，在網(wǎng)站的瀏覽過程中，內(nèi)容規(guī)劃、界面設(shè)計(jì)、響應(yīng)時(shí)間等都將直接影響到用戶體驗(yàn)，用戶體驗(yàn)設(shè)計(jì)正成為網(wǎng)站建設(shè)的新的核心和出發(fā)點(diǎn)。美國印第安納州的政務(wù)網(wǎng)站經(jīng)過重新設(shè)計(jì)之后，用戶能夠找到所需信息和數(shù)據(jù)的成功率由72%提高到95%，用戶搜索所用的時(shí)間也減少了62%，由此對用戶訪問質(zhì)量的提高是非常顯著的。因此，基于用戶體驗(yàn)的高校門戶網(wǎng)站建設(shè)，對于提升用戶訪問效率，甚至是其對網(wǎng)站的綜合印象有著顯著且本質(zhì)的影響。

二、基于用戶體驗(yàn)的高校門戶網(wǎng)站內(nèi)容規(guī)劃

高校門戶網(wǎng)站的內(nèi)容規(guī)劃是指在建設(shè)前期，結(jié)合已有內(nèi)容和用戶需求，對網(wǎng)站的整體邏輯進(jìn)行梳理。內(nèi)容規(guī)劃是校園網(wǎng)建設(shè)的基礎(chǔ)。

（一）網(wǎng)站首頁主體板塊規(guī)劃

通過對現(xiàn)今國內(nèi)大多數(shù)高校門戶網(wǎng)站的主流板塊規(guī)劃方式的調(diào)研，綜合考慮東華大學(xué)舊版網(wǎng)站用戶的使用習(xí)慣及需求，在新版校園網(wǎng)首頁中，菜單欄（顯示網(wǎng)站主要框架內(nèi)容）、新聞（包括文字及圖片新聞）、公告及活動(dòng)通知等板塊仍需保留，以保證網(wǎng)站改版后首頁各板塊內(nèi)容的延續(xù)性。調(diào)研顯示，大多數(shù)國內(nèi)外高校門戶網(wǎng)站的主頁除了展示學(xué)校重大事件、發(fā)布校園重要通知之外，也非常注重學(xué)校學(xué)術(shù)氛圍的營造，而東華大學(xué)舊版網(wǎng)站的學(xué)術(shù)信息發(fā)布功能并沒有滿足用戶的需求，因此在新版網(wǎng)站的主體板塊中，學(xué)術(shù)信息的相關(guān)內(nèi)容應(yīng)當(dāng)有所體現(xiàn)，經(jīng)過整理，網(wǎng)站首頁的主體板塊應(yīng)當(dāng)包括：菜單欄、大圖、新聞、學(xué)術(shù)信息、公告、活動(dòng)等板塊。

（二）網(wǎng)站首頁快速鏈接分類

調(diào)研顯示，互聯(lián)網(wǎng)用戶的信息獲取方式逐漸由被動(dòng)接受向主動(dòng)查詢轉(zhuǎn)變，越來越多的高校也將用戶體驗(yàn)放在網(wǎng)站建設(shè)的首位。在對本校師生的問卷調(diào)研中，有53.1%的受訪者認(rèn)為門戶網(wǎng)站應(yīng)當(dāng)適當(dāng)增加服務(wù)性內(nèi)容。因此，為了提高用戶的信息獲取速度，網(wǎng)站的首頁除了主體板塊部分，還應(yīng)為站點(diǎn)內(nèi)常用頁面設(shè)置快速鏈接。

1.不同用戶身份的快速鏈接劃分

問卷顯示，45.5%的受訪者希望新版網(wǎng)站根據(jù)不同群體設(shè)置分類內(nèi)容，國內(nèi)外大多數(shù)高校網(wǎng)站的快速鏈接的設(shè)置也是采用這種方式。通常情況，高校門戶網(wǎng)站的主要用戶有在校生、教職工、校友、考生、家長、媒體、招聘單位等多種類型，根據(jù)用戶對信息需求差異，可分為在校生、教職工、校友、考生及訪客四個(gè)大類。在此分類的基礎(chǔ)上，需要結(jié)合東華大學(xué)現(xiàn)有信息化服務(wù)，對大類的需求進(jìn)行詳細(xì)梳理，得出東華大學(xué)校園網(wǎng)用戶身份鏈接內(nèi)容分類表，如下表所示。

2.校園信息化應(yīng)用功能集成

隨著校內(nèi)信息化管理在高校的普及，很多高校都有一些針對本校人員工作、學(xué)習(xí)需求特殊定制的信息系統(tǒng)及應(yīng)用，如校園郵箱、財(cái)務(wù)系統(tǒng)等。經(jīng)過整理，東華大學(xué)針對在校師生定制了如下應(yīng)用：校園郵箱、信息門戶、教務(wù)系統(tǒng)、圖書系統(tǒng)、財(cái)務(wù)系統(tǒng)、就業(yè)系統(tǒng)、新聞系統(tǒng)，以上七項(xiàng)應(yīng)用在舊版網(wǎng)站中分屬不同部門，但使用頻率較高，尋找起來并不方便。在本次網(wǎng)站改版工作中，我們將這些常用應(yīng)用在網(wǎng)站首頁集成了一個(gè)“快捷方式”，用戶可以一鍵訪問相關(guān)頁面，減少了用戶的點(diǎn)擊障礙。

3.其他常用快速鏈接

除了以上兩種類型的快速鏈接，另有一些不適合劃入分類，或者由于訪問需求大等原因需要在首頁直接顯示的鏈接，如圖書館、基金會(huì)、本站地圖、電話黃頁、黨務(wù)公開、信息公開等，對于這類鏈接，也應(yīng)當(dāng)在首頁設(shè)置合適的位置進(jìn)行排列。

三、高校門戶網(wǎng)站的網(wǎng)頁界面設(shè)計(jì)

網(wǎng)站的建設(shè)，不僅要對網(wǎng)站的內(nèi)容進(jìn)行規(guī)劃，網(wǎng)頁的界面設(shè)計(jì)也是影響用戶體驗(yàn)的重要因素，界面美觀的網(wǎng)站會(huì)大大提高用戶訪問的舒適度。

（一）網(wǎng)頁設(shè)計(jì)中的色彩應(yīng)用

網(wǎng)頁的色彩應(yīng)用首先應(yīng)當(dāng)確定該網(wǎng)站的主體色。通常情況下，主體色應(yīng)當(dāng)與學(xué)校的VI標(biāo)識(shí)色或?qū)W校LOGO標(biāo)準(zhǔn)色統(tǒng)一，如果VI標(biāo)識(shí)色不適合大面積使用，則應(yīng)選擇與標(biāo)識(shí)色能夠搭配的顏色作為主體色。東華大學(xué)的LOGO標(biāo)準(zhǔn)色為吉祥紅，色彩的明度、純度都比較高，如果大面積使用會(huì)加速用戶的視覺疲勞，因此并不適合用作網(wǎng)站主體色。經(jīng)過對在校師生的調(diào)研，綜合考慮學(xué)校老版網(wǎng)站以及?；?、建筑等方面的用色，最終選取比吉祥紅明度降低一度的深紅色作為網(wǎng)站的主體色。

除了主體色之外，頁面上還需要有與之搭配的輔助色?？紤]到單個(gè)頁面上顏色不宜過多，而我們網(wǎng)站的首頁已有大圖板塊的規(guī)劃，未來會(huì)有各色各樣的照片、圖片在此呈現(xiàn)，因此，輔助色不適合選用與深紅色由相似色彩飽和度的其他色彩。而灰色是一種基本不受限制、可與任何色彩進(jìn)行搭配的顏色，最終我們選定灰色為網(wǎng)站的輔助色。

（二）網(wǎng)頁設(shè)計(jì)中的文字應(yīng)用

縱觀近幾年改版的高校網(wǎng)站可以發(fā)現(xiàn)，大多數(shù)的網(wǎng)頁設(shè)計(jì)更加趨于扁平化，想要使頁面的視覺效果足夠扁平，除了要減少高光、陰影等立體效果設(shè)計(jì)元素的應(yīng)用之外，字體的選擇也很重要。另一方面，如果僅僅是考慮設(shè)計(jì)風(fēng)格，而選擇較為生僻的字體，在大多數(shù)用戶的電腦上并未安裝該字體的情況下，系統(tǒng)會(huì)使用默認(rèn)字體對生僻字體進(jìn)行替換，如在頁面中內(nèi)嵌字體，則會(huì)大大影響網(wǎng)站的訪問速度。因此，網(wǎng)頁設(shè)計(jì)中的文字應(yīng)當(dāng)在常用字體中進(jìn)行選擇，以求在絕大多數(shù)用戶的電腦上都可正常顯示。而針對應(yīng)用較少的文字，如菜單欄、板塊標(biāo)簽等，可以選用更有設(shè)計(jì)感的字體，采用圖片切片的形式在網(wǎng)頁中實(shí)現(xiàn)，因其體量較少，對網(wǎng)站的訪問速度不會(huì)產(chǎn)生明顯影響。

除了字體，字號也是影響網(wǎng)頁視覺效果因素之一。網(wǎng)頁中的字號選擇應(yīng)當(dāng)根據(jù)文字功能，如菜單欄、板塊標(biāo)簽等位置的文字需要使用稍大一些的字號，而一般文字則選用常用字號即可。目前國內(nèi)高校網(wǎng)站一般文字所采用的大約為12～14號字，該范圍內(nèi)的文字大小在視覺上較為舒適，基本可以保證閱讀需求，且不影響頁面美觀。

（三）網(wǎng)頁設(shè)計(jì)中的板塊布局

根據(jù)前文中梳理的主頁板塊，綜合調(diào)研顯示的用戶使用習(xí)慣和近年來國內(nèi)外高校網(wǎng)站的設(shè)計(jì)趨勢，我們認(rèn)為學(xué)校LOGO及菜單欄、大圖板塊應(yīng)當(dāng)放在頁面的主要位置。各類快速鏈接可合理分布在頁面的頂部和底部，并且在二、三級頁面保持統(tǒng)一。

作為學(xué)校重大事件宣傳和校園學(xué)術(shù)氛圍營造的重要陣地，首頁的新聞及學(xué)術(shù)信息版塊都應(yīng)放在醒目位置。在設(shè)計(jì)過程中，我們減少了頭部的空間留白，讓用戶打開網(wǎng)站后在第一屏頁面即可看到新聞和學(xué)術(shù)信息的板塊，提高了用戶獲取信息的速度。

在新聞、學(xué)術(shù)信息的下方，設(shè)有公告/活動(dòng)、專題以及新媒體訪問圖標(biāo)。其中公告/活動(dòng)由于性質(zhì)相似，設(shè)計(jì)過程中將這兩個(gè)板塊設(shè)置在同一位置，通過鼠標(biāo)懸停書簽來滿足瀏覽需求。專題板塊的內(nèi)容則主要是學(xué)校針對思想宣傳、重大活動(dòng)等事件制作的專題網(wǎng)站的圖標(biāo)鏈接。近年來新媒體成為學(xué)校宣傳及形象塑造的重要工具和陣地，設(shè)計(jì)中，我們在頁面的右下方給新媒體工具預(yù)留了圖標(biāo)鏈接位置。

（四）網(wǎng)站二、三級頁面設(shè)計(jì)

網(wǎng)站的二、三級頁面作為站點(diǎn)的子頁面，在設(shè)計(jì)風(fēng)格上跟主頁不應(yīng)有太大的差異，因此頁面仍以暗紅色為主體色、灰色為輔助色。此外，根據(jù)使用習(xí)慣，子頁面的頂部、菜單欄、底部都應(yīng)與首頁保持一致，其內(nèi)容的具體布局則由各頁面內(nèi)容及展示形式需求決定，本文不做詳細(xì)贅述。

四、結(jié)語

高校門戶網(wǎng)站既要實(shí)用又要美觀，其建設(shè)過程應(yīng)當(dāng)不斷完善，需要綜合學(xué)校的發(fā)展方向、未來的設(shè)計(jì)趨勢、用戶的使用需求持續(xù)更新和改善，才能帶來更好的用戶體驗(yàn)。

參考文獻(xiàn)：

[1][美]Janice Redish.勝于言傳：Web內(nèi)容創(chuàng)作與設(shè)計(jì)的藝術(shù)[M].北京：機(jī)械工業(yè)出版社，2013.

[2]肖海鵬.高校網(wǎng)站設(shè)計(jì)初探[J].電腦知識(shí)與技術(shù)，2008（11）：1084-1085.

[3]趙侃.用戶體驗(yàn)設(shè)計(jì)——網(wǎng)頁界面設(shè)計(jì)的重中之重[J].藝術(shù)與設(shè)計(jì)（理論），2010（9）：55-57.