基于视觉传达的电子设备人机界面色彩设计

吴伟

摘  要： 采用新型储能变流器的电子设备人机界面色彩设计方法，未增强界面图像的显示效果，导致界面的关注时长较短，文中提出基于视觉传达的电子设备人机界面色彩设计方法。基于视觉传达的视觉信息认知分为输入信息、信息认知加工、认知决策和行为反应，通过多次加工后的输入信息促使视觉元素具备意识和情绪状态，电子设备使用者根据人机界面视觉信息做出决策;在此基础上采用多分辨多尺度Retinex算法，增强人机界面图像的色彩显示效果，设计灯光信号色彩，分析不同电子设备人机界面光电信号色彩的搭配，使人机界面色彩符合使用需求，色彩编码过程通过分割错觉调整人机界面视觉比例，提升人机界面的视觉关注度。实验结果表明，所提方法设计电子设备人机登入界面和主程序界面的平均注视时长均为9.5 s，使用者的视觉专注度较高，是一种有效的电子设备人机界面色彩设计方法。

关键词： 视觉传达; 电子设备; 人机界面; 色彩设计; 信息认知加工; 多分辨多尺度Retinex算法

中图分类号： TN99?34; TB472                   文献标识码： A                    文章编号： 1004?373X（2019）10?0156?05

Design of human?computer interface color based on visual

communication for electronic equipment

WU Wei

（Qingdao University of Science & Technology， Qingdao 266061， China）

Abstract： A color design method for the human?computer interface of the electronic equipment using a new energy storage converter cannot enhance the display effect of the interface image， resulting in short time duration of interface attention. Therefore， a human?computer interface color design method based on visual communication is proposed for electronic equipment. The visual information recognition based on visual communication is divided into information input， information cognitive processing， cognitive decision?making， and behavioral response. The input information after many times of processing makes the visual elements have consciousness and emotional states. The electronic equipment users make decisions according to the visual information of the human?computer interface. On this basis， the multi?resolution multi?scale Retinex algorithm is adopted to enhance the color display effects of human?computer interface images. The color of light signals is designed and the photoelectric signal color collocation is analyzed for the human?computer interfaces of different electronic devices， so as to make the color of the human?computer interface comply with the usage requirement. The visual ratio of the human?computer interface is adjusted by using the segmentation illusion during the color coding process， so as to improve the visual attention degree of the human?computer interface. The experimental results show that the electronic equipment designed by the proposed method has an average attention time duration of 9.5 s for the human?computer login interface and main program interface， and a high visual concentration degree of users， which is an effective human?computer interface color design method of electronic equipment.

Keywords： visual communication; electronic equipment; human?computer interface; color design; information cognitive processing; multi?resolution multi?scale Retinex algorithm

人们获取电子设备运行状态的信息大部分来自于人机界面中各要素的视觉表达，视觉认知即采用视觉对所见之物进行辨别、理解和判决，该过程除视觉上获取的信息外，还需要人脑对所获取信息的多次加工，得到事物的整体情况[1]。人机界面是人机交互技术的重要组成，该界面表现出各种视觉信息为使用者的判断提供依据，电子设备的人机界面具有结构复杂、多维表现和海量信息的特点。色彩是人眼最灵敏的视觉感知信息，人机界面色彩设计的好坏直接决定着人机界面使用的效果。人机界面设计中的色彩不是越多越好，人机界面色彩设计的目的为加强使用者的视觉效果[2]。人机界面中色彩的有效设计对提升使用者在信息感知方面的能力有较强帮助，可提升任务的执行效率。

以往采用图元火控系统和新型储能变流器的电子设备人机界面色彩设计方法，设计出的电子设备人机界面的关注时长较短，使用者无法高效率地执行任务，而采用视觉传达技术可根据人体视觉信息的传达[3]，设计符合使用者的人机界面色彩。

1  基于视觉传达的电子设备人机界面色彩设计

1.1  基于视觉传达的视觉信息认知

视觉信息的认知是指使用者在电子设备人机界面操作时，所具备的理解、判断和决策等信息处理过程。视觉信息的认知流程接近计算机的工作原理，使用者在电子设备人机界面中完成视觉信息的加工和认知，且人机界面中的信息不断更新，促进使用者在电子设备人机界面中完成具体任务[4]。电子设备人机界面中视觉信息的输入、输出和决策为复杂的认知过程，使用者与人机界面的信息交流需确保界面信息有效的传递给使用者，便于使用者快速地对相应的信息给出具体的分析和决策。

