APP界面設(shè)計與移動交互體驗設(shè)計

張穎 楊亮 申艷芳

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

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

中圖分類號： TN99?34; TP391 ? ? ? ? ? ? ? ? ? ? 文獻(xiàn)標(biāo)識碼： A ? ? ? ? ? ? ? ? ? ? 文章編號： 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ā)展的主要趨勢為移動網(wǎng)絡(luò)[1]，傳統(tǒng)利用計算機瀏覽器登錄互聯(lián)網(wǎng)獲取信息的方式逐漸轉(zhuǎn)變?yōu)槔靡苿覣PP獲取信息[2]。移動APP的研究與普遍使用使全球范圍內(nèi)的通信方式發(fā)生改變，人們通過購物APP進行網(wǎng)絡(luò)購物，利用學(xué)習(xí)APP獲取知識，通過視頻APP觀看電影、新聞與劇集，利用社交APP進行通信交友等[3]。

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

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

1 ?APP界面與移動交互體驗設(shè)計方法

1.1 ?用戶需求模型

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

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

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

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

1.2 ?APP界面設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

1.3 ?移動交互體驗設(shè)計

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

1.3.1 ?多點觸摸手勢

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

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

1.3.2 ?筆畫手勢

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

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

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

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

2 ?仿真測試

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

2.1 ?界面設(shè)計

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

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

2.2 ?移動交互體驗設(shè)計

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

2.3 ?用戶評價

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

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

3 ?結(jié) ?語

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

參考文獻(xiàn)

[1] 李翔，簡捷，李海，等.基于國產(chǎn)化PXI模塊的松脫部件監(jiān)測系統(tǒng)軟件開發(fā)[J].核動力工程，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è)計風(fēng)格的審美偏好與操作效率的比較[J].包裝工程，2019，40（16）：22?26.

[4] 牛萍娟，程崢，田海濤，等.基于多網(wǎng)融合和節(jié)點定位技術(shù)的無線溫室智能監(jiān)控系統(tǒng)的設(shè)計[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ù)機器人的人機交互軟件系統(tǒng)設(shè)計與實現(xiàn)[J].中華物理醫(yī)學(xué)與康復(fù)雜志，2019，41（5）：388?391.

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

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

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

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

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

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

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

[14] 侯俊行，楊哲慜，楊珉.安全隔離的安卓應(yīng)用虛擬化框架設(shè)計與實現(xiàn)[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.