¹贵州大学机械工程学院，贵州 贵阳

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

收稿日期：2021年2月24日；录用日期：2021年4月1日；发布日期：2021年4月9日

摘要

通过分析界面布局样式设计的合理性及评价结果的客观性，探究符合用户的视觉注意规律和偏好的界面布局设计样式为目的。以五个热门短视频类APP主界面为实验材料，使用SMI眼动仪获取被试在卡片式、分割式和通栏式这三种界面布局样式中的眼动数据，并构建基于熵权法与灰度关联法的数据指标评价模型。得到被试在通栏式界面布局样式中注意更集中，对此界面设计的评价最高。因此得出个体更偏好简洁直接的通栏式布局样式。

关键词

界面布局评价，视觉注意机制，眼动实验，熵权法，灰度关联分析

Visual Attention Research Based on Free Browsing Interface Layout Style

Yuanyuan Li¹, Qin Yang¹, Yanhua Wu¹, Jian Yuan², Wentong Li²

¹College of Mechanical Engineering, Guizhou University, Guiyang Guizhou

²Key Laboratory of Advanced Manufacturing Technology, Ministry of Education, Guizhou University, Guiyang Guizhou

Received: Feb. 24^th, 2021; accepted: Apr. 1^st, 2021; published: Apr. 9^th, 2021

ABSTRACT

In this paper, the interface layout design style which accords with the user’s visual attention law and preference was explored by analyzing the rationality of interface layout style design and the objectivity of evaluated results. Main interfaces of five popular short video classes APPs were taken as the experimental materials, eye movement data of the subjects from three interface layout styles, card type, split type and column type was obtained by the SMI eye movement instrument, and a data index evaluation model based on entropy weight method and gray correlation method has been built in the study. The subject paid more attention to the layout style of the column type interface, and evaluation of it is the highest. Therefore, it is concluded that individuals prefer to a column type which is simple and direct.

Keywords:Interface Layout Evaluation, Visual Attention Mechanism, Eye Movement Experiment, Entropy Weight Method, Gray Level Correlation Analysis

Copyright © 2021 by author(s) and Hans Publishers Inc.

This work is licensed under the Creative Commons Attribution International License (CC BY 4.0).

http://creativecommons.org/licenses/by/4.0/

1. 引言

当今互联网高速崛起，以媒介为载体搭建起来的视觉可视化环境正逐渐改变着人们的生活状态，尤其是娱乐短视频等新兴社交媒体不断将日常的生活场景向视觉可视化环境推进，带来多感官体验，也丰富了人们的工作及娱乐生活 [1]。用户对娱乐短视频APP的信息感知有效程度受其界面布局复杂性的影响，并且用户需要提升信息加工速度才能确保短时间内接受庞大的信息 [2]。合理的界面布局设计可以通过提升用户的视觉体验来减少对界面的操作失误。

然而，以往基于用户视觉注意机制的界面交互设计研究倾向于界面视觉认知模式研究，仅针对界面的单一方面研究，很少有研究涉及分析热门短视频APP界面的可用性。因此，为了探究符合用户视觉注意规律和偏好的布局样式设计，本研究使用眼动仪器获取用户对现有娱乐短视频类APP主界面的眼动数据，以熵权法计算各指标的权重再结合灰度关联分析法对样本进行排序。本研究有助于设计师在未来进一步优化娱乐短视频类APP界面的布局设计。

2. 视觉注意机制研究与眼动指标选取

2.1. 视觉注意机制研究现状

视觉注意机制(visual attention mechanism)是一种重要的心理调节机制，亦是个体对感兴趣的视觉刺激物的选择能力和对视觉刺激物中最相关区域的加工能力 [3]。视觉系统作为接收信息的感知系统，能够迅速对外界信息进行反应 [4]。通常而言，外界所传递的信息在感知系统中并非同等重要，视觉系统相当于信息筛选器，会自动过滤个体不感兴趣的信息，其在视觉信息加工中的作用不可忽视。

人机交互体验的理想与否在很大程度上取决于界面布局，通过将用户的视觉注意机制与人机交互界面的设计过程进行融合能够实现更理想的人机交互体验。目前，研究者在基于用户视觉注意机制在人机界面设计方面展开了深入研究，王慧等人通过深入探究用户视觉搜索与视觉注意的规律，提出了移动应用界面的设计原则 [5]；刘春强的研究基于用户视觉选择性注意，发现用户视觉注意受网页交互界面中如内容、色彩、布局等因素的影响 [6]；叶坤武等人就从减少过度依赖计师主观经验出发，通过分析飞行员视觉注意力的分配布局，提出与之相契合的视觉注意力分配布局优化模型 [7]；吕健等人通过对视觉注意原理进行分析研究，构建了信息界面布局的美度评价模型 [8]。

