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

视觉搜索由一系列与注意相关的动作组成，通过眼睛运动，调整发现图案的感知路径。韦尔提出了视觉搜索的三层嵌套循环模型。外层循环处理一般性的问题，大脑负责构建解决问题的步骤并执行；中层循环执行的是视觉搜索，寻找解决视觉查询的图案，包括一系列的眼睛运动；内层循环处理细节，负责进行视觉检测，判断检测图案是否为目标图案视觉感知活动可以分为两个路径：自下而上和自上而下的路径。

自下而上的路径源自呈现在视网膜上的图案视觉信息，是一种基于特征的视觉搜索；而自上而下的路径则出自注意力的需要，即根据任务的需要来依次决定关注点。Wickens等人提出了SEEV模型，视觉注意力受到信息显著性（Salience）、努力（Effort）、期望（Expectancy）和价值（Value）四个因素的影响。其中显著性和努力是影响注意力分配的自下而上的因素，期望和价值则是影响注意力分配的自上而下的部分。

APP界面层级设计界面的视觉层级为信息传达给用户的顺序。视觉注意在视觉行为的形成中起着至关重要的作用，人们在同一时间只能处理一个视觉刺激，分布位置相近的元素往往更加容易获得用户的注意力。

APP界面通过文本、图片、视频或字体大小等感知元素与用户进行交流和交互。例如，通过改变某个局部元素的大小，或者将图标由静态变为动态，来实现视觉层级的改变。除了用户自身的偏好外，视觉层级结构在界面导航中也起着重要作用。

‍层级设计能够帮助用户对APP界面中的视觉元素重要程度作出区分、判断和确认优先级，从而提高用户理解和查询信息的效率。自下而上凸显视觉元素

1)将重要信息放置在视觉兴趣区。自下而上的路径是结合用户浏览模式，将元素分布在视觉兴趣区，增加信息的显著性。视觉兴趣区是用户视线注视的热点区域，在“F”型和“S”型模式下，重要的信息一般放在页面的顶部或者是左侧；在弹球模式、分层蛋糕模式和斑点模式下，用户的视觉焦点在图片、标题、副标题和视觉效果突出的文字和图标等元素上。

2)让重点信息更加醒目。通过视觉设计的方法，例如将字体加粗放大、色彩对比、添加背景色、留白等，强调APP界面中重要的信息，使其与周围其他次要信息形成视觉差，从而使界面的重点元素脱颖而出。

自上而下引导视觉查询

1)布局导航引导。在自上而下的视觉感知路径中，通过清晰的APP界面布局设计，突出视觉信息层次，引导用户更加容易发现和理解信息。视觉信息层级一般分为主导航和次级导航。主导航是指从一个核心功能模块切换到另一个核心功能板块的一级层级；次级导航是指在所选核心功能模块内操作的二级层级。

用户在APP界面上的操作通常通过大拇指完成，因此一次层级通常采用底部标签导航或舵式导航布局；而二级层级一般采用顶部标签导航、宫格式和列表式布局。如果信息较多，则需进一步划分层次结构，先利用顶部标签导航引导用户找到感兴趣的模块，再将宫格布局和列表布局作为次级层级，进一步展示细节信息，提高视觉搜索效率；三级层级一般采用下拉菜单式布局。

2)色彩层级引导。APP页面配色一般由品牌色和辅助色组成。品牌色能够直观地展现产品特性；辅助色可以区分产品功能，利用相同的色彩来形成相似性，通过不同颜色的对比拉开信息的视觉层级。辅助色常用品牌色的邻近色、类似色、对比色和互补色，以及用于调和色彩的中性色。

以支付宝首页为例，在第一层级底部标签导航布局中，选中状态下，图标和文字色彩为品牌色蓝色；未选中状态下，则为灰色。图标右上角的角标为辅助色红色，提示用户有新的消息通知。蓝色和红色是对比色关系；在第二层级宫格式布局中，“扫一扫”“出行”和“卡包”等入口，文字和图标为白色，背景色为蓝色。而“菜鸟”“口碑”等第三方入口的图标采用了蓝色、橙红色和橙黄色，文字采用黑色。图标的配色属于开衩互补色，蓝色与其互补色橙色的相邻的两色进行对比。

在色彩面积上，蓝色占主导，橙红色和橙黄色小面积进行强调，以此吸引用户关注“口碑”“滴滴出行”等第三方入口。3)文字层级引导。文字，在界面中起到主体传达信息和辅助图像信息说明的作用。设计师需运用好文字的字体、颜色、大小、字重和样式，让整体信息排列主次分明，层次清晰，使信息数据有效地传达给用户。以拼多多首页为例，第一层级舵式导航标签中“首页”“多多视频”“聊天”和“个人中心”的字号为26px，选中状态文字颜色为红色，未选中状态文字颜色为灰色。

中间视觉效果特殊处理的标签“摇现金”的字号为32px，文字颜色为黄色，文字样式添加了阴影，同时将黄色的文字放置于红色渐变的基底上，突出主标签；第二层级，顶部标签导航文本字号为38px，选中状态文字颜色为红色，字体加重，文字样式添加下划线，未选中状态文字颜色为黑色。

搜索框文本字号同样为38px；第三层级，宫格布局区域应用图标下的文字字号为30px。其他区域，主要标题字号为40px，列表中次要文字字号为36px，辅助说明文字和金额字号为30px。