APP界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)

張穎 楊亮 申艷芳

摘 ?要： 界面與移動(dòng)交互體驗(yàn)設(shè)計(jì)是提升APP市場競爭力，增強(qiáng)用戶忠誠度的主要方式。提出一種新的APP界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)方法，以滿足用戶感官?zèng)_擊需求、情感體驗(yàn)需求和情感認(rèn)知需求為核心。根據(jù)不同用戶需求與APP設(shè)計(jì)之間的對應(yīng)關(guān)系完成APP界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)。APP界面設(shè)計(jì)時(shí)考慮用戶需求的APP界面綜合結(jié)構(gòu)、線框、導(dǎo)航、視覺要素，通過登錄注冊、主屏導(dǎo)航、信息搜索與推薦等界面進(jìn)行視覺呈現(xiàn);移動(dòng)交互體驗(yàn)設(shè)計(jì)時(shí)通過多點(diǎn)觸摸手勢、筆畫手勢以及組合手勢等交互手勢形式，完成用戶同界面之間的查看、切換等交互。檢測結(jié)果顯示采用該方法設(shè)計(jì)的APP界面與移動(dòng)交互手勢能夠提升用戶體驗(yàn)，滿足用戶需求。

關(guān)鍵詞： APP; 界面設(shè)計(jì); 移動(dòng)交互體驗(yàn); 用戶需求; 視覺呈現(xiàn); 交互手勢

中圖分類號(hào)： TN99?34; TP391 ? ? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼： A ? ? ? ? ? ? ? ? ? ? 文章編號(hào)： 1004?373X（2020）23?0182?05

Abstract： The design of interface and mobile interactive experience is the main way to improve the market competitiveness of APP and enhance user loyalty. A new method of APP interface design and mobile interactive experience design is put forward， which focuses on meeting users′ requirements of sensory impact， emotional experience and emotional cognition. The APP interface and mobile interactive experience are designed according to the corresponding relationship between different user needs and APP design. The comprehensive structure， wireframe， navigation and visual elements of the APP interface are considered in the design， which is visually presented by interfaces such as login and registration， home screen navigation， and information search and recommendation. In the design of mobile interactive experience， the interaction like check and switchover between the user and the interface can be fulfilled by multi?touch gestures， stroke gestures and combination gestures. The test results show that the APP interfaces and mobile interactive gestures designed by the designed method can improve user experience and meet user requirements.

Keywords： APP; interface design; mobile interactive experience; user requirement; visual presentation; interactive gesture

0 ?引 ?言

當(dāng)前，互聯(lián)網(wǎng)發(fā)展的主要趨勢為移動(dòng)網(wǎng)絡(luò)[1]，傳統(tǒng)利用計(jì)算機(jī)瀏覽器登錄互聯(lián)網(wǎng)獲取信息的方式逐漸轉(zhuǎn)變?yōu)槔靡苿?dòng)APP獲取信息[2]。移動(dòng)APP的研究與普遍使用使全球范圍內(nèi)的通信方式發(fā)生改變，人們通過購物APP進(jìn)行網(wǎng)絡(luò)購物，利用學(xué)習(xí)APP獲取知識(shí)，通過視頻APP觀看電影、新聞與劇集，利用社交APP進(jìn)行通信交友等[3]。

隨著APP研發(fā)技術(shù)的成熟，APP市場競爭態(tài)勢日趨激烈，相同功能的APP在內(nèi)容更新上差異并不顯著，為保障APP的使用量，設(shè)計(jì)者們將關(guān)注點(diǎn)放在APP界面設(shè)計(jì)與關(guān)注APP設(shè)計(jì)過程中人機(jī)交互功能的移動(dòng)交互設(shè)計(jì)上[4]。以往APP界面設(shè)計(jì)主要針對APP表面形象的美觀度，而移動(dòng)交互設(shè)計(jì)則主要針對程序編寫與使用功能等[5]。但在APP用戶激烈競爭的條件下，這樣的設(shè)計(jì)已經(jīng)無法達(dá)到吸引用戶的目的。

