APP界面設計與移動交互體驗設計

張穎 楊亮 申艷芳

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

關鍵詞： APP; 界面設計; 移動交互體驗; 用戶需求; 視覺呈現; 交互手勢

中圖分類號： TN99?34; TP391 ? ? ? ? ? ? ? ? ? ? 文獻標識碼： 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 ?引 ?言

當前，互聯網發展的主要趨勢為移動網絡[1]，傳統利用計算機瀏覽器登錄互聯網獲取信息的方式逐漸轉變為利用移動APP獲取信息[2]。移動APP的研究與普遍使用使全球范圍內的通信方式發生改變，人們通過購物APP進行網絡購物，利用學習APP獲取知識，通過視頻APP觀看電影、新聞與劇集，利用社交APP進行通信交友等[3]。

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

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

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

1.1 ?用戶需求模型

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

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

將上述用戶需求模型應用于APP設計當中，構建用戶需求與APP設計之間的對應關系，如圖2所示，可為APP設計提供用戶需求依據。

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

1.2 ?APP界面設計

考慮用戶需求的APP界面設計從架構、線框、導航、視覺元素等方面著手進行視覺呈現[9]。

1.2.1 ?界面架構設計

作為APP界面的支撐體系，界面架構設計的主要服務目標為導航與信息次序，通過APP基本功能間的邏輯關系確保用戶可快速獲取所需信息。由于APP界面尺寸較小，其界面架構設計要求清晰、簡單。當前APP界面架構主要分為層級優先架構與范圍優先架構[10]，其結構圖如圖3所示。

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

1.2.2 ?界面線框設計

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

1.2.3 ?導航設計

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

1.2.4 ?視覺要素設計

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

1.2.5 ?視覺呈現設計

APP界面設計中用戶最直接感受到的就是視覺呈現，科學的視覺呈現設計需確保界面的層次感，能夠準確傳達APP品牌形象，使用戶簡單、清晰地獲取關鍵信息。視覺呈現設計是結構、線框、導航、視覺要素設計的綜合呈現[13]，可通過登錄注冊、主屏導航、信息搜索與推薦等界面呈現。

1.3 ?移動交互體驗設計

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

1.3.1 ?多點觸摸手勢

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

點擊手勢和長按手勢是手勢設計中的基礎操作手勢，分別用于選擇打開所選信息和打開情景菜單。旋轉手勢、縮放手勢和拖拽手勢是手勢設計中的對象操作類別手勢，分別用于目標旋轉、縮放與位置改變。滑動手勢是手勢設計中的導航操作手勢，主要用于目標的移動。

1.3.2 ?筆畫手勢

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

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

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

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

2 ?仿真測試

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

2.1 ?界面設計

采用本文方法設計應用對象界面，通過分析應用對象品牌形象與功能，分析主要用戶群體特征，根據其生理與心理的需求設計界面架構、線框、導航與視覺要素等，最終進行視覺呈現設計，結果如圖6所示。

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

2.2 ?移動交互體驗設計

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

2.3 ?用戶評價

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

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

3 ?結 ?語

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

參考文獻

[1] 李翔，簡捷，李海，等.基于國產化PXI模塊的松脫部件監測系統軟件開發[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] 茍銳，傅德天，莫宇凡.不同年齡人群對交互界面設計風格的審美偏好與操作效率的比較[J].包裝工程，2019，40（16）：22?26.

[4] 牛萍娟，程崢，田海濤，等.基于多網融合和節點定位技術的無線溫室智能監控系統的設計[J].江蘇農業科學，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] 孟巧玲，汪曉銘，鄭金鈺，等.基于上肢康復機器人的人機交互軟件系統設計與實現[J].中華物理醫學與康復雜志，2019，41（5）：388?391.

[7] 侯冠華，董華，劉穎，等.導航結構與認知負荷對老年讀者數字圖書館用戶體驗影響的實證研究：以國家數字圖書館為例[J].圖書情報工作，2018，62（13）：45?53.

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

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

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

[11] 王桂萱，封將，尹訓強.基于ANSYS的界面化核電站取水構筑物配筋程序開發[J].防災減災工程學報，2019，29（3）：395?402.

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

[13] 尤乾，呂健，李陽，等.基于Fitts定律的虛擬現實小目標選擇模型[J].工程設計學報，2019，26（4）：416?422.

[14] 侯俊行，楊哲慜，楊珉.安全隔離的安卓應用虛擬化框架設計與實現[J].小型微型計算機系統，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.