基于视觉注意机制的B端产品用户体验设计研究

贾轩

编者按：为了解决B端产品在信息结构、页面布局以及视觉元素设计的难点，提升B端产品在信息传达上的效率，这篇文章将视觉注意机制与界面设计相结合，根据视觉感知、视觉搜索、视觉生理基础以及视觉认知流程，结合数字产品的结构层、范围层、表现层的特点，分析出B端产品界面设计在不同阶段需要思考以及遵循的信息可视化策略。

概述

B 端产品面向企业或组织提供服务，帮助企业或组织下的各类角色协同办公，解决企业经营管理或业务问题。B 端产品具备业务复杂度高、用户角色多的特点。不同的企业或组织经营的方式各有差别，不同量级的公司所遇到的具体的业务场景也不尽相同。场景的庞杂，意味着系统包含庞大且种类繁多的信息，这些信息相互关联影响，在不同的系统结构中进行信息交换[1]。薛澄岐指出，复杂信息系统具有开放性、复杂性、层次性与多样性的特点。设计师在进行信息设计的过程中，将系统抽象信息转化为用户易识别、易理解的信息的困难程度也大大提高。

学界站在视觉注意机制的角度上对交互设计的探讨比较丰富。王宁等人将视觉注意的计算方法引入人机交互界面设计过程中，提出了一种考虑用户视觉注意机制的人机交互界面设计方法[2]。吴晓莉等人通过眼动追踪技术获取被试者在数字化监控界面上的视觉注意分配的数据，以此指导界面设计的改良[3]。金昱潼等人为改善虚拟交互界面的操作效率，将人视觉注意机制融入 VR 考试系统的交互界面中，提出一种基于视觉注意机制的虚拟环境交互界面优化模型[4]。尽管如此，现有的交互设计的方法无法完全适用于 B 端复杂、多层级结构的产品系统，因此需要分析个体获取、理解、认知信息的过程与机制，从而建立新的信息可视化策略。从人机交互界面设计出发，借助认知心理学、人机交互、设计学科的理论知识与方法，基于人的感觉、视知觉、记忆和注意力等认知资源在数字界面中的信息处理机制和认知特性，构建 B 端信息系统等界面设计方法。通过研究视觉信息要素，从信息编码、信息元素、信息结构可视化、页面布局、信息显示方式等方面，寻求数字界面设计等优化策略。

B 端产品交互设计的难点

B 端产品的信息交互设计，可划分为信息结构层的导航设计，框架层的控件、布局设计以及对色彩、图标等视觉元素的设计。

信息结构的难点

常见导航包括主导航、局部导航、菜单导航、分步导航、树状导航、Tab 导航、选项卡导航等，以此構建高效易用的导航系统。导航始终贯穿界面始终，告诉用户“现在的位置、从哪里来、可以去到哪里、如何去往”，引导用户完成任务及目标。导航需要在用户操作后，给予反馈，让用户清晰地知道界面的位置，对界面的方向路径有所预知，操作后的行为可撤销。同时，B 端系统的信息层级较多，用户容易在信息中迷失，因此在设计时需要考虑增强用户的位置感知，时刻提示用户当前页面在系统中的位置，同时提供快速返回的操作，提高用户的操作效率，减少认知负荷。但导航设计也存在难度。一方面，导航的广度和深度难于平衡，增加导航广度，能够提升用户的浏览效率，但过于广的导航会让用户难以选择，反之，导航深度越深，层级越多，用户的操作效率也就越低，故广度和深度的层级都不宜过多，另一方面，导航对用户心智的契合度难以琢磨。导航为用户指引方向，需要符合用户对任务的理解，帮助用户完成目标，以用户理解的信息结构呈现。

数字界面布局难点

框架层的难点主要在控件的设计与布局设计两个方面。用户通过控件输入数据或指令，与软件交互。控件的类别很多，包括窗口、菜单、滚动条、标签、文本框、列表框、单选按钮、复选框等。由于信息庞大且交叉节点多， B 端产品的控件也有种类繁杂且综合性强的特点，可能会出现一个对话框包含多个其他类型的组件的情况。这也就需要在设计过程中对信息结构进行分析梳理，控制组件的逻辑层级，来凸显信息逻辑，使其在界面上合理呈现。对于页面布局而言，也存在以下两个难点：（1）信息元素较多时，容易出现信息呈现不均衡的情况。按照用户目标、紧急程度以及操作频率平衡好三者的关系，在界面上有序排布，疏密有度地呈现。（2）布局需要注重可读性和可操作性。需要贴合视觉感知，符合视觉流程和用户的关注点。