视觉信息传达流程如图1所示，分为输入信息、信息认知加工、决策和行为反应四部分。人机界面中的信息应服务人体的感官，人体根据感知到的各种信息得到短暂的记忆印象[5]，即图1中的输入信息;在经过多次加工后的输入信息促使视觉元素具有一定的意识和情绪状态，使用者依照自己的经验知识检索出这些状态，然后做出有效的判断和决定;依照做出的判决，使用者针对电子设备人机界面给出的信息做出实际反应。

图1  视觉信息认知流程

1.2  电子设备人机界面色彩设计

电子设备人机界面中显示的信息为图像信息，视觉信息认知中，信息刺激包括色彩，在电子设备人机界面图像色彩设计中，需要同时协调电子设备控制器、显示器与人体运动器官、感官的关系，其关联电子设备与使用者对应关系的认知和匹配关系，因为色彩颜色在电子设备的面板控制、外部操作和编码方面作用显著[6]。因此，说明电子设备人机界面的色彩设计是确保电子设备稳定工作的关键环节。对电子设备人机界面色彩的设计包括面板色彩处理、灯光信号色彩处理和电子设备色彩编码三部分。

1.2.1  界面面板色彩处理

电子设备人机界面色彩设计均关系到界面的注目性和能见度，对界面色彩的设计需要设计者根据不同的电子设备具体做出设计。电子设备前部面板的颜色可选择明亮度较差的淡蓝色，在面板关键区域的显示可选择颜色较突出的明亮颜色，但电子设备的接口插件和控制器等均属于常用的零件，用明亮的颜色显示可能造成人机界面的不协调[7]。可采用底色相近，色彩亮度相差较大的色彩表示显示区域和电子设备的控制区域，以提升电子设备人机界面的协调性。

采用多分辨多尺度 Retinex（Multi Resolution and Multi Scale Retinex，MRMSR） 算法，可增强电子设备人机界面图像的显示效果，该算法具体采用直方图自动截断拉伸操作，根据设置适当的截断值来改善图像的拉伸效果，增强图像的显示效果，截断拉伸公式为：

[Tout=0，                            TinThigh] （1）

式中：[Tin]和[Tout]分別为界面色彩通道的输入和输出值;[emax]表示界面图像输出的最大动态范围值，该值为254;[Thigh]和[Tlow]分别表示直方图的上限和下限截点，其表达式为：

[Thigh=α+hβTlow=α-hβ]   （2）

式中，[α]和[β]分别表示人机界面图像色彩通道的均值和标准差，且公式中常数h的取值严重影响着界面图像色彩的增强效果[8]，存在h值越大界面色彩均衡度较高、亮度信息较低和界面图像模糊的现象，将该参数称为图像增强分辨度参数。

根据参数h对人机界面图像色彩增强效果的影响，且高斯环绕尺度[c]与h间存在图像互补特性，因此采用多分辨多尺度Retinex算法提升电子设备人机界面彩色图像增强算法，计算过程如下：[r（x，y）=qw?w，qQ·S（x，y）-W·Fx，y] （3）

式中：[r（x，y）]为增强后的人机界面色彩图像;[S（x，y）]为人机界面的原始色彩图像;函数[F（x，y）]为中心环绕函数;[Q]为多分辨的数量;[W]为环绕函数的数量;权值[?]为：

[?w，q=1W·Q]   （4）

多分辨多尺度 Retinex算法的计算过程为：

1） 将原始的人机界面色彩图像分解为红色（R）、蓝色（B）和绿色（G）三种分量图，将三种分量用对数表示。

2） 采用中心/环绕高斯函数构建W个尺度不同高、中、低的高斯/中心环绕函数。

3） 根据步骤2）中构建的高斯/中心环绕函数对步骤1）中三种分量的对数表达实施滤波处理，并完成对入射图像的估算和反射图像的计算。

4） 假设共有Q个h值，则采用式（1）和式（2）拉伸步骤3）获取的反射图像的三种分量。

5） 采用式（3）和式（4）计算出人机界面图像的色彩增强图像。

1.2.2  灯光信号色彩设计

在电子设备人机界面色彩的设计过程中，高效准确地传递出灯光信号的含义对电子设备的正常运行和用户正常的使用极其重要[9]。电子设备人机界面传递的灯光信号可表达不同的视觉信息，例如红色可表示紧急撤离、绿色表示设备正常运行等。表1为电子设备人机界面色彩设计中灯光信号的分类结果。

