基于視覺注意機制虛擬交互界面布局優(yōu)化

金昱潼，呂 健，潘偉杰，趙子健，尤 乾

(貴州大學(xué) 現(xiàn)代制造技術(shù)教育部重點實驗室，貴州 貴陽 550025)

0 引 言

在面對人機交互界面時，用戶的視覺系統(tǒng)會接收到龐雜的信息，而這些信息很難在短時間內(nèi)被處理，所以需要將信息進(jìn)行重要度分析，通過視覺注意機制重新設(shè)計人眼處理信息的順序，可有效降低人腦信息處理的負(fù)荷，提高用戶的認(rèn)知績效[1]。

近年來，視覺注意機制被廣泛應(yīng)用于各行各業(yè)中，王寧等[2]運用距離與色彩因素建立視覺注意模型；葉坤武等[3]運用視覺注意分配對飛機駕駛艙人機界面進(jìn)行優(yōu)化；Berggren[4]使用行為和電生理手段來研究注意力的分配。而界面布局設(shè)計是將物體布置在給定的布局空間中，滿足設(shè)定的約束條件，并以實現(xiàn)面積利用率、成本、性能等某種或多種指標(biāo)最優(yōu)為目標(biāo)。Chen等[5]研究了信息布局對用戶判斷的影響，證明水平界面比垂直界面更高效。在VR系統(tǒng)交互界面中進(jìn)行界面優(yōu)化，要符合基本的布置原則以及VR情境下人的視覺注意力特性。鄧麗等[6]認(rèn)為制定布局原則時要符合客觀認(rèn)知和信息組織規(guī)律。色彩因素在視覺注意機制中也起著重要作用，Merenda等[7]研究調(diào)查了在不同的真實駕駛背景下，藍(lán)色、綠色和黃色在AR情境下較穩(wěn)定。求解復(fù)雜多目標(biāo)界面布局優(yōu)化問題，需要用到人工算法，例如曹翰等[8]提出一種基于遺傳算法的電機控制器自動布局與優(yōu)化設(shè)計方案。對于得到的界面優(yōu)化結(jié)果，普遍使用的是眼動分析實驗，王藝璇等[9]采用眼動實驗對手機APP界面進(jìn)行設(shè)計評價，篩選出界面設(shè)計樣本的最優(yōu)方案。以上研究有著重要的指導(dǎo)意義，可以較好地對用戶在虛擬環(huán)境下視覺注意機制進(jìn)行計算和模擬。

通過人視覺注意機制在某VR考試系統(tǒng)中決策交互界面的應(yīng)用，以決策元件的色彩、間距以及視覺注意等級優(yōu)化原有決策界面布局，使界面更符合人的視覺注意認(rèn)知規(guī)律，提高使用者的認(rèn)知績效，降低用戶操作負(fù)擔(dān)。

1 目標(biāo)重要程度分析

(1)

式中：ωi為第i個指標(biāo)的權(quán)重，且i≥2；ωi-1為第i-1個指標(biāo)的權(quán)重。在計算界面元件重要程度前，界面元件權(quán)重ωi是未知數(shù)，通過專家根據(jù)元件之間的重要程度打分獲得Ak，表1為界面元件重要程度Ak賦值。

表1 Ak賦值

由下式進(jìn)一步計算元件i權(quán)重值

(2)

剩余的界面元件ωi(i=1，2，…，m-1) 權(quán)重，通過下式推出

ωi-1=Ak·ωi

(3)

2 視覺注意程度的影響因素分析

VR交互界面由多個元件所構(gòu)成，包含了色彩、間距、形狀、大小等視覺特征。操作者在系統(tǒng)使用過程中，容易發(fā)現(xiàn)一部分元件，同時也容易忽視一部分元件，這說明前者相對于后者對于操作者有著更強的視覺注意力[11]。因此，找出視覺注意力強弱程度的影響因素，是在優(yōu)化交互界面過程中的重要步驟。本文從交互元件的色彩、間距和視覺注意等級3個影響因素來定義視覺注意力模型。

2.1 元件色彩因素

