孫榮 王菊

摘 要：文章通過(guò)調(diào)查與分析，將影響當(dāng)前高校門戶網(wǎng)站用戶體驗(yàn)的要素歸納為用戶身份類別多樣、終端瀏覽環(huán)境復(fù)雜、視覺界面同質(zhì)化、導(dǎo)航形式單一等四個(gè)方面，并以這四個(gè)要素為切入點(diǎn)，提出改善高校門戶網(wǎng)站用戶體驗(yàn)的有效策略。

關(guān)鍵詞：用戶體驗(yàn)；高校門戶網(wǎng)站；響應(yīng)式Web

中圖分類號(hào)：G443 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1673-8454（2015）09-0073-04

高校門戶網(wǎng)站，也稱為高校官方網(wǎng)站，是高校品牌戰(zhàn)略、文化戰(zhàn)略天然的網(wǎng)絡(luò)載體。一個(gè)設(shè)計(jì)優(yōu)秀，有著優(yōu)良用戶體驗(yàn)的門戶網(wǎng)站，將有助于高校品牌形象的推廣，有助于高校軟實(shí)力的提升。本文將從用戶體驗(yàn)視角出發(fā)，分析當(dāng)前影響高校門戶網(wǎng)站用戶體驗(yàn)的要素，為高校門戶網(wǎng)站重新設(shè)計(jì)過(guò)程中如何改善用戶體驗(yàn)、提升網(wǎng)站品質(zhì)、策應(yīng)學(xué)校的發(fā)展戰(zhàn)略，提供有益的思路。

一、用戶體驗(yàn)設(shè)計(jì)與網(wǎng)站

1.用戶體驗(yàn)設(shè)計(jì)

用戶體驗(yàn)（User Experience，簡(jiǎn)稱UX/UE）是上世紀(jì)90年代中期由唐納德·諾曼提出的概念，指用戶在使用產(chǎn)品或接受服務(wù)過(guò)程中的純主觀感受，涉及到通過(guò)產(chǎn)品和服務(wù)提供給用戶的理性價(jià)值和感性體驗(yàn)[1]。用戶體驗(yàn)設(shè)計(jì)是一個(gè)范圍很廣的跨學(xué)科交叉概念，涉及到心理學(xué)、社會(huì)學(xué)、計(jì)算機(jī)科學(xué)、人體工程學(xué)、美學(xué)等多個(gè)領(lǐng)域[2]。簡(jiǎn)而言之，用戶體驗(yàn)設(shè)計(jì)是終極一切技術(shù)的、藝術(shù)的手段，以用戶為中心的設(shè)計(jì)。

2.用戶體驗(yàn)設(shè)計(jì)與網(wǎng)站關(guān)系

網(wǎng)站是一種提供特定服務(wù)的互聯(lián)網(wǎng)產(chǎn)品，用戶體驗(yàn)對(duì)于網(wǎng)站比其他任何產(chǎn)品更為重要，因?yàn)榫W(wǎng)站是一個(gè)沒有說(shuō)明書龐大的信息系統(tǒng)?，F(xiàn)在用戶體驗(yàn)設(shè)計(jì)貫穿整個(gè)互聯(lián)網(wǎng)產(chǎn)品開發(fā)流程——從品牌定位到用戶研究，從內(nèi)容需求到信息架構(gòu)，從交互設(shè)計(jì)到視覺設(shè)計(jì)，設(shè)計(jì)師們需要模擬用戶的使用環(huán)境、揣摩用戶的使用心理，不斷調(diào)整與完善產(chǎn)品的開發(fā)，力求為用戶提供超出預(yù)期的完美體驗(yàn)[3]。

二、影響高校門戶網(wǎng)站用戶體驗(yàn)的要素

用戶體驗(yàn)是諸多特定要素的集合體。筆者通過(guò)對(duì)國(guó)內(nèi)諸多高校門戶網(wǎng)站的訪問(wèn)與調(diào)查，認(rèn)為目前影響高校門戶網(wǎng)站用戶體驗(yàn)的要素主要可歸結(jié)為以下四個(gè)方面。

1.用戶身份類別多樣