电子设备人机界面设计应在满足功能需求的基础上，尽量具备较强的色彩饱和度，提升人机界面的宜人度。合理有效地搭配人机界面的色彩，选择合适的灯光信号颜色是电子设备人机界面设计的关键，因此需针对不同电子设备具体分析其人机界面光电信号色彩的搭配情况，满足人机界面使用的需求。

1.2.3  色彩编码

色彩不仅可以用作表现电子设备的产品特质，通过不同的色彩搭配吸引使用者的眼球，也可提升电子设备的工作能力。电子设备人机界面中的各种程序可通过不同色彩来突出显示[10]，以缩短使用者寻找各种程序或控制软件的用时。程序或软件色彩的选择应结合界面的背景颜色，对界面显示的程序或软件色彩安排时，可根据界面的色调、对比度、饱和度和功能划分来安排。

电子设备通常的工作环境为工厂等环境，其颜色的安排应主要以中性色的灰色为主，可为使用者带来电子设备稳重和性能强的视觉感觉，不可过于鲜艳和沉闷。而有些电子设备人机界面的比例设计不十分协调，可通过在界面中设置色带横向划分界面，利用分割错觉调整人机界面的视觉比例，提升人机界面的视觉关注度。

2  实验分析

实验仿真分析本文方法的实际应用效果，将本文方法实际应用到电子设备人机界面的色彩设计中，对电子设备人机界面色彩设计质量进行评价，且为突出本文方法的性能优势，将采用图元火控系统的人机界面色彩设计方法和采用新型储能变流器的人机界面色彩设计方法的界面色彩设计结果为实验参照。

通过眼球追踪实验来验证三种方法的电子设备人机界面色彩设计效果，具体实验步骤如下：

1） 在某艺术设计院校中随机选取20位大学生为界面设计效果测试对象，样本中包括男女学生各10名;

2） 选择Eyeso Glasses眼球追踪装置、液晶显示屏和图形工作站为实验设备;

3） 实验材料包括6种不同的界面，实验主要研究电子设备的人机登入界面和主程序界面;

4） 实验初始时，人机显示界面呈现一种界面状态，且每次成像时间间隔为10 s，测试对象在无任何干扰的情况下观察电子设备人机显示界面，眼球追踪装置将准确记录测试对象的界面注视时间和眼球移动情况。

有效记录眼球追踪装置获取20位测试对象观察界面的用时情况，3种方法设计的电子设备登入界面和主程序界面注视时间分别如表2和表3所示，且为突出比较表中数据的差异性，分别将表2和表3数据用图2和图3表示。

分析表2和图2实验结果可以看出，电子设备人机界面色彩的设计，测试对象对采用不同方法设计的登录界面注视时长相差较大。图2中采用本文方法设计登入界面的注视时长曲线在最上方，最高点为9.9 s，说明该测试对象对采用本文方法设计的登录界面的关注度极高，界面的色彩视觉效果好;采用图元火控系统设计登录界面的注视时长居中，该方法设计界面的最长注视时间为7.7 s，测试对象对该界面的关注度较差;采用新型储能变流器设计界面的注视时长最短，最长注视时间也不到6 s，说明该登录界面的色彩视觉效果较差，测试对象无法较长时间关注该界面。

圖2  登入界面的注视时长曲线

测试对象对图元火控系统的电子设备人机界面色彩设计方法和新型储能变流器的设计方法设计的登录界面平均注视时长分别为7.1 s和5.6 s。说明超出该时间后人眼的关注点发生转移，对人机界面显示信息的关注降低，不利于使用者完成既定的任务。本文方法设计界面的平均注视时长为9.5 s，注视时长高于另外两种方法设计的界面，可较长时间地理解界面的信息，促进任务的有效执行。本文方法设计电子设备人机界面的注视时长较长是因为：在选择灯光信号的颜色前，先对界面面板色彩进行处理，增强界面的色彩显示效果，界面的协调性大大增强，有效提升使用者的界面注视用时，吸引测试对象的能力较强。

分析表3得出，测试对象对采用本文方法设计主程序界面的注视时间较长，最长注视时间可达到9.7 s，而采用图元火控系统设计界面和采用新型储能变流器设计界面的注视时长最高分别为6.8 s和6.6 s，分别低于采用本文方法设计的主程序界面注视时间2.9 s和3.1 s，说明采用本文方法设计的主程序界面的吸引力强，实验测试对象的注视时间长，满意度高。分析图3三条曲线可以看出，采用本文方法设计的电子设备人机主程序界面的注视时长曲线在最上方。采用新型储能变流器的设计的主程序界面的注视时长最短，且不同测试对象对主程序界面的注视时长差异较大，说明该界面吸引测试对象关注度能力差，界面的色彩视觉显著性较差。

