王偉偉 武桐

摘要：隨著數(shù)據(jù)可視化技術(shù)的廣泛應(yīng)用，用戶長時間使用可視化界面的情景變得越來越普遍，特別是對VDT（Visual Display Terminal）視疲勞患者而言，界面設(shè)計質(zhì)量對辦公視覺搜索績效的影響日益顯著。色彩是數(shù)據(jù)界面設(shè)計的重要因素之一，基于此，文章采用眼動追蹤技術(shù)，根據(jù)注視時間、注視點、熱點圖等眼動數(shù)據(jù)，結(jié)合VDT視疲勞患者的主觀感受評估結(jié)果數(shù)據(jù)，研究不同色彩對VDT視疲勞患者視覺體驗的影響情況，并將相關(guān)結(jié)果應(yīng)用于實際的設(shè)計過程，提升VDT視疲勞患者在使用數(shù)據(jù)可視化結(jié)果時的搜索績效和視覺體驗。

關(guān)鍵詞：數(shù)據(jù)界面;眼動追蹤;VDT患者;視覺體驗;搜索績效

中圖分類號：TP393.092 文獻(xiàn)標(biāo)識碼：A 文章編號：1004-9436（2022）19-000-05

近年來，數(shù)據(jù)可視化系統(tǒng)廣泛應(yīng)用于政府部門、企業(yè)等各個領(lǐng)域，已成為管理數(shù)據(jù)的有效工具。VDT（Visual Display Terminal）視疲勞指由于長時間操作視屏顯示終端而引起的雙眼干澀、疼痛、視朦、頭痛、頸部及四肢麻等一系列眼部和全身癥狀[1]。在倡導(dǎo)無紙化辦公的大環(huán)境下，VDT視疲勞患者大幅增加，VDT視疲勞已對VDT作業(yè)人員造成嚴(yán)重困擾。金茹娜等人研究發(fā)現(xiàn)，在職醫(yī)護(hù)人員的VDT視疲勞發(fā)生率達(dá)52.3%[2]。大量的VDT視疲勞患者需要長時間注視電腦端可視化界面，獲取圖表數(shù)據(jù)信息。良好的可視化界面設(shè)計可以提升VDT視疲勞患者的數(shù)字辦公體驗，提高他們的工作效率和準(zhǔn)確性。

色彩是可視化界面視覺體驗的基本要素，是決定人機交互界面設(shè)計成功與否的關(guān)鍵因素[3]。張德乾等通過計算機辨別字符反應(yīng)的方法，探索了448種目標(biāo)色—背景色具體匹配條件? 下的視覺辨別反應(yīng)時間，指出顏色視覺績效取決于前景色和背景色以及亮度水平的具體匹配[4]。宮勇通過視覺搜索實驗發(fā)現(xiàn)，增加色彩數(shù)量會在一定程度上降低圖形符號的視覺搜索效率，而利用色彩拉大圖形符號之間的差異，則能大幅度提升圖形符號的視覺搜索效率[5]。馮紓等通過眼動實驗得到，在1.0～3.5 lux光照條件下，低明度背景色人機界面的視覺工效優(yōu)于高明度背景色人機界面[6]?？傊?，界面背景色的明度和前景色對視覺績效和體驗有顯著影響，本文通過綜合分析注視時間、注視點、熱點圖等眼動數(shù)據(jù)和參與者的主觀感受數(shù)據(jù)，探索面向VDT視疲勞患者的人機界面背景明度和前景色設(shè)計規(guī)律，以提升VDT視疲勞患者群體的視覺體驗和搜索績效。

1 數(shù)據(jù)界面的用戶體驗與視覺搜索績效

1.1 數(shù)據(jù)界面用戶體驗

數(shù)據(jù)界面用戶體驗指目標(biāo)用戶在特定環(huán)境下認(rèn)識、使用數(shù)據(jù)界面過程中獲得的全部感受，包含功能規(guī)劃、信息構(gòu)架與設(shè)計、交互設(shè)計、視覺設(shè)計等層面，其中視覺設(shè)計與用戶關(guān)系最為密切。在杰西·詹姆斯·加勒特的用戶體驗要素模型中，視覺設(shè)計共包含位置、明暗、形狀、顏色等要素[7]。呂陽等提出，在可視化用戶界面中，色彩的象征性、色彩和圖形對應(yīng)關(guān)系、色彩搭配對用戶的視覺體驗都有非常重要的影響[8]。黃紅燕指出，色彩作為界面第一視覺要素，直接影響用戶體驗的成敗[9]?？梢姡试刂苯佑绊懹脩魧缑娴囊曈X感受，用戶對色彩的捕捉和反應(yīng)效能大于形狀、文字等其他元素[10]，它是影響數(shù)據(jù)界面用戶體驗最基礎(chǔ)、最主要的元素。