高校門戶網(wǎng)站用戶的身份類別多樣，且所關(guān)注的內(nèi)容也不一樣。經(jīng)過(guò)分析，我們將用戶類型及其關(guān)注的欄目進(jìn)行歸納，如圖1所示。很明顯，不同類型用戶所關(guān)注的內(nèi)容雖有交叉但沒有完全重合，網(wǎng)站上存在著許多與用戶無(wú)關(guān)的內(nèi)容。試想用戶經(jīng)過(guò)重重的選擇與過(guò)濾，才能找到所需信息，那么這樣的訪問(wèn)體驗(yàn)必定是平淡的，缺少歸屬感的。

2.終端瀏覽環(huán)境復(fù)雜

近幾年，終端的瀏覽環(huán)境變得越發(fā)復(fù)雜，成為影響高校門戶網(wǎng)站用戶體驗(yàn)的重要因素之一。現(xiàn)在終端屏幕分辨率從1920×1080 Full HD，至800×600 SVGA，有近20種之多。與此同時(shí)，隨著移動(dòng)互聯(lián)網(wǎng)的興起，小屏幕移動(dòng)終端訪客成倍增加。面對(duì)這么復(fù)雜的終端環(huán)境，高校門戶網(wǎng)站設(shè)計(jì)者們?cè)摬捎媚姆N分辨率來(lái)設(shè)計(jì)網(wǎng)站？據(jù)筆者統(tǒng)計(jì)，39所“985工程”高校中，有33所高校采用的是固定的1000像素寬度以內(nèi)的設(shè)計(jì)。在寬屏與超寬屏成為主流的今天，這無(wú)異于放棄了諸多用戶的屏幕空間與視覺美感。對(duì)于移動(dòng)互聯(lián)網(wǎng)用戶，這樣的設(shè)計(jì)更為糟糕——受限于屏幕的尺寸，網(wǎng)站內(nèi)容微小到幾乎無(wú)法閱讀。

3.視覺界面同質(zhì)化

當(dāng)前國(guó)內(nèi)高校門戶網(wǎng)站的視覺界面設(shè)計(jì)有同質(zhì)化的趨勢(shì)，缺少藝術(shù)風(fēng)格與特點(diǎn)，毫無(wú)個(gè)性可言。

在網(wǎng)站色彩搭配上，國(guó)內(nèi)高校門戶網(wǎng)站的主色調(diào)以藍(lán)色、紅色居多。據(jù)筆者統(tǒng)計(jì)，39所“985工程”高校中，有一半高校采用了藍(lán)色作為主色調(diào)。雷同的色彩運(yùn)用，很難給用戶帶來(lái)深刻的印象。從網(wǎng)站的輔助色、對(duì)比色運(yùn)用方面來(lái)看，許多高校門戶網(wǎng)站整體色調(diào)統(tǒng)一有余，對(duì)比不足，視覺界面色彩關(guān)系普遍沉悶，缺少生機(jī)與活力[4]。

在網(wǎng)站布局設(shè)計(jì)上，國(guó)內(nèi)高校門戶網(wǎng)站的版面多由帶網(wǎng)站標(biāo)識(shí)的頁(yè)眉，通欄的導(dǎo)航欄，帶有圖片新聞、公告列表等內(nèi)容的主體，帶有專題鏈接的側(cè)邊欄，以及帶有版權(quán)聲明的頁(yè)腳所構(gòu)成[5]，版式以網(wǎng)格化三欄式布局為主。總體上網(wǎng)站的布局結(jié)構(gòu)呆板，缺少靈動(dòng)的美感。多數(shù)高校網(wǎng)站還存在著內(nèi)容過(guò)“滿”的缺陷，用戶在瀏覽時(shí)會(huì)產(chǎn)生無(wú)趣、壓抑甚至厭煩的心理。

在網(wǎng)站圖片選擇上，國(guó)內(nèi)大多數(shù)高校門戶網(wǎng)站以校園風(fēng)景、環(huán)境設(shè)施、領(lǐng)導(dǎo)合影、會(huì)議活動(dòng)等類型的圖片來(lái)展示學(xué)校的風(fēng)貌[5]?？傮w來(lái)說(shuō)，圖片題材的選擇上過(guò)于拘謹(jǐn)，很難給用戶留下深刻的印象。

4.導(dǎo)航形式單一

導(dǎo)航在網(wǎng)站用戶體驗(yàn)的塑造中扮演了重要的角色，提供了用戶獲取信息的主要途徑[6]。國(guó)內(nèi)高校門戶網(wǎng)站導(dǎo)航的形式比較單一，用戶在訪問(wèn)過(guò)程中可能因此冒著“迷途”的風(fēng)險(xiǎn)。形式單一的導(dǎo)航會(huì)影響網(wǎng)站的可用性，削弱品牌的可信度。