个体的眼球活动与心理活动密切关联，通过眼球运动获得用户对产品信息的认知，能比可用性测试和访谈获取更多隐藏的、有价值的内容。眼动追踪技术又称视觉追踪技术，是生理测量方法的一种，通过测量眼球运动数据反映用户对视觉信息的接收程度。郭伏等人使用眼动追踪技术对用户的手游导航界面交互体验进行测量研究 [9]；王艺璇等人通过眼动实验从5种音乐APP的二级界面中筛选出最优的界面设计方案 [10]；李森等人通过眼动追踪技术对被测者视角的通讯APP导航设计方案进行评价分析出最佳的通讯APP导航设计方案 [11]。结合目前的研究情况，本文从用户的视觉注意机制出发，探究用户在视觉认知活动中相关的眼动追踪模型，构建娱乐短视频类APP主界面设计的评价体系。

2.2. 用户视觉注意机制下的眼动指标选取

眼动行为是界面刺激用户时所发生的视觉反馈活动，是用户与界面交互时主要的反馈活动特征之一。在实验中运用眼动追踪技术时应尽可能选择与用户认知活动相关的眼动追踪模型(如图1)，通常眼动数据指标可分为加工指标、搜索指标及认知指标 [12]。

图1. 眼动追踪模型数据指标

在视觉认知理论支持下，本次实验选取5个参数作为评价指标，即首次注视时间、总注视时间、平均注视时间、注视点数目、瞳孔直径(如表1)。

表1. 选取的5个眼动指标定义说明

3. 基于熵权法–灰度关联分析法的眼动指标评价模型研究

3.1. 熵权法确定各指标权重

可以用来确定指标权重的方法有很多 [13] [14]，其中最常用的是主观评价法，如德尔菲(Delphi)法是将大多数专业人员的经验与主观判断整合起来的一种客观综合技术方法，缺点是它过度依赖于专家们的主观判断；层次分析法(Analytic Hierarchy Process AHP)是定性与定量相结合的方法，它是用于计算比较元素之间相对权重，从而量化决策，缺点在于必须要先构建数值判断矩阵。专家对实验中的量表的评价标准主观性较大，容易出现不一致的评价结果，而通过熵权法可以有效解决。熵权法是客观加权法，独立于专家判断，通过指标系数的变化来确定权重，能够避免了实验评价结果不一致的现象出现 [15]。通常在计算过程中某个评价指标系数的熵值越小，可以提供的信息就越多，相对应的权重系数就越大。其中信息效用值可求出指标的权重系数，使求出的结果准确可靠。本文通过熵权法确定各眼动指标的权重系数，计算过程遵循数学原则，评价结果更加科学。

具体步骤如下：

1) 构建原始数据矩阵x，

$x={\left(x_{ij}\right)}_{\max }=\left[x_0,x_1,\cdots ,x_m\right]$，$\left(i=1,2,\cdots ,m;j=1,2,\cdots ,n\right)$ (1)

此中 $x_{ij}$ 为第j项指标下第i个单元的指标值。

通过离差标准化可将原始数据标准化，解决眼动数据指标量纲不契合数量级的问题之后对此进行比较。主要处理方法如下，

$Y_{ij}=\frac{\max x_{ij}-x_{ij}}{\max x_{ij}-\min x_{ij}};i\in \left[1,m\right],j\in \left[1,n\right]$ (2)

$Y_{ij}=\frac{x_{ij}-\min x_{ij}}{\max x_{ij}-\min x_{ij}};i\in \left[1,m\right],j\in \left[1,n\right]$ (3)

max和min分别代表样本眼动数据的最大值与最小值，公式(2)求出指标的值越小则眼动数据质量越高，公式(3)求出指标的值越大则眼动数据质量越高。

2) 计算第j项指标下第i个单元的指标值比重 $j_{ij}$，

$f_{ij}=\frac{Y_{ij}}{{\displaystyle \underset{j=1}{\overset{n}{\sum }}{Y}_{ij}}}$ (4)

3) 由熵权法计算第j项指标熵值的方法如下，

$E_j=-k{\displaystyle \underset{j=1}{\overset{n}{\sum }}{f}_{ij}\ln f_{ij}}$ (5)

4) 计算第j项指标信息效用值 $D_j$，

$D_j=1-E_j\left(j=1,\cdots ,n\right)$ (6)

5) 计算第j项指标的权重 $W_j$，

$W_j=\frac{D_j}{{\displaystyle \underset{j=1}{\overset{n}{\sum }}{D}_j}}$ (7)

3.2. 结合灰度关联分析法排序