APP界面是APP給用戶的第一體驗(yàn)，而移動(dòng)交互性能則是用戶體驗(yàn)的主體，用戶選擇APP的基礎(chǔ)條件是具有優(yōu)質(zhì)的用戶體驗(yàn)[6]，通過用戶體驗(yàn)滿足用戶需求。為吸引更多的APP用戶，提出一種新的APP界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)方法，在APP界面設(shè)計(jì)與移動(dòng)交互設(shè)計(jì)中以滿足用戶不同層次的需求為核心，提升用戶體驗(yàn)。

1 ?APP界面與移動(dòng)交互體驗(yàn)設(shè)計(jì)方法

1.1 ?用戶需求模型

大量調(diào)研結(jié)果顯示，用戶需求可用三個(gè)層次進(jìn)行描述[7]：描述感官?zèng)_擊（對于目標(biāo)的印象）需求的本能層、描述情感體驗(yàn)需求的行為層和描述情感認(rèn)知需求的反思層。

用戶需求模型如圖1所示。通過該模型能夠得到用戶不同需求與體驗(yàn)之間的相關(guān)性，其中感官?zèng)_擊需求與情感體驗(yàn)需求是情感認(rèn)知需求得到滿足的前提[8]。

將上述用戶需求模型應(yīng)用于APP設(shè)計(jì)當(dāng)中，構(gòu)建用戶需求與APP設(shè)計(jì)之間的對應(yīng)關(guān)系，如圖2所示，可為APP設(shè)計(jì)提供用戶需求依據(jù)。

由圖1和圖2可知，進(jìn)行APP界面設(shè)計(jì)時(shí)需要通過架構(gòu)、線框圖、導(dǎo)航、視覺元素等綜合視覺呈現(xiàn)滿足用戶感官?zèng)_擊需求;進(jìn)行移動(dòng)交互設(shè)計(jì)時(shí)需要通過點(diǎn)觸、滑動(dòng)等操作進(jìn)行查看、切換等互動(dòng)體驗(yàn)，滿足情感體驗(yàn)需求;進(jìn)行情感體驗(yàn)設(shè)計(jì)時(shí)需要通過感知、思維、情感等心理與情感體驗(yàn)，滿足情感認(rèn)知需求。

1.2 ?APP界面設(shè)計(jì)

考慮用戶需求的APP界面設(shè)計(jì)從架構(gòu)、線框、導(dǎo)航、視覺元素等方面著手進(jìn)行視覺呈現(xiàn)[9]。

1.2.1 ?界面架構(gòu)設(shè)計(jì)

作為APP界面的支撐體系，界面架構(gòu)設(shè)計(jì)的主要服務(wù)目標(biāo)為導(dǎo)航與信息次序，通過APP基本功能間的邏輯關(guān)系確保用戶可快速獲取所需信息。由于APP界面尺寸較小，其界面架構(gòu)設(shè)計(jì)要求清晰、簡單。當(dāng)前APP界面架構(gòu)主要分為層級(jí)優(yōu)先架構(gòu)與范圍優(yōu)先架構(gòu)[10]，其結(jié)構(gòu)圖如圖3所示。

根據(jù)圖3可知：使用層級(jí)優(yōu)先架構(gòu)，用戶APP界面較為簡單清晰，用戶可輕易找到相關(guān)信息入口，但需通過更多環(huán)節(jié)獲取所需信息，不利于新用戶操作;范圍優(yōu)先架構(gòu)中同一界面中存在較多功能入口，用戶在尋找相關(guān)信息入口時(shí)需消耗更長的時(shí)間，但確定入口后即可快速獲取相關(guān)信息，且同一界面中存在較多入口可使用戶更快地了解APP的主要功能。在設(shè)計(jì)APP界面架構(gòu)時(shí)根據(jù)實(shí)際需求確定架構(gòu)。

1.2.2 ?界面線框設(shè)計(jì)

