用戶體驗視角下的高校門戶網站再設計研究

2015-06-28 14:39:49孫榮，王菊

中國教育信息化 2015年9期

關鍵詞：用戶設計

孫榮，王菊

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

用戶體驗視角下的高校門戶網站再設計研究

孫榮1，王菊2

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

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

用戶體驗；高校門戶網站；響應式Web

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

一、用戶體驗設計與網站

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

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

二、影響高校門戶網站用戶體驗的要素

用戶體驗是諸多特定要素的集合體。筆者通過對國內諸多高校門戶網站的訪問與調查，認為目前影響高校門戶網站用戶體驗的要素主要可歸結為以下四個方面。

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

圖1 高校門戶網站的用戶類型及其需求示意圖

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

當前國內高校門戶網站的視覺界面設計有同質化的趨勢，缺少藝術風格與特點，毫無個性可言。

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

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

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

三、用戶體驗視角下的高校門戶網站再設計

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

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

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

圖2 響應式設計網站

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

圖3 中國人民大學主頁

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

（1）色彩搭配

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

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

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

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

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

（2）版式設計

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

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

圖5 暨南大學主頁

（3）圖片選擇

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

圖6 清華大學主頁

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

四、結束語

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

[1]吳江,黃晟青,蔡駿.互聯網購物網站用戶體驗設計研究[J].包裝工程,2012,33(8):68-71.

[2]李志義,義梅練.基于用戶體驗的網站優(yōu)化研究綜述[J].情報科學,2013,31(11):150-154.

[3]單筱秋.淺議人機交互界面研發(fā)中的用戶體驗設計[J].南京藝術學院學報(美術與設計版),2013(6):181-183.

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

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

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

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

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

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

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

（編輯：楊馥紅）

G443

：A

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