灰色关联分析法是一种用于获取可靠结果的优化算法 [16]，其系统中的因素关联度可通过系统数据序列的几何关系反映，几何形状越相似则相关度越高。各类因素间关联度的分析和整体质量多层次综合指标体系优劣的评判，均可通过灰色关联分析法实现。该方法是基于相关分析方法的新的突破，较之传统的相关分析法，灰色关联分析法的最大优势在于适用于非线性模 [17]。本文将眼动数据使用熵权法计算权重系数，再通过灰度关联系数计算得到样本之间的关联度，进而确定用户对样本的喜爱程度。

具体步骤如下：

1) 确定参考系数之后，筛选得出所有评价指标比较数列中最优值组成参考数列。

$x_0=\left\{x_0\left(1\right),x_0\left(2\right),\cdots ,x_0\left(m\right)\right\}$ (8)

2) 计算关联系数，各指标和参考数列间理想值的关联系数为 $\zeta$，

${\zeta }_i\left(k\right)=\frac{\underset{i}{\min }\underset{k}{\min }\left|x_0\left(k\right)-x_i\left(k\right)\right|+\rho \cdot \underset{i}{\max }\underset{k}{\max }\left|x_0\left(k\right)-x_i\left(k\right)\right|}{\left|x_0\left(k\right)-x_i\left(k\right)\right|+\rho \cdot \underset{i}{\max }\underset{k}{\max }\left|x_0\left(k\right)-x_i\left(k\right)\right|}$ (9)

式中ρ为分辨系数，在(0, 1)内取值，若ρ越小，关联系数间差异越大，区分能力越强。通常ρ取0.5。 ${\zeta }_i\left(k\right)$ 即比较数列x_i的第k个元素与参考数列x₀的第k个元素之间的关联系数。

3) 计算灰色关联度 $r_i$ 为，

$r_i=\frac{1}{n}{\displaystyle \underset{k=1}{\overset{n}{\sum }}{\zeta }_i\left(k\right)}$ (10)

式中， $r_i$ 为第i个评价目标对理想目标的灰色加权关联度。

4) 综合评价，根据各评价指标与参考序列指标的综合关联度对样本的关联度进行降序排列。样本的关联度数值越大，说明样本的界面布局样式越优。

4. 实验研究

4.1. 实验设备

使用德国SMI公司配套的RED眼动仪器设备获取用户的眼动数据，该设备可用于追踪被试在注视样本时的眼球运动轨迹，使用eyeso studio软件分析记录被试眼球运动数据。使用统计分析软件SPSS20.0分析眼动实验数据。

4.2. 被试

选取16位年龄在20至30岁的在校学生为被试。所有被试均无眼部疾病，视力或矫正视力正常。所有被试均有使用娱乐短视频类APP的习惯，平均每周使用时间超过30分钟。

4.3. 实验样本

选取APP store下载次数排名前五的娱乐短视频类APP，将其主界面作为案例样本研究，其界面中的图标、图片、文字等均进行模块灰色化处理(如图2)。

4.4. 实验程序

实验在安静、光源正常的实验室内进行，研究负责人告诉被试实验顺序和注意事项，然后要求被试坐在电脑设备前进行测试，保持良好的坐姿，固定头部不动，双眼直视屏幕中心，对被试进行焦点的定点测试。

图2. 眼动实验样本情况

实验开始时，首先呈现5秒“+”注视点，之后随机呈现15秒样本图，被试根据自己的习惯自由浏览，整个实验耗时约8分钟。

5. 结果分析

5.1. 描述性统计

本研究的5个眼动指标(首次注视时间/ms、总注视时间/ms、平均注视时间/ms、注视点数量/个、瞳孔直径/mm)进行均值处理后的描述性统计(如表2)所示。

表2. 自由浏览阶段眼动数据描述性统计

5.2. 利用熵权法确定评价指标权重和灰度关联分析法排序

5.2.1. 熵权法确定评价指标权重

1) 构建初始数据矩阵

m、n、分别为样本数量与评价指标数量，数值均为5，其中第j个评价方案的第i个指标的原始数据为 $x_{ij}$，根据公式(1)构建原始数据矩阵如下。

$X=\left\{\begin{array}{ccccc}159.5600& 8.5600& 2702.8600& 209.7100& 4.0600\\ 164.7500& 8.5700& 2695.7300& 215.7100& 4.2200\\ 174.0700& 8.3200& 2543.5700& 207.5800& 4.2900\\ 181.9800& 8.0900& 2520.0400& 197.2400& 4.2100\\ 198.4700& 8.3100& 2671.8200& 222.1300& 4.1900\end{array}\right\}$

2) 计算指标值比重

根据式(4)计算得出指标值比重为，

$f=\left\{\begin{array}{ccccc}0.0000& 0.0816& 0.0000& 0.1791& 0.0000\\ 0.1000& 0.0000& 0.2497& 0.0780& 0.2388\\ 0.2525& 0.4561& 0.2840& 0.3656& 1.4510\\ 0.3514& 0.9625& 1.7950& 1.0000& 0.5357\\ 1.0000& 0.3233& 1.0000& 0.0000& 1.0000\end{array}\right\}$

