面向數據界面的色彩影響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—），女，陜西西安人，碩士在讀，研究方向：品牌形象與視覺傳達。