基于用戶體驗(yàn)要素的校園協(xié)作APP界面設(shè)計(jì)研究

吳雙 鄧鑫 董石羽

摘要：從用戶體驗(yàn)要素的角度分析用戶需求，探究校園協(xié)作類APP的亮點(diǎn)功能和界面的視覺表現(xiàn)。以用戶體驗(yàn)要素的五個(gè)層面為理論工具，將戰(zhàn)略層中的用戶細(xì)分、問卷調(diào)查、用戶訪談作為調(diào)研切入點(diǎn)，探討以用戶體驗(yàn)要素為基礎(chǔ)的校園協(xié)作類APP界面的設(shè)計(jì)原則。將用戶體驗(yàn)要素與校園協(xié)作的關(guān)系以APP交互界面設(shè)計(jì)的形式呈現(xiàn)出來，從而完成設(shè)計(jì)的概念性開發(fā)。以用戶體驗(yàn)要素為出發(fā)點(diǎn)的校園協(xié)作類APP界面設(shè)計(jì)，能夠在用戶協(xié)作過程中起引導(dǎo)作用，并為以用戶體驗(yàn)要素為背景的校園協(xié)作產(chǎn)品在提高合作效率，準(zhǔn)確查找目標(biāo)隊(duì)友或信息等需求的解決方式提供參考依據(jù)。

關(guān)鍵詞：用戶體驗(yàn)要素校園協(xié)作APP界面設(shè)計(jì)交互設(shè)計(jì)

中圖分類號(hào)：TP311

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2021）02-0045-03

引言

當(dāng)今社會(huì)人們正處于一個(gè)信息和網(wǎng)絡(luò)飛速發(fā)展的互聯(lián)網(wǎng)時(shí)代，隨著智能手機(jī)和平板電腦等移動(dòng)端深入到學(xué)生群體學(xué)習(xí)和生活的各個(gè)方面，也為相關(guān)校園類APP的開發(fā)與設(shè)計(jì)創(chuàng)造了條件。用戶體驗(yàn)的重要性也逐步向用戶更加注重使用過程中的便捷性和交互性等方面體現(xiàn)。同時(shí)，教育部在《關(guān)于加快建設(shè)高水平本科教育全面提高人才培養(yǎng)能力的意見》【1】中明確指出：鼓勵(lì)學(xué)生通過參加社會(huì)實(shí)踐、科學(xué)研究、創(chuàng)新創(chuàng)業(yè)、競(jìng)賽活動(dòng)等獲得學(xué)分。團(tuán)隊(duì)協(xié)作相關(guān)項(xiàng)目及比賽已經(jīng)完全滲透到校園課程中，要使高校學(xué)生所參加團(tuán)體活動(dòng)中的比賽或課程合作達(dá)到最高效率，就應(yīng)規(guī)范管理其合作內(nèi)容，并運(yùn)用用戶體驗(yàn)要素支撐其內(nèi)容呈現(xiàn)方式。

一、用戶體驗(yàn)要素的概述

（一）用戶體驗(yàn)

用戶體驗(yàn)（UserExperience，UE/UX）一詞由用戶體驗(yàn)設(shè)計(jì)師

唐納德諾曼在20世紀(jì)90年代中期提出并推廣，是用戶在操作和使用產(chǎn)品或服務(wù)過程中的動(dòng)作、思考及感悟，其包括由產(chǎn)品和服務(wù)提供給用戶的理性價(jià)值和感性體驗(yàn)【2】。用戶體驗(yàn)關(guān)注產(chǎn)品與外界和功能交互的方式，即人在“使用”過程中與產(chǎn)品產(chǎn)生聯(lián)系并形成合理且系統(tǒng)的整體。

（二）用戶體驗(yàn)要素的五個(gè)層面

用戶體驗(yàn)具有一個(gè)自下而上的層級(jí)體系，依次為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層?；诂F(xiàn)有基礎(chǔ)總結(jié)出適用于APP結(jié)構(gòu)的要素模型，如圖1所示。每層之間的聯(lián)系由下一相鄰層來確定，例如表現(xiàn)層由框架層決定，框架層受結(jié)構(gòu)層影響，以此類推。