1.2 視覺搜索績效

視覺搜索績效是指通過眼睛去尋找特定目標(biāo)所用的時間及準(zhǔn)確率。用戶通過數(shù)據(jù)界面進(jìn)行視覺搜索并完成工作任務(wù)，工作效率取決于界面信息檢索獲取的速度。在信息時代，視覺搜索績效已成為人機交互過程中影響用戶體驗的重要因素之一。注視行為能夠反映用戶體驗的好壞[11]，陳學(xué)強從眼動實驗角度分析了用戶搜索效率[12]，發(fā)現(xiàn)提高搜索績效能改善用戶體驗，減輕認(rèn)知負(fù)荷。用戶在視覺搜索時心理負(fù)荷較重，界面中的干擾信息容易影響搜索效率[13]，宮勇等通過視覺搜索實驗研究發(fā)現(xiàn)，顏色數(shù)量和一致性對圖標(biāo)視覺搜索績效有顯著影響[14]。視覺搜索績效與用戶體驗相互影響，用戶在搜索過程中認(rèn)知、記憶、思考，完成任務(wù)，用戶體驗則經(jīng)歷了對可視化系統(tǒng)的感知，通過操作滿足任務(wù)需求，對系統(tǒng)形成操作習(xí)慣。

1.3 眼動追蹤技術(shù)與視覺體驗評價

眼動追蹤技術(shù)是指度量凝視點或測量眼球相對運動軌跡的技術(shù)，即通過眼動追蹤儀記錄在可視點上最活躍的區(qū)域和每只眼睛的運動。眼動追蹤技術(shù)是視覺體驗和界面設(shè)計優(yōu)劣的主要評測手段，相較于傳統(tǒng)的推測和調(diào)查用戶喜好等方法，其在準(zhǔn)確性方面具有明顯的優(yōu)勢。薛澄岐等指出，眼動追蹤技術(shù)的應(yīng)用為界面可用性測試提供了一種有效的判斷方法[15];唐佩璐等利用眼動追蹤測試的客觀數(shù)據(jù)，為新聞類APP的界面設(shè)計提供了普適性的設(shè)計意見[16];栗覓等通過眼動追蹤技術(shù)，研究網(wǎng)絡(luò)頁面視覺搜索和瀏覽的視覺特征和對應(yīng)策略的差異，通過瞳孔直徑變化可以監(jiān)測用戶視覺搜索行為[13]，為界面設(shè)計提供了數(shù)據(jù)支撐和參考。

2 數(shù)據(jù)界面色彩視覺搜索績效研究

2.1 界面色彩影響視覺搜索績效的眼動實驗

2.1.1 實驗準(zhǔn)備

眼動儀型號為Tobii X2-30，采樣率為30赫茲，延遲時間為50～70毫秒，精準(zhǔn)度為0.5～1度。實驗過程中讓被試者選擇日常辦公的舒適坐姿，保持身體穩(wěn)定。實驗共邀請40名被試者，其中男性20名，女性20名，年齡在23～31歲之間，均為長期使用可視化界面的工作人員，矯正視力1.0以上，無任何隱形視力問題。實驗環(huán)境模擬辦公環(huán)境和光照，使VDT視疲勞患者設(shè)想為日常工作，完成工作任務(wù)。

2.1.2 實驗素材處理

為保證實驗結(jié)論的實操性和有效性，界面左右模塊依據(jù)實際工作界面設(shè)計，設(shè)置相同常見的圖表形式，確保任務(wù)點到中心點距離相同，界面尺寸分辨率為1920*1080。界面色彩采用HSB（H色相、S飽和度、B明度）模式，通過控制定量與變量，獲取符合實驗?zāi)繕?biāo)的色彩值。

