基于视觉注意机制虚拟交互界面布局优化

金昱潼，吕 健，潘伟杰，赵子健，尤 乾

(贵州大学 现代制造技术教育部重点实验室，贵州 贵阳 550025)

0 引 言

在面对人机交互界面时，用户的视觉系统会接收到庞杂的信息，而这些信息很难在短时间内被处理，所以需要将信息进行重要度分析，通过视觉注意机制重新设计人眼处理信息的顺序，可有效降低人脑信息处理的负荷，提高用户的认知绩效[1]。

近年来，视觉注意机制被广泛应用于各行各业中，王宁等[2]运用距离与色彩因素建立视觉注意模型；叶坤武等[3]运用视觉注意分配对飞机驾驶舱人机界面进行优化；Berggren[4]使用行为和电生理手段来研究注意力的分配。而界面布局设计是将物体布置在给定的布局空间中，满足设定的约束条件，并以实现面积利用率、成本、性能等某种或多种指标最优为目标。Chen等[5]研究了信息布局对用户判断的影响，证明水平界面比垂直界面更高效。在VR系统交互界面中进行界面优化，要符合基本的布置原则以及VR情境下人的视觉注意力特性。邓丽等[6]认为制定布局原则时要符合客观认知和信息组织规律。色彩因素在视觉注意机制中也起着重要作用，Merenda等[7]研究调查了在不同的真实驾驶背景下，蓝色、绿色和黄色在AR情境下较稳定。求解复杂多目标界面布局优化问题，需要用到人工算法，例如曹翰等[8]提出一种基于遗传算法的电机控制器自动布局与优化设计方案。对于得到的界面优化结果，普遍使用的是眼动分析实验，王艺璇等[9]采用眼动实验对手机APP界面进行设计评价，筛选出界面设计样本的最优方案。以上研究有着重要的指导意义，可以较好地对用户在虚拟环境下视觉注意机制进行计算和模拟。

通过人视觉注意机制在某VR考试系统中决策交互界面的应用，以决策元件的色彩、间距以及视觉注意等级优化原有决策界面布局，使界面更符合人的视觉注意认知规律，提高使用者的认知绩效，降低用户操作负担。

1 目标重要程度分析

(1)

式中：ωi为第i个指标的权重，且i≥2；ωi-1为第i-1个指标的权重。在计算界面元件重要程度前，界面元件权重ωi是未知数，通过专家根据元件之间的重要程度打分获得Ak，表1为界面元件重要程度Ak赋值。

表1 Ak赋值

由下式进一步计算元件i权重值

(2)

剩余的界面元件ωi(i=1，2，…，m-1) 权重，通过下式推出

ωi-1=Ak·ωi

(3)

2 视觉注意程度的影响因素分析

VR交互界面由多个元件所构成，包含了色彩、间距、形状、大小等视觉特征。操作者在系统使用过程中，容易发现一部分元件，同时也容易忽视一部分元件，这说明前者相对于后者对于操作者有着更强的视觉注意力[11]。因此，找出视觉注意力强弱程度的影响因素，是在优化交互界面过程中的重要步骤。本文从交互元件的色彩、间距和视觉注意等级3个影响因素来定义视觉注意力模型。

2.1 元件色彩因素

人类是通过亮度、饱和度和色调来感知色彩并区分色彩，因此选择国际照明委员会Lab色彩模型来描述用户界面的色彩特征。用户在观察人机交互界面时，观察的是物体，而不是像素点，所以可将每个组成元件分别看作是一个具有单一色彩的物体，具体定义参见文献[2]。设人机交互界面中共有m个界面元件，ci、cj为该界面中第i、j(i、j=1， 2， …，m) 个元件，则两个元件之间的色差，即色彩对比度为

(4)

元件i与元件j的色彩对比度矩阵可以表示为

(5)

式中：m为元件个数，cij表示元件i与元件j的色彩对比度。

元件i与元件j的相关程度矩阵可以表示为

(6)

式中：m为元件个数，oij表示元件i与元件j的相关程度。

