文/楊 潔

基于用戶認知特點的移動終端APP界面設計

文/楊 潔

隨著智能手機和移動互聯(lián)網(wǎng)的普及應用，APP（Application 的縮寫，即智能終端設備的第三方應用程序）進入人們?nèi)粘Ｉ畹姆椒矫婷?。APP通過產(chǎn)品的功能定位和設計，實現(xiàn)了將各種產(chǎn)業(yè)與互聯(lián)網(wǎng)結合在一起，并為人們的生活提供了諸多便利，如今人們只要拿出手機就可以定購旅游景點門票、酒店，看電影提前選座位，查看新聞，預約掛號等。APP為人們帶來了“互聯(lián)網(wǎng)+”時代生活的便利與安逸。而移動終端APP界面設計的本質(zhì)是以用戶需求和體驗為中心，結合APP產(chǎn)品的商業(yè)目標，讓用戶在使用APP時能獲得更好地使用體驗和滿足感。

目前，國內(nèi)外移動終端APP界面設計的主要指導理論有認知心理學、用戶體驗設計、情感化設計、格式塔理論等。筆者以這些理論為基礎，結合前期對以智能手機為主的移動終端APP用戶認知特點的分析，展開對APP界面設計特點的研究。

建立清晰的信息視覺層級

由于用戶感性思維對使用APP有較大的影響，APP界面的設計就需要通過層級化組織來建立方便用戶使用的信息架構和任務流程。而建立專注于用戶任務的信息視覺層級的目的是讓用戶快速識別目標信息，幫助其在碎片化時間和有限的注意力中進行感知過濾，了解可以做什么、怎么做以及預期會得到什么結果，提高用戶使用效率和滿足感。用戶對層級的認知受到諸如位置、尺寸、色彩、界面控件類型（例如，是用一個按鈕還是一個鏈接）和對各種元素的視覺處理等因素的影響，也受到一組元素或多組元素建立聯(lián)系的方式的影響。所以建立信息視覺層級最重要的是設計出可以被用戶理解的視覺差異系統(tǒng)。

布局分組表現(xiàn)層級差異。設計師可以在分解用戶任務的基礎上，根據(jù)用戶的瀏覽習慣，結合格式塔理論的接近原則和連續(xù)原則，將“用戶想看到的信息”和“我們想讓用戶看到的信息”，通過在界面的不同位置的分組規(guī)劃來達到劃分層級的目的。這種在視覺呈現(xiàn)上通過布局分組表現(xiàn)層級差異的設計，需要突出信息分組之間的邏輯關系，遵循“分解—排列—組織”的原則，將邏輯相關的信息分為一組排列在一起，而不同邏輯關系的信息布局分組之間可以通過間距和差異化的視覺形式來體現(xiàn)。比如，目前絕大多數(shù)APP都將主導航放置在界面底部，因為底部導航在視覺感知上對用戶閱讀界面主內(nèi)容區(qū)的干擾最小，且可以讓用戶很清楚地看到信息水平連續(xù)和垂直連續(xù)的差異性，用戶憑直覺就可以將內(nèi)容區(qū)和主導航區(qū)進行區(qū)分。

以貓眼電影APP為例，根據(jù)用戶需求和任務優(yōu)先級，該款APP將主導航放置在界面底部的標簽欄處，作為各級界面中統(tǒng)一出現(xiàn)的核心功能信息，并根據(jù)用戶對功能使用的優(yōu)先級，按照右手手勢操作習慣，將重要導航放在最左邊，從左往右排列四個主導航。此外，在“電影”導航的主頁上，界面頂部設置了二級導航，如“熱映”“待映”“海外”三個導航并將其水平排列為一組。而對于主內(nèi)容展示區(qū)，貓眼電影APP各級界面基本都采用水平分隔線對復雜的內(nèi)容信息進行布局分組，視覺連續(xù)性強。

貓眼電影APP

模塊化的視覺系統(tǒng)表現(xiàn)層級差異。格式塔理論的相似原則認為相似的圖形更容易被看作一個整體。設計師可以將APP各級界面在同一層級的信息進行模塊化的視覺設計，采用能減輕用戶學習負擔的，能夠比較容易被用戶識別和理解的圖形、圖像來表達功能信息，再通過圖文組合方式、對齊方式、色彩、字體字號等的模塊化設計，來實現(xiàn)不同層級信息的視覺差異。

