基于用戶體驗(yàn)理念的高?！臼骄W(wǎng)上服務(wù)大廳界面設(shè)計(jì)

王娟 向科峰

摘要：文章基于用戶體驗(yàn)理論探究高校應(yīng)該如何以用戶為中心建設(shè)一站式網(wǎng)上服務(wù)大廳界面。闡述了用戶體驗(yàn)理論以及高校一站式網(wǎng)上服務(wù)大廳的概念，通過(guò)分析高校網(wǎng)上服務(wù)大廳現(xiàn)狀，了解到現(xiàn)存問(wèn)題主要是由于缺乏相關(guān)設(shè)計(jì)理論作為支撐。研究闡述了界面設(shè)計(jì)的原則，建立了界面設(shè)計(jì)流程，再結(jié)合高校進(jìn)行具體分析，使高校網(wǎng)上服務(wù)大廳更具人性化，以此提高網(wǎng)上辦事效率。既符合高校全心為師生服務(wù)的宗旨，又能推進(jìn)高校信息化的建設(shè)，為其他高校網(wǎng)上服務(wù)大廳建設(shè)者提供新的參考。

關(guān)鍵詞：用戶體驗(yàn);一站式網(wǎng)上服務(wù)大廳;界面設(shè)計(jì)

中圖分類(lèi)號(hào)：J524文獻(xiàn)標(biāo)識(shí)碼：A

文章編碼：1672-7053（2021）02-0073-03

隨著高校辦學(xué)規(guī)模不斷擴(kuò)大，師生人數(shù)逐漸增長(zhǎng)，學(xué)生日常需求多樣化，學(xué)生工作事務(wù)量也變大，傳統(tǒng)的線下辦理事務(wù)已經(jīng)無(wú)法滿足師生的需求。為了響應(yīng)政府推行的線上審批和服務(wù)的號(hào)召，諸多高校也在探索“互聯(lián)網(wǎng)+服務(wù)”，積極建立高校一站式網(wǎng)上服務(wù)大廳。由于高校網(wǎng)上服務(wù)大廳發(fā)展時(shí)間不長(zhǎng)，建設(shè)網(wǎng)站時(shí)只注重技術(shù)因素而忽略了界面設(shè)計(jì)，造成了界面設(shè)計(jì)混亂、用戶體驗(yàn)不佳等問(wèn)題。本文基于用戶體驗(yàn)理念，探索如何構(gòu)建科學(xué)、高效、美觀的一站式網(wǎng)上服務(wù)大廳。

1 相關(guān)理論概述

1.1 用戶體驗(yàn)

用戶體驗(yàn)（User Experience）這一概念是從交互設(shè)計(jì)領(lǐng)域分離出來(lái)的，簡(jiǎn)單來(lái)說(shuō)用戶體驗(yàn)是“用戶”的直觀感受，是用戶在使用某產(chǎn)品過(guò)程中包括使用前后產(chǎn)生的直觀感觸、心理和生理反應(yīng)[1]。注重用戶的感受，建立用戶和產(chǎn)品之間和諧的關(guān)系，是獲得良好體驗(yàn)的關(guān)鍵。

1.2 高校一站式網(wǎng)上服務(wù)大廳

高校一站式網(wǎng)上服務(wù)大廳是集網(wǎng)上辦事、業(yè)務(wù)管理、信息查詢、數(shù)據(jù)共享等為一體的網(wǎng)上服務(wù)平臺(tái)[2]，其主要是以師生服務(wù)、整合資源、優(yōu)化管理為目標(biāo)。高度集成服務(wù)門(mén)戶平臺(tái)、教務(wù)、本科生/研究生教育、科研、學(xué)工、OA等多個(gè)業(yè)務(wù)管理系統(tǒng)，全面解決師生在校的日常事項(xiàng)，達(dá)到事務(wù)流程一鍵式辦理、業(yè)務(wù)部門(mén)一鍵式審批、師生事務(wù)一鍵式辦結(jié)，真正實(shí)現(xiàn)“數(shù)據(jù)多跑路，師生少跑腿”吲的理念。一站式網(wǎng)上服務(wù)大廳帶動(dòng)了高校的信息化建設(shè)，逐漸成為高校日常事務(wù)辦理和信息處理最重要的平臺(tái)之一。