视觉元素设计难点

色彩在数字界面中常用于划分信息区域，面对庞大的信息时，通过色彩编码可以快速将信息进行区分，用户只需要花费少量的认知成本就能够快速得到信息。其次，色彩用来突出重要信息。通过协调和对比的手法，在视觉感知上对用户进行信息刺激，提高信息的接收效率。例如，在大多数 B 端产品中，红色表示错误，橙色表示警示。并且，色彩有助于树立品牌形象，产品通过色彩的信息传达，可以让用户对产品乃至企业、组织树立起某种印象。设计师在进行色彩设计时，需要考虑到选择的色彩是否会造成用户视觉疲劳，对用户的操作造成干扰。此外，产品的使用环境，在明暗环境下是否能够有效进行信息传达也是需要考虑的内容之一。

图标设计也是表现层的一大难点。而 B 端产品由于业务场景复杂，会出现大量罕见、具有业务领域相关语义的图标。一般用户不具有特有行业属性和知识，这也就要求设计师需要深入了解行业知识以及行业角色的用户认知习惯，在业务的场景语义下理解任务，对语义进行拆分。B 端场景的语义信息复杂，一个图标可能包含多个语义信息，因此将语义进行拆分融合时，拆分的语义需要清晰明确，又能够统一到一个图标中，这也为设计师提出了挑战。最后，图标设计也需要考虑到产品的使用场景，减缓用户的使用疲劳。

基于视觉注意机制对用户体验设计的指导

视觉注意机制的研究

1.视觉的生理机制

人眼中也分布着 600 万个视锥细胞和 1.2 亿个视杆细胞，视锥细胞集中分布在中央凹区，对色彩变化敏感度高。每一个视锥细胞连接着一个双极细胞和一个神经节细胞，因此对于信息的捕捉和获取会更加精准清晰。中央凹周围分布着视杆细胞，三个视杆细胞对应一个双极细胞和一个神经节细胞，视杆细胞对光线的变化比较敏感，信息在进入视网膜的那一刻就开始了自动筛选。大脑处理信息的资源有限，这也使人眼的感光细胞在演化过程中并非平均分布，在视网膜上呈现出中央集中，周边稀疏的分布规律。而这样的分布结果，也导致人眼获取信息时，呈现出中央清晰，周边模糊的效果。由此，大脑可以优先分配注意资源对捕获到的信息进行加工，减少资源消耗。中央凹的感光细胞足够丰富，能够清晰准确地获取信息，但周围视野的感知能力则非常糟糕。这样的结构，可以保证周围的物体被看到，但是并非意味着个体对其分配注意资源。当视野中出现运动的物体时，视觉信息在传递给神经节细胞时，会有一部分进入大脑的上丘，上丘对运动的信息会产生相应的反应，进而引起眼动。上丘激活眼部肌肉，使眼球运动，眼球的视锥细胞则代替视杆细胞，视杆细胞形成的边缘视觉退居其后，以此形成注意转移。

2.数字界面的视觉感知

视觉感知是人获取并解释处理周围环境信息的能力。视知觉分成两个阶段，早期阶段视知觉主要是对关注的信息进行获取。在眼睛视网膜上获取周围环境的光学成像，并由视杆细胞和视锥细胞进行接收，这些细胞对光线以及色彩信息极其敏感。光线通过玻璃体产生轻微散射，落在视网膜背面。视知觉的晚期阶段则是对物体和图像进行识别，并将识别图像的特征进行抓取分析，和已有的认知图式进行匹配，来描述和解释视觉刺激对象。在整个视觉信息加工的过程中，人眼接收到的视觉刺激可以分离出空间、色彩、形状、动态四种信息。视觉感知是一个复杂的过程，人眼寻找、分辨、识别、确定与记忆搜索，以此作出判断。