APP界面設(shè)計(jì)中線框設(shè)計(jì)十分關(guān)鍵，其基于界面元素的統(tǒng)一布置、核心導(dǎo)航系統(tǒng)的判定以及信息組成優(yōu)先級(jí)的排放，分別整合界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)以及信息設(shè)計(jì)。利用線框圖整合這三個(gè)方面后能夠獲取以基本概念結(jié)構(gòu)為基礎(chǔ)的架構(gòu)，并確定視覺設(shè)計(jì)的主要方向。界面線框設(shè)計(jì)通常具有四個(gè)標(biāo)準(zhǔn)：考慮用戶需求;在力求簡潔的基礎(chǔ)上凸顯主要內(nèi)容;受界面結(jié)構(gòu)設(shè)計(jì)原則約束;與外觀描述相比更注重功能體驗(yàn)。

1.2.3 ?導(dǎo)航設(shè)計(jì)

導(dǎo)航設(shè)計(jì)的科學(xué)性直接影響APP的正常應(yīng)用功能，高質(zhì)量的導(dǎo)航設(shè)計(jì)能夠提升用戶體驗(yàn)，滿足用戶需求。導(dǎo)航設(shè)計(jì)可向用戶提供信息獲取路徑，引導(dǎo)用戶轉(zhuǎn)換頁面;明確APP內(nèi)不同信息頁面的相關(guān)性;確定用戶當(dāng)前位置，使用戶明確當(dāng)前位置同其他頁面內(nèi)容的相關(guān)性[11]。導(dǎo)航設(shè)計(jì)形式受信息架構(gòu)影響，存在一定約束，可劃分為全局、縱向、分類鏈接以及標(biāo)簽等導(dǎo)航類型。

1.2.4 ?視覺要素設(shè)計(jì)

APP界面視覺表現(xiàn)與程序編寫之間的協(xié)調(diào)一致是APP界面設(shè)計(jì)的基本要求。APP界面尺寸較小，導(dǎo)致其界面內(nèi)無法包含大量信息，因此在小面積區(qū)域內(nèi)要通過視覺要素設(shè)計(jì)給予用戶高質(zhì)量的視覺體驗(yàn)，滿足用戶感官?zèng)_擊需求，需從界面版式、圖標(biāo)設(shè)計(jì)以及色彩搭配等數(shù)種視覺要素出發(fā)進(jìn)行設(shè)計(jì)[12]。界面版式的目的是清晰呈現(xiàn)APP內(nèi)容、導(dǎo)航信息、豐富畫面層次感，常用的形式包括九宮格、圓形離心構(gòu)圖等。圖標(biāo)設(shè)計(jì)具有識(shí)別、傳播信息等功能，常用表現(xiàn)手法包括同構(gòu)、漸變、網(wǎng)格等。色彩搭配是用戶對APP的第一印象，直接影響APP界面圖片顯示與文字信息的可視性、可讀性等，在設(shè)計(jì)過程中需遵循特殊性、突出性以及純度變化等原則。

1.2.5 ?視覺呈現(xiàn)設(shè)計(jì)

APP界面設(shè)計(jì)中用戶最直接感受到的就是視覺呈現(xiàn)，科學(xué)的視覺呈現(xiàn)設(shè)計(jì)需確保界面的層次感，能夠準(zhǔn)確傳達(dá)APP品牌形象，使用戶簡單、清晰地獲取關(guān)鍵信息。視覺呈現(xiàn)設(shè)計(jì)是結(jié)構(gòu)、線框、導(dǎo)航、視覺要素設(shè)計(jì)的綜合呈現(xiàn)[13]，可通過登錄注冊、主屏導(dǎo)航、信息搜索與推薦等界面呈現(xiàn)。

1.3 ?移動(dòng)交互體驗(yàn)設(shè)計(jì)

當(dāng)前用戶同APP界面進(jìn)行交互的介質(zhì)通常為觸摸屏，同傳統(tǒng)鼠標(biāo)單擊操作有所不同，能夠使用戶自由地同APP界面進(jìn)行交互，獲取移動(dòng)交互體驗(yàn)。考慮用戶需求的移動(dòng)交互體驗(yàn)設(shè)計(jì)從用戶同APP界面交互的手勢出發(fā)，通過多點(diǎn)觸摸手勢、筆畫手勢以及組合手勢等形式，最大限度地提升用戶移動(dòng)交互體驗(yàn)，滿足用戶情感體驗(yàn)需求。

1.3.1 ?多點(diǎn)觸摸手勢