2 高校一站式網(wǎng)上服務(wù)大廳現(xiàn)存問(wèn)題

根據(jù)部分調(diào)研，四川省共有126所本專(zhuān)科院校，其中本科院校52所，專(zhuān)科院校74所。建設(shè)有網(wǎng)上服務(wù)大廳的本科院校33所，專(zhuān)科院校26所左右，一站式網(wǎng)上服務(wù)大廳在高校的覆蓋率還比較低。另外調(diào)查研究了37所高校的網(wǎng)上服務(wù)大廳界面，存在著一些共性問(wèn)題，如內(nèi)容不太完善、未做好內(nèi)容分類(lèi)，用戶不能快速找到自己需要的信息，色彩搭配混亂、頁(yè)面布局繁雜，導(dǎo)致用戶體驗(yàn)較差，辦事效率低下。這主要是由于高校一站式網(wǎng)上服務(wù)大廳發(fā)展時(shí)間不長(zhǎng)，網(wǎng)站開(kāi)發(fā)者大多是計(jì)算機(jī)專(zhuān)業(yè)出身，一味地重視技術(shù)開(kāi)發(fā)，設(shè)計(jì)界面時(shí)缺少專(zhuān)業(yè)的界面設(shè)計(jì)理論作指導(dǎo)，沒(méi)有將用戶體驗(yàn)理念貫穿于整個(gè)設(shè)計(jì)過(guò)程之中。

3 基于用戶體驗(yàn)理念的高?！臼骄W(wǎng)上服務(wù)大廳界面設(shè)計(jì)意義

高校一站式網(wǎng)上服務(wù)大廳作為老師和學(xué)生主要的辦事窗口，使用頻率非常高，建設(shè)一個(gè)基于用戶體驗(yàn)的高效美觀的一站式網(wǎng)上服務(wù)大廳不僅可以吸引師生的使用興趣，還可以展示信息化建設(shè)的各個(gè)方面，提高各職能部門(mén)的辦事效率，促進(jìn)學(xué)校和師生之間的溝通。所以，在用戶體驗(yàn)理念的指導(dǎo)下設(shè)計(jì)一個(gè)好的服務(wù)大廳不管是對(duì)便捷辦理事務(wù)方面，還是對(duì)于學(xué)校信息化推進(jìn)方面，都有非常重要的實(shí)用價(jià)值。

4 基于用戶體驗(yàn)理念的高校—站式網(wǎng)上服務(wù)大廳界面設(shè)計(jì)原則

為了給全校師生提供一個(gè)綜合辦理事務(wù)平臺(tái)、營(yíng)造更便捷高效的辦理事務(wù)環(huán)境，基于用戶體驗(yàn)理念，總結(jié)出高校一站式網(wǎng)上服務(wù)大廳界面設(shè)計(jì)的原則。

4.1 以用戶為中心原則

以用戶為中心原則就是在基于用戶體驗(yàn)理念設(shè)計(jì)一站式網(wǎng)上服務(wù)大廳界面時(shí)，要充分考慮老師和學(xué)生在使用網(wǎng)站時(shí)的使用感受，站在用戶的角度以他們的思維去設(shè)計(jì)網(wǎng)站[4]，并研究師生的使用興趣和習(xí)慣，了解師生真正的需求，做好網(wǎng)站角色和內(nèi)容分類(lèi)，再根據(jù)不同的角色制定不同的頁(yè)面。

4.2 簡(jiǎn)潔性原則

簡(jiǎn)潔性原則即頁(yè)面簡(jiǎn)潔不簡(jiǎn)單，做好分類(lèi)，突出重點(diǎn)，旨在使用戶在短時(shí)間內(nèi)快速瀏覽到需要的信息，提高工作效率[5]。著名的二八定律[6]，又稱(chēng)80/20法則，意思是在任何一件事中，重要的東西只占20%，其余的80%都是次要的。將網(wǎng)站內(nèi)容最重要的20%放在首頁(yè)，其余80%隱藏起來(lái)，這樣既可以保持頁(yè)面簡(jiǎn)潔，又可以讓用戶快速找到重點(diǎn)，降低用戶負(fù)擔(dān)?；谟脩趔w驗(yàn)理念的高校一站式服務(wù)大廳界面設(shè)計(jì)在保持簡(jiǎn)潔性的同時(shí)，應(yīng)注意的是隱藏的信息內(nèi)容也要具有一定的指引性，使用戶找到目標(biāo)的步驟不能太多。