人類是通過亮度、飽和度和色調(diào)來感知色彩并區(qū)分色彩，因此選擇國際照明委員會Lab色彩模型來描述用戶界面的色彩特征。用戶在觀察人機交互界面時，觀察的是物體，而不是像素點，所以可將每個組成元件分別看作是一個具有單一色彩的物體，具體定義參見文獻(xiàn)[2]。設(shè)人機交互界面中共有m個界面元件，ci、cj為該界面中第i、j(i、j=1， 2， …，m) 個元件，則兩個元件之間的色差，即色彩對比度為

(4)

元件i與元件j的色彩對比度矩陣可以表示為

(5)

式中：m為元件個數(shù)，cij表示元件i與元件j的色彩對比度。

元件i與元件j的相關(guān)程度矩陣可以表示為

(6)

式中：m為元件個數(shù)，oij表示元件i與元件j的相關(guān)程度。

若交互界面中元件間相關(guān)性強時，將相互色彩對比度小的元件放置在較近的位置，避免交互界面色彩過于雜亂，增加用戶視覺認(rèn)知負(fù)擔(dān)；若元件間相關(guān)性弱或無時，將相互色彩對比度大的元件放置在較近位置，增強視覺注意度，提高視覺搜索效率。

元件i和其余元件j的距離、色彩數(shù)學(xué)模型描述為

(7)

φ值由具體情況而定，用于元件相關(guān)程度大小的劃分。

2.2 元件距離因素

設(shè)有m個待布置元件，li和wi分別表示元件i的長和寬，且定義元件的中心點為其位置坐標(biāo)，則 (xi,yi) 代表元件i在面板上的坐標(biāo)值，元件i和元件j之間的距離可通過下式計算

(8)

在距離模型的建立過程中保證元件在布局過程中不發(fā)生干涉，其表達(dá)式如下

(9)

2.2.1 距離對比度

距離對比度D表示元件之間的視覺對比程度與相對距離的關(guān)系；一般情況下，相對距離越小，元件之間形成直接對比，因此視覺對比程度就越強；而相對距離越大，元件之間形成間接對比，因此視覺對比程度就越弱[12]。

交互界面元件距離矩陣可以表示為

(10)

式中：m為元件個數(shù)，dij表示元件i與元件j的距離。

元件i和其余元件距離對比度數(shù)學(xué)模型描述為

(11)

2.2.2 距離相關(guān)性

距離相關(guān)性反映了各個元件之間的密切程度，關(guān)系越密切元件之間就會越近；即相關(guān)程度越高的元件之間距離就越小，反之則距離越大，成反比關(guān)系。

元件i和其余元件距離相關(guān)性數(shù)學(xué)模型描述為

(12)

根據(jù)式(11)和式(12)，元件距離對比度和距離相關(guān)性數(shù)學(xué)模型可以描述為

(13)

式中：α和β分別表示元件距離對比度和距離相關(guān)性的權(quán)重。

2.3 元件視覺注意力等級因素

2.3.1 人機界面視覺注意力劃分模型

虛擬現(xiàn)實系統(tǒng)的體驗與操作選擇vive頭戴式VR設(shè)備，人兩眼重合視域約為120°，vive頭戴式VR眼鏡的視野范圍為120°，與人眼正常視覺范圍一致。在標(biāo)準(zhǔn)狀態(tài)下，用戶雙眼平視交互界面的視野等級如圖1所示，各視野等級中心在用戶視線的中心點上。

原輔料出庫主要面向制絲、卷包和咀棒車間，卷包車間由于輔料中轉(zhuǎn)庫的存在，大庫到中轉(zhuǎn)庫屬于移庫操作，從中轉(zhuǎn)庫到機臺的出庫為生產(chǎn)出庫，而到制絲和咀棒車間的出庫直接為生產(chǎn)出庫。

圖1 視野范圍以及等級仿真

VR用戶在界面元件上的視覺注意力強度與元件所在視野等級和所占面積有關(guān)。且由于人眼的視覺認(rèn)知規(guī)律，人的視覺范圍在與視線垂直的平面上并不規(guī)則。為計算目標(biāo)在視野區(qū)域中所占等級，根據(jù)視覺注意力分配情況，將人機界面所在視野的3個區(qū)域概括為3個焦點為x軸的橢圓，如圖1所示。具體定義可參見文獻(xiàn)[3]。