多點(diǎn)觸摸手勢中包括點(diǎn)擊手勢、長按手勢、旋轉(zhuǎn)手勢、縮放手勢、拖拽手勢、滑動(dòng)手勢等[14]，如圖4所示。

點(diǎn)擊手勢和長按手勢是手勢設(shè)計(jì)中的基礎(chǔ)操作手勢，分別用于選擇打開所選信息和打開情景菜單。旋轉(zhuǎn)手勢、縮放手勢和拖拽手勢是手勢設(shè)計(jì)中的對象操作類別手勢，分別用于目標(biāo)旋轉(zhuǎn)、縮放與位置改變。滑動(dòng)手勢是手勢設(shè)計(jì)中的導(dǎo)航操作手勢，主要用于目標(biāo)的移動(dòng)。

1.3.2 ?筆畫手勢

筆畫手勢以多點(diǎn)觸摸手勢為基礎(chǔ)[15]，通過手指在觸摸屏上做出筆畫進(jìn)行對應(yīng)操作。當(dāng)前筆畫手勢主要包括字母手勢與形狀手勢等類型，如圖5所示。

字母手勢就是在相應(yīng)界面中用手指書寫固定字母執(zhí)行對應(yīng)操作或進(jìn)入對應(yīng)頁面，例如在某APP內(nèi)通過字母“B”的書寫即可進(jìn)入百度頁面等。字母手勢可簡化操作流程節(jié)省大量操作時(shí)間，但實(shí)際應(yīng)用過程中隱喻性較弱，同時(shí)，字母同任務(wù)間的映射具有顯著沖突性。

形狀手勢就是在相應(yīng)界面中用手指畫出不同線條形狀執(zhí)行對應(yīng)操作，例如通過畫出“<”形狀執(zhí)行返回上級(jí)頁面的操作等。形狀手勢操作簡單應(yīng)用性極強(qiáng)，但實(shí)際應(yīng)用過程中易造成用戶損失，因此在設(shè)計(jì)過程中需提升部分手勢設(shè)計(jì)的復(fù)雜度，如全刪除手勢和初始化手勢等。

多點(diǎn)觸摸手勢與筆畫手勢均為單一手勢，將單一手勢進(jìn)行組合能夠獲取組合手勢，組合手勢可將不同類型單一手勢的優(yōu)勢結(jié)合，并通過互補(bǔ)改善單一手勢的缺陷，是未來APP移動(dòng)交互體驗(yàn)設(shè)計(jì)的主流方向。

2 ?仿真測試

為檢驗(yàn)本文所提APP界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)方法的設(shè)計(jì)效果，選取某音樂類型APP——聽見海的聲音為應(yīng)用對象，利用本文方法設(shè)計(jì)其界面與交互功能，結(jié)果如下。

2.1 ?界面設(shè)計(jì)

采用本文方法設(shè)計(jì)應(yīng)用對象界面，通過分析應(yīng)用對象品牌形象與功能，分析主要用戶群體特征，根據(jù)其生理與心理的需求設(shè)計(jì)界面架構(gòu)、線框、導(dǎo)航與視覺要素等，最終進(jìn)行視覺呈現(xiàn)設(shè)計(jì)，結(jié)果如圖6所示。

圖6a）所示為主屏導(dǎo)航界面，應(yīng)用對象主屏幕導(dǎo)航通過鏈接控件縱向展開形式設(shè)計(jì)，可實(shí)現(xiàn)APP功能快速預(yù)覽的目的。圖6b）所示為信息推薦界面，根據(jù)用戶喜好與關(guān)注，將推薦信息置于該界面最顯眼的區(qū)域，通過新信息節(jié)點(diǎn)的變化、清除與插入，更換舊數(shù)據(jù)。圖6c）所示為信息搜索界面，用戶根據(jù)自身需求進(jìn)行相應(yīng)信息搜索，利用本文方法設(shè)計(jì)應(yīng)用對象信息搜索具有兩種形式：文字形式、語音形式，語音搜索雖然較為方便，但需要較高辨識(shí)度，且私密性較差，因此應(yīng)用對象信息搜索以文字形式為主。色彩方面：針對應(yīng)用對象品牌形象與功能，將界面主色調(diào)設(shè)定為藍(lán)色。版式方面：通過對稱視覺效果提升界面視覺平衡感，為防止用戶視覺疲勞，信息密度設(shè)置較低。用戶文字方面：使用手機(jī)系統(tǒng)默認(rèn)字體，保障APP運(yùn)行效率與穩(wěn)定。圖標(biāo)方面：采用清晰、簡練、通用的圖標(biāo)，且單一界面內(nèi)圖標(biāo)數(shù)量較少，確保新老用戶均可正常使用。

