用戶體驗視角下的高校門戶網(wǎng)站再設計研究

1、    用戶體驗視角下的高校門戶網(wǎng)站再設計研究    摘要：文章通過調查與分析，將影響當前高校門戶網(wǎng)站用戶體驗的要素歸納為用戶身份類別多樣、終端瀏覽環(huán)境復雜、視覺界面同質化、導航形式單一等四個方面，并以這四個要素為切入點，提出改善高校門戶網(wǎng)站用戶體驗的有效策略。關鍵詞：用戶體驗，高校門戶網(wǎng)站，響應式web高校門戶網(wǎng)站，也稱為高校官方網(wǎng)站，是高校品牌戰(zhàn)略、文化戰(zhàn)略天然的網(wǎng)絡載體。一個設計優(yōu)秀，有著優(yōu)良用戶體驗的門戶網(wǎng)站，將有助于高校品牌形象的推廣，有助于高校軟實力的提升。本文將從用戶體驗視角出發(fā)，分析當前影響高校門戶網(wǎng)站用戶體驗的要素，為高校門戶網(wǎng)站重新設

2、計過程中如何改善用戶體驗、提升網(wǎng)站品質、策應學校的發(fā)展戰(zhàn)略，提供有益的思路。一、用戶體驗設計與網(wǎng)站1.用戶體驗設計用戶體驗(user experience，簡稱ux/ue)是上世紀90年代中期由唐納德·諾曼提出的概念，指用戶在使用產(chǎn)品或接受服務過程中的純主觀感受，涉及到通過產(chǎn)品和服務提供給用戶的理性價值和感性體驗1。用戶體驗設計是一個范圍很廣的跨學科交叉概念，涉及到心理學、社會學、計算機科學、人體工程學、美學等多個領域2。簡而言之，用戶體驗設計是終極一切技術的、藝術的手段，以用戶為中心的設計。2.用戶體驗設計與網(wǎng)站關系網(wǎng)站是一種提供特定服務的互聯(lián)網(wǎng)產(chǎn)品，用戶體驗對于網(wǎng)站比其他任何產(chǎn)品

3、更為重要，因為網(wǎng)站是一個沒有說明書龐大的信息系統(tǒng)?，F(xiàn)在用戶體驗設計貫穿整個互聯(lián)網(wǎng)產(chǎn)品開發(fā)流程從品牌定位到用戶研究，從內(nèi)容需求到信息架構，從交互設計到視覺設計，設計師們需要模擬用戶的使用環(huán)境、揣摩用戶的使用心理，不斷調整與完善產(chǎn)品的開發(fā)，力求為用戶提供超出預期的完美體驗3。二、影響高校門戶網(wǎng)站用戶體驗的要素用戶體驗是諸多特定要素的集合體。筆者通過對國內(nèi)諸多高校門戶網(wǎng)站的訪問與調查，認為目前影響高校門戶網(wǎng)站用戶體驗的要素主要可歸結為以下四個方面。1.用戶身份類別多樣高校門戶網(wǎng)站用戶的身份類別多樣，且所關注的內(nèi)容也不一樣。經(jīng)過分析，我們將用戶類型及其關注的欄目進行歸納，如圖1所示。很明顯，不同類型用

4、戶所關注的內(nèi)容雖有交叉但沒有完全重合，網(wǎng)站上存在著許多與用戶無關的內(nèi)容。試想用戶經(jīng)過重重的選擇與過濾，才能找到所需信息，那么這樣的訪問體驗必定是平淡的，缺少歸屬感的。圖1 高校門戶網(wǎng)站的用戶類型及其需求示意圖2.終端瀏覽環(huán)境復雜近幾年，終端的瀏覽環(huán)境變得越發(fā)復雜，成為影響高校門戶網(wǎng)站用戶體驗的重要因素之一。現(xiàn)在終端屏幕分辨率從1920×1080 full hd，至800×600 svga，有近20種之多。與此同時，隨著移動互聯(lián)網(wǎng)的興起，小屏幕移動終端訪客成倍增加。面對這么復雜的終端環(huán)境，高校門戶網(wǎng)站設計者們該采用哪種分辨率來設計網(wǎng)站？據(jù)筆者統(tǒng)計，39所“985工程”高校中，

