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

孫 榮，王 菊

（1.江蘇師范大學，江蘇徐州221116；2.江蘇省徐州財經(jīng)高等職業(yè)技術(shù)學校，江蘇徐州221008）

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

孫 榮1，王 菊2

（1.江蘇師范大學，江蘇徐州221116；2.江蘇省徐州財經(jīng)高等職業(yè)技術(shù)學校，江蘇徐州221008）

文章通過調(diào)查與分析，將影響當前高校門戶網(wǎng)站用戶體驗的要素歸納為用戶身份類別多樣、終端瀏覽環(huán)境復雜、視覺界面同質(zhì)化、導航形式單一等四個方面，并以這四個要素為切入點，提出改善高校門戶網(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)站重新設計過程中如何改善用戶體驗、提升網(wǎng)站品質(zhì)、策應學校的發(fā)展戰(zhàn)略，提供有益的思路。

一、用戶體驗設計與網(wǎng)站

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

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

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

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

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

圖1 高校門戶網(wǎng)站的用戶類型及其需求示意圖

近幾年，終端的瀏覽環(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工程”高校中，有33所高校采用的是固定的1000像素寬度以內(nèi)的設計。在寬屏與超寬屏成為主流的今天，這無異于放棄了諸多用戶的屏幕空間與視覺美感。對于移動互聯(lián)網(wǎng)用戶，這樣的設計更為糟糕——受限于屏幕的尺寸，網(wǎng)站內(nèi)容微小到幾乎無法閱讀。

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

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

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

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

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

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

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

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

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

圖2 響應式設計網(wǎng)站

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

圖3 中國人民大學主頁

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

（1）色彩搭配

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

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

圖4 北京航空航天大學主頁

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

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

（2）版式設計

網(wǎng)格設計當前流行的網(wǎng)站版式設計方式，可為網(wǎng)站增添秩序美、連續(xù)美、和諧美。但是網(wǎng)格設計的缺陷也是明顯的，嚴格遵循網(wǎng)格設計的版面也容易給用戶帶來呆板和枯燥的感覺。高校門戶網(wǎng)站的版式設計在運用網(wǎng)格設計的基礎(chǔ)上，應該敢于創(chuàng)新，適當越出網(wǎng)格的邊界，會使頁面更加生動與流暢。暨南大學門戶網(wǎng)站布局設計也是典型的網(wǎng)格設計，如圖5所示。網(wǎng)站頁眉部分，以校徽中象征“文化載體、交流橋梁”的帆船圖形為主，打破網(wǎng)格的束縛，強化了學校的辦學理念，成為整個頁面設計的亮點。

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

圖5 暨南大學主頁

（3）圖片選擇

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

圖6 清華大學主頁

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

四、結(jié)束語

用戶體驗是一種以人為本，追求極致的互聯(lián)網(wǎng)思維。盡管用戶體驗是不可被設計的，但我們可以不斷改進。相信只要從用戶體驗視角出發(fā)，遵循以用戶為中心的理念，對高校門戶網(wǎng)站從網(wǎng)站定位、信息架構(gòu)、視覺風格等方面進行再設計，必定能夠提升學校的網(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].南京藝術(shù)學院學報(美術(shù)與設計版),2013(6):181-183.

[4]孫榮,王菊.高校門戶網(wǎng)站視覺界面色彩運用探析[J].中國教育信化,2012(19):27-30.

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

[6]James Kalbacb.Web導航設計[M].北京:電子工業(yè)出版社,2009.

[7]楊葉,陳琳,董啟標.響應式Web移動學習資源的技術(shù)實現(xiàn)與設計研究[J].現(xiàn)代教育技術(shù),2012,23(6):107-111.

[8]劉歡,盧蓓蓉.使用響應式設計構(gòu)建高校新型門戶網(wǎng)站[J].中國教育信息化,2013(9):71-74.

[9]王勇,董軒志.基于用戶體驗視角下的網(wǎng)頁視覺傳達設計研究[J].包裝工程,2012,34(24):14-17.

[10]Smashing Magazine.眾妙之門——國際頂級Web設計師成功法則[M].北京:人民郵電出版社,2013.

（編輯：楊馥紅）

G443

：A

：1673-8454（2015）09-0073-04