三、用戶體驗(yàn)視角下的高校門戶網(wǎng)站再設(shè)計(jì)

再設(shè)計(jì)，也就是重新設(shè)計(jì)，以全新的理念重新審視我們習(xí)以為常的事物。高校在門戶網(wǎng)站重新設(shè)計(jì)的過(guò)程中，應(yīng)當(dāng)摒棄以設(shè)計(jì)者為中心、以領(lǐng)導(dǎo)為中心的設(shè)計(jì)理念，從用戶體驗(yàn)的視角出發(fā)，解決影響用戶體驗(yàn)的各種要素，改善網(wǎng)站的用戶黏性，提升網(wǎng)站的品質(zhì)。

1.提供按用戶類型的訪問(wèn)入口

高校門戶網(wǎng)站再設(shè)計(jì)過(guò)程中，可通過(guò)調(diào)查問(wèn)卷、采訪與觀察等方式去研究用戶，明確每種類型用戶的需求。根據(jù)不同用戶的實(shí)際需求，在網(wǎng)站的信息架構(gòu)中將所有的信息進(jìn)行分類整合，形成針對(duì)用戶群特定需求而設(shè)的信息匯總平臺(tái)。在主頁(yè)的顯著位置，按照未來(lái)學(xué)生、學(xué)生、學(xué)生父母、教師、工作人員、校友、訪客等用戶類型的訪問(wèn)入口，為用戶帶來(lái)貼心的服務(wù)。

2.采用響應(yīng)式Web設(shè)計(jì)

面對(duì)復(fù)雜的客戶端瀏覽環(huán)境，我們不可能為不同的設(shè)備去定制不同版本的網(wǎng)站。怎么辦？“響應(yīng)式Web設(shè)計(jì)”的理念應(yīng)運(yùn)而生。響應(yīng)式Web 設(shè)計(jì)是Ethan Marcotte于2010年提出的概念，其內(nèi)容的核心是一個(gè)網(wǎng)站或網(wǎng)頁(yè)能夠兼容多個(gè)終端——而不是為每個(gè)終端定制一個(gè)特定的版本。設(shè)計(jì)理念是頁(yè)面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，以適應(yīng)于不同屏幕空間用戶的瀏覽[7]。如圖2所示，運(yùn)用響應(yīng)式Web設(shè)計(jì)的網(wǎng)站在PC、Pad、智能手機(jī)等設(shè)備上均有良好的視覺呈現(xiàn)效果。響應(yīng)式Web設(shè)計(jì)具有開發(fā)、維護(hù)、運(yùn)營(yíng)成本較低，兼容性強(qiáng)等優(yōu)勢(shì)，是未來(lái)網(wǎng)站技術(shù)發(fā)展的趨勢(shì)之一。

高校門戶網(wǎng)站再設(shè)計(jì)過(guò)程中可運(yùn)用響應(yīng)式Web布局設(shè)計(jì)。目前訪問(wèn)高校門戶網(wǎng)站的客戶端設(shè)備仍以電腦大屏為主。因此，響應(yīng)式布局的設(shè)計(jì)采用大屏優(yōu)先，兼顧移動(dòng)設(shè)備的原則[8]。在普通大屏幕上，采用傳統(tǒng)的固定分辨率設(shè)計(jì)。在全高清屏幕上，利用設(shè)備高分辨率的特點(diǎn)，運(yùn)用高質(zhì)量大圖“平鋪?zhàn)赃m應(yīng)”或“中心定位，兩側(cè)自適應(yīng)”的方式，為用戶帶來(lái)強(qiáng)烈的視覺震撼與沖擊力，中國(guó)人民大學(xué)主頁(yè)就是采用此種方式，如圖3所示。在小屏幕上，采用單列式布局，便于移動(dòng)端閱讀。插圖采用寬度百分比，高度自適應(yīng)的方式，以取得良好的視覺效果。

3.運(yùn)用藝術(shù)化的語(yǔ)言設(shè)計(jì)視覺界面