数字界面上有丰富复杂的视觉信息，例如明度信息、色彩信息、文本信息、图形图像信息、布局信息等。从设计的角度看，结合人眼视觉感知习惯，当需要突出某一信息时，通过空间上前置、明度上对比、色彩对比等方式辅助界面设计。人眼对空间的感知来源于物体的深度信息，从静态图像、运动、生理以及双目立体视觉四个方面获取深度信息。在界面设计中，通过蒙层、遮挡、动态效果、三维立体图标等手段，突出界面纵深信息。亮度在界面设计中占据着重要地位，用户从界面的明暗关系中识别有关目标的信息。台湾学者 Yun-Ying Yeh 等人研究表明在数字化界面上，可感知的亮度范围最少控制在 1：3，最好是 1：7（Yun-Ying Yeh ，2011）。色彩对比也是设计中常用的手段，色彩冷暖、通用色彩使用规则都是帮助 B 端产品进行界面色彩设计的维度。人眼对色彩的感知中，暖色调向前突出，冷色调向后退，通过色彩冷暖对比拉开页面纵向空间，突出信息层级。并且，色彩使用也需要符合人的色彩认知，例如，红色表示错误;黄色表示警告、注意;绿色表示成功、完成，B 端产品有关状态的场景出现较多，对色彩的运用需要贴合状态的语义表达。

3.数字界面注意搜索

数字界面的信息纷繁复杂，而人的大脑处理信息的资源是有限的，因此对信息的选择显得至关重要。人们在寻找自己关注的信息时，需要对其他非相关信息进行抑制，保证个体专注到当前任务。注意筛选受到两个方面的影响，一是当前任务，二是外界信息的性质。第一種是当个体认为所搜寻的刺激信息对完成任务目标非常重要时，就会以主观意图控制注意选择，这种以目标导向的注意选择机制被称为内源性注意，也叫自上而下的注意。第二种是视线中的某个刺激区别于其他刺激而突出出来，注意会被显著刺激捕获，而不管当前任务目标或者主观动机是什么，这种自下而上的注意被称为刺激驱动的注意或外源性注意。在实际情况中，两种注意是相互作用、共同影响视觉加工过程的。但外界的刺激因素会制约个体的目标导向注意，个体很难忽略掉视域中的信息刺激，尤其是特征显著的刺激信息，这也导致以目标导向的注意会因为显著的外源性信息而发生注意转移到外界刺激信息上的情况，这一现象说明了信息的主动性以及视觉的被动性。

在视觉搜索行为中，注意捕获是人在信息加工过程中非常重要的一个环节。根据注意捕获的规律，突出的信息会被优先注意到，而注意捕获程度低的信息会被弱化。在对 B 端产品的界面进行信息编码的过程中，设计者在构建复杂信息之间的层次结构时，要分析和判断出哪一些信息是需要被用户立即注意和理解的，哪些次之，以此在信息传递中构建信息的主次关系。从设计手段上讲，常用的「对比」，通过区分位置、形状、尺寸、颜色等手段与周围环境信息形成显著差别，来优先吸引用户的注意。

用户体验设计策略

1.一般性设计原则

（1）信息显示可见、可辨、可知。信息通过感官通道被用户获取时，用户能够直接感知到数字界面所表达的信息，进行一定时长的注意分配。当目标信息需要和其他信息相互区分时，信息编码手段也需要相互区分，增加编码之间的差别，确保足够可分辨。最后，编码手段需要被用户理解，保持产品内部和行业的一致性，减少学习成本，并且契合人的经验和理解范围，符合用户心理模型。

（2）遵循信息归类原则，了解目标用户的知识体系和理解逻辑，按照特征、任务、功能、顺序对信息进行分类归纳。考虑用户操作频率，将高频信息放在视野最优区域，减少操作时间与成本。根据任务的重要性，对信息进行优先级排序。

（3）交互上保证用户在感知能力、理解能力、操作能力、工作环境、任务需求、操作能力、工作环境、任务需求上能力水平。交互上需要及时反馈，对用户的每一次操作告知结果，明确告知用户当前所在产品的位置。用户操作上，要迎合用户的喜好，符合用户的操作习惯，为用户提供充分的选择和操作的自由度。保障用户的私密信息，提供密码等保护机制;帮助用户减少记忆与操作负担;防止用户出错，减少用户多次操作的时间和生理成本。

2.结构层设计策略