4.3 統(tǒng)—性原則

基于用戶體驗(yàn)理念設(shè)計(jì)一站式網(wǎng)上服務(wù)大廳界面時(shí)要注重界面的統(tǒng)一性，統(tǒng)一性原則除了要保持色彩[7]、圖形圖標(biāo)、視覺(jué)尺寸的統(tǒng)一之外，目前很多高校為了統(tǒng)一網(wǎng)站界面設(shè)計(jì)風(fēng)格，都設(shè)置了自己學(xué)校的視覺(jué)標(biāo)識(shí)系統(tǒng)，該系統(tǒng)統(tǒng)一定義了學(xué)校的校名、校徽、文字、色彩等，使高校網(wǎng)站界面的設(shè)計(jì)更加標(biāo)準(zhǔn)化和系統(tǒng)化。

4.4 適用性原則

適用性原則是針對(duì)不同類(lèi)型的網(wǎng)站，考慮其獨(dú)特的適用性而進(jìn)行的設(shè)計(jì)。高校一站式網(wǎng)上服務(wù)大廳與門(mén)戶網(wǎng)站最大的區(qū)別之處在于門(mén)戶網(wǎng)站更注重展示學(xué)校信息，如學(xué)校概況、師資情況、部門(mén)機(jī)構(gòu)以及一些校內(nèi)新聞動(dòng)態(tài)等信息，所以網(wǎng)站內(nèi)幾乎是以文本鏈接的方式提供信息;而一站式網(wǎng)上服務(wù)大廳是聚合服務(wù)，將部門(mén)整合、內(nèi)容融合為一體，主要意圖在于為在校師生快捷辦理事務(wù)，網(wǎng)站內(nèi)打開(kāi)后更多的是流程指引類(lèi)和填表類(lèi)。用戶點(diǎn)擊流程類(lèi)鏈接后，最好以彈窗的形式出現(xiàn)，為了使用戶知道自己所處位置，彈窗應(yīng)出現(xiàn)在內(nèi)容區(qū)，且不要覆蓋頁(yè)眉和頁(yè)腳，這樣用戶的連貫性更好。填表類(lèi)鏈接可用新開(kāi)窗口的形式出現(xiàn)，因?yàn)槭褂脧棿翱赡軙?huì)導(dǎo)致用戶填一半返回頁(yè)面后，需要進(jìn)入重新填寫(xiě)，為用戶帶來(lái)不便。

5 基于用戶體驗(yàn)理念的高校一站式網(wǎng)上服務(wù)大廳界面設(shè)計(jì)流程

5.1 高校一站式網(wǎng)上服務(wù)大廳用戶需求分析

建設(shè)高校網(wǎng)上服務(wù)大廳的核心工作，也是第一步工作，就是對(duì)用戶需求進(jìn)行分析。設(shè)計(jì)者可以通過(guò)多種方法調(diào)查用戶兩個(gè)問(wèn)題“用戶是誰(shuí)？”和“用戶想要在網(wǎng)站上找到什么內(nèi)容？”只有充分了解用戶是誰(shuí)和用戶需要什么，界面所展示出來(lái)的內(nèi)容才是有針對(duì)性、有價(jià)值的。

5.2 高校一站式網(wǎng)上服務(wù)大廳數(shù)據(jù)信息架構(gòu)

基于用戶體驗(yàn)理念的高校一站式網(wǎng)上服務(wù)大廳數(shù)據(jù)信息架構(gòu)主要由數(shù)據(jù)源層、數(shù)據(jù)平臺(tái)層和應(yīng)用服務(wù)層三部分構(gòu)成，見(jiàn)圖1。