若交互界面中元件间相关性强时，将相互色彩对比度小的元件放置在较近的位置，避免交互界面色彩过于杂乱，增加用户视觉认知负担；若元件间相关性弱或无时，将相互色彩对比度大的元件放置在较近位置，增强视觉注意度，提高视觉搜索效率。

元件i和其余元件j的距离、色彩数学模型描述为

(7)

φ值由具体情况而定，用于元件相关程度大小的划分。

2.2 元件距离因素

设有m个待布置元件，li和wi分别表示元件i的长和宽，且定义元件的中心点为其位置坐标，则 (xi,yi) 代表元件i在面板上的坐标值，元件i和元件j之间的距离可通过下式计算

(8)

在距离模型的建立过程中保证元件在布局过程中不发生干涉，其表达式如下

(9)

2.2.1 距离对比度

距离对比度D表示元件之间的视觉对比程度与相对距离的关系；一般情况下，相对距离越小，元件之间形成直接对比，因此视觉对比程度就越强；而相对距离越大，元件之间形成间接对比，因此视觉对比程度就越弱[12]。

交互界面元件距离矩阵可以表示为

(10)

式中：m为元件个数，dij表示元件i与元件j的距离。

元件i和其余元件距离对比度数学模型描述为

(11)

2.2.2 距离相关性

距离相关性反映了各个元件之间的密切程度，关系越密切元件之间就会越近；即相关程度越高的元件之间距离就越小，反之则距离越大，成反比关系。

元件i和其余元件距离相关性数学模型描述为

(12)

根据式(11)和式(12)，元件距离对比度和距离相关性数学模型可以描述为

(13)

式中：α和β分别表示元件距离对比度和距离相关性的权重。

2.3 元件视觉注意力等级因素

2.3.1 人机界面视觉注意力划分模型

虚拟现实系统的体验与操作选择vive头戴式VR设备，人两眼重合视域约为120°，vive头戴式VR眼镜的视野范围为120°，与人眼正常视觉范围一致。在标准状态下，用户双眼平视交互界面的视野等级如图1所示，各视野等级中心在用户视线的中心点上。

原辅料出库主要面向制丝、卷包和咀棒车间，卷包车间由于辅料中转库的存在，大库到中转库属于移库操作，从中转库到机台的出库为生产出库，而到制丝和咀棒车间的出库直接为生产出库。

图1 视野范围以及等级仿真

VR用户在界面元件上的视觉注意力强度与元件所在视野等级和所占面积有关。且由于人眼的视觉认知规律，人的视觉范围在与视线垂直的平面上并不规则。为计算目标在视野区域中所占等级，根据视觉注意力分配情况，将人机界面所在视野的3个区域概括为3个焦点为x轴的椭圆，如图1所示。具体定义可参见文献[3]。

2.3.2 注意力等级模型建立

首先对模型做如下定义：①元件i在视野区域中所占面积为Si;②元件i的形心在不同视野区域g的等级为uig;③各个视野区域g的椭圆长轴为ag，短轴为bg。其中i=1,2,3,…,m，m为界面元件的个数；g=1,2,3分别代表视野等级A、B、C。

视觉注意力等级数学模型可描述为

(14)

约束条件如下

(15)

式中：aA、aB、aC与bA、bB、bC分别为视野A、B、C区域的长轴与短轴。

2.4 目标函数构建

在待布置空间中，可引起视觉注意的位置有限，无法将每个界面元件都布置到最佳位置，因此在构建目标函数时需要综合考虑各影响因素权重，并添加系数λ1、λ2、λ3进行调控。根据数学模型(7)、(13)、(14)，在各视觉注意影响因素的约束条件下，将构建的目标函数取得最大值作为优化目标，将目标函数定义为

(16)

3 实例分析

3.1 决策界面模块化及功能性分组

VR考试系统决策界面如图2(左)所示，佩戴VR头盔时，由于交互界面在VR环境中与用户头部角度为绑定关系，用户双眼平视交互界面，交互界面中心在用户视线的中心点上，且在注视过程中，交互界面与用户所在位置的距离为定值，因此在分析用户对交互界面的视觉注意程度上可仅计算单一距离。