1.戰(zhàn)略層：戰(zhàn)略層對(duì)產(chǎn)品總體導(dǎo)向的進(jìn)行控制，用戶體驗(yàn)過程中每項(xiàng)展開都基于該層級(jí)的工作，并涉及產(chǎn)品目標(biāo)與用戶需求定義【3】，產(chǎn)品目標(biāo)是指用戶想通過產(chǎn)品獲得什么，即產(chǎn)品需要滿足某項(xiàng)功能才能達(dá)到某種目的;用戶需求則從用戶細(xì)分和用戶研究?jī)煞矫媲腥搿?/p>

在戰(zhàn)略層制訂過程中，強(qiáng)調(diào)清晰而準(zhǔn)確的定位。在產(chǎn)品目標(biāo)方面，以明確的定義引導(dǎo)整個(gè)產(chǎn)品的方向。在用戶需求方面，由于用戶背景的差異，不同用戶對(duì)于不同類型的產(chǎn)品功能和界面風(fēng)格的體驗(yàn)要求有所不同。在用戶需求分析過程中，通過用戶細(xì)分的方法，將大量的用戶需求歸為幾個(gè)可管理的部分【4】，同時(shí)，用戶研究借助問卷調(diào)研和用戶訪談。為范圍層中產(chǎn)品的內(nèi)容和功能提供依據(jù)。

2.范圍層：范圍層定義產(chǎn)品、系統(tǒng)或服務(wù)的功能及描述內(nèi)容需求的形式，包括產(chǎn)品的內(nèi)容需求和功能規(guī)格4。內(nèi)容需求是決定產(chǎn)品中需要操作支持的內(nèi)容信息，如校園協(xié)作類APP的核心是大學(xué)生協(xié)作的項(xiàng)目?jī)?nèi)容，這些內(nèi)容不能憑空設(shè)計(jì)，是產(chǎn)品對(duì)內(nèi)容的需求。功能規(guī)格指產(chǎn)品中所包含的功能和流程，是將戰(zhàn)略層中對(duì)用戶需求的描述落實(shí)到具體的功能上，進(jìn)而將其實(shí)現(xiàn)。范圍層根據(jù)戰(zhàn)略層中的需求進(jìn)一步探索產(chǎn)品的特定功能，以便將其從早期的概念轉(zhuǎn)換為特定的功能集合。

從戰(zhàn)略層到范圍層，是從“為什么”到“要做什么”的轉(zhuǎn)變。在確定功能需求之后，范圍層制定功能規(guī)范，并添加更具體的實(shí)現(xiàn)細(xì)節(jié)。在此期間，內(nèi)容需求伴隨功能，其規(guī)模和質(zhì)量對(duì)后期產(chǎn)品的用戶體驗(yàn)成果產(chǎn)生極大影響。

3.結(jié)構(gòu)層：結(jié)構(gòu)層分為兩個(gè)方面：交互設(shè)計(jì)和信息架構(gòu)。確定產(chǎn)品的核心功能后，進(jìn)入搭建產(chǎn)品信息架構(gòu)的過程，并在此基礎(chǔ)上進(jìn)行交互設(shè)計(jì)，它們的關(guān)注點(diǎn)是理解用戶和用戶的思考及思維方式。業(yè)務(wù)流程圖和操作流程圖通常為該階段產(chǎn)物。

4.框架層：框架層是基于結(jié)構(gòu)層交互設(shè)計(jì)的整體原型設(shè)計(jì)階段，包括界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)。其作用是對(duì)頁面的空間進(jìn)行合理的分割設(shè)計(jì)，目的是通過這些設(shè)計(jì)元素優(yōu)化設(shè)置，提高交互體驗(yàn)，方便用戶使用和操作，從而提高用戶對(duì)信息的理解?？蚣苡山缑嬖O(shè)計(jì)決定;導(dǎo)航設(shè)計(jì)用于呈現(xiàn)信息的界面形式;信息設(shè)計(jì)旨在提供有效的信息交流。

