基于視覺搜索的APP界面布局與層級設計研究

彭玉潔

關鍵詞：視覺搜索;APP 界面;布局;層級;設計

1 視覺搜索概述

1.1 視覺搜索循環模型

視覺搜索由一系列與注意相關的動作組成，通過眼睛運動，調整發現圖案的感知路徑。韋爾提出了視覺搜索的三層嵌套循環模型[1]。外層循環處理一般性的問題，大腦負責構建解決問題的步驟并執行;中層循環執行的是視覺搜索，尋找解決視覺查詢的圖案，包括一系列的眼睛運動;內層循環處理細節，負責進行視覺檢測，判斷檢測圖案是否為目標圖案。

1.2 視覺搜索路徑

視覺感知活動可以分為兩個路徑：自下而上和自上而下的路徑[1]。 自下而上的路徑源自呈現在視網膜上的圖案視覺信息，是一種基于特征的視覺搜索;而自上而下的路徑則出自注意力的需要，即根據任務的需要來依次決定關注點。Wickens 等人提出了SEEV 模型，視覺注意力受到信息顯著性（Salience）、努力（Effort）、期望（Expectancy）和價值（Value）四個因素的影響[2]。其中顯著性和努力是影響注意力分配的自下而上的因素，期望和價值則是影響注意力分配的自上而下的部分。

2 APP 界面布局與層級設計概述

2.1 APP 界面布局設計

2.1.1 APP 界面布局與瀏覽模式

布局是指對界面內的圖片、文字和圖標等元素進行排列和設計。憑借元素在界面中的位置、色彩、大小關系的排列，幫助用戶在界面上快速找到內容。人通過眼睛從APP 界面上獲取信息，了解用戶的視覺瀏覽的模式，有助于優化數字界面布局。首先，用戶在網頁上的瀏覽軌跡，可呈現為“F”型[3] ;其次，通過用戶眼動模式可以發現，在網站門戶布局中，用戶先通過頂部、左邊通道查看頁面，然后以“S”型視線逐行掃描頁面其余部分[4]?！癋”型和“S”型瀏覽模式都說明頁面頂部和左側的內容更加容易被用戶注意到，因此在文本布局的前兩段和左側，應盡可能展示最重要的信息。

除“F”型以外的瀏覽模式有割草機模式、彈球模式、分層蛋糕模式和斑點模式[5]。 割草機模式的特點是用戶視線從左上角的單元格開始，向右移動直到該行末尾，然后下拉至下一行，從右向左瀏覽，直至最左邊，以此類推;彈球模式的特點是用戶視線在不同的元素之間跳動;分層蛋糕模式的特點是用戶視線集中在頁面標題和副標題上，在找到感興趣的標題后，才會閱讀對應的內容;斑點模式的特點是用戶視線固定在視覺效果突出的特定單詞上。彈球模式、分層蛋糕模式和斑點模式說明，用戶更加傾向關注圖片、標題和視覺效果突出的文字和圖標等元素。

2.1.2 APP 界面常見的布局類型

根據APP Annie 平臺數據顯示，中國地區安卓手機使用程度最高的五款APP 分別是：微信、拼多多、抖音、支付寶和淘寶。通過對5 款APP 的頁面布局進行分析，發現常見的布局方式有：底部標簽導航、舵式導航、頂部標簽導航、宮格式、列表式、以及下拉菜單式布局。底部標簽航布局適合3—5 個導航菜單，多采用圖標和文字結合的形式;而舵式導航布局是底部標簽導航的一種變體，將操作最頻繁的特定標簽進行特殊處理，在視覺設計上與其他標簽進行區別，從而到達引導用戶操作和增加該標簽點擊率的目的。

2.2 APP 界面層級設計

界面的視覺層級為信息傳達給用戶的順序。視覺注意在視覺行為的形成中起著至關重要的作用，人們在同一時間只能處理一個視覺刺激，分布位置相近的元素往往更加容易獲得用戶的注意力。APP 界面通過文本、圖片、視頻或字體大小等感知元素與用戶進行交流和交互。例如，通過改變某個局部元素的大小，或者將圖標由靜態變為動態，來實現視覺層級的改變。除了用戶自身的偏好外，視覺層級結構在界面導航中也起著重要作用。層級設計能夠幫助用戶對APP 界面中的視覺元素重要程度作出區分、判斷和確認優先級，從而提高用戶理解和查詢信息的效率。

3 基于視覺搜索的APP 界面布局與層級設計意義

從視覺搜索的角度，進行界面的布局和層級設計，其意義體現在以下三個方面。第一，幫助用戶找到需要的信息。一個好的APP界面設計并不僅僅是視覺效果美觀而已，還需要考慮用戶與界面的交互過程。尋找信息是用戶使用APP 應用的重要目標之一，研究視覺搜索模式有利于幫助用戶順利找到所需信息，改善查詢信息的交互流程;第二，吸引無目標瀏覽的用戶。對于沒有目標或者目標不明確的用戶而言，突出重點的視覺元素，比如有趣的標題或圖片，給用戶營造有吸引力的APP 界面，以期達到用戶進一步操作的目的;第三，從框架層提升用戶體驗感。用戶體驗可劃分為戰略層、范圍層、結構層、框架層和表現層，其中框架層關注的是用戶如何與產品功能進行交互?；谝曈X搜索理論，考慮用戶尋找和獲取信息的交互體驗，通過界面元素的布局與層級設計來減輕信息提取和篩選的視覺信息處理負擔，從而提高用戶的體驗感。

