人机交互界面中形状特征的视觉显著度计算

王 宁， 余隋怀， 周 宪， 肖琳臻

(西北工业大学陕西省工业设计工程实验室，陕西 西安 710072)

人机交互界面中形状特征的视觉显著度计算

王 宁， 余隋怀， 周 宪， 肖琳臻

(西北工业大学陕西省工业设计工程实验室，陕西 西安 710072)

形状特征是影响人机交互界面视觉工效的关键因素，为使人机交互界面能更好地适应用户的生理及心理特性、提升用户体验，需要建构一种人机交互界面中形状特征的视觉显著度计算模型。在分析形状特征对视觉显著度影响程度的基础上，针对人机交互界面中的典型形状，利用内接正方形将形状分割为多个部分，使用相关三角形对形状部分的视觉显著度进行计算，取其中最大值作为形状的视觉显著度，实现形状视觉显著度的量化分析与计算，并通过眼动追踪实验验证该方法的有效性。

交互设计；人机交互界面；形状特征；视觉显著性；视觉工效

人机交互界面(human-machine interface，HM I)是人、机器、环境共同作用的区域，随着产品功能越来越复杂，HM I在单位时间和单位空间内输出的信息也越来越多，其中用户所接收的信息中约80%为视觉信息[1-2]。人类对视觉系统信息处理的能力是有限的，无法同时处理所有的视觉信息，况且并非所有的视觉信息都具有同样的重要性，因此用户往往只会对重要的视觉信息给予视觉注意，而不太关注不重要的信息，甚至忽略这部分信息。视觉注意机制在信息筛选的过程中起着关键的作用，会使用户主动注意到某些显著的、重要的信息，保证用户能够及时处理危险、突发事件。因此，理解人类的视觉注意机制对HM I设计有重要的作用。在HM I中存在多个组成部分，如

操控器、显示器等，其组成部分具有多种对视觉注意产生影响的视觉特征，如色彩、形状、纹理、空间位置等。其中形状是一种重要的视觉特征，形状在HM I中具有传递信息量大、抗干扰能力强、易于接收等优点，且对形状辨认后所获取的信息和辨认的客体有形象上的直接联系[3]，同时形状还能表达一定的语义，是用户对HM I中元件进行识别的关键因素，因此形状特征对于HM I设计有着重要意义。

国内外的学者从多个角度对形状特征引起的视觉注意展开了研究。W ilson[4]分析了形状曲率对视觉显著度的影响；Hoffman和 Singh[5]提出相对尺寸、突起、边界强度是影响视觉显著度的 3个因素，并对这些因素如何影响视觉显著度做出了估计；De Winter和Wagemans[6]给出了伸展度、紧致度、转角等因素与形状部分视觉显著度之间的关系；Cohen和 Singh[7]提出形状部分的轮廓长度会对视觉显著性产生影响；赖重远[8]利用相关三角形计算形状部分的视觉显著性；张坤等[9]通过眼动分析实验比较了安全标志上不同形状对视觉显著度的影响。

上述研究为定量的分析形状特征的视觉显著度提供了基础，但大部分研究主要集中在形状部分的视觉显著度分析与计算，不适合对完整形状的视觉显著度进行分析。本文以形状部分的视觉显著性分析与计算方法为基础，选取 HM I中出现频率较高的典型形状，之后利用内接正方形把形状分解为多个部分，将形状的视觉显著度计算转化为形状部分视觉显著度的计算，利用相关三角形分别计算各个部分的视觉显著度，取其中最大值作为形状的视觉显著度。

1 形状特征分析

形状包含了多种基本属性[10]，如面积、曲率、转角、轮廓类型等，下面分别对视觉显著度产生影响的属性进行分析。

(1) 面积：视觉心理学的研究表明，形状的面积越大，在视网膜上引起的响应区域就越大，就越容易引起视觉注意，即具有越高的视觉显著度，形状的面积与视觉显著度之间大体上呈线性的关系[3,5]。

(2) 转角：形状的转角(图1中的α1与α2)与人类的视觉特性最为接近[11]。形状部分的显著度随着转角的增加而增加，增速先增后减。文献[9]通过眼动分析实验得出安全标志形状中的锐角越多，越容易识别并易引起视觉注意；钝角越多，在几何形状上越接近圆的形状识别难度越大，印证了转角与视觉显著度之间的关系。

图1 形状的转角

(3) 轮廓类型：形状的轮廓变化越剧烈，越容易吸引视觉注意[12]，且人眼对直线轮廓比曲线轮廓更加敏感，因此由直线构成且变化剧烈的轮廓比由曲线构成且变化平缓的轮廓有更高的视觉显著度。

以上分析了几种对形状视觉显著度产生影响的属性，但形状的视觉显著度是多个属性共同作用的结果，用单一的属性来描述形状视觉显著度并不精确，并且不符合人类的视觉规律，因此需要一种能考虑到多种对形状特征视觉显著度产生影响的属性的计算模型。

2 形状特征的视觉显著性分析