5.表現(xiàn)層：表現(xiàn)層的作用是展示產(chǎn)品的最終視覺設(shè)計(jì)方面。是基于框架層并用于補(bǔ)償框架層中邏輯排列的視覺呈現(xiàn)，是結(jié)構(gòu)、內(nèi)容、功能性和美學(xué)的結(jié)合，同時(shí)以最終的視覺設(shè)計(jì)將其他四個(gè)層級(jí)中的需求和目標(biāo)整合在一起。表現(xiàn)層的工作內(nèi)容實(shí)質(zhì)為感知設(shè)計(jì)。

二、目標(biāo)用戶研究

基于上述用戶體驗(yàn)要素的理論基礎(chǔ)，由用戶操作而呈現(xiàn)的移動(dòng)應(yīng)用，首要關(guān)注的是準(zhǔn)確定位用戶與目標(biāo)【5】。在此類APP的設(shè)計(jì)計(jì)劃中，以在校大學(xué)生為主要目標(biāo)用戶，老師在團(tuán)隊(duì)協(xié)作中充當(dāng)輔導(dǎo)角色，為相關(guān)目標(biāo)用戶。用戶體驗(yàn)的核心是用戶，關(guān)鍵在于關(guān)注用戶的需求，并根據(jù)用戶需求進(jìn)行設(shè)計(jì)【6】。

（一）用戶需求一戰(zhàn)略層內(nèi)容

目標(biāo)用戶的確定和對(duì)產(chǎn)品的需求是用戶體驗(yàn)要素中戰(zhàn)略層的一部分，在戰(zhàn)略層中則選取用戶細(xì)分和用戶研究?jī)蓚€(gè)方法來提取用戶需求。

1.用戶細(xì)分：用戶細(xì)分是依據(jù)用戶的差異性特征，把用戶需求劃分為不同可管理的部分，如圖2所示。用戶細(xì)分方法之間的根本區(qū)別在于細(xì)分維度7，目前移動(dòng)用戶細(xì)分方法，用戶特征通常被用作細(xì)分模型的基本維度。用戶特征可分為三類：人口統(tǒng)計(jì)學(xué)特征、行為特征、心理特征。人口統(tǒng)計(jì)學(xué)特征包含用戶顯示的外部特征，如年齡、職業(yè)、性別、地域等8;行為特征描述用戶特定的購(gòu)買行為，例如購(gòu)買次數(shù)、購(gòu)買量等;心理特征不僅反映用戶的行為，而且包括興趣、愛好和態(tài)度，如消費(fèi)模式、自我評(píng)價(jià)等【9】。

本文主要以校園使用背景為依托，根據(jù)用戶的人口統(tǒng)計(jì)學(xué)特征和心理特征對(duì)用戶種類進(jìn)行劃分。將學(xué)生用戶以大一至研三七個(gè)年級(jí)進(jìn)行劃分，對(duì)各專業(yè)類型學(xué)生的課程項(xiàng)目和合作特征進(jìn)行總結(jié)。將老師用戶以各大類專業(yè)類型進(jìn)行劃分，總結(jié)老師輔導(dǎo)在團(tuán)隊(duì)合作中發(fā)揮的作用。細(xì)分出兩類用戶的類型，如圖3所示：

學(xué)生群體在此階段的主要需求為規(guī)劃合作項(xiàng)目，尋找合作隊(duì)友，獲得老師指導(dǎo)，掌握進(jìn)度和掌握大賽動(dòng)態(tài)。

老師用戶在輔導(dǎo)過程中的主要工作為對(duì)項(xiàng)目信息的接收、整理和輸出。該類工作偏向于對(duì)信息的及時(shí)性和對(duì)內(nèi)容完整性的獲知，注重信息的傳遞快速性和內(nèi)容易解讀性。老師群體在該階段有規(guī)劃項(xiàng)目方向、推薦比賽項(xiàng)目的需求，掌握學(xué)生進(jìn)度并傳達(dá)指導(dǎo)意見，同時(shí)指導(dǎo)多個(gè)項(xiàng)目合作團(tuán)隊(duì)和協(xié)調(diào)工作。