2.3.2 注意力等級模型建立

首先對模型做如下定義：①元件i在視野區(qū)域中所占面積為Si;②元件i的形心在不同視野區(qū)域g的等級為uig;③各個視野區(qū)域g的橢圓長軸為ag，短軸為bg。其中i=1,2,3,…,m，m為界面元件的個數(shù)；g=1,2,3分別代表視野等級A、B、C。

視覺注意力等級數(shù)學(xué)模型可描述為

(14)

約束條件如下

(15)

式中：aA、aB、aC與bA、bB、bC分別為視野A、B、C區(qū)域的長軸與短軸。

2.4 目標(biāo)函數(shù)構(gòu)建

在待布置空間中，可引起視覺注意的位置有限，無法將每個界面元件都布置到最佳位置，因此在構(gòu)建目標(biāo)函數(shù)時需要綜合考慮各影響因素權(quán)重，并添加系數(shù)λ1、λ2、λ3進(jìn)行調(diào)控。根據(jù)數(shù)學(xué)模型(7)、(13)、(14)，在各視覺注意影響因素的約束條件下，將構(gòu)建的目標(biāo)函數(shù)取得最大值作為優(yōu)化目標(biāo)，將目標(biāo)函數(shù)定義為

(16)

3 實例分析

3.1 決策界面模塊化及功能性分組

VR考試系統(tǒng)決策界面如圖2(左)所示，佩戴VR頭盔時，由于交互界面在VR環(huán)境中與用戶頭部角度為綁定關(guān)系，用戶雙眼平視交互界面，交互界面中心在用戶視線的中心點上，且在注視過程中，交互界面與用戶所在位置的距離為定值，因此在分析用戶對交互界面的視覺注意程度上可僅計算單一距離。

圖2 優(yōu)化前決策界面(左)及模塊化(右)

對目標(biāo)進(jìn)行模塊化和功能性分組，將14個不規(guī)則的元件定義為K1～K14矩形模塊。再把所有模塊通過本身功能進(jìn)行分組：第一組K0為決策面板；第二組K1、K2元件為鉆機的選擇決策；第三組K3～K7為防沉降設(shè)備順序決策；第四組K8～K11為使用設(shè)備順序決策；K12～K14為需要排除次生災(zāi)害決策，如圖2(右)所示。

3.2 視覺等級區(qū)域分析

對決策界面進(jìn)行視覺區(qū)域分析，界面相對于人眼的距離為d=1500mm，水平方向上的總視野為120°，豎直方向上的視野為35°。以視覺中心為原點，水平方向為x，豎直方向為y，建立二維坐標(biāo)系，如圖3所示。根據(jù)人眼與界面的角度與距離，可確定人眼視覺范圍在界面上的A區(qū)域坐標(biāo)范圍為x(-315.25 mm，315.25 mm)、y(-322.51 mm，322.51 mm)，B區(qū)域坐標(biāo)范圍為x(-761.57 mm，761.57 mm)、y(-322.51 mm，322.51 mm)，C區(qū)域坐標(biāo)范圍為x(-1137.84 mm，1137.84 mm)、y(-463.83 mm，463.83 mm)。由此可得出各個視野等級g橢圓的長軸與短軸的值ag與bg。

圖3 優(yōu)化前決策界面的視覺注意等級分析

3.3 決策元件尺寸參數(shù)

每個決策元件的尺寸見表2，決策面板K0長為1500 mm，寬為556 mm，以上尺寸均為Unreal Editor4中的虛擬尺寸。

表2 決策元件尺寸參數(shù)值

根據(jù)決策元件的尺寸參數(shù)值，用li和wi直接求出每個決策元件的面積Si。設(shè)定優(yōu)化前與優(yōu)化后決策元件的尺寸大小不發(fā)生改變。

3.4 確定界面決策元件權(quán)重值

3.4.1 決策元件重要度計算