2.2 ?移動(dòng)交互體驗(yàn)設(shè)計(jì)

采用本文方法設(shè)計(jì)應(yīng)用對象移動(dòng)交互功能，結(jié)果如圖7所示。用戶在登錄應(yīng)用對象后，依照自身應(yīng)用需求與應(yīng)用習(xí)慣，可通過拖拽手勢自行調(diào)整鏈接控件位置。應(yīng)用對象功能主要為分享音樂，界面設(shè)計(jì)過程中音樂列表以圖片形式縱向排列，用戶通過縱向向上滑動(dòng)手勢可瀏覽音樂列表（如圖7a）所示）;通過縱向向下滑動(dòng)手勢可自動(dòng)刷新音樂列表（如圖7b）所示）;通過單次點(diǎn)擊手勢確定所需音樂，進(jìn)入該音樂鏈接（如圖7c）所示）。當(dāng)用戶當(dāng)前頁面需求滿足后進(jìn)行新的操作時(shí)，需返回上層頁面，此時(shí)用戶可通過左下側(cè)向右水平滑動(dòng)手勢返回導(dǎo)航界面（如圖7d）所示）。上述應(yīng)用對象功能操作設(shè)定將移動(dòng)設(shè)備交互手勢融入其中，以既直觀又不突兀的方式進(jìn)行操作。相較于傳統(tǒng)按鍵交互方式，本文方法通過手勢變化進(jìn)行各項(xiàng)操作，在節(jié)約屏幕使用面積的基礎(chǔ)上，改善以往按鍵設(shè)定處于點(diǎn)擊盲區(qū)的缺陷，提升操作的適用性、靈活性與便利性。

2.3 ?用戶評價(jià)

隨機(jī)選取5位應(yīng)用對象用戶，對其進(jìn)行用戶滿意度問卷調(diào)查，問卷內(nèi)容包括用戶對于應(yīng)用對象視覺體驗(yàn)和移動(dòng)交互體驗(yàn)的評價(jià)，用戶根據(jù)自身需求是否被滿足進(jìn)行評價(jià)。評價(jià)結(jié)果劃分為5個(gè)等級(jí)，分別用A（滿意）、B（較為滿意）、C（中等）、D（較為不滿意）、E（不滿意）表示，結(jié)果如表1所示。

由表1能夠得到，采用本文方法設(shè)計(jì)應(yīng)用對象，用戶對于應(yīng)用對象滿意度均在C以上，且普遍為A與B。這說明采用本文方法設(shè)計(jì)應(yīng)用對象的界面與交互手勢能夠提升用戶體驗(yàn)，滿足用戶需求。用戶滿意度評價(jià)為C的項(xiàng)目為視覺體驗(yàn)中的色彩搭配、圖標(biāo)設(shè)計(jì)、信息架構(gòu)邏輯性和移動(dòng)交互體驗(yàn)中的可記憶性，這可能是由于上述幾個(gè)方面評價(jià)具有較為強(qiáng)烈的主觀性導(dǎo)致;而視覺體驗(yàn)中圖標(biāo)設(shè)計(jì)滿意度最低可能是由于本文方法設(shè)計(jì)過程中考慮新用戶使用需求，圖像設(shè)計(jì)較為簡單、通用、缺乏個(gè)性化導(dǎo)致。

3 ?結(jié) ?語

本文提出APP界面設(shè)計(jì)與移動(dòng)交互體驗(yàn)設(shè)計(jì)方法，以用戶需求為核心，通過界面架構(gòu)、線框、導(dǎo)航與視覺要素的視覺呈現(xiàn)完成界面設(shè)計(jì)，利用交互手勢進(jìn)行用戶與界面之間的移動(dòng)交互，以此增強(qiáng)用戶對APP的滿意度。

