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

1、    用戶體驗(yàn)視角下的高校門戶網(wǎng)站再設(shè)計(jì)研究    摘要：文章通過(guò)調(diào)查與分析，將影響當(dāng)前高校門戶網(wǎng)站用戶體驗(yàn)的要素歸納為用戶身份類別多樣、終端瀏覽環(huán)境復(fù)雜、視覺(jué)界面同質(zhì)化、導(dǎo)航形式單一等四個(gè)方面，并以這四個(gè)要素為切入點(diǎn)，提出改善高校門戶網(wǎng)站用戶體驗(yàn)的有效策略。關(guān)鍵詞：用戶體驗(yàn)，高校門戶網(wǎng)站，響應(yīng)式web高校門戶網(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è)

2、計(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)品

3、更為重要，因?yàn)榫W(wǎng)站是一個(gè)沒(méi)有說(shuō)明書(shū)龐大的信息系統(tǒng)?，F(xiàn)在用戶體驗(yàn)設(shè)計(jì)貫穿整個(gè)互聯(lián)網(wǎng)產(chǎn)品開(kāi)發(fā)流程從品牌定位到用戶研究，從內(nèi)容需求到信息架構(gòu)，從交互設(shè)計(jì)到視覺(jué)設(shè)計(jì)，設(shè)計(jì)師們需要模擬用戶的使用環(huán)境、揣摩用戶的使用心理，不斷調(diào)整與完善產(chǎn)品的開(kāi)發(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所示。很明顯，不同類型用

4、戶所關(guān)注的內(nèi)容雖有交叉但沒(méi)有完全重合，網(wǎng)站上存在著許多與用戶無(wú)關(guān)的內(nèi)容。試想用戶經(jīng)過(guò)重重的選擇與過(guò)濾，才能找到所需信息，那么這樣的訪問(wèn)體驗(yàn)必定是平淡的，缺少歸屬感的。圖1 高校門戶網(wǎng)站的用戶類型及其需求示意圖2.終端瀏覽環(huán)境復(fù)雜近幾年，終端的瀏覽環(huán)境變得越發(fā)復(fù)雜，成為影響高校門戶網(wǎng)站用戶體驗(yàn)的重要因素之一?，F(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工程”高校中，

5、有33所高校采用的是固定的1000像素寬度以內(nèi)的設(shè)計(jì)。在寬屏與超寬屏成為主流的今天，這無(wú)異于放棄了諸多用戶的屏幕空間與視覺(jué)美感。對(duì)于移動(dòng)互聯(lián)網(wǎng)用戶，這樣的設(shè)計(jì)更為糟糕受限于屏幕的尺寸，網(wǎng)站內(nèi)容微小到幾乎無(wú)法閱讀。3.視覺(jué)界面同質(zhì)化當(dāng)前國(guó)內(nèi)高校門戶網(wǎng)站的視覺(jué)界面設(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ì)比不足，視覺(jué)界面色彩關(guān)系普遍沉悶，缺少生

6、機(jī)與活力4。在網(wǎng)站布局設(shè)計(jì)上，國(guó)內(nèi)高校門戶網(wǎng)站的版面多由帶網(wǎng)站標(biāo)識(shí)的頁(yè)眉，通欄的導(dǎo)航欄，帶有圖片新聞、公告列表等內(nèi)容的主體，帶有專題鏈接的側(cè)邊欄，以及帶有的頁(yè)腳所構(gòu)成5，版式以網(wǎng)格化三欄式布局為主?？傮w上網(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)高校門

7、戶網(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ì)用戶群特定需

8、求而設(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ì)與開(kāi)發(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

9、設(shè)計(jì)的網(wǎng)站在pc、pad、智能手機(jī)等設(shè)備上均有良好的視覺(jué)呈現(xiàn)效果。響應(yīng)式web設(shè)計(jì)具有開(kāi)發(fā)、維護(hù)、運(yùn)營(yíng)成本較低，兼容性強(qiáng)等優(yōu)勢(shì)，是未來(lái)網(wǎng)站技術(shù)發(fā)展的趨勢(shì)之一。圖2 響應(yīng)式設(shè)計(jì)網(wǎng)站高校門戶網(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)烈的視覺(jué)震撼與沖擊力，中國(guó)人民大學(xué)主頁(yè)就是采用此種方式，如圖3所示。在小屏幕上，采用單列式布局，便于移動(dòng)端

10、閱讀。插圖采用寬度百分比，高度自適應(yīng)的方式，以取得良好的視覺(jué)效果。圖3 中國(guó)人民大學(xué)主頁(yè)3.運(yùn)用藝術(shù)化的語(yǔ)言設(shè)計(jì)視覺(jué)界面視覺(jué)界面設(shè)計(jì)在網(wǎng)站開(kāi)發(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(視覺(jué)識(shí)別系統(tǒng))的規(guī)范標(biāo)準(zhǔn)，確保在互聯(lián)網(wǎng)上也能傳達(dá)一個(gè)統(tǒng)一的品牌形象。當(dāng)然，目前大多數(shù)高校并沒(méi)有統(tǒng)一的視覺(jué)識(shí)別系統(tǒng)，那么網(wǎng)站主

11、色調(diào)的選擇就需要經(jīng)過(guò)深思熟慮，挖掘?qū)W校的歷史與特色，考慮合適的色彩方案，而不是隨大流。清華大學(xué)門戶網(wǎng)站數(shù)次改版，均使用象征高貴的紫色作為網(wǎng)站的主色調(diào)，具有很高的辨識(shí)度。北京航空航天大學(xué)網(wǎng)站，如圖4所示，采用藍(lán)色深邃的宇宙星空為背景，其意義不言而喻。圖4 北京航空航天大學(xué)主頁(yè)高校門戶網(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)生視覺(jué)疲勞。(2)版式設(shè)計(jì)網(wǎng)格設(shè)計(jì)當(dāng)前流行的網(wǎng)站版式設(shè)計(jì)方式，可為網(wǎng)站增添秩序

12、美、連續(xù)美、和諧美。但是網(wǎng)格設(shè)計(jì)的缺陷也是明顯的，嚴(yán)格遵循網(wǎng)格設(shè)計(jì)的版面也容易給用戶帶來(lái)呆板和枯燥的感覺(jué)。高校門戶網(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è)眉部分，以校徽中象征“文化載體、交流橋梁”的帆船圖形為主，打破網(wǎng)格的束縛，強(qiáng)化了學(xué)校的辦學(xué)理念，成為整個(gè)頁(yè)面設(shè)計(jì)的亮點(diǎn)。版式布局中合理留白，也很重要。在內(nèi)容塊、段落、圖片、按鈕等元素留出空隙，可增強(qiáng)內(nèi)容的可讀性。留白可使內(nèi)容層次分明，減少了界面的復(fù)雜程度，用戶感受到的視覺(jué)層次感越好，網(wǎng)頁(yè)上的內(nèi)容就越容易被獲取10。圖5 暨南大

13、學(xué)主頁(yè)(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)懷。圖6 清華大學(xué)主頁(yè)4.提供多維度的導(dǎo)航“網(wǎng)站可用性的80%在于導(dǎo)航”這樣說(shuō)并不為過(guò)。良好的導(dǎo)航

14、系統(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)、視覺(jué)風(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)站視覺(jué)界面色彩運(yùn)用探析j.中國(guó)教育信化，2012(19)：27-30.5劉歡，盧蓓蓉.中美高校門戶網(wǎng)站的比較與思考j.中國(guó)教育信息化，2012(3)：4-6.6james kalbacb.web導(dǎo)航設(shè)計(jì)m.北京：電子工業(yè)出版社，