數(shù)據(jù)源層包含教務(wù)、學(xué)工、網(wǎng)絡(luò)、科研、后勤等應(yīng)用系統(tǒng);數(shù)據(jù)平臺(tái)層包含兩個(gè)部分，一是由集成平臺(tái)、整理平臺(tái)、質(zhì)量管理平臺(tái)組成的數(shù)據(jù)治理平臺(tái)，二是由師生肖像庫(kù)、教學(xué)評(píng)估庫(kù)、貧困補(bǔ)助庫(kù)、學(xué)業(yè)預(yù)警庫(kù)等組成的校園大數(shù)據(jù)倉(cāng)庫(kù);應(yīng)用服務(wù)層包含師生肖像、教師主頁(yè)、教學(xué)質(zhì)量評(píng)估、學(xué)業(yè)預(yù)警、教師職稱(chēng)評(píng)審等。應(yīng)用服務(wù)層是基于數(shù)據(jù)源層和數(shù)據(jù)平臺(tái)層的數(shù)據(jù)和服務(wù)應(yīng)用，按照高校的規(guī)定進(jìn)行類(lèi)別的劃分，最終形成覆蓋全校師生的一站式網(wǎng)上服務(wù)大廳。

5.3 高校一站式網(wǎng)上服務(wù)大廳原型設(shè)計(jì)

原型設(shè)計(jì)就是設(shè)計(jì)師把網(wǎng)頁(yè)界面的布局和構(gòu)思大致表現(xiàn)出來(lái)，快速表達(dá)自己的想法，同時(shí)使別人快速理解。原型設(shè)計(jì)非常重要，它初步的展示頁(yè)面布局，根據(jù)用戶需求和用戶反饋，快速更改原型，達(dá)到要求后就可以實(shí)施方案，這樣不僅可以提高用戶體驗(yàn)，還可以大大節(jié)省成本。

5.4 高校一站式網(wǎng)上服務(wù)大廳界面設(shè)計(jì)表達(dá)

高校一站式網(wǎng)上服務(wù)大廳與用戶直接接觸的是網(wǎng)站交互界面，界面設(shè)計(jì)的優(yōu)劣直接決定服務(wù)大廳的用戶體驗(yàn)好壞。網(wǎng)站界面交互設(shè)計(jì)是在界面布局的基礎(chǔ)之上，加以圖形、文字、色彩、表格等元素，通過(guò)網(wǎng)頁(yè)與用戶實(shí)現(xiàn)交流和互動(dòng)[8]。良好的網(wǎng)頁(yè)交互界面能夠幫助用戶更好地體驗(yàn)自己在虛擬空間中的存在感[5]。

5.4.1頁(yè)面布局

頁(yè)面布局就是對(duì)網(wǎng)站界面上的文字、圖形、色彩、表格等內(nèi)容進(jìn)行合理地格式設(shè)置，使用戶能清晰地了解網(wǎng)站信息的大致結(jié)構(gòu)。網(wǎng)頁(yè)上的頁(yè)面布局排版是否合理，頁(yè)面風(fēng)格是否符合用戶的心意，這些都會(huì)影響到用戶在使用該網(wǎng)頁(yè)時(shí)是否感受到便捷易用、賞心悅目等心情[9]。高校網(wǎng)上服務(wù)大廳在頁(yè)面布局上要具備條理性、簡(jiǎn)潔性、美觀性，充分考慮用戶使用習(xí)慣，梳理好信息，突出重要信息板塊，使用戶尋找信息時(shí)能夠一目了然。

5.4.2色彩

合理的色彩搭配能迅速吸引用戶的眼球，增強(qiáng)注意力，讓初次訪問(wèn)的用戶對(duì)網(wǎng)站產(chǎn)生良好的第一印象[10]。不同于其他網(wǎng)站界面那樣繽紛多彩，高校網(wǎng)站色彩搭配還應(yīng)該結(jié)合自己學(xué)校的文化特色，使師生用戶進(jìn)入網(wǎng)站就有一種親切感和歸屬感。

5.4.3 圖標(biāo)

圖標(biāo)是一類(lèi)特殊的圖形符號(hào)，它可以快速傳遞圖形表達(dá)的信息，便于識(shí)別和記憶[11]。好的圖標(biāo)能讓用戶快速精確地識(shí)別信息，提高效率，使界面簡(jiǎn)潔美觀，在網(wǎng)站界面設(shè)計(jì)，圖標(biāo)應(yīng)該包括以下特點(diǎn)：易識(shí)別性，首先要考慮的原則是易識(shí)別性，它是圖標(biāo)的靈魂，能準(zhǔn)確地讓用戶理解到它所想表達(dá)的意思[12]。統(tǒng)一性，高校網(wǎng)站圖標(biāo)的設(shè)計(jì)風(fēng)格應(yīng)該與整個(gè)界面的風(fēng)格（色彩、圖形等）保持高度一致。