以“圖形+文字”為主，“純文字”為輔的導航模塊設計。移動終端APP界面的導航就是用戶的方向盤，承擔著幫助用戶在龐大的信息內(nèi)容中找到功能入口，完成任務的重要作用。根據(jù)在界面中布局位置的不同，可以分為標簽欄導航、頂部導航、首頁快捷入口導航等。標簽欄導航相當于PC端網(wǎng)站的主導航，由于移動終端設備的寬度比PC電腦顯示器小，所以標簽欄導航的數(shù)量不能多。而標簽欄導航的位置是在整個APP界面的底部，如果在導航的設計上類似PC端網(wǎng)頁的“純文字”導航設計，就會缺乏吸引力。而“圖形+文字”的形式更容易吸引眼球，因為人們對于圖形圖像的識別速度非常快，但在設計時要把握好圖形對于用戶的含義，避免引起歧義。首頁快捷入口導航也可以采用“圖形+文字”的模塊設計，但要在圖形表現(xiàn)形式上拉開兩種導航類型的視覺差異?！疤熵垺盇PP的標簽欄導航和首頁快捷入口導航都采用的“圖形+文字”的模塊設計，與界面中的其他信息內(nèi)容形成了視覺層級。而兩種導航在各自圖形表現(xiàn)上也突出了差異，“天貓”APP標簽欄導航是以灰色單線條圖形+文字，首頁快捷入口導航則是用塊面圖形+文字，如“積分樂園”“充值”“粉絲趴”。而APP界面的頂部導航則可以采用傳統(tǒng)的“純文字”導航模塊設計，如“愛奇藝”APP界面的頂部就采用了字號遠遠大于底部標簽欄導航的“純文字”導航模塊，且可以左右手勢滑動。

天貓APP

“圖片/圖標+文字+色塊”的內(nèi)容區(qū)模塊設計。內(nèi)容區(qū)是界面設計的重點區(qū)域，用戶主要在內(nèi)容區(qū)對具體信息進行篩選和有限時間的閱讀，對內(nèi)容區(qū)的模塊設計要通過視覺上的相似性和連續(xù)性帶給用戶閱讀的舒適感?！皥D片/圖標+文字+色塊”的內(nèi)容區(qū)模塊設計，既能引起用戶注意，又能展示較多的信息，這種模塊適用范圍廣，不僅適用于各APP的首頁，也適用于各級列表頁和詳情頁。只是根據(jù)具體功能的不同，在對齊方式、字體字號、色彩、圖片/圖標尺寸等設計上會有不同的組合方式。在首頁中，“圖片/圖標+文字+色塊”的內(nèi)容區(qū)模塊設計以圖片與文字居中對齊、兩端對齊為主，在列表頁和詳情頁以圖片與文字左對齊和兩端對齊為主，詳情頁中尤其要注意圖文混排的節(jié)奏感。如“百度糯米”APP的首頁上就通過三種組合方式不同的“圖片+文字+色塊”的內(nèi)容區(qū)模塊，形成了清晰的信息視覺層級，呈現(xiàn)給用戶更多的功能選擇。在各級列表頁，“圖片/圖標+文字+色塊”的內(nèi)容區(qū)模塊設計多以列表形式呈現(xiàn)，如“微信”APP的“發(fā)現(xiàn)”“我”導航頁面，采用左對齊、統(tǒng)一的字體字號和文字色彩，規(guī)范的層級間距和圖標尺寸，使得內(nèi)容區(qū)的設計整齊統(tǒng)一。

百度糯米APP

輔助圖標模塊設計。在APP界面中一些次要任務和功能的展示受界面尺寸的影響并不適合全部鋪開，對此可以通過設計將其“隱藏起來”，待用戶需要時才展示出來。設計師可以通過設計一些具有隱喻意義的輔助圖標模塊來提示用戶對于次要功能的使用。因此，輔助圖標要在視覺表現(xiàn)上通過極簡的設計處理展示出更強的符號感。如在手機QQ“消息”界面的右上角設置有一個“+”的圖標，“+”的圖標意義是表示更多的意思，用戶通過點擊“+”就可以看到在彈出的下拉菜單中的其他輔助功能。

提高自然手勢交互的可發(fā)現(xiàn)性

手勢是移動終端APP界面的交互基礎。目前各個主要移動平臺在各自的設計規(guī)范中都定義有幾種基礎的手勢，雖有一些小的區(qū)別，但總的看來是大同小異。但不同于傳統(tǒng)的按鍵界面，手勢操作本身具有隱藏性，用戶從發(fā)現(xiàn)手勢到理解手勢的交互操作有一個學習過程和學習成本，不直觀的手勢反而會加大新用戶的使用難度。所以，如何使用戶能快速上手，是設計師需要思考的重點。

以自然手勢交互為基礎。堅持手勢設計的自然性，即多采用用戶在下意識情況下會做出的手勢操作，并且設計師需要根據(jù)信息層級和功能合理規(guī)劃多個自然手勢的組成關系，建立一套合理的自然手勢交互系統(tǒng)。

