基于視覺傳達的電子設備人機界面色彩設計

吳偉

摘 ?要： 采用新型儲能變流器的電子設備人機界面色彩設計方法，未增強界面圖像的顯示效果，導致界面的關注時長較短，文中提出基于視覺傳達的電子設備人機界面色彩設計方法。基于視覺傳達的視覺信息認知分為輸入信息、信息認知加工、認知決策和行為反應，通過多次加工后的輸入信息促使視覺元素具備意識和情緒狀態，電子設備使用者根據人機界面視覺信息做出決策;在此基礎上采用多分辨多尺度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.