面向数据界面的色彩影响VDT视疲劳患者视觉体验研究

王伟伟 武桐

摘要：随着数据可视化技术的广泛应用，用户长时间使用可视化界面的情景变得越来越普遍，特別是对VDT（Visual Display Terminal）视疲劳患者而言，界面设计质量对办公视觉搜索绩效的影响日益显著。色彩是数据界面设计的重要因素之一，基于此，文章采用眼动追踪技术，根据注视时间、注视点、热点图等眼动数据，结合VDT视疲劳患者的主观感受评估结果数据，研究不同色彩对VDT视疲劳患者视觉体验的影响情况，并将相关结果应用于实际的设计过程，提升VDT视疲劳患者在使用数据可视化结果时的搜索绩效和视觉体验。

关键词：数据界面;眼动追踪;VDT患者;视觉体验;搜索绩效

中图分类号：TP393.092 文献标识码：A 文章编号：1004-9436（2022）19-000-05

近年来，数据可视化系统广泛应用于政府部门、企业等各个领域，已成为管理数据的有效工具。VDT（Visual Display Terminal）视疲劳指由于长时间操作视屏显示终端而引起的双眼干涩、疼痛、视朦、头痛、颈部及四肢麻等一系列眼部和全身症状[1]。在倡导无纸化办公的大环境下，VDT视疲劳患者大幅增加，VDT视疲劳已对VDT作业人员造成严重困扰。金茹娜等人研究发现，在职医护人员的VDT视疲劳发生率达52.3%[2]。大量的VDT视疲劳患者需要长时间注视电脑端可视化界面，获取图表数据信息。良好的可视化界面设计可以提升VDT视疲劳患者的数字办公体验，提高他们的工作效率和准确性。

色彩是可视化界面视觉体验的基本要素，是决定人机交互界面设计成功与否的关键因素[3]。张德乾等通过计算机辨别字符反应的方法，探索了448种目标色—背景色具体匹配条件  下的视觉辨别反应时间，指出颜色视觉绩效取决于前景色和背景色以及亮度水平的具体匹配[4]。宫勇通过视觉搜索实验发现，增加色彩数量会在一定程度上降低图形符号的视觉搜索效率，而利用色彩拉大图形符号之间的差异，则能大幅度提升图形符号的视觉搜索效率[5]。冯纾等通过眼动实验得到，在1.0～3.5 lux光照条件下，低明度背景色人机界面的视觉工效优于高明度背景色人机界面[6]。总之，界面背景色的明度和前景色对视觉绩效和体验有显著影响，本文通过综合分析注视时间、注视点、热点图等眼动数据和参与者的主观感受数据，探索面向VDT视疲劳患者的人机界面背景明度和前景色设计规律，以提升VDT视疲劳患者群体的视觉体验和搜索绩效。

1 数据界面的用户体验与视觉搜索绩效

1.1 数据界面用户体验

数据界面用户体验指目标用户在特定环境下认识、使用数据界面过程中获得的全部感受，包含功能规划、信息构架与设计、交互设计、视觉设计等层面，其中视觉设计与用户关系最为密切。在杰西·詹姆斯·加勒特的用户体验要素模型中，视觉设计共包含位置、明暗、形状、颜色等要素[7]。吕阳等提出，在可视化用户界面中，色彩的象征性、色彩和图形对应关系、色彩搭配对用户的视觉体验都有非常重要的影响[8]。黄红燕指出，色彩作为界面第一视觉要素，直接影响用户体验的成败[9]。可见，色彩元素直接影响用户对界面的视觉感受，用户对色彩的捕捉和反应效能大于形状、文字等其他元素[10]，它是影响数据界面用户体验最基础、最主要的元素。

1.2 视觉搜索绩效

视觉搜索绩效是指通过眼睛去寻找特定目标所用的时间及准确率。用户通过数据界面进行视觉搜索并完成工作任务，工作效率取决于界面信息检索获取的速度。在信息时代，视觉搜索绩效已成为人机交互过程中影响用户体验的重要因素之一。注视行为能够反映用户体验的好坏[11]，陈学强从眼动实验角度分析了用户搜索效率[12]，发现提高搜索绩效能改善用户体验，减轻认知负荷。用户在视觉搜索时心理负荷较重，界面中的干扰信息容易影响搜索效率[13]，宫勇等通过视觉搜索实验研究发现，颜色数量和一致性对图标视觉搜索绩效有显著影响[14]。视觉搜索绩效与用户体验相互影响，用户在搜索过程中认知、记忆、思考，完成任务，用户体验则经历了对可视化系统的感知，通过操作满足任务需求，对系统形成操作习惯。