3) 计算指标值的输出熵E

式(5)中， $k=\frac{1}{\ln n}$，计算得出各指标的熵值E，由式(6)计算出各指标信息效用值D，(如表3)。

表3. 熵值法计算权重结果汇总

$E=\left[0.7060.64590.81240.76050.858\right]$

4) 计算指标值的输出熵D

$D=\left[0.2940.35410.18760.23950.142\right]$

5) 计算指标的权重

由第j项指标的熵权，由式(7)可以确定该指标的客观权重值w为，

$w_j=\left[0.2420.2910.1540.1970.117\right]$

5.2.2. 灰度关联分析法进行排序

1) 评价指标无量纲化

根据公式(2)和公式(3)处理原始数据矩阵X，得到的标准化数据矩阵为，

$Y=\left\{\begin{array}{ccccc}0.0000& 0.1698& 0.0000& 0.3729& 0.0000\\ 0.0208& 0.0000& 0.5846& 0.1334& 0.6957\\ 0.5208& 0.8713& 0.4990& 0.5762& 1.0000\\ 0.5417& 1.0000& 1.0000& 1.0000& 0.6522\\ 1.0000& 0.0390& 0.2579& 0.0000& 0.5652\end{array}\right\}$

2) 确定参考数列

从所有眼动数据的比较数列中选出最优值组成参考数列。分析注视点数目、平均注视时间、总注视时间、瞳孔直径、首次注视时间等五个指标数值发现，注视点数目、平均注视时间、总注视时间等指标值越小越好，瞳孔直径、首次注视时间等指标值越大越好。前三个指标的值越小越好，后两个指标的值越大越好。

然后，利用灰色关联度分析法排序，要从所有眼动数据的比较数列中选出最优值组成参考数列。本研究的参考数列由式(8)可以得出X。

$X=\left[198.47008.09002520.0400197.24004.2900\right]$

3) 计算关联系数

原始数据经过标准化处理之后，计算出各指标和参考数列间理想值的关联系数 $\zeta$，本研究的关联系数 $\zeta =\left[ABCDE\right]$。

根据式(9)，得到如下，

$\zeta =\left[\begin{array}{cccccc}A=& 0.701& 0.731& 0.789& 0.847& 1\\ B=& 0.995& 0.995& 0.997& 1& 0.998\\ C=& 0.333& 0.342& 0.795& 1& 0.376\\ D=& 0.88& 0.832& 0.898& 1& 0.786\\ E=& 0.997& 0.999& 0.999& 0.999& 0.786\end{array}\right]$

由式(10)得出本研究中灰色关联度 $r_i=\left[0.78140.78050.89620.96910.8323\right]$。

4) 综合评价

为得到各评估指标和参考序列指标之间的综合关联度，需要对样本的关联度进行降序排列(如表4)， $r_4>r_3>r_5>r_1>r_2$。

表4. 关联度结果

灰色关联度的值即代表样本的得分情况，对5个样本进行排序，得到(如图3)所示。

图3. 实验样本排序

5.3. 布局样式结果分析

本文将实验样本的界面布局样式归纳总结为三类，卡片式、分割式和通栏式。其样本一和样本五为卡片式，样本二为分割式，样本三和样本四为通栏式。根据用户视觉注意实验数据分析得出，界面布局样式为通栏式的使用体验效果最好，界面框架简洁明了，界面元素分布有序，界面操作逻辑更简单给用户的信息可视化也更强；其次，卡片式的界面特点是内容板块较多，在用户操作逻辑上，增加了用户在选择时发生错误的可能性；最后分割式的使用效果较差，界面布局样式缺乏一致性，增加了用户认知的难度。

6. 结语

本文以现有的娱乐短视频类APP主界面为样本，使用SMI眼动仪器获取用户自由浏览状态下的眼动数据。通过熵权法计算出各指标权重大小并结合灰度关联度确定眼动指标和样本布局样式间的影响程度，选择最优样本的界面布局样式。研究表明，用户更偏好于直观易懂、简单操作的界面布局样式设计。研究将重点放在娱乐短视频类APP主界面的布局样式上，并未全面考虑主界面的文字大小、图标大小、界面颜色等因素。若在后续工作研究中综合考虑全面因素再进行深入研究，有助于全面提升界面布局设计的优化。

文章引用

李媛媛,杨 勤,吴艳华,袁 建,李汶潼. 基于自由浏览界面布局样式的视觉注意研究
Visual Attention Research Based on Free Browsing Interface Layout Style[J]. 软件工程与应用, 2021, 10(02): 113-121. https://doi.org/10.12677/SEA.2021.102014

参考文献