視覺界面設(shè)計(jì)在網(wǎng)站開發(fā)周期中是至關(guān)重要的一步，正如蘋果電腦Mac機(jī)之父Jef Raskin所說(shuō)：“對(duì)于消費(fèi)者而言，界面就是產(chǎn)品”。

（1）色彩搭配

色彩是傳遞品牌識(shí)別的一個(gè)最為有效的方法。用戶訪問(wèn)網(wǎng)站，給其留下第一印象的一定是色彩。高校門戶網(wǎng)站再設(shè)計(jì)過(guò)程中，色彩的選擇與搭配應(yīng)當(dāng)遵循適合性、一致性、可讀性原則[9]。

高校門戶網(wǎng)站主色調(diào)的選擇首先應(yīng)當(dāng)遵循高校VIS（視覺識(shí)別系統(tǒng)）的規(guī)范標(biāo)準(zhǔn)，確保在互聯(lián)網(wǎng)上也能傳達(dá)一個(gè)統(tǒng)一的品牌形象。當(dāng)然，目前大多數(shù)高校并沒有統(tǒng)一的視覺識(shí)別系統(tǒng)，那么網(wǎng)站主色調(diào)的選擇就需要經(jīng)過(guò)深思熟慮，挖掘?qū)W校的歷史與特色，考慮合適的色彩方案，而不是隨大流。清華大學(xué)門戶網(wǎng)站數(shù)次改版，均使用象征高貴的紫色作為網(wǎng)站的主色調(diào)，具有很高的辨識(shí)度。北京航空航天大學(xué)網(wǎng)站，如圖4所示，采用藍(lán)色深邃的宇宙星空為背景，其意義不言而喻。

高校門戶網(wǎng)站色彩搭配應(yīng)遵循整體一致性原則，整個(gè)網(wǎng)站從首頁(yè)到欄目頁(yè)，再到內(nèi)容頁(yè)，都應(yīng)使用同樣的色彩方案，這樣的網(wǎng)站頁(yè)面才具有整體美、韻律美。

高校門戶網(wǎng)站色彩運(yùn)用上需要遵循可讀性原則。文字的色彩純度不能太高，文字與背景的色彩不能過(guò)于接近，否則會(huì)使用戶產(chǎn)生視覺疲勞。

（2）版式設(shè)計(jì)

網(wǎng)格設(shè)計(jì)當(dāng)前流行的網(wǎng)站版式設(shè)計(jì)方式，可為網(wǎng)站增添秩序美、連續(xù)美、和諧美。但是網(wǎng)格設(shè)計(jì)的缺陷也是明顯的，嚴(yán)格遵循網(wǎng)格設(shè)計(jì)的版面也容易給用戶帶來(lái)呆板和枯燥的感覺。高校門戶網(wǎng)站的版式設(shè)計(jì)在運(yùn)用網(wǎng)格設(shè)計(jì)的基礎(chǔ)上，應(yīng)該敢于創(chuàng)新，適當(dāng)越出網(wǎng)格的邊界，會(huì)使頁(yè)面更加生動(dòng)與流暢。暨南大學(xué)門戶網(wǎng)站布局設(shè)計(jì)也是典型的網(wǎng)格設(shè)計(jì)，如圖5所示。網(wǎng)站頁(yè)眉部分，以?；罩邢笳鳌拔幕d體、交流橋梁”的帆船圖形為主，打破網(wǎng)格的束縛，強(qiáng)化了學(xué)校的辦學(xué)理念，成為整個(gè)頁(yè)面設(shè)計(jì)的亮點(diǎn)。

版式布局中合理留白，也很重要。在內(nèi)容塊、段落、圖片、按鈕等元素留出空隙，可增強(qiáng)內(nèi)容的可讀性。留白可使內(nèi)容層次分明，減少了界面的復(fù)雜程度，用戶感受到的視覺層次感越好，網(wǎng)頁(yè)上的內(nèi)容就越容易被獲取[10]。

（3）圖片選擇