實驗樣本分為兩組。第一組研究背景色明度對視覺搜索績效的影響，明度以黑白為參考，每三個色階為一個等級，分為高、中、低三個等級。其中，中明度40%～60%屬于灰色范圍，因此深色背景和淺色背景明度分別取值0%～30%和70%～100%。由于深色背景飽和度顯示效果差異不大，結(jié)合肖宏偉研究結(jié)論[17]，深色背景飽和度取值為90%，淺色背景飽和度取值范圍為0%～30%，背景色樣本為20個。第二組研究界面色系對視覺搜索績效的影響，依據(jù)蔣雨妤實驗取值方式[18]，結(jié)合實際工作界面色彩取值情況，主題色取值正向范圍為25～215度，去掉干擾色值，主題色樣本為21個。

2.1.3 實驗過程

本實驗共設(shè)計了兩組測驗，分別為可視化界面背景色明度對比測試、可視化界面主題色對比測試。每一組測驗程序相同，為避免記憶效應(yīng)，兩組被試人員不同，具體如下所述。

第一，適應(yīng)模擬的辦公環(huán)境和光照，要求被試者的座椅高度調(diào)整至視線平行于正前方熒幕中心，距離為70～80厘米，對眼動儀進(jìn)行校正。

第二，向被試者說明測試的設(shè)計方案，并告知具體的實驗流程和界面區(qū)域位置名稱。

第三，對測試設(shè)計方案進(jìn)行眼動測試，在出現(xiàn)每一個實驗樣本前，告知被試者視覺目標(biāo)任務(wù)信息，然后被試者捕捉設(shè)計方案上的視覺目標(biāo)并回答目標(biāo)任務(wù)信息，回答完成后用右手食指敲擊對應(yīng)鍵盤，出現(xiàn)等待畫面，繼續(xù)接收下一個任務(wù)信息。

第四，眼動測試完成后，被試者對主觀量表進(jìn)行評價。

2.2 數(shù)據(jù)采集與分析

實驗數(shù)據(jù)分析使用SPSS軟件，通過計算被試者的目標(biāo)注視時間、注視點數(shù)、熱點圖數(shù)據(jù)說明信息加工難度和任務(wù)完成效率。

2.2.1 界面色彩對搜索績效的影響

以信息檢索時間為因變量，背景色和主題色為自變量，統(tǒng)計分析被試者完成任務(wù)的平均時間。在深色背景測試中，20位被試者平均信息檢索時間最短為背景B30%，時長為1.41（±1.09）秒;在淺色背景測試中，20位被試者平均信息檢索時間最短為背景S20%、B90%，時長為1.76（±0.76）秒;在深淺色背景對比測試中，被試者平均信息檢索時間最短為背景S90%、B30%，時長為1.14（±1.09）秒;在色系風(fēng)格測試中，20位被試者平均信息檢索時間最短為主題色H35，時長為2.07（±1.81）秒。因此，背景色B30%、S90%的檢索效率最高，主題色H35檢索效率最高。

2.2.2 眼動數(shù)據(jù)分析結(jié)果

注視時間是指被試者在目標(biāo)區(qū)域獲取任務(wù)信息所消耗的時間，注視時間越短說明認(rèn)知負(fù)荷越低，完成效率越高。注視點數(shù)則用于表明被試者處理信息的深度，是驗證搜索績效的重要指標(biāo)，注視點數(shù)越多說明信息加工越深入。實驗使用ErgoLAB眼動分析軟件進(jìn)行統(tǒng)計，將數(shù)據(jù)標(biāo)準(zhǔn)化后對比分析。

測試1：背景色明度眼動實驗數(shù)據(jù)分析。

深色背景測試結(jié)果如表1所示。在深色背景明度對比中，注視時間主效應(yīng)邊緣較為顯著（F=3.150，p=0.054），注視點數(shù)主效應(yīng)邊緣不顯著（F=0.369，p=0.777），說明深色背景明度變化對認(rèn)知負(fù)荷會有影響，對搜索績效影響不大。樣本4的平均注視時間最短，說明深色背景中B30%的獲取目標(biāo)信息速度最快。

淺色背景測試數(shù)據(jù)結(jié)果如表2所示。在淺色背景明度對比中，注視時間主效應(yīng)邊緣較為顯著（F=1.888，p=0.041*），注視點數(shù)主效應(yīng)邊緣顯著（F=2.407，p=0.008**），說明淺色背景明度變化對認(rèn)知負(fù)荷和搜索績效均有明顯影響。飽和度在10%～20%范圍內(nèi)，明度為100%的捕捉信息速度明顯低于其他明度，樣本14平均注視時間最短，說明淺色背景S20%、B90%獲取目標(biāo)信息較快。