參考文獻(xiàn)

[1] 李翔，簡捷，李海，等.基于國產(chǎn)化PXI模塊的松脫部件監(jiān)測系統(tǒng)軟件開發(fā)[J].核動(dòng)力工程，2018，39（3）：171?175.

[2] BALDUCCI F， GRANA C， CUCCHIARA R. Affective level design for a role?playing videogame evaluated by a brain?computer interface and machine learning methods [J]. Visual computer， 2017， 33（4）： 413?427.

[3] 茍銳，傅德天，莫宇凡.不同年齡人群對交互界面設(shè)計(jì)風(fēng)格的審美偏好與操作效率的比較[J].包裝工程，2019，40（16）：22?26.

[4] 牛萍娟，程崢，田海濤，等.基于多網(wǎng)融合和節(jié)點(diǎn)定位技術(shù)的無線溫室智能監(jiān)控系統(tǒng)的設(shè)計(jì)[J].江蘇農(nóng)業(yè)科學(xué)，2019，47（14）：239?243.

[5] HARTE R， GLYNN L， RODR?GUEZ?MOLINERO A， et al. A human?centered design methodology to enhance the usability， human factors， and user experience of connected health systems： a three?phase methodology [EB/OL]. [2017?03?16]. https：//www.ncbi.nlm.nih.gov/pmc/articles/PMC5374275/.

[6] 孟巧玲，汪曉銘，鄭金鈺，等.基于上肢康復(fù)機(jī)器人的人機(jī)交互軟件系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].中華物理醫(yī)學(xué)與康復(fù)雜志，2019，41（5）：388?391.

[7] 侯冠華，董華，劉穎，等.導(dǎo)航結(jié)構(gòu)與認(rèn)知負(fù)荷對老年讀者數(shù)字圖書館用戶體驗(yàn)影響的實(shí)證研究：以國家數(shù)字圖書館為例[J].圖書情報(bào)工作，2018，62（13）：45?53.

[8] 梁孝，施冕，單翔，等.面向智能手機(jī)的磁共振彈性圖像仿真與信息處理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].中國科學(xué)技術(shù)大學(xué)學(xué)報(bào)，2019，49（1）：71?78.

[9] 張寧寧，范思岑，王丹丹，等.基于腦力負(fù)荷的通航飛機(jī)座艙顯示界面測評研究[J].工程設(shè)計(jì)學(xué)報(bào)，2019，26（4）：409?415.

[10] 張磊，張芮英，馬力，等.基于手機(jī)APP的全科醫(yī)生移動(dòng)學(xué)習(xí)模式的實(shí)證研究：以北京市全科醫(yī)生“百日練兵”APP平臺(tái)為例[J].中國全科醫(yī)學(xué)，2019，22（19）：2374?2379.

[11] 王桂萱，封將，尹訓(xùn)強(qiáng).基于ANSYS的界面化核電站取水構(gòu)筑物配筋程序開發(fā)[J].防災(zāi)減災(zāi)工程學(xué)報(bào)，2019，29（3）：395?402.

[12] 王淼，馬東明，錢皓.基于服務(wù)設(shè)計(jì)的“同道”個(gè)性化旅游APP設(shè)計(jì)研究[J].包裝工程，2019，40（16）：232?238.

[13] 尤乾，呂健，李陽，等.基于Fitts定律的虛擬現(xiàn)實(shí)小目標(biāo)選擇模型[J].工程設(shè)計(jì)學(xué)報(bào)，2019，26（4）：416?422.

[14] 侯俊行，楊哲慜，楊珉.安全隔離的安卓應(yīng)用虛擬化框架設(shè)計(jì)與實(shí)現(xiàn)[J].小型微型計(jì)算機(jī)系統(tǒng)，2019，40（9）：1987?1993.

[15] DE PINEL P， MARANZANA N， SEGONDS F， et al. Proposition of ergonomic guidelines to improve usability of PLM systems interfaces [C]// 10th IFIP WG 5.1 International Conference. Nantes， France： Springer， 2013： 530?539.