莊子說(shuō)：“不精不誠(chéng)，不能動(dòng)人”。經(jīng)過(guò)精心拍攝或挑選，富有內(nèi)涵的圖片能抵千言，感動(dòng)人心。高校門戶網(wǎng)站再設(shè)計(jì)過(guò)程中圖片的選擇應(yīng)該擺脫純粹的官方色彩，更多地關(guān)注與網(wǎng)站相關(guān)的各類用戶群體。清華大學(xué)在其主頁(yè)頭版位置推出的“清華映像”欄目，如圖6所示，使用通過(guò)精心挑選與優(yōu)良設(shè)計(jì)大幅的圖片配合精煉文字的方式向關(guān)注清華大學(xué)的網(wǎng)絡(luò)用戶和社會(huì)大眾介紹清華大學(xué)在教學(xué)、科研、社會(huì)服務(wù)等方面的成就及師生生活中的亮點(diǎn)?！扒迦A映像”欄目具有與用戶溝通情感的作用，每次更新都會(huì)給用戶帶來(lái)一種感動(dòng)，充滿人文主義關(guān)懷。

4.提供多維度的導(dǎo)航

“網(wǎng)站可用性的80%在于導(dǎo)航”——這樣說(shuō)并不為過(guò)。良好的導(dǎo)航系統(tǒng)就是用戶在互聯(lián)網(wǎng)海洋里正確航行的指南針。國(guó)內(nèi)高校門戶網(wǎng)站在再設(shè)計(jì)過(guò)程中，應(yīng)當(dāng)考慮建立具有多維度、立體的導(dǎo)航形式。除了常規(guī)的主導(dǎo)航、局部導(dǎo)航、當(dāng)前位置導(dǎo)航外，還可考慮安排網(wǎng)站地圖、A-Z字母索引、標(biāo)簽云、分類檢索等形式的導(dǎo)航，以滿足用戶實(shí)際需求，為用戶獲取信息提供多種途徑，改善用戶體驗(yàn)。

四、結(jié)束語(yǔ)

用戶體驗(yàn)是一種以人為本，追求極致的互聯(lián)網(wǎng)思維。盡管用戶體驗(yàn)是不可被設(shè)計(jì)的，但我們可以不斷改進(jìn)。相信只要從用戶體驗(yàn)視角出發(fā)，遵循以用戶為中心的理念，對(duì)高校門戶網(wǎng)站從網(wǎng)站定位、信息架構(gòu)、視覺風(fēng)格等方面進(jìn)行再設(shè)計(jì)，必定能夠提升學(xué)校的網(wǎng)絡(luò)形象，策應(yīng)學(xué)校的發(fā)展戰(zhàn)略，為師生、校友、考生等各類用戶提供更好的服務(wù)。

參考文獻(xiàn)：

[1]吳江，黃晟青，蔡駿.互聯(lián)網(wǎng)購(gòu)物網(wǎng)站用戶體驗(yàn)設(shè)計(jì)研究[J].包裝工程，2012，33（8）：68-71.

[2]李志義，義梅練.基于用戶體驗(yàn)的網(wǎng)站優(yōu)化研究綜述[J].情報(bào)科學(xué)，2013，31（11）：150-154.

[3]單筱秋.淺議人機(jī)交互界面研發(fā)中的用戶體驗(yàn)設(shè)計(jì)[J].南京藝術(shù)學(xué)院學(xué)報(bào)（美術(shù)與設(shè)計(jì)版），2013（6）：181-183.

[4]孫榮，王菊.高校門戶網(wǎng)站視覺界面色彩運(yùn)用探析[J].中國(guó)教育信化，2012（19）：27-30.

[5]劉歡，盧蓓蓉.中美高校門戶網(wǎng)站的比較與思考[J].中國(guó)教育信息化，2012（3）：4-6.

[6]James Kalbacb.Web導(dǎo)航設(shè)計(jì)[M].北京：電子工業(yè)出版社，2009.

[7]楊葉，陳琳，董啟標(biāo).響應(yīng)式Web 移動(dòng)學(xué)習(xí)資源的技術(shù)實(shí)現(xiàn)與設(shè)計(jì)研究[J].現(xiàn)代教育技術(shù)，2012，23（6）：107-111.

[8]劉歡，盧蓓蓉.使用響應(yīng)式設(shè)計(jì)構(gòu)建高校新型門戶網(wǎng)站[J].中國(guó)教育信息化，2013（9）：71-74.

[9]王勇，董軒志.基于用戶體驗(yàn)視角下的網(wǎng)頁(yè)視覺傳達(dá)設(shè)計(jì)研究[J].包裝工程，2012，34（24）：14-17.

[10]Smashing Magazine.眾妙之門——國(guó)際頂級(jí)Web設(shè)計(jì)師成功法則[M].北京：人民郵電出版社，2013.

（編輯：楊馥紅）