文献[8]使用相关三角形来定量计算形状部分的显著度，取得了较好的效果。但是 HM I中组成部分的轮廓都是完整的形状，本文的思路是将HM I中组成部分的轮廓所构成的形状分解成多个部分，求取每一部分的视觉显著度，取其中视觉显著度的最大值作为该元件的视觉显著度。

图2 形状部分的相关三角形

设在HM I中有n个组成部分，每一部分的轮廓都可以构成完整的形状，形状经分割后形成m个部分，每个部分相应的可以构建相关三角形(图2)，图2中线段AB为分割线，也称为基底，A、B为分割出的部分的边界点，C为部分轮廓上的点，a、b为相关三角形的两个边，α为转角。则形状中分割出的部分的视觉显著度为

本文分析35款国内外数控机床的HM I，归纳出6种HM I中的常用形状(图3)，分别为正方形、带有倒角的正方形、矩形、圆形、椭圆形、三角形。以正方形为例说明形状分割的方法，首先在形状内部建立一个内接正方形，保证内接正方形的4个顶点都在形状的轮廓上，如图3(a)中的虚线所示，这样内接正方形的4条边可以看做是4条分割线，这

4条分割线将形状分割为5个部分，分别为ΔHAB、ΔBCD、ΔDEF、ΔFGH以及内接正方形□BDFH，点B、D、F、H为分割出的部分的边界点，点A、C、E、G为分割出的部分的轮廓点。根据相关三角形的定义，ΔHAB、ΔBCD、ΔDEF、ΔFGH也是分割出的部分的相关三角形，而正方形□BDFH处于形状的内部，对该形状的视觉显著度并无太大的影响。因此，对形状的视觉显著度度量主要是考量ΔHAB、ΔBCD、ΔDEF、ΔFGH的视觉显著度。

图3 人机交互界面中典型形状的分割

对于相关三角形ΔHAB，其视觉显著度的计算式为

其中，a= b= HA = AB ，α=90°，则有

相应地，可以计算出相关三角形ΔBCD、ΔDEF、ΔFGH的视觉显著度。

形状的视觉显著度由其分割后形成各个部分的显著度的最大值决定，即

因4个三角形全等，所以正方形的视觉显著度等于任意一个分割出的三角形部分的视觉显著度。

接下来讨论等边三角形的视觉显著度计算方法，部分的分割方法与正方形的分割方法类似，经分割后得到4个部分，分别是ΔGAB、ΔBCD、ΔEFG及□GBDE (图3(f))，其中ΔGAB、ΔBCD、ΔEFG即为分割出的形状的相关三角形，□GBDE处于形状的内部，对该形状的视觉显著度的影响较小，因此，对形状的视觉显著度度量主要是考量 ΔGAB、ΔBCD、ΔEFG的视觉显著度。

对于相关三角形ΔGAB，其视觉显著度的计算式如下

由于a1= b1= GA = AB ，α=120°，则有

对于相关三角形 ΔBCD、ΔEFG，由于并不是等腰三角形，其视觉显著度不大于三角形基底中线长度，不小于轮廓点到基底的最短绝对距离[8]，因此相关三角形ΔBCD、ΔEFG视觉显著度取值为

设等边三角形的边长为 l，计算可得，FQ= CR = 0.35l，AP=0.4l。因为AP ＞FQ =CR ，则

所以等边三角形的视觉显著度为

其他形状的视觉显著度计算思路与上述的2个图形类似，本文不再赘述。

3 实验验证

本文通过眼动追踪实验对所提出的计算模型进行验证。共实验过程如下：

(1) 实验样本。实验样本人数 20名，年龄为19～21岁，其中10名为西北工业大学工业设计系本科生，10名为工业工程系本科生，视力或矫正视力正常。

(2) 实验设备。ASL EYE-TRAC6眼动追踪系统、HP图形工作站及液晶显示器。

(3) 实验材料。6个形状，分别为正方形、带有倒角的正方形、矩形、圆形、椭圆形、等边三角形，以同样的中性灰色填充。

(4) 实验步骤。实验开始后，每次测试计算机屏幕将在横向方向上同时显示2个形状，显示时间为10 s，样本在无任务提示的情况下观察测试图，眼动追踪系统将自动记录样本视线的移动及注视情况，在此过程中样本无需进行其他操作。每个样本需进行测试的次数为6(6–1)/2=15(次)。

通过眼动追踪实验得到 20个样本在观察每张测试图时注视情况，其中正方形与圆形对比测试图、三角形与矩形对比测试图的实验数据如表1、2所示，其他测试图的样本注视实验数据略。

表1 正方形和圆形对比时的注视情况

表2 三角形和矩形对比时的注视情况

通过表1实验数据可以看出，当正方形和圆形以测试图中的比例关系同时出现时，样本注视正方形的次数较多，注视持续时间较长，且在观察初期即注视正方形，而开始注视圆形的时间较晚，说明正方形与圆形相比，更能吸引样本的视觉注意，即具有更高的视觉显著度。

根据表2中的实验数据，当三角形和矩形以测试图中的比例关系同时出现时，两者的注视点数量接近，说明样本观察两个图形的次数基本相同，在初次注视时间上两者也很接近，说明样本对两个图形投入近似的视觉注意，也就是两个图形具有类似的视觉显著性。

