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

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

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

0 引 言

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

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

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

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

(1)

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

表1 Ak賦值

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

(2)

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

ωi-1=Ak·ωi

(3)

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

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

2.1 元件色彩因素

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

(4)

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

(5)

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

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

(6)

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

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

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

(7)

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

2.2 元件距離因素

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

(8)

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

(9)

2.2.1 距離對(duì)比度

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

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

(10)

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

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

(11)

2.2.2 距離相關(guān)性

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

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

(12)

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

(13)

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

2.3 元件視覺注意力等級(jí)因素

2.3.1 人機(jī)界面視覺注意力劃分模型

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

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

圖1 視野范圍以及等級(jí)仿真

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

2.3.2 注意力等級(jí)模型建立

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

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

(14)

約束條件如下

(15)

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

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

在待布置空間中，可引起視覺注意的位置有限，無(wú)法將每個(gè)界面元件都布置到最佳位置，因此在構(gòu)建目標(biāo)函數(shù)時(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 實(shí)例分析

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

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

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

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

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

對(duì)決策界面進(jìn)行視覺區(qū)域分析，界面相對(duì)于人眼的距離為d=1500mm，水平方向上的總視野為120°，豎直方向上的視野為35°。以視覺中心為原點(diǎn)，水平方向?yàn)閤，豎直方向?yàn)閥，建立二維坐標(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è)視野等級(jí)g橢圓的長(zhǎng)軸與短軸的值ag與bg。

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

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

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

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

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

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

3.4.1 決策元件重要度計(jì)算

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

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

(17)

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

(18)

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

(19)

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

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

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

表3 決策元件重要度排序

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

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

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

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

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

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

4 求解算法

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

4.1 染色體編碼

首先，用遺傳算法對(duì)目標(biāo)進(jìn)行求解；其次，通過(guò)二進(jìn)制對(duì)表現(xiàn)型進(jìn)行編碼；再次，參照各變量的精確度決定編碼長(zhǎng)度；最后，根據(jù)最大視野范圍等級(jí)C來(lái)確定編碼區(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)化機(jī)制

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

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

在完成了決策元件的權(quán)重計(jì)算、關(guān)聯(lián)程度大小以及視覺注意機(jī)制數(shù)學(xué)模型的構(gòu)建之后，設(shè)置遺傳算法的各個(gè)參數(shù)，遺傳算法求解相關(guān)參數(shù)如下：編碼長(zhǎng)度：23；初始種群個(gè)數(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)化后的決策界面更加符合人眼視覺注意機(jī)制，通過(guò)上述給定的模型參數(shù)，運(yùn)用MATLAB平臺(tái)進(jìn)行目標(biāo)函數(shù)求解，計(jì)算后得到最大適應(yīng)度函數(shù)值所對(duì)應(yīng)的最優(yōu)個(gè)體編碼，將最優(yōu)個(gè)體編碼進(jìn)行解碼運(yùn)算，得到表象數(shù)據(jù)參數(shù)，應(yīng)用于最終的界面布局。新的優(yōu)化界面坐標(biāo)見表7。

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

5 實(shí)驗(yàn)驗(yàn)證

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

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

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

圖5 眼動(dòng)注視熱點(diǎn)圖(左)及注視順序及時(shí)間圖(右)

6 結(jié)束語(yǔ)

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