在深色與淺色背景明度對比中，為保障對比結(jié)果的可靠性，選擇相對應(yīng)的飽和度。對應(yīng)數(shù)據(jù)如表3所示，深色與淺色背景明度對比的注視時間主效應(yīng)邊緣較為顯著（F=2.713，p=0.025*），注視點數(shù)主效應(yīng)邊緣顯著（F=5.017，p=0.001**），說明深色與淺色背景明度對比對認(rèn)知負(fù)荷和搜索績效均有明顯影響。

深色與淺色背景明度對比中，深色背景整體平均注視時間明顯短于淺色注視時間，說明深色背景獲取目標(biāo)信息效率更高。同時，深色背景平均注視時間、注視點數(shù)均明顯低于淺色背景，說明深色背景比淺色背景認(rèn)知負(fù)荷輕，完成效率更高，淺色背景更容易造成視覺疲勞，但淺色背景信息加工更加深入。

測試2：主題色色系風(fēng)格眼動實驗數(shù)據(jù)分析。

主題色測試數(shù)據(jù)結(jié)果如表4所示，在主題色色相對比中，注視時間（F=0.570，p=0.923）與注視點數(shù)（F=0.948，p=0.530）主效應(yīng)邊緣均不顯著，即主題色變化對認(rèn)知負(fù)荷、搜索績效影響不大。樣本2的平均注視時間最短，即H35獲取目標(biāo)信息相較于其他色相更快。

2.2.3 熱點圖

圖1、圖2分別為背景色明度對比變化和主題色色系風(fēng)格對比界面眼動熱點圖。從中可以發(fā)現(xiàn)，深色背景B30%熱點區(qū)域分散，非目標(biāo)區(qū)域熱點多，淺色背景中的紅色熱點區(qū)域相較于深色背景更加集中，這說明淺色比深色背景信息加工更加深入，但更容易產(chǎn)生視覺疲勞。同時，對比色系風(fēng)格發(fā)現(xiàn)，藍(lán)色界面設(shè)計方案熱點區(qū)域集中。由此推測，在VDT視疲勞患者日常辦公情景中，S0%～30%、B70%～100%的淺色背景，色系風(fēng)格為黃綠藍(lán)的設(shè)計方案可能更容易實現(xiàn)視覺聚焦。

2.3 界面色彩對VDT視疲勞患者用戶體驗調(diào)研與數(shù)據(jù)分析

主觀量表從界面色彩的清晰度、舒適度、可用性、滿意度、科技感五個角度評估。分析背景色主觀量表測評結(jié)果發(fā)現(xiàn)，被試者對背景色變化的主觀感受有非常明顯的浮動，深色背景和淺色背景的清晰度、滿意度相差不大，但在舒適度方面，深色背景更加穩(wěn)定，可用性更強，科技感最強。分析主題色主觀量表測評結(jié)果發(fā)現(xiàn)，被試者對不同界面色彩風(fēng)格的主觀偏好高度一致，在五個主觀指標(biāo)中，色相165～205度范圍內(nèi)評分明顯高于其他色相范圍。

3 多維遙感數(shù)據(jù)分析處理與服務(wù)平臺設(shè)計

為給VDT視疲勞患者提供更舒適的界面視覺體驗，多維遙感數(shù)據(jù)分析處理與服務(wù)平臺項目結(jié)合眼動實驗結(jié)果與主觀測試結(jié)果，使用最終優(yōu)化方案，背景色B20%、主題色H180為基礎(chǔ)，結(jié)合實際效果進(jìn)行優(yōu)化設(shè)計，優(yōu)化后的界面如圖3所示。

然后，對優(yōu)化后的可視化界面再次進(jìn)行眼動評估，實驗環(huán)境為真實的工作環(huán)境，實驗流程不變。驗證結(jié)果見表5，優(yōu)化后的數(shù)據(jù)界面的搜索績效明顯高于優(yōu)化前的界面。該案例證明，優(yōu)化后的界面是有效的。

4 結(jié)語

