彭玉洁

关键词：视觉搜索;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]。“F”型和“S”型浏览模式都说明页面顶部和左侧的内容更加容易被用户注意到，因此在文本布局的前两段和左侧，应尽可能展示最重要的信息。

除“F”型以外的浏览模式有割草机模式、弹球模式、分层蛋糕模式和斑点模式[5]。 割草机模式的特点是用户视线从左上角的单元格开始，向右移动直到该行末尾，然后下拉至下一行，从右向左浏览，直至最左边，以此类推;弹球模式的特点是用户视线在不同的元素之间跳动;分层蛋糕模式的特点是用户视线集中在页面标题和副标题上，在找到感兴趣的标题后，才会阅读对应的内容;斑点模式的特点是用户视线固定在视觉效果突出的特定单词上。弹球模式、分层蛋糕模式和斑点模式说明，用户更加倾向关注图片、标题和視觉效果突出的文字和图标等元素。

2.1.2 APP 界面常见的布局类型

根据APP Annie 平台数据显示，中国地区安卓手机使用程度最高的五款APP 分别是：微信、拼多多、抖音、支付宝和淘宝。通过对5 款APP 的页面布局进行分析，发现常见的布局方式有：底部标签导航、舵式导航、顶部标签导航、宫格式、列表式、以及下拉菜单式布局。底部标签航布局适合3—5 个导航菜单，多采用图标和文字结合的形式;而舵式导航布局是底部标签导航的一种变体，将操作最频繁的特定标签进行特殊处理，在视觉设计上与其他标签进行区别，从而到达引导用户操作和增加该标签点击率的目的。

2.2 APP 界面层级设计

界面的视觉层级为信息传达给用户的顺序。视觉注意在视觉行为的形成中起着至关重要的作用，人们在同一时间只能处理一个视觉刺激，分布位置相近的元素往往更加容易获得用户的注意力。APP 界面通过文本、图片、视频或字体大小等感知元素与用户进行交流和交互。例如，通过改变某个局部元素的大小，或者将图标由静态变为动态，来实现视觉层级的改变。除了用户自身的偏好外，视觉层级结构在界面导航中也起着重要作用。层级设计能够帮助用户对APP 界面中的视觉元素重要程度作出区分、判断和确认优先级，从而提高用户理解和查询信息的效率。

3 基于视觉搜索的APP 界面布局与层级设计意义

从视觉搜索的角度，进行界面的布局和层级设计，其意义体现在以下三个方面。第一，帮助用户找到需要的信息。一个好的APP界面设计并不仅仅是视觉效果美观而已，还需要考虑用户与界面的交互过程。寻找信息是用户使用APP 应用的重要目标之一，研究视觉搜索模式有利于帮助用户顺利找到所需信息，改善查询信息的交互流程;第二，吸引无目标浏览的用户。对于没有目标或者目标不明确的用户而言，突出重点的视觉元素，比如有趣的标题或图片，给用户营造有吸引力的APP 界面，以期达到用户进一步操作的目的;第三，从框架层提升用户体验感。用户体验可划分为战略层、范围层、结构层、框架层和表现层，其中框架层关注的是用户如何与产品功能进行交互。基于视觉搜索理论，考虑用户寻找和获取信息的交互体验，通过界面元素的布局与层级设计来减轻信息提取和筛选的视觉信息处理负担，从而提高用户的体验感。

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 界面布局与层级设计的思路。自下而上凸显视觉元素，设计师需要注意将重要信息放置视觉兴趣区，并且让重点信息更加醒目;自上而下引导视觉查询，以用户的动机和任务为目的，利用界面的布局导航、色彩和文字层级设计，对视觉信息层级进行合理划分。旨在减少时间成本，帮助用户迅速找到需求信息，愉悦地达成目标任务，提升体验感和满意度。