4 基于視覺搜索的APP 界面布局與層級設計思路

4.1 自下而上凸顯視覺元素

1） 將重要信息放置在視覺興趣區。自下而上的路徑是結合用戶瀏覽模式，將元素分布在視覺興趣區，增加信息的顯著性。視覺興趣區是用戶視線注視的熱點區域，在“F”型和“S”型模式下，重要的信息一般放在頁面的頂部或者是左側;在彈球模式、分層蛋糕模式和斑點模式下，用戶的視覺焦點在圖片、標題、副標題和視覺效果突出的文字和圖標等元素上。

2） 讓重點信息更加醒目。通過視覺設計的方法，例如將字體加粗放大、色彩對比、添加背景色、留白等，強調APP 界面中重要的信息，使其與周圍其他次要信息形成視覺差，從而使界面的重點元素脫穎而出。

4.2 自上而下引導視覺查詢

1） 布局導航引導。在自上而下的視覺感知路徑中，通過清晰的APP 界面布局設計，突出視覺信息層次，引導用戶更加容易發現和理解信息。視覺信息層級一般分為主導航和次級導航。主導航是指從一個核心功能模塊切換到另一個核心功能板塊的一級層級;次級導航是指在所選核心功能模塊內操作的二級層級。用戶在APP 界面上的操作通常通過大拇指完成，因此一次層級通常采用底部標簽導航或舵式導航布局;而二級層級一般采用頂部標簽導航、宮格式和列表式布局。如果信息較多，則需進一步劃分層次結構，先利用頂部標簽導航引導用戶找到感興趣的模塊，再將宮格布局和列表布局作為次級層級，進一步展示細節信息，提高視覺搜索效率;三級層級一般采用下拉菜單式布局。

2） 色彩層級引導。APP 頁面配色一般由品牌色和輔助色組成。品牌色能夠直觀地展現產品特性;輔助色可以區分產品功能，利用相同的色彩來形成相似性，通過不同顏色的對比拉開信息的視覺層級。輔助色常用品牌色的鄰近色、類似色、對比色和互補色，以及用于調和色彩的中性色。以支付寶首頁為例（如圖1），在第一層級底部標簽導航布局中，選中狀態下，圖標和文字色彩為品牌色藍色;未選中狀態下，則為灰色。圖標右上角的角標為輔助色紅色，提示用戶有新的消息通知。藍色和紅色是對比色關系;在第二層級宮格式布局中，“掃一掃”“出行”和“卡包”等入口，文字和圖標為白色，背景色為藍色。而“菜鳥”“口碑”等第三方入口的圖標采用了藍色、橙紅色和橙黃色，文字采用黑色。圖標的配色屬于開衩互補色，藍色與其互補色橙色的相鄰的兩色進行對比。在色彩面積上，藍色占主導，橙紅色和橙黃色小面積進行強調，以此吸引用戶關注“口碑”“滴滴出行”等第三方入口。

3） 文字層級引導。文字，在界面中起到主體傳達信息和輔助圖像信息說明的作用。設計師需運用好文字的字體、顏色、大小、字重和樣式，讓整體信息排列主次分明，層次清晰，使信息數據有效地傳達給用戶。以拼多多首頁為例（如圖2），第一層級舵式導航標簽中“首頁”“多多視頻”“聊天”和“個人中心”的字號為26px，選中狀態文字顏色為紅色，未選中狀態文字顏色為灰色。中間視覺效果特殊處理的標簽“搖現金”的字號為32px，文字顏色為黃色，文字樣式添加了陰影，同時將黃色的文字放置于紅色漸變的基底上，突出主標簽;第二層級，頂部標簽導航文本字號為38px，選中狀態文字顏色為紅色，字體加重，文字樣式添加下劃線，未選中狀態文字顏色為黑色。搜索框文本字號同樣為38px ;第三層級，宮格布局區域應用圖標下的文字字號為30px。其他區域，主要標題字號為40px，列表中次要文字字號為36px，輔助說明文字和金額字號為30px。

4 結語

文章通過對視覺搜索特征的闡述以及對視覺瀏覽和界面布局模式的分析，提出了自下而上凸顯視覺元素和自上而下引導視覺查詢的兩個APP 界面布局與層級設計的思路。自下而上凸顯視覺元素，設計師需要注意將重要信息放置視覺興趣區，并且讓重點信息更加醒目;自上而下引導視覺查詢，以用戶的動機和任務為目的，利用界面的布局導航、色彩和文字層級設計，對視覺信息層級進行合理劃分。旨在減少時間成本，幫助用戶迅速找到需求信息，愉悅地達成目標任務，提升體驗感和滿意度。