“單擊”是人們面對界面最自然的反應，也是一種精確操作的手勢，所以在APP界面的自然手勢交互中應該占據(jù)最重要的位置，它適用于各種導航鏈接、控件、內(nèi)容區(qū)的超鏈接等?！半p擊”和“長按”往往表現(xiàn)出人們對某一內(nèi)容的高度關注，“雙擊”適用于將如圖片、文字放大置于界面中間，“長按”更適合對某一內(nèi)容進行選擇和編輯?！盎瑒印笔窃谌藗儗τ诮缑婵臻g不足，在二維空間中很自然的一種手勢反應，往往用于上下左右的信息獲取?！半p指縮放”是人們對于放大縮小的一個自然反應，所以在界面中往往就是用于對圖片的放大縮小操作?！巴献А笔謩輲в袠O強的參與意識，在移動端游戲中應用廣泛，比如“天天愛消除”APP游戲，用戶通過拖拽相同的動物頭像完成消減并得分的游戲任務。

對于手勢交互操作給予及時的視覺反饋。在人機交互設計中，反饋機制是指產(chǎn)品對用戶發(fā)出的信息做出回應的一種機制，提示用戶如何操作，一般分為視覺、聽覺、觸覺等表現(xiàn)形式。移動終端APP在界面上對于手勢交互操作可通過文字、數(shù)字或圖形等進行及時的視覺反饋。如左右滑動的手勢交互，可以用多個并列圓點或者顯示圖片總數(shù)與當前圖片序號的方式進行視覺反饋。再如長按，可以在用戶下意識做長按手勢操作后顯示即時的文字或圖形信息響應。在微信的語音對話功能和小視頻功能中，一旦用戶做出長按手勢后，就會出現(xiàn)文字提示“手指上滑，取消發(fā)送”或“上移取消”的文字提示，用戶如果想取消即時信息的發(fā)送，就可以馬上按照文字提示進行手勢的交互操作。在微信聊天窗口中，如果用戶點擊信息后沒有發(fā)送成功，會在這條消息旁出現(xiàn)一個“紅色圓形底+ ！”的圖形符號來提示用戶目前的操作情況。而在游戲類的APP中，提高自然手勢的可發(fā)現(xiàn)性更是提高用戶使用體驗的重點，通常需要先做出游戲手勢操作的演示動畫幫助用戶學習交互操作。

網(wǎng)易云音樂APP

合理的多感官認知引導交互設計

雖然視覺經(jīng)驗在人們使用APP時占主導地位，但視覺感知在移動終端確也有其局限性，受環(huán)境光線、人的運動速度、人的姿勢等影響較大。為此，移動終端APP界面設計除了要強調(diào)優(yōu)化視覺設計以外，也要考慮用戶多感官的認知引導交互設計，即設計由視覺、聽覺、觸覺等多感官來協(xié)作完成用戶的輸入、輸出方式。而要實現(xiàn)多感官認知引導交互設計就需要在移動終端設備中融入大量傳感器才能執(zhí)行。目前，很多智能手機都已經(jīng)具有了各種傳感器，如麥克風、GPS、電子羅盤、重力感應器、加速傳感器、距離傳感器、光線傳感器、氣壓傳感器和三軸陀螺儀等。設計師可以利用這些傳感器優(yōu)化APP的用戶輸入、輸出方式。如在“網(wǎng)易云音樂”APP 中，利用麥克風的聲波傳感器設計了“聽歌識曲”功能，只要用戶的手機連接了互聯(lián)網(wǎng)，用戶打開“聽歌識曲”功能就可以在非常短的時間里為用戶識別出是哪位歌手的哪首歌曲，以及該首歌曲的歌詞、所在的專輯名等信息。此外，很多移動終端的游戲類APP基本都要通過三軸陀螺儀去感應判斷用戶的動作，從而幫助用戶實現(xiàn)對游戲的操作。

結語

對于移動終端APP來說，設備多樣，移動情景復雜，要做到通過設計使用戶和移動終端設備之間形成良好的人機交互需要思考的問題還很多。隨著科技的進一步發(fā)展，尤其是虛擬現(xiàn)實技術和增強現(xiàn)實技術在移動終端的發(fā)展，人們在未來需要的是更加自然、更加人性化的移動終端APP。

作者單位 重慶郵電大學傳媒藝術學院

本文系2015年重慶市社科規(guī)劃一般項目“基于‘互聯(lián)網(wǎng)+’的移動終端APP界面設計理論研究”（項目編號：2015YBYS087）的研究成果。