2.用戶調(diào)查：通過具體的調(diào)研方法，對(duì)前期階段需求進(jìn)行驗(yàn)證并挖掘潛在的用戶需求，該階段采用問卷調(diào)研和用戶訪談的方式得出用戶細(xì)分階段未發(fā)掘的需求。

（1）問卷調(diào)研及分析：?jiǎn)柧硗ㄟ^網(wǎng)絡(luò)途徑發(fā)放給學(xué)生群體，共發(fā)放問卷400份，回收387份。并對(duì)問卷結(jié)果進(jìn)行初步分析。調(diào)查對(duì)象涉及高校各個(gè)年級(jí)，其中男生人數(shù)159人，女生人數(shù)228人，參與調(diào)研的人群中大四和研一的學(xué)生最多，分別為88人和100人，合作頻率集中在3～5次和5～8次，這與課程內(nèi)容和年級(jí)學(xué)習(xí)任務(wù)特征有關(guān)。

如表1所示，大多數(shù)大學(xué)生希望在協(xié)作過程中能夠了解隊(duì)友的能力和評(píng)分和項(xiàng)目經(jīng)驗(yàn)。

（2）用戶訪談分析：訪談結(jié)果集中在高校學(xué)生在校園協(xié)作過程中需要尋找并了解隊(duì)友，制訂明確的計(jì)劃和合理的分工，及時(shí)掌握合作進(jìn)度并能和各方進(jìn)行有效交流;老師的角色與期望則是為學(xué)生提供方向性指導(dǎo)，及時(shí)了解學(xué)生協(xié)作情況并傳達(dá)指導(dǎo)信息，同時(shí)規(guī)劃各階段的指導(dǎo)項(xiàng)目。

通過問卷調(diào)研和用戶訪談，得出相關(guān)痛點(diǎn)。并結(jié)合用戶細(xì)分部分的需求，總結(jié)出核心目標(biāo)用戶和相關(guān)目標(biāo)用戶的需求。

3.用戶行為：通過用戶細(xì)分對(duì)比和前期調(diào)研，總結(jié)學(xué)生和老師兩類用戶行為的流程，為后續(xù)表現(xiàn)層設(shè)計(jì)提供體驗(yàn)流程的邏輯依據(jù)。如圖4所示。

學(xué)生用戶執(zhí)行三個(gè)目的過程中的步驟則為前期用戶調(diào)研中的痛點(diǎn)，根據(jù)“制訂計(jì)劃”、“邀請(qǐng)合作”和“老師修改意見”等痛點(diǎn)確定APP學(xué)生端的主要功能。

老師用戶的目的行為中，APP要幫助老師解決的方面有及時(shí)跟進(jìn)任務(wù)、推薦的信息如何被學(xué)生獲知和輔導(dǎo)過程中如何及時(shí)做出修改以及和學(xué)生有效的交流。

本節(jié)在研究目標(biāo)用戶的過程中，運(yùn)用戰(zhàn)略層中對(duì)用戶需求的分析，通過用戶細(xì)分到用戶研究的遞進(jìn)方法總結(jié)出符合用戶在校園項(xiàng)目協(xié)作過程中的行為，并挖掘痛點(diǎn)和機(jī)會(huì)點(diǎn)，為后文中實(shí)際方案的設(shè)計(jì)提供范圍層和結(jié)構(gòu)層的依據(jù)，同時(shí)也影響了表現(xiàn)層的設(shè)計(jì)方向。

三、基于用戶體驗(yàn)要素的APP設(shè)計(jì)

體驗(yàn)分為感官的、行為的和反思的3個(gè)層次，用戶對(duì)產(chǎn)品的體驗(yàn)從第一層次的感官到第三層次的反思存在遞進(jìn)關(guān)系【10】。產(chǎn)品所展現(xiàn)的第一印象即直覺體驗(yàn)，屬于用戶體驗(yàn)設(shè)計(jì)要素中表現(xiàn)層的內(nèi)容。產(chǎn)品使用過程中帶來的感受稱為過程體驗(yàn)，其對(duì)應(yīng)于用戶體驗(yàn)要素中的結(jié)構(gòu)層和框架層，通過用戶與產(chǎn)品之間的交互過程實(shí)現(xiàn)。用戶在使用產(chǎn)品后所回憶起的使用過程感受稱為經(jīng)歷體驗(yàn)，是用戶體驗(yàn)要素中范圍層所涉及到的內(nèi)容。