1.3 眼动追踪技术与视觉体验评价

眼动追踪技术是指度量凝视点或测量眼球相对运动轨迹的技术，即通过眼动追踪仪记录在可视点上最活跃的区域和每只眼睛的运动。眼动追踪技术是视觉体验和界面设计优劣的主要评测手段，相较于传统的推测和调查用户喜好等方法，其在准确性方面具有明显的优势。薛澄岐等指出，眼动追踪技术的应用为界面可用性测试提供了一种有效的判断方法[15];唐佩璐等利用眼动追踪测试的客观数据，为新闻类APP的界面设计提供了普适性的设计意见[16];栗觅等通过眼动追踪技术，研究网络页面视觉搜索和浏览的视觉特征和对应策略的差异，通过瞳孔直径变化可以监测用户视觉搜索行为[13]，为界面设计提供了数据支撑和参考。

2 数据界面色彩视觉搜索绩效研究

2.1 界面色彩影响视觉搜索绩效的眼动实验

2.1.1 实验准备

眼动仪型号为Tobii X2-30，采样率为30赫兹，延迟时间为50～70毫秒，精准度为0.5～1度。实验过程中让被试者选择日常办公的舒适坐姿，保持身体稳定。实验共邀请40名被试者，其中男性20名，女性20名，年龄在23～31岁之间，均为长期使用可视化界面的工作人员，矫正视力1.0以上，无任何隐形视力问题。实验环境模拟办公环境和光照，使VDT视疲劳患者设想为日常工作，完成工作任务。

2.1.2 实验素材处理

为保证实验结论的实操性和有效性，界面左右模块依据实际工作界面设计，设置相同常见的图表形式，确保任务点到中心点距离相同，界面尺寸分辨率为1920*1080。界面色彩采用HSB（H色相、S饱和度、B明度）模式，通过控制定量与变量，获取符合实验目标的色彩值。

实验样本分为两组。第一组研究背景色明度对视觉搜索绩效的影响，明度以黑白为参考，每三个色阶为一个等级，分为高、中、低三个等级。其中，中明度40%～60%属于灰色范围，因此深色背景和浅色背景明度分别取值0%～30%和70%～100%。由于深色背景饱和度显示效果差异不大，结合肖宏伟研究结论[17]，深色背景饱和度取值为90%，浅色背景饱和度取值范围为0%～30%，背景色样本为20个。第二组研究界面色系对视觉搜索绩效的影响，依据蒋雨妤实验取值方式[18]，结合实际工作界面色彩取值情况，主题色取值正向范围为25～215度，去掉干扰色值，主题色样本为21个。

2.1.3 实验过程

本实验共设计了两组测验，分别为可视化界面背景色明度对比测试、可视化界面主题色对比测试。每一组测验程序相同，为避免记忆效应，两组被试人员不同，具体如下所述。

第一，适应模拟的办公环境和光照，要求被试者的座椅高度调整至视线平行于正前方荧幕中心，距离为70～80厘米，对眼动仪进行校正。

第二，向被试者说明测试的设计方案，并告知具体的实验流程和界面区域位置名称。

第三，对测试设计方案进行眼动测试，在出现每一个实验样本前，告知被试者视觉目标任务信息，然后被试者捕捉设计方案上的视觉目标并回答目标任务信息，回答完成后用右手食指敲击对应键盘，出现等待画面，继续接收下一个任务信息。

第四，眼动测试完成后，被试者对主观量表进行评价。

2.2 数据采集与分析

实验数据分析使用SPSS软件，通过计算被试者的目标注视时间、注视点数、热点图数据说明信息加工难度和任务完成效率。

2.2.1 界面色彩对搜索绩效的影响