6 基于用戶體驗(yàn)理念的高?！臼骄W(wǎng)上服務(wù)大廳界面設(shè)計(jì)實(shí)踐

基于上文中所闡述的高校一站式網(wǎng)上服務(wù)大廳界面設(shè)計(jì)的四

個(gè)原則，以及設(shè)計(jì)流程，本文以西南科技大學(xué)一站式網(wǎng)上服務(wù)大廳為例，進(jìn)行改版設(shè)計(jì)實(shí)踐。

6.1 網(wǎng)上服務(wù)大廳用戶需求分析

西南科技大學(xué)網(wǎng)上服務(wù)大廳主要面向在校師生，經(jīng)過(guò)調(diào)查發(fā)現(xiàn)教師和學(xué)生對(duì)于業(yè)務(wù)需求不同，見(jiàn)表1。為了讓師生更方便快捷地辦理業(yè)務(wù)，在建設(shè)大廳時(shí)需要將頁(yè)面分為教師版和學(xué)生版，分角色為師生提供服務(wù)。針對(duì)不同的需求提供不同的服務(wù)，推送與個(gè)人相關(guān)的信息，突出重點(diǎn)，減少無(wú)關(guān)信息，加快效率，提升辦事體驗(yàn)。

6.2 網(wǎng)上服務(wù)大廳界面設(shè)計(jì)

6.2.1 原型設(shè)計(jì)

在了解用戶具體需求之后，利用計(jì)算機(jī)輔助系統(tǒng)建立界面原型，經(jīng)過(guò)小組討論和用戶的再次溝通與測(cè)試，反復(fù)修改原型，原型設(shè)計(jì)能夠快速地展示服務(wù)大廳的整體結(jié)構(gòu)和初步界面。圖2是西南科技大學(xué)服務(wù)大廳改版的原型圖，2 （a）和2（b）分別代表教師版、學(xué)生版原型圖。

6.2.2界面設(shè)計(jì)

西南科技大學(xué)網(wǎng)上服務(wù)大廳按照用戶需求設(shè)計(jì)為兩個(gè)版本，加入了事項(xiàng)流程跟蹤，既可以明細(xì)流程，從而提高服務(wù)質(zhì)量。圖3服務(wù)大廳最終界面，3 （a）和3（b）分別代表學(xué)生版和教師版。界面色彩結(jié)合學(xué)校文化特色，以藍(lán)色為主色調(diào)，藍(lán)色冷靜、深邃、有科技感，與學(xué)?？萍继厣喾鸞13];藍(lán)色給人淵博、寧?kù)o和崇高的感受，符合學(xué)?？茖W(xué)研究的氛圍;同時(shí)藍(lán)色莊重、簡(jiǎn)潔、大氣，又符合學(xué)校的校訓(xùn)。而輔色中橙色、綠色取自校標(biāo)的色彩，金色、銀色取自學(xué)校建筑外墻的色彩，給師生一種親切感。在設(shè)計(jì)圖標(biāo)時(shí)遵循易識(shí)別性和統(tǒng)一性原則。

6.2.3用戶體驗(yàn)評(píng)價(jià)

為了驗(yàn)證本次改版設(shè)計(jì)實(shí)踐是否滿足了用戶需求，提升了用戶體驗(yàn)，利用問(wèn)卷調(diào)查方式分別調(diào)研本校師生對(duì)西南科技大學(xué)舊版、新版一站式網(wǎng)上服務(wù)大廳界面的滿意度，進(jìn)行用戶體驗(yàn)評(píng)價(jià)。本次問(wèn)卷調(diào)查使用李克特五星量表，讓用戶從（1非常不滿意）-（5非常滿意）對(duì)問(wèn)卷進(jìn)行量化打分。問(wèn)卷調(diào)查師生對(duì)登錄過(guò)程、頁(yè)面布局、色彩搭配、信息分類(lèi)、圖標(biāo)文字、整體滿意度等十個(gè)方面的滿意度。如圖4 （a）和4（b）分別表示教工、學(xué)生對(duì)新舊兩版網(wǎng)上服務(wù)大廳的滿意度對(duì)比雷達(dá)圖。根據(jù)圖像清楚地顯示改版后的各方面用戶體驗(yàn)明顯得到提升，證明研究理論是合理的，設(shè)計(jì)實(shí)踐也是有效的。

