彭玉潔

關(guān)鍵詞：視覺搜索;APP 界面;布局;層級;設(shè)計(jì)

1 視覺搜索概述

1.1 視覺搜索循環(huán)模型

視覺搜索由一系列與注意相關(guān)的動作組成，通過眼睛運(yùn)動，調(diào)整發(fā)現(xiàn)圖案的感知路徑。韋爾提出了視覺搜索的三層嵌套循環(huán)模型[1]。外層循環(huán)處理一般性的問題，大腦負(fù)責(zé)構(gòu)建解決問題的步驟并執(zhí)行;中層循環(huán)執(zhí)行的是視覺搜索，尋找解決視覺查詢的圖案，包括一系列的眼睛運(yùn)動;內(nèi)層循環(huán)處理細(xì)節(jié)，負(fù)責(zé)進(jìn)行視覺檢測，判斷檢測圖案是否為目標(biāo)圖案。

1.2 視覺搜索路徑

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

2 APP 界面布局與層級設(shè)計(jì)概述

2.1 APP 界面布局設(shè)計(jì)

2.1.1 APP 界面布局與瀏覽模式

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

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

2.1.2 APP 界面常見的布局類型

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

2.2 APP 界面層級設(shè)計(jì)

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

3 基于視覺搜索的APP 界面布局與層級設(shè)計(jì)意義

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

4 基于視覺搜索的APP 界面布局與層級設(shè)計(jì)思路

4.1 自下而上凸顯視覺元素

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

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

4.2 自上而下引導(dǎo)視覺查詢

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

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

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

4 結(jié)語

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