信息框架在设计过程中，应按照逻辑框架对整体进行划分，以此减少信息完全铺开所带来的信息密度过高的问题。将产品所涉及的不同模块进行整合，把关联度较高的内容归纳到一起，这部分内容体现在产品的主导航中。同时需要考虑到用户的操作频率和重要程度，常见产品主导航的信息结构有树状结构等，对复杂信息进行分类分层，体现出信息的父子级关系。其他导航结构还有分步层级结构、地图层级结构、字母索引结构等。其次是针对界面中的信息层级的划分。设计师需要了解清楚用户在具体页面中的场景，构建清晰的结构化的版式。研究表明，人在浏览网页时的注意分布热区是按照从左至右依次递减，从上至下依次递减的规律，呈现出「F」的视觉浏览路径。因此，在设计过程中，可以将重要的信息按照用户的注意热区进行布局来提升浏览效率。

3.框架层设计策略

对于 B 端产品而言，产品的易用性大于产品的美观程度。用户在执行任务时，是否能够高效及时地完成相关任务流程和操作，是判断 B 端产品数字界面的重要指标。数字界面的信息布局影响着用户浏览路径以及浏览效率。因此需要将信息按照重要性进行分层，呈现与用户任务相关的信息，避免与任务无关的元素干扰用户完成任务。将重要信息突出，以显著的刺激特征来吸引用户注意力，并且按照信息层级排布元素。注重元素之间的平衡、大小、比例、间距、留白等，取得视觉均衡，提高用户完成任务的满意度。

4.视觉表现层设计策略

B 端产品的视觉表现层可拆分成图形、色彩、文字三个方面。

（1） 产品图标需要做到用户易懂，贴合具体使用场景，体现出产品語义。由于信息的层级较多，对图标进行设计需要考虑到不同场景下不同尺寸的图标的可识别性。并且，设计师在制作时，需要使用一致的设计语言，以保证视觉风格一致，提高图标的美观度以及符合设计趋势。

（2） 色彩相比图形与文字，能够更快的被注意捕获，是提高信息获取效率的重要手段。在使用过程中也需要符合具体的场景语义，表意清晰，不违反用户已有色彩的认知。有学者做过颜色的心理感受实验，一组实验材料是红色的「红」字和蓝色的「蓝」字，与另一组实验材料中蓝色的「红」字和红色的「蓝」字做对比，发现与颜色心理感受相冲突的文字的识别的效率远远低于与语义一致的颜色材料。在颜色使用上，也需要符合用户对颜色的心理感受，并且，色彩数量不多于 7 种，过多的色彩会导致用户注意分散，增加操作者的认知难度和认知负荷。

（3）文字的使用需要保证易认、易读、易理解。不同的字形在电子屏中显示的清晰程度有所不同，需要选择易于辨认的字体。同时，也需要根据信息层级、阅读顺序、视觉路径、使用环境，选择不同的字号字重、字距行距、文本段落、对齐方式等。国外学者Alan Cooper提出，文本设计需要精简信息，减少用户的阅读量，用少量的文本传达准确的含义，减少用户阅读的时间和理解的认知成本[5]。

结语

本文在视觉注意机制理论的基础上，结合 B 端产品交互设计的特点与难点，给出对应的设计策略。通过对视觉感知、视觉注意搜索以及视觉生理机制的分析，形成对用户体验设计中的结构层、框架层以及视觉表现层的设计策略，希望能为 B 端产品设计实践提供新的理论依据和设计思路。

参考文献：

[1]仝牧.服务设计理念在复杂信息系统界面设计中的应用策略[J].设计，2018（20）：96-98.

[2]王宁，余隋怀，周宪，等.人机交互界面中形状特征的视觉显著度计算[J].图学学报，2016，37（04）：514-518.

[3]吴晓莉，薛澄岐，Gedeon Tom，等.数字化监控任务界面中信息特征的视觉搜索实验[J].东南大学学报（自然科学版），2018，48（05）：807-814.

[4]金昱潼，吕健，潘伟杰，等.基于视觉注意机制虚拟交互界面布局优化[J].计算机工程与设计，2020，41（03）：763-769.

[5]Alan Cooper，Robert Reimann，Dacid Cronim.2012.About Face 4：交互设计精髓[M].刘松涛，等译.北京：电子工业出版社，2015.