基于用戶認(rèn)知特點的移動終端APP界面設(shè)計

文/楊 潔

基于用戶認(rèn)知特點的移動終端APP界面設(shè)計

文/楊 潔

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

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

建立清晰的信息視覺層級

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

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

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

貓眼電影APP

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

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

天貓APP

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

百度糯米APP

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

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

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

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

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

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

網(wǎng)易云音樂APP

合理的多感官認(rèn)知引導(dǎo)交互設(shè)計

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

結(jié)語

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

作者單位 重慶郵電大學(xué)傳媒藝術(shù)學(xué)院

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