图3  主程序界面的注视时长曲线

3  结  论

本文针对电子设备人机交互界面高关注度的设计需求，提出基于视觉传达的电子设备人机界面色彩设计方法。根据视觉传达中视觉信息的认知流程，先理解人机界面所传达的信息;然后对信息进行记忆、理解和判断，根据自身的判断结果做出有效决策和适当的行为。电子设备人机界面传达的信息为图像，增强图像的显示效果有助于提升界面的关注度。本文采用的多分辨多尺度Retinex算法，可有效运算电子设备人机界面图像色彩，且在进行灯光信号色彩设计时通过不同的色彩搭配吸引使用者的眼球，提升电子设备的工作效率。

本文提出基于视觉传达的电子设备人机界面色彩设计方法，是一种有效的人机界面色彩设计方法，在提升电子设备使用者的关注度上具有极佳的效果。

参考文献

[1] 邓霞.一种新型储能变流器的人机界面设计方法与实现[J].电测与仪表，2016，53（4）：97?101.

DENG Xia. A novel design and implementation method of human machine interface for power storage converter [J]. Electrical measurement & instrumentation， 2016， 53（4）： 97?101.

[2] 马莉，王建国，韦勇宇，等.基于图元的火控系统人机交互界面的实现[J].火力与指挥控制，2017，42（7）：170?174.

MA Li， WANG Jianguo， WEI Yongyu， et al. Realization of the human?computer interaction interface of fire control system based on graphic element [J]. Fire control & command control， 2017， 42（7）： 170?174.

[3] 汪惟宝，陈为龙.交通标示颜色的视觉传达作用仿真分析[J].计算机仿真，2016，33（7）：351?354.

WANG Weibao， CHEN Weilong. Traffic sign color visual communication function simulation analysis [J]. Computer simulation， 2016， 33（7）： 351?354.

[4] 李科，岳林，惠子南，等.基于Qt跨平台的车载人机界面设计[J].铁道标准设计，2017，61（9）：128?132.

LI Ke， YUE Lin， HUI Zinan， et al. Design of on?board driver machine interface based on Qt cross?platform software [J]. Railway standard design， 2017， 61（9）： 128?132.

[5] 周井玲，翟春树，杨苏云，等.陶瓷球计数装袋机控制系统及界面设计[J].电气传动，2015，45（11）：50?53.

ZHOU Jingling， ZHAI Chunshu， YANG Suyun， et al. Design of ceramic ball counting package machine control system and interface [J]. Electric drive， 2015， 45（11）： 50?53.

[6] 赵慧亮，何林，林丽.数字化人机界面的多目标意象设计决策研究[J].工程设计学报，2016，23（1）：28?34.

ZHAO Huiliang， HE Lin， LIN Li. The decision making on multi?image design for digital human?machine interface [J]. Chinese journal of engineering design， 2016， 23（1）： 28?34.

[7] 关淯尹，耿心.飞行模拟系统人机交互设计[J].计算机工程与应用，2017，53（23）：230?235.

GUAN Yuyin， GENG Xin. Design of human?computer interaction for flight simulation system [J]. Computer engineering and applications， 2017， 53（23）： 230?235.

[8] 邵婷，李光琛，张文兴，等.舰炮瞄准装置操控界面优化设计[J].火炮发射与控制学报，2016，37（3）：76?79.

SHAO Ting， LI Guangchen， ZHANG Wenxing， et al. Manipulation interface optimized design of aiming devices of naval gun [J]. Journal of gun launch & control， 2016， 37（3）： 76?79.

[9] 陈述，蒙锦涛，王建平，等.三峡升船机中控室人机界面的适配性研究[J].人民长江，2017，48（19）：110?115.

CHEN Shu， MENG Jintao， WANG Jianping， et al. Adaptability of human?machine interface for central room of Three Gorges ship lift [J]. Yangtze River， 2017， 48（19）： 110?115.

[10] 张宝，丁敏，李燕杰.基于视觉感知强度的人机交互界面优化设计[J].中国机械工程，2016，27（16）：2196?2202.

ZHANG Bao， DING Min， LI Yanjie. Optimization design of human machine interaction interface based on visual perception [J]. China mechanical engineering， 2016， 27（16）： 2196?2202.