（一）設(shè)計(jì)定位

以在校大學(xué)生及輔導(dǎo)老師為用戶，解決高校團(tuán)隊(duì)合作過程中尋找隊(duì)友、了解信息等問題，同時(shí)能清晰傳達(dá)各個(gè)功能的作用和意圖，以便提高效率。

1.功能定位一范圍層內(nèi)容：以前期用戶調(diào)研中的用戶需求為基礎(chǔ)，確定校園協(xié)作類APP主要功能定位在解決團(tuán)隊(duì)項(xiàng)目合作規(guī)劃問題、隊(duì)員查找問題、獲取項(xiàng)目信息問題、老師輔導(dǎo)問題等。APP的主要功能內(nèi)容涉及四個(gè)方面：項(xiàng)目，發(fā)現(xiàn)，消息，我的。通過卡片分析法測(cè)試總結(jié)出，“項(xiàng)目”用于解決項(xiàng)目合作中的所有問題，是主要核心內(nèi)容，其他三個(gè)功能的內(nèi)容都以“項(xiàng)目”展開，四個(gè)主要功能以界面底端tab的方式呈現(xiàn)。

2.信息框架一結(jié)構(gòu)層內(nèi)容：根據(jù)用戶使用習(xí)慣和前期調(diào)研確定的主要功能優(yōu)先級(jí)順序，得出結(jié)構(gòu)層大致內(nèi)容。如圖5所示，“項(xiàng)目”通過新建比賽項(xiàng)目，輸入比賽鏈接自動(dòng)生成項(xiàng)目進(jìn)程。進(jìn)行列表中可以查看正在合作中的比賽及詳細(xì)文件，人員分工，成員合作進(jìn)度等內(nèi)容。

“發(fā)現(xiàn)”通過搜索欄搜索比賽信息、正在尋找隊(duì)友的隊(duì)伍和求組隊(duì)的隊(duì)員信息。同時(shí)也可以在發(fā)現(xiàn)頁中查看和取消已發(fā)布的招募。

“消息”分為群組消息和個(gè)人消息，均可用于接收組隊(duì)申請(qǐng)或發(fā)送組隊(duì)邀請(qǐng)，此外群組消息還可根據(jù)隊(duì)內(nèi)成員共同時(shí)間，完成通知的功能。

“我的”展現(xiàn)用戶項(xiàng)目合作中的相關(guān)信息，其中課表可導(dǎo)入教務(wù)系統(tǒng)課程同時(shí)還可以查看隊(duì)員對(duì)用戶進(jìn)行的評(píng)價(jià)和進(jìn)行實(shí)名制認(rèn)證等。

（二）界面設(shè)計(jì)

高保真交互界面設(shè)計(jì)一表現(xiàn)層內(nèi)容

1.項(xiàng)目：如圖6所示，項(xiàng)目查看頁面可以實(shí)時(shí)查看正在進(jìn)行的項(xiàng)目，新建項(xiàng)目時(shí)會(huì)自動(dòng)根據(jù)項(xiàng)目需求生成該項(xiàng)目每個(gè)階段的時(shí)間節(jié)點(diǎn)，便于后續(xù)合作過程中時(shí)間的分配和任務(wù)的分工。創(chuàng)建比賽項(xiàng)目，可根據(jù)比賽日程添加階段性任務(wù)并編輯成員分工。項(xiàng)目詳情以瀑布流的形式呈現(xiàn)，便于實(shí)時(shí)掌握信息動(dòng)態(tài)及查看進(jìn)度，同時(shí)每段實(shí)時(shí)消息下方設(shè)置“@”和“已讀”功能，快速告知和了解隊(duì)友消息接收進(jìn)度，便于提高項(xiàng)目合作效率。人員分工界面以表格排版的形式展現(xiàn)，用于組內(nèi)多人交流與任務(wù)進(jìn)程對(duì)比。