将实验中6个形状两两比较，当形状1的视觉显著度大于形状2时，形状1计1分，形状2计0分，将每个形状的得分相加，得出的总分为该形状视觉显著度的水平，如表3所示。

通过表3得出的6个形状的视觉显著度分值，其按照视觉显著度从大到小的排序为：椭圆形、三角形、矩形、正方形、带有倒角的正方形、圆形。

利用本文提出的形状视觉显著度计算方法可得出各形状视觉显著度，如表4所示。6个形状的视觉显著度由大到小排序与眼动追踪实验得到的结果是一致的，证明本文所提出的 HM I形状特征的视觉显著度计算模型能较好地反应出人类在观察形状时视觉注意机制的特性，对形状的视觉显著度有很好的预测能力。

表3 不同形状的注视情况配对比较

表4 各形状的视觉显著度值

4 结 论

本文针对HM I中常用的形状，建立HM I中形状的视觉显著度量化计算模型。首先归纳出 HM I中常用的几种形状，利用内接正方形将形状分割为多个部分，将对形状视觉显著度的计算转化为形状部分视觉显著度的计算。再用相关三角形计算每一个分割出的部分的视觉显著度，取其中的最大值作为形状的视觉显著度。最后通过眼动追踪实验进行验证，证明所提出的计算模型能较好的预测 HM I中形状特征的视觉显著度，为进行 HM I的视觉工效设计与优化提供依据。

HM I中各组成部分的视觉显著度是多种视觉特征共同作用的结果，形状特征是其中比较重要的影响因素，其他的视觉特征如色彩、空间位置、材质等都会对 HM I中组成部分的视觉显著度产生影响。探讨其他的独立视觉特征及多个视觉特征共同作用对视觉显著度的影响，并建立相应的量化计算模型是后续研究工作的重点。

[1] Jacobson N, Bender W. Color as a determ ined communic-ation [J]. IBM Systems Journal, 1996, 35(3/4): 526-538.

[2] Wyszecki G, Stiles W S. Color science [M]. New York: Jonh Wiley & Sons, 2000: 16.

[3] 丁玉兰. 人机工程学[M]. 北京: 北京理工大学出版社, 2005: 90.

[4] Wilson H R. Discrimination of contour curvature: data and theory [J]. Journal of the Optical Society of America, A, 1985, 2(7): 1191-1198.

[5] Hoffman D D, Singh M. Salience of visual parts [J]. Cognition, 1997, 63: 29-78.

[6] De Winter J, Wagemans J. Perceptual saliency of points along the contour of everyday objects: a large-scale study [J]. Perception and Psychophysics, 2008, 70(1): 50-64.

[7] Cohen E H, Singh M. Geometric determinants of shape segmentation: tests using segment identification [J]. Vision Research, 2007, 47: 2825-2840.

[8] 赖重远. 形状部分的视觉显著度与形状编码[D]. 武汉:华中科技大学, 2013.

[9] 张 坤, 崔彩彩, 牛国庆, 等. 安全标志边框形状及颜色的视觉注意特征研究[J]. 安全与环境学报, 2014, 14(6): 18-22.

[10] 朱 浩. 冲裁件几何形状特征识别[J]. 工程图学学报, 2005, 26(4): 109-113.

[11] Scasselati B, Alexopoulos S, Flickner M. Retrieving images by-2D shape: a comparison of computation methods w ith human perceptual judgments [J]. Proceedings of Spie the International Society for Optical Engineering, 1994, (2185): 2-14.

[12] Attneave F. Some informational aspects of visual perception [J]. Psychological Review, 1954, 61(3): 183-193.

Visual Salience Calculation of Shape Feature for Human-M achine Interface

Wang Ning, Yu Suihuai, Zhou Xian, Xiao Linzhen

(Shaanxi Engineering Laboratory for Industrial Design, Northwestern Polytechnical University, Xi’an Shaanxi 710072, China)

Shape feature is an important element of visual ergonom ics of human-machine interface. In order to improve the user experience and increase operation efficiency, a visual saliency calculation model for shape features of human-machine interface isproposed. The influence of shape features to visual saliency is analysed and several specific shapes are obtained which are used in huaman-machine interface frequently at first. The inscribed square is used to segment the shapes and some specific parts are got consequently. The triangle is related to the parts to calculate the parts’visual saliency. The maximal value of parts’ visual saliency is taken as the visual saliency of the shape. An eye tracking experiment verifies the effectiveness of the proposed visual saliency calculation model.

interaction design; human-machine interface; shape feature; visual salience; visual ergonomics

TB 47

10.11996/JG.j.2095-302X.2016040514

A

2095-302X(2016)04-0514-05

2015-12-02；定稿日期：2016-01-18

国家科技支撑计划项目(2 0 1 5 BAH 2 1 F 0 1)；西安市科技计划项目(FW 1 4 0 9)

王 宁(1981–)，男，辽宁阜新人，工程师，博士研究生。主要研究方向为计算机辅助工业设计、视觉工效等。E-mail：ningdesign@hotmail.com