VDT視疲勞患者需要長期使用數(shù)據(jù)界面完成工作任務(wù)，本研究利用眼動追蹤技術(shù)提升VDT視疲勞患者視覺體驗，并探索界面色彩設(shè)計規(guī)律。以下為研究結(jié)論：可視化數(shù)據(jù)界面色彩設(shè)計對VDT視疲勞患者視覺搜索績效有顯著影響;深色背景B30%，淺色背景B90%的視覺搜索績效最佳;深色背景界面認(rèn)知負(fù)荷較輕，淺色背景界面更加簡潔，大幅提高了VDT視疲勞患者的搜索績效和工作效率。因此，設(shè)計師在設(shè)計可視化數(shù)據(jù)界面時，應(yīng)當(dāng)綜合考慮VDT視疲勞患者的視覺搜索績效和長時間的使用體驗。

參考文獻(xiàn)：

[1] 高紅，許立清.VDT視疲勞的診治[J].西南國防醫(yī)藥，2002（3）：244-245.

[2] 金茹娜，吳丹巍. 776例在職醫(yī)護(hù)人員視頻顯示終端視疲勞現(xiàn)狀分析[J].中國醫(yī)藥導(dǎo)刊，2014，16（3）：375-376.

[3] 楊超男.色彩的心理效應(yīng)在扁平化設(shè)計風(fēng)格界面中的研究與應(yīng)用[D].西安：西安工程大學(xué)，2016.

[4] 張德乾，張智君，仰和芝. VDT界面顏色視覺工效：色調(diào)因素對視覺績效的影響[J].心理科學(xué)，2008（2）：328-331，327.

[5] 宮勇，張三元，沈法，等.色彩構(gòu)成對圖形符號視覺搜索效率的影響[J].計算機輔助設(shè)計與圖形學(xué)學(xué)報，2016，28（7）：1115-1120.

[6] 馮紓，王軍鋒，蔡勇，等.低光照度下人機界面背景色眼動分析評價研究[J].計算機工程與應(yīng)用，2020，56（4）：262-267.

[7] 陸菁，劉淵，張曉婷，等.基于用戶體驗的數(shù)據(jù)可視化模型研究[J].包裝工程，2016，37（2）：52-56.

[8] 呂陽.基于視覺思維的用戶界面信息可視化設(shè)計研究[D].上海：華東理工大學(xué)，2015.

[9] 黃紅燕.基于用戶體驗的WEB界面色彩設(shè)計研究[D].廣州：廣東工業(yè)大學(xué)，2014.

[10] 孫博文，楊建明，孫遠(yuǎn)波，等.基于眼動實驗的車輛人機界面色彩設(shè)計研究[J].包裝工程，2019，40（2）：23-30.

[11] 丁一，郭伏，胡名彩，等.用戶體驗國內(nèi)外研究綜述[J].工業(yè)工程與管理，2014，19（4）：92-97，114.

[12] 陳學(xué)強，黃黎清，李明珠.城際物流APP界面導(dǎo)航設(shè)計的視覺搜索績效研究[J].包裝工程，2021，42（8）：198-204.

[13] 栗覓，鐘寧，呂勝富. Web頁面視覺搜索與瀏覽策略的眼動研究[J].北京工業(yè)大學(xué)學(xué)報，2011，37（5）：773-779.

[14] 宮勇，張三元，劉志方，等.顏色對圖標(biāo)視覺搜索效率影響的眼動研究[J].浙江大學(xué)學(xué)報（工學(xué)版），2016，50（10）：1987-1994.

[15] 劉青，薛澄岐，法爾克·霍恩.基于眼動跟蹤技術(shù)的界面可用性評估[J].東南大學(xué)學(xué)報（自然科學(xué)版），2010，40（2）：331-334.

[16] 唐佩璐，李娟.基于眼動視覺跟蹤技術(shù)的新聞類APP界面可用性研究[J].包裝工程，2019，40（14）：247-252.

[17] 肖宏偉，蔣長江，翟家興.基于液晶顯示器的色彩舒適度研究[J].信息技術(shù)與信息化，2016（7）：112-115.

[18] 蔣雨妤.兒童對圖形符號色彩差異認(rèn)知的工效研究[D].綿陽：西南科技大學(xué)，2020.

作者簡介：王偉偉（1983—），男，山西長治人，博士，教授，研究方向：用戶體驗與交互設(shè)計、傳統(tǒng)文化創(chuàng)意設(shè)計。

武桐（1991—），女，陜西西安人，碩士在讀，研究方向：品牌形象與視覺傳達(dá)。