2.發(fā)現(xiàn)：發(fā)現(xiàn)界面可以搜索和查找比賽和正在組隊(duì)的隊(duì)伍以及發(fā)布招募信息，如圖7所示。比賽卡片頁面可以查看到老師推薦的比賽，用于學(xué)生項(xiàng)目篩選;以“舉手”的形式表示學(xué)生參加意向，用師生互動(dòng)的交互形態(tài)連接兩類用戶，為后續(xù)師生之間請(qǐng)教交流和組隊(duì)提供條件。

3.消息：從高效合作的觀點(diǎn)出發(fā)，消息界面規(guī)避生活中雜亂的社交信息，信息發(fā)布過程中會(huì)呈現(xiàn)隊(duì)員共同空閑時(shí)間，以此作為組長(zhǎng)發(fā)布任務(wù)時(shí)間的參考，便于隊(duì)內(nèi)組員時(shí)間協(xié)調(diào)和規(guī)劃階段性任務(wù)。如圖8所示。

4.我的：如圖9所示，“我的”界面是對(duì)用戶個(gè)人資料和合作信息的整合，包括用戶項(xiàng)目信息及個(gè)人偏好信息的設(shè)置等。其中登錄頁面中可以對(duì)用戶身份進(jìn)行選擇，也可進(jìn)入“我的”界面對(duì)老師或?qū)W生身份進(jìn)行認(rèn)證。同時(shí)導(dǎo)入課表后系統(tǒng)可以自動(dòng)生成隊(duì)內(nèi)成員共同時(shí)間，以色塊形式呈現(xiàn)，更為醒目，從而便于時(shí)間規(guī)劃和行程編輯。

結(jié)語

本文通過對(duì)用戶體驗(yàn)要素五個(gè)層級(jí)的理解，以及對(duì)用戶需求和行為的分析，得出校園協(xié)作類APP的設(shè)計(jì)定位和功能定義，同時(shí)將用戶體驗(yàn)要素的理念融入到APP界面設(shè)計(jì)中，使其在解決功能需求的基礎(chǔ)上更加關(guān)注用戶的情感和體驗(yàn)，讓界面交互與用戶之間產(chǎn)生更多的感性化聯(lián)系。增添校園活動(dòng)的趣味性，連接各類用戶促進(jìn)合作，豐富合作過程的體驗(yàn)感，提高合作效率。

參考文獻(xiàn)

【1】中華人民共和國(guó)教育部.教育部關(guān)于加快建設(shè)高水平本科教育全面提高人才培養(yǎng)能力的意見【EB/OL.ttp：//www.moe.gov.cn/srcsite/A08/s7056/201810/t20181017_351887html.2018;

[2] Lucas Daniel. Understanding user experience [J] . Web Techniques，2000，5（8）：42-43.

【3】陳燁面向用戶體驗(yàn)的網(wǎng)頁界面優(yōu)化設(shè)計(jì)方法研究【D】.重慶：重慶大學(xué)，2010.

【4】JesseJamesGarrett.范曉燕譯，用戶體驗(yàn)要素【M】.北京.機(jī)械工業(yè)出版社，2011：41.

【5】童芳.“口袋博物館”的用戶體驗(yàn)要素設(shè)計(jì)【J】.南京藝術(shù)學(xué)院學(xué)報(bào)（美術(shù)與設(shè)計(jì)），2016（03）：126-133

【6】蘭玉琪，劉湃.基于用戶體驗(yàn)的交互產(chǎn)品情感化研究【J】.包裝工程，2019，40（12）：23-28.

【7】劉英姿，吳昊.客戶細(xì)分方法研究綜述【J】管理工程學(xué)報(bào)，2006，20（1）：53-57.

[8] HUGHES A. Strategic Database Marketing：The Master Plan for Starting and Managing a Profitable Customer- based Marketing Program[ M] . NewYork：McGraw-Hill Professional，1994.

[9] ANTHONY B F.Systematic Life Styles for New Product Segmentation [J] . Journal of the Academy of Marketing Science，1982，10（4）：381- 391

【10】唐納德：諾曼.付秋芳，程進(jìn)三，譯：情感化設(shè)計(jì)【M】.北京：電子工業(yè)出版社，2005.