图2 优化前决策界面(左)及模块化(右)

对目标进行模块化和功能性分组，将14个不规则的元件定义为K1～K14矩形模块。再把所有模块通过本身功能进行分组：第一组K0为决策面板；第二组K1、K2元件为钻机的选择决策；第三组K3～K7为防沉降设备顺序决策；第四组K8～K11为使用设备顺序决策；K12～K14为需要排除次生灾害决策，如图2(右)所示。

3.2 视觉等级区域分析

对决策界面进行视觉区域分析，界面相对于人眼的距离为d=1500mm，水平方向上的总视野为120°，竖直方向上的视野为35°。以视觉中心为原点，水平方向为x，竖直方向为y，建立二维坐标系，如图3所示。根据人眼与界面的角度与距离，可确定人眼视觉范围在界面上的A区域坐标范围为x(-315.25 mm，315.25 mm)、y(-322.51 mm，322.51 mm)，B区域坐标范围为x(-761.57 mm，761.57 mm)、y(-322.51 mm，322.51 mm)，C区域坐标范围为x(-1137.84 mm，1137.84 mm)、y(-463.83 mm，463.83 mm)。由此可得出各个视野等级g椭圆的长轴与短轴的值ag与bg。

图3 优化前决策界面的视觉注意等级分析

3.3 决策元件尺寸参数

每个决策元件的尺寸见表2，决策面板K0长为1500 mm，宽为556 mm，以上尺寸均为Unreal Editor4中的虚拟尺寸。

表2 决策元件尺寸参数值

根据决策元件的尺寸参数值，用li和wi直接求出每个决策元件的面积Si。设定优化前与优化后决策元件的尺寸大小不发生改变。

3.4 确定界面决策元件权重值

3.4.1 决策元件重要度计算

通过研究基于隧道救援VR考试系统的交互界面，对交互决策元件重要程度做以下定义：

(1)决策元件的分值重要性V={vi}，vi表示决策元件i对应的考核分值(该分值由国家抢险救援队根据各个决策元件实际操作的重要程度，以及决策结果对于营救成功率的影响而设定)，决策元件i的分值重要性可表示为

(17)

(2)决策元件的操作顺序重要性T={ti}，ti表示决策元件i在隧道救援流程中的决策顺序。因此决策元件i的操作顺序重要性可表示为

(18)

(3)根据式(17)、式(18)可得决策元件i的重要度为

(19)

其中，i=1，2，…，m，m为决策元件的个数。

3.4.2 决策元件分值与操作顺序

综合考虑多种救援情景的救援决策，确定决策元件较为通用的操作顺序，再结合国家抢险救援队指定的考核分值，根据式(19)对决策元件K1～K14的重要度I1*～I14*进行计算，最后将得到的各元件重要度值正序排序，结果见表3。

表3 决策元件重要度排序

3.4.3 决策元件权重值

由表3决策元件重要度Ii*的值可得到排列K1、K2、K12、K13、K14、K4、K6、K9、K8、K3、K5、K7、K10、K11，通过以上数据以及式(3)计算可得各个决策元件权重ωi， 具体数据见表4。

3.5 决策元件相关程度

根据国家抢险救援队提供的信息，得出各个决策元件之间的相关程度，见表5，相关程度的取值为0～1之间，取值越大表示决策元件之间的相关程度越高，反之则越小。根据决策元件相关程度分析，确定相关程度大小划分值φ=0.5。

3.6 决策元件Lab色彩参数

将每个决策元件的主要色彩进行归纳，视每个元件为单一色彩物体[2]，通过软件测出每个物体Lab各通道的值，将色彩信息参数化，以便后期的求解运算。Lab色彩各通道参数值见表6。

4 求解算法

以决策元件的色彩、间距、视觉注意等级为约束条件，对其位置坐标进行求解，采用MATLAB的遗传算法工具箱，通过遗传算法对决策界面设计方案种群进行全面检索，得出在一定条件下的决策界面最优布局方案。

4.1 染色体编码