以信息检索时间为因变量，背景色和主题色为自变量，统计分析被试者完成任务的平均时间。在深色背景测试中，20位被试者平均信息检索时间最短为背景B30%，时长为1.41（±1.09）秒;在浅色背景测试中，20位被试者平均信息检索时间最短为背景S20%、B90%，时长为1.76（±0.76）秒;在深浅色背景对比测试中，被试者平均信息检索时间最短为背景S90%、B30%，时长为1.14（±1.09）秒;在色系風格测试中，20位被试者平均信息检索时间最短为主题色H35，时长为2.07（±1.81）秒。因此，背景色B30%、S90%的检索效率最高，主题色H35检索效率最高。

2.2.2 眼动数据分析结果

注视时间是指被试者在目标区域获取任务信息所消耗的时间，注视时间越短说明认知负荷越低，完成效率越高。注视点数则用于表明被试者处理信息的深度，是验证搜索绩效的重要指标，注视点数越多说明信息加工越深入。实验使用ErgoLAB眼动分析软件进行统计，将数据标准化后对比分析。

测试1：背景色明度眼动实验数据分析。

深色背景测试结果如表1所示。在深色背景明度对比中，注视时间主效应边缘较为显著（F=3.150，p=0.054），注视点数主效应边缘不显著（F=0.369，p=0.777），说明深色背景明度变化对认知负荷会有影响，对搜索绩效影响不大。样本4的平均注视时间最短，说明深色背景中B30%的获取目标信息速度最快。

浅色背景测试数据结果如表2所示。在浅色背景明度对比中，注视时间主效应边缘较为显著（F=1.888，p=0.041*），注视点数主效应边缘显著（F=2.407，p=0.008**），说明浅色背景明度变化对认知负荷和搜索绩效均有明显影响。饱和度在10%～20%范围内，明度为100%的捕捉信息速度明显低于其他明度，样本14平均注视时间最短，说明浅色背景S20%、B90%获取目标信息较快。

在深色与浅色背景明度对比中，为保障对比结果的可靠性，选择相对应的饱和度。对应数据如表3所示，深色与浅色背景明度对比的注视时间主效应边缘较为显著（F=2.713，p=0.025*），注视点数主效应边缘显著（F=5.017，p=0.001**），说明深色与浅色背景明度对比对认知负荷和搜索绩效均有明显影响。

深色与浅色背景明度对比中，深色背景整体平均注视时间明显短于浅色注视时间，说明深色背景获取目标信息效率更高。同时，深色背景平均注视时间、注视点数均明显低于浅色背景，说明深色背景比浅色背景认知负荷轻，完成效率更高，浅色背景更容易造成视觉疲劳，但浅色背景信息加工更加深入。

测试2：主题色色系风格眼动实验数据分析。

主题色测试数据结果如表4所示，在主题色色相对比中，注视时间（F=0.570，p=0.923）与注视点数（F=0.948，p=0.530）主效应边缘均不显著，即主题色变化对认知负荷、搜索绩效影响不大。样本2的平均注视时间最短，即H35获取目标信息相较于其他色相更快。

2.2.3 热点图

图1、图2分别为背景色明度对比变化和主题色色系风格对比界面眼动热点图。从中可以发现，深色背景B30%热点区域分散，非目标区域热点多，浅色背景中的红色热点区域相较于深色背景更加集中，这说明浅色比深色背景信息加工更加深入，但更容易产生视觉疲劳。同时，对比色系风格发现，蓝色界面设计方案热点区域集中。由此推测，在VDT视疲劳患者日常办公情景中，S0%～30%、B70%～100%的浅色背景，色系风格为黄绿蓝的设计方案可能更容易实现视觉聚焦。

2.3 界面色彩对VDT视疲劳患者用户体验调研与数据分析

主观量表从界面色彩的清晰度、舒适度、可用性、满意度、科技感五个角度评估。分析背景色主观量表测评结果发现，被试者对背景色变化的主观感受有非常明显的浮动，深色背景和浅色背景的清晰度、满意度相差不大，但在舒适度方面，深色背景更加稳定，可用性更强，科技感最强。分析主题色主观量表测评结果发现，被试者对不同界面色彩风格的主观偏好高度一致，在五个主观指标中，色相165～205度范围内评分明显高于其他色相范围。

3 多维遥感数据分析处理与服务平台设计