5、有33所高校采用的是固定的1000像素寬度以內(nèi)的設計。在寬屏與超寬屏成為主流的今天，這無異于放棄了諸多用戶的屏幕空間與視覺美感。對于移動互聯(lián)網(wǎng)用戶，這樣的設計更為糟糕受限于屏幕的尺寸，網(wǎng)站內(nèi)容微小到幾乎無法閱讀。3.視覺界面同質化當前國內(nèi)高校門戶網(wǎng)站的視覺界面設計有同質化的趨勢，缺少藝術風格與特點，毫無個性可言。在網(wǎng)站色彩搭配上，國內(nèi)高校門戶網(wǎng)站的主色調以藍色、紅色居多。據(jù)筆者統(tǒng)計，39所“985工程”高校中，有一半高校采用了藍色作為主色調。雷同的色彩運用，很難給用戶帶來深刻的印象。從網(wǎng)站的輔助色、對比色運用方面來看，許多高校門戶網(wǎng)站整體色調統(tǒng)一有余，對比不足，視覺界面色彩關系普遍沉悶，缺少生

6、機與活力4。在網(wǎng)站布局設計上，國內(nèi)高校門戶網(wǎng)站的版面多由帶網(wǎng)站標識的頁眉，通欄的導航欄，帶有圖片新聞、公告列表等內(nèi)容的主體，帶有專題鏈接的側邊欄，以及帶有的頁腳所構成5，版式以網(wǎng)格化三欄式布局為主?？傮w上網(wǎng)站的布局結構呆板，缺少靈動的美感。多數(shù)高校網(wǎng)站還存在著內(nèi)容過“滿”的缺陷，用戶在瀏覽時會產(chǎn)生無趣、壓抑甚至厭煩的心理。在網(wǎng)站圖片選擇上，國內(nèi)大多數(shù)高校門戶網(wǎng)站以校園風景、環(huán)境設施、領導合影、會議活動等類型的圖片來展示學校的風貌5?？傮w來說，圖片題材的選擇上過于拘謹，很難給用戶留下深刻的印象。4.導航形式單一導航在網(wǎng)站用戶體驗的塑造中扮演了重要的角色，提供了用戶獲取信息的主要途徑6。國內(nèi)高校門

7、戶網(wǎng)站導航的形式比較單一，用戶在訪問過程中可能因此冒著“迷途”的風險。形式單一的導航會影響網(wǎng)站的可用性，削弱品牌的可信度。三、用戶體驗視角下的高校門戶網(wǎng)站再設計再設計，也就是重新設計，以全新的理念重新審視我們習以為常的事物。高校在門戶網(wǎng)站重新設計的過程中，應當摒棄以設計者為中心、以領導為中心的設計理念，從用戶體驗的視角出發(fā)，解決影響用戶體驗的各種要素，改善網(wǎng)站的用戶黏性，提升網(wǎng)站的品質。1.提供按用戶類型的訪問入口高校門戶網(wǎng)站再設計過程中，可通過調查問卷、采訪與觀察等方式去研究用戶，明確每種類型用戶的需求。根據(jù)不同用戶的實際需求，在網(wǎng)站的信息架構中將所有的信息進行分類整合，形成針對用戶群特定需

8、求而設的信息匯總平臺。在主頁的顯著位置，按照未來學生、學生、學生父母、教師、工作人員、校友、訪客等用戶類型的訪問入口，為用戶帶來貼心的服務。2.采用響應式web設計面對復雜的客戶端瀏覽環(huán)境，我們不可能為不同的設備去定制不同版本的網(wǎng)站。怎么辦？“響應式web設計”的理念應運而生。響應式web設計是ethan marcotte于2010年提出的概念，其內(nèi)容的核心是一個網(wǎng)站或網(wǎng)頁能夠兼容多個終端而不是為每個終端定制一個特定的版本。設計理念是頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整，以適應于不同屏幕空間用戶的瀏覽7。如圖2所示，運用響應式web

9、設計的網(wǎng)站在pc、pad、智能手機等設備上均有良好的視覺呈現(xiàn)效果。響應式web設計具有開發(fā)、維護、運營成本較低，兼容性強等優(yōu)勢，是未來網(wǎng)站技術發(fā)展的趨勢之一。圖2 響應式設計網(wǎng)站高校門戶網(wǎng)站再設計過程中可運用響應式web布局設計。目前訪問高校門戶網(wǎng)站的客戶端設備仍以電腦大屏為主。因此，響應式布局的設計采用大屏優(yōu)先，兼顧移動設備的原則8。在普通大屏幕上，采用傳統(tǒng)的固定分辨率設計。在全高清屏幕上，利用設備高分辨率的特點，運用高質量大圖“平鋪自適應”或“中心定位，兩側自適應”的方式，為用戶帶來強烈的視覺震撼與沖擊力，中國人民大學主頁就是采用此種方式，如圖3所示。在小屏幕上，采用單列式布局，便于移動端