7 結(jié)語(yǔ)

在互聯(lián)網(wǎng)時(shí)代，高校積極響應(yīng)國(guó)家信息化建設(shè)的號(hào)召，加大建設(shè)一站式網(wǎng)上服務(wù)大廳，著力設(shè)計(jì)高效、美觀的服務(wù)大廳界面，提高各職能部門(mén)的辦事效率，增加辦事的透明度，提高師生使用體驗(yàn)，促進(jìn)學(xué)校與師生之間的溝通。本文基于用戶體驗(yàn)理念研究高校一站式網(wǎng)上服務(wù)大廳界面設(shè)計(jì)，闡述了高校建設(shè)網(wǎng)上服務(wù)大廳遵循的四個(gè)設(shè)計(jì)原則：以用戶為中心原則、簡(jiǎn)潔性原則、統(tǒng)一性原則和適用性原則;為高校建設(shè)網(wǎng)上服務(wù)大廳提供具有理論參考的設(shè)計(jì)流程：理清總體架構(gòu)、分析用戶需求、界面設(shè)計(jì)表達(dá)。未來(lái)，高校應(yīng)將始終以大廳人性化的設(shè)計(jì)、便捷性的服務(wù)、高效性的事務(wù)處理、專(zhuān)業(yè)化的師生服務(wù)作為服務(wù)大廳的建設(shè)方向，以給用戶帶來(lái)更加個(gè)性化和智能化的辦事體驗(yàn)作為服務(wù)大廳的建設(shè)目標(biāo)。

參考文獻(xiàn)

[1]顧振宇.交互設(shè)計(jì)原理與方法[M]北京：清華大學(xué)出版社，2016.

[2]劉一，基于流程再造的高校網(wǎng)上辦事大廳的設(shè)計(jì)與實(shí)現(xiàn)[D].天津大學(xué)，2016.

[3]范少芬，賀宗平.基于流程管理的高校信息化一站式服務(wù)的研究[J]智能計(jì)算機(jī)與應(yīng)用，2018，8 （06）：168-170.

[4]陳晶，肖麗萍產(chǎn)品中交互設(shè)計(jì)的用戶體驗(yàn)研究綜述[J]設(shè)計(jì)，2014 （06）：13—14.

[5]馮志兵，基于用戶體驗(yàn)的網(wǎng)頁(yè)界面交互設(shè)計(jì)研究[D].湖南工業(yè)大學(xué)，2018.

[6]張志軍，設(shè)計(jì)服務(wù)移動(dòng)信息平臺(tái)的理論與實(shí)踐研究[D].南京藝術(shù)學(xué)院，2018

[7]李奕飛，何人可，基于用戶體驗(yàn)的洗衣機(jī)軟界面設(shè)計(jì)原則研究[J].包裝工程，2019，40（10）：196-202

[8]劉春強(qiáng)，視覺(jué)選擇性注意在網(wǎng)頁(yè)交互界面設(shè)計(jì)中的應(yīng)用研究[D].江南大學(xué)，2014.

[9]陳昱甫，陳穎祺，舒葉，網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面布局之分析[J].工業(yè)設(shè)計(jì)，2018 （12）：79-80

[10]許宏年，地方工科類(lèi)院校門(mén)戶網(wǎng)站界面設(shè)計(jì)研究[D].長(zhǎng)春工業(yè)大學(xué)，2017.

[11]張朦朦.淺析類(lèi)扁平化設(shè)計(jì)在國(guó)標(biāo)設(shè)計(jì)中的應(yīng)用[J].大眾文藝，2015 （24）：124-125

[12]劉偉元，用戶界面中的圖標(biāo)設(shè)計(jì)原則[J].包裝工程，2013，34 （08）：94-97.

[13]韓婷婷，色彩情感在平面廣告設(shè)計(jì)中的應(yīng)用[J]，工業(yè)設(shè)計(jì)，2019 （12）：69-70