首先，用遗传算法对目标进行求解；其次，通过二进制对表现型进行编码；再次，参照各变量的精确度决定编码长度；最后，根据最大视野范围等级C来确定编码区间(决策元件坐标精度为厘米)。x轴区间为：212<2276<213；y轴区间为：29<928<210，因此坐标以13+10=23位二进制编码表示。

4.2 确定适应度函数

由于遗传算法的适应度函数与目标函数均为求解最大值问题，因此适应度函数表示为

Fit[f(x)]=

(20)

式(1)～式(15)为约束条件。

其中Fit[f(x)]为适应度函数，f(x) 为目标函数，Cmin为目标函数的最小估值。

4.3 确定进化机制

确定遗传算子为：选择复制算子、交叉算子和变异算子，从随机生成的初始种群开始，重复选择、交叉、变异的操作过程，使种群向着给定的目标进化。选择复制算子运用最常用的轮盘赌法，从当前种群选择出新的个体。

4.4 算法参数标定

在完成了决策元件的权重计算、关联程度大小以及视觉注意机制数学模型的构建之后，设置遗传算法的各个参数，遗传算法求解相关参数如下：编码长度：23；初始种群个数：100；迭代次数：300；交叉概率：0.9；变异概率：0.05；变量为决策元件i在视野区域中的位置坐标xi、yi。

表4 决策元件权重值

表5 决策元件相关程度

表6 Lab色彩各通道参数

4.5 求解及结果解码

为了使优化后的决策界面更加符合人眼视觉注意机制，通过上述给定的模型参数，运用MATLAB平台进行目标函数求解，计算后得到最大适应度函数值所对应的最优个体编码，将最优个体编码进行解码运算，得到表象数据参数，应用于最终的界面布局。新的优化界面坐标见表7。

表7 优化后决策元件坐标

5 实验验证

结合求解出的目标函数数据设计出一组新的决策交互界面，如图4所示。将权重值最高的钻机类型决策元件放置在视觉中心，缩短元件间的距离，增强其对比度；将在同一功能分组下，色彩相近的决策元件排布在相近位置，减轻由于色彩信息过多造成的视觉疲劳[13]。其功能分组的视觉注意强度升序排列依次为钻机类型、次生灾害类型、防沉降顺序、使用设备顺序。

运用Eyeso Ec60眼动平台对优化后的决策界面进行眼动实验验证，实验地点为贵州大学现代制造技术教育部重点实验室，实验选取20位在校本科生与硕士生，15位男性，5位女性，所有参与者视力正常或者矫正后为正常，无色盲色弱，均未有过隧道救援考试VR系统操作经验。实验场景通过Unreal Editor4引擎进行搭建，VR体验设备为HTC VIVE智能VR眼镜PCVR 3D头盔。实验结果如下，图5(左)为眼动注视热点图，图5(右)为注视顺序及时间图，从图5热点图中可看出视觉注意力最强的是选择钻机分组，其次为次生灾害分组，而在注视顺序中K2决策元件为首先注视点，与设计目标K1决策元件为视觉注意度最高元件不符，分析可能是没有考虑人视觉自上而下，自左而右的扫视规律；在后期的研究中将会对视觉注意机制进行更进一步研究。

图4 优化后决策界面

图5 眼动注视热点图(左)及注视顺序及时间图(右)

6 结束语

分析了人眼视觉注意机制的影响因素，在此基础上建立了各个因素的相关数学模型，并将其融合到目标函数中，建立基于视觉注意机制的虚拟环境交互界面模型；再利用G1法对每个界面元件进行排序计算，求出每个元件权重值，通过MATLAB软件用遗传算法求解目标函数。将隧道救援VR考试系统的决策界面设计方案问题转化为组合优化问题，使实际问题实现人工寻优过程的算法化。实验结果表明，该方法具有可行性，解决了设计师以设计经验为主而造成的主观因素影响，提高了界面操作效率，减轻人眼视觉信息负担。目前研究仅适用于VR界面中固定距离的二维平面交互界面，下一步将研究VR环境下非固定视角的维布局界面设计。