为给VDT视疲劳患者提供更舒适的界面视觉体验，多维遥感数据分析处理与服务平台项目结合眼动实验结果与主观测试结果，使用最终优化方案，背景色B20%、主题色H180为基础，结合实际效果进行优化设计，优化后的界面如图3所示。

然后，对优化后的可视化界面再次进行眼动评估，实验环境为真实的工作环境，实验流程不变。验证结果见表5，优化后的数据界面的搜索绩效明显高于优化前的界面。该案例证明，优化后的界面是有效的。

4 结语

VDT视疲劳患者需要长期使用数据界面完成工作任务，本研究利用眼动追踪技术提升VDT视疲劳患者视觉体验，并探索界面色彩设计规律。以下为研究结论：可视化数据界面色彩设计对VDT视疲劳患者视觉搜索绩效有显著影响;深色背景B30%，浅色背景B90%的视觉搜索绩效最佳;深色背景界面认知负荷较轻，浅色背景界面更加简洁，大幅提高了VDT视疲劳患者的搜索绩效和工作效率。因此，设计师在设计可视化数据界面时，应当综合考虑VDT视疲劳患者的视觉搜索绩效和长时间的使用体验。

参考文献：

[1] 高红，许立清.VDT视疲劳的诊治[J].西南国防医药，2002（3）：244-245.

[2] 金茹娜，吴丹巍. 776例在职医护人员视频显示终端视疲劳现状分析[J].中国医药导刊，2014，16（3）：375-376.

[3] 杨超男.色彩的心理效应在扁平化设计风格界面中的研究与应用[D].西安：西安工程大学，2016.

[4] 張德乾，张智君，仰和芝. VDT界面颜色视觉工效：色调因素对视觉绩效的影响[J].心理科学，2008（2）：328-331，327.

[5] 宫勇，张三元，沈法，等.色彩构成对图形符号视觉搜索效率的影响[J].计算机辅助设计与图形学学报，2016，28（7）：1115-1120.

[6] 冯纾，王军锋，蔡勇，等.低光照度下人机界面背景色眼动分析评价研究[J].计算机工程与应用，2020，56（4）：262-267.

[7] 陆菁，刘渊，张晓婷，等.基于用户体验的数据可视化模型研究[J].包装工程，2016，37（2）：52-56.

[8] 吕阳.基于视觉思维的用户界面信息可视化设计研究[D].上海：华东理工大学，2015.

[9] 黄红燕.基于用户体验的WEB界面色彩设计研究[D].广州：广东工业大学，2014.

[10] 孙博文，杨建明，孙远波，等.基于眼动实验的车辆人机界面色彩设计研究[J].包装工程，2019，40（2）：23-30.

[11] 丁一，郭伏，胡名彩，等.用户体验国内外研究综述[J].工业工程与管理，2014，19（4）：92-97，114.

[12] 陈学强，黄黎清，李明珠.城际物流APP界面导航设计的视觉搜索绩效研究[J].包装工程，2021，42（8）：198-204.

[13] 栗觅，钟宁，吕胜富. Web页面视觉搜索与浏览策略的眼动研究[J].北京工业大学学报，2011，37（5）：773-779.

[14] 宫勇，张三元，刘志方，等.颜色对图标视觉搜索效率影响的眼动研究[J].浙江大学学报（工学版），2016，50（10）：1987-1994.

[15] 刘青，薛澄岐，法尔克·霍恩.基于眼动跟踪技术的界面可用性评估[J].东南大学学报（自然科学版），2010，40（2）：331-334.

[16] 唐佩璐，李娟.基于眼动视觉跟踪技术的新闻类APP界面可用性研究[J].包装工程，2019，40（14）：247-252.

[17] 肖宏伟，蒋长江，翟家兴.基于液晶显示器的色彩舒适度研究[J].信息技术与信息化，2016（7）：112-115.

[18] 蒋雨妤.儿童对图形符号色彩差异认知的工效研究[D].绵阳：西南科技大学，2020.

作者简介：王伟伟（1983—），男，山西长治人，博士，教授，研究方向：用户体验与交互设计、传统文化创意设计。

武桐（1991—），女，陕西西安人，硕士在读，研究方向：品牌形象与视觉传达。