10、閱讀。插圖采用寬度百分比，高度自適應的方式，以取得良好的視覺效果。圖3 中國人民大學主頁3.運用藝術化的語言設計視覺界面視覺界面設計在網(wǎng)站開發(fā)周期中是至關重要的一步，正如蘋果電腦mac機之父jef raskin所說：“對于消費者而言，界面就是產(chǎn)品”。(1)色彩搭配色彩是傳遞品牌識別的一個最為有效的方法。用戶訪問網(wǎng)站，給其留下第一印象的一定是色彩。高校門戶網(wǎng)站再設計過程中，色彩的選擇與搭配應當遵循適合性、一致性、可讀性原則9。高校門戶網(wǎng)站主色調的選擇首先應當遵循高校vis(視覺識別系統(tǒng))的規(guī)范標準，確保在互聯(lián)網(wǎng)上也能傳達一個統(tǒng)一的品牌形象。當然，目前大多數(shù)高校并沒有統(tǒng)一的視覺識別系統(tǒng)，那么網(wǎng)站主

11、色調的選擇就需要經(jīng)過深思熟慮，挖掘學校的歷史與特色，考慮合適的色彩方案，而不是隨大流。清華大學門戶網(wǎng)站數(shù)次改版，均使用象征高貴的紫色作為網(wǎng)站的主色調，具有很高的辨識度。北京航空航天大學網(wǎng)站，如圖4所示，采用藍色深邃的宇宙星空為背景，其意義不言而喻。圖4 北京航空航天大學主頁高校門戶網(wǎng)站色彩搭配應遵循整體一致性原則，整個網(wǎng)站從首頁到欄目頁，再到內(nèi)容頁，都應使用同樣的色彩方案，這樣的網(wǎng)站頁面才具有整體美、韻律美。高校門戶網(wǎng)站色彩運用上需要遵循可讀性原則。文字的色彩純度不能太高，文字與背景的色彩不能過于接近，否則會使用戶產(chǎn)生視覺疲勞。(2)版式設計網(wǎng)格設計當前流行的網(wǎng)站版式設計方式，可為網(wǎng)站增添秩序

12、美、連續(xù)美、和諧美。但是網(wǎng)格設計的缺陷也是明顯的，嚴格遵循網(wǎng)格設計的版面也容易給用戶帶來呆板和枯燥的感覺。高校門戶網(wǎng)站的版式設計在運用網(wǎng)格設計的基礎上，應該敢于創(chuàng)新，適當越出網(wǎng)格的邊界，會使頁面更加生動與流暢。暨南大學門戶網(wǎng)站布局設計也是典型的網(wǎng)格設計，如圖5所示。網(wǎng)站頁眉部分，以?；罩邢笳鳌拔幕d體、交流橋梁”的帆船圖形為主，打破網(wǎng)格的束縛，強化了學校的辦學理念，成為整個頁面設計的亮點。版式布局中合理留白，也很重要。在內(nèi)容塊、段落、圖片、按鈕等元素留出空隙，可增強內(nèi)容的可讀性。留白可使內(nèi)容層次分明，減少了界面的復雜程度，用戶感受到的視覺層次感越好，網(wǎng)頁上的內(nèi)容就越容易被獲取10。圖5 暨南大

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

14、系統(tǒng)就是用戶在互聯(lián)網(wǎng)海洋里正確航行的指南針。國內(nèi)高校門戶網(wǎng)站在再設計過程中，應當考慮建立具有多維度、立體的導航形式。除了常規(guī)的主導航、局部導航、當前位置導航外，還可考慮安排網(wǎng)站地圖、a-z字母索引、標簽云、分類檢索等形式的導航，以滿足用戶實際需求，為用戶獲取信息提供多種途徑，改善用戶體驗。四、結束語用戶體驗是一種以人為本，追求極致的互聯(lián)網(wǎng)思維。盡管用戶體驗是不可被設計的，但我們可以不斷改進。相信只要從用戶體驗視角出發(fā)，遵循以用戶為中心的理念，對高校門戶網(wǎng)站從網(wǎng)站定位、信息架構、視覺風格等方面進行再設計，必定能夠提升學校的網(wǎng)絡形象，策應學校的發(fā)展戰(zhàn)略，為師生、校友、考生等各類用戶提供更好的服務。參考文獻：1吳江，黃晟青，蔡駿.互聯(lián)網(wǎng)購物網(wǎng)站用戶體驗設計研究j.包裝工程，2012，33(8)：68-71.2李志義，義梅練.基于用戶體驗的網(wǎng)站優(yōu)化研究綜述j.情報科學，2013，31(11)：150-154.3單筱秋.淺議人機交互界面研發(fā)中的用戶體驗設計j.南京藝術學院學報(美術與設計版)，2013(6)：181-183.4孫榮，王菊.高校門戶網(wǎng)站視覺界面色彩運用探析j.中國教育信化，2012(19)：27-30.5劉歡，盧蓓蓉.中美高校門戶網(wǎng)站的比較與思考j.中國教育信息化，2012(3)：4-6.6james kalbacb.web導航設計m.北京：電子工業(yè)出版社，