通過研究基于隧道救援VR考試系統(tǒng)的交互界面，對交互決策元件重要程度做以下定義：

(1)決策元件的分值重要性V={vi}，vi表示決策元件i對應(yīng)的考核分值(該分值由國家搶險救援隊根據(jù)各個決策元件實際操作的重要程度，以及決策結(jié)果對于營救成功率的影響而設(shè)定)，決策元件i的分值重要性可表示為

(17)

(2)決策元件的操作順序重要性T={ti}，ti表示決策元件i在隧道救援流程中的決策順序。因此決策元件i的操作順序重要性可表示為

(18)

(3)根據(jù)式(17)、式(18)可得決策元件i的重要度為

(19)

其中，i=1，2，…，m，m為決策元件的個數(shù)。

3.4.2 決策元件分值與操作順序

綜合考慮多種救援情景的救援決策，確定決策元件較為通用的操作順序，再結(jié)合國家搶險救援隊指定的考核分值，根據(jù)式(19)對決策元件K1～K14的重要度I1*～I(xiàn)14*進(jìn)行計算，最后將得到的各元件重要度值正序排序，結(jié)果見表3。

表3 決策元件重要度排序

3.4.3 決策元件權(quán)重值

由表3決策元件重要度Ii*的值可得到排列K1、K2、K12、K13、K14、K4、K6、K9、K8、K3、K5、K7、K10、K11，通過以上數(shù)據(jù)以及式(3)計算可得各個決策元件權(quán)重ωi， 具體數(shù)據(jù)見表4。

3.5 決策元件相關(guān)程度

根據(jù)國家搶險救援隊提供的信息，得出各個決策元件之間的相關(guān)程度，見表5，相關(guān)程度的取值為0～1之間，取值越大表示決策元件之間的相關(guān)程度越高，反之則越小。根據(jù)決策元件相關(guān)程度分析，確定相關(guān)程度大小劃分值φ=0.5。

3.6 決策元件Lab色彩參數(shù)

將每個決策元件的主要色彩進(jìn)行歸納，視每個元件為單一色彩物體[2]，通過軟件測出每個物體Lab各通道的值，將色彩信息參數(shù)化，以便后期的求解運算。Lab色彩各通道參數(shù)值見表6。

4 求解算法

以決策元件的色彩、間距、視覺注意等級為約束條件，對其位置坐標(biāo)進(jìn)行求解，采用MATLAB的遺傳算法工具箱，通過遺傳算法對決策界面設(shè)計方案種群進(jìn)行全面檢索，得出在一定條件下的決策界面最優(yōu)布局方案。

4.1 染色體編碼

首先，用遺傳算法對目標(biāo)進(jìn)行求解；其次，通過二進(jìn)制對表現(xiàn)型進(jìn)行編碼；再次，參照各變量的精確度決定編碼長度；最后，根據(jù)最大視野范圍等級C來確定編碼區(qū)間(決策元件坐標(biāo)精度為厘米)。x軸區(qū)間為：212<2276<213；y軸區(qū)間為：29<928<210，因此坐標(biāo)以13+10=23位二進(jìn)制編碼表示。

4.2 確定適應(yīng)度函數(shù)

由于遺傳算法的適應(yīng)度函數(shù)與目標(biāo)函數(shù)均為求解最大值問題，因此適應(yīng)度函數(shù)表示為

Fit[f(x)]=

(20)

式(1)～式(15)為約束條件。

其中Fit[f(x)]為適應(yīng)度函數(shù)，f(x) 為目標(biāo)函數(shù)，Cmin為目標(biāo)函數(shù)的最小估值。

4.3 確定進(jìn)化機制

確定遺傳算子為：選擇復(fù)制算子、交叉算子和變異算子，從隨機生成的初始種群開始，重復(fù)選擇、交叉、變異的操作過程，使種群向著給定的目標(biāo)進(jìn)化。選擇復(fù)制算子運用最常用的輪盤賭法，從當(dāng)前種群選擇出新的個體。

4.4 算法參數(shù)標(biāo)定

在完成了決策元件的權(quán)重計算、關(guān)聯(lián)程度大小以及視覺注意機制數(shù)學(xué)模型的構(gòu)建之后，設(shè)置遺傳算法的各個參數(shù)，遺傳算法求解相關(guān)參數(shù)如下：編碼長度：23；初始種群個數(shù)：100；迭代次數(shù)：300；交叉概率：0.9；變異概率：0.05；變量為決策元件i在視野區(qū)域中的位置坐標(biāo)xi、yi。

表4 決策元件權(quán)重值

表5 決策元件相關(guān)程度

表6 Lab色彩各通道參數(shù)

4.5 求解及結(jié)果解碼

為了使優(yōu)化后的決策界面更加符合人眼視覺注意機制，通過上述給定的模型參數(shù)，運用MATLAB平臺進(jìn)行目標(biāo)函數(shù)求解，計算后得到最大適應(yīng)度函數(shù)值所對應(yīng)的最優(yōu)個體編碼，將最優(yōu)個體編碼進(jìn)行解碼運算，得到表象數(shù)據(jù)參數(shù)，應(yīng)用于最終的界面布局。新的優(yōu)化界面坐標(biāo)見表7。

表7 優(yōu)化后決策元件坐標(biāo)

5 實驗驗證

結(jié)合求解出的目標(biāo)函數(shù)數(shù)據(jù)設(shè)計出一組新的決策交互界面，如圖4所示。將權(quán)重值最高的鉆機類型決策元件放置在視覺中心，縮短元件間的距離，增強其對比度；將在同一功能分組下，色彩相近的決策元件排布在相近位置，減輕由于色彩信息過多造成的視覺疲勞[13]。其功能分組的視覺注意強度升序排列依次為鉆機類型、次生災(zāi)害類型、防沉降順序、使用設(shè)備順序。

運用Eyeso Ec60眼動平臺對優(yōu)化后的決策界面進(jìn)行眼動實驗驗證，實驗地點為貴州大學(xué)現(xiàn)代制造技術(shù)教育部重點實驗室，實驗選取20位在校本科生與碩士生，15位男性，5位女性，所有參與者視力正常或者矯正后為正常，無色盲色弱，均未有過隧道救援考試VR系統(tǒng)操作經(jīng)驗。實驗場景通過Unreal Editor4引擎進(jìn)行搭建，VR體驗設(shè)備為HTC VIVE智能VR眼鏡PCVR 3D頭盔。實驗結(jié)果如下，圖5(左)為眼動注視熱點圖，圖5(右)為注視順序及時間圖，從圖5熱點圖中可看出視覺注意力最強的是選擇鉆機分組，其次為次生災(zāi)害分組，而在注視順序中K2決策元件為首先注視點，與設(shè)計目標(biāo)K1決策元件為視覺注意度最高元件不符，分析可能是沒有考慮人視覺自上而下，自左而右的掃視規(guī)律；在后期的研究中將會對視覺注意機制進(jìn)行更進(jìn)一步研究。

圖4 優(yōu)化后決策界面

圖5 眼動注視熱點圖(左)及注視順序及時間圖(右)

6 結(jié)束語

分析了人眼視覺注意機制的影響因素，在此基礎(chǔ)上建立了各個因素的相關(guān)數(shù)學(xué)模型，并將其融合到目標(biāo)函數(shù)中，建立基于視覺注意機制的虛擬環(huán)境交互界面模型；再利用G1法對每個界面元件進(jìn)行排序計算，求出每個元件權(quán)重值，通過MATLAB軟件用遺傳算法求解目標(biāo)函數(shù)。將隧道救援VR考試系統(tǒng)的決策界面設(shè)計方案問題轉(zhuǎn)化為組合優(yōu)化問題，使實際問題實現(xiàn)人工尋優(yōu)過程的算法化。實驗結(jié)果表明，該方法具有可行性，解決了設(shè)計師以設(shè)計經(jīng)驗為主而造成的主觀因素影響，提高了界面操作效率，減輕人眼視覺信息負(fù)擔(dān)。目前研究僅適用于VR界面中固定距離的二維平面交互界面，下一步將研究VR環(huán)境下非固定視角的維布局界面設(shè)計。