基于視覺注意機制虛擬交互界面布局優化

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

(貴州大學 現代制造技術教育部重點實驗室，貴州 貴陽 550025)

0 引 言

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

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

通過人視覺注意機制在某VR考試系統中決策交互界面的應用，以決策元件的色彩、間距以及視覺注意等級優化原有決策界面布局，使界面更符合人的視覺注意認知規律，提高使用者的認知績效，降低用戶操作負擔。

1 目標重要程度分析

(1)

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

表1 Ak賦值

由下式進一步計算元件i權重值

(2)

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

ωi-1=Ak·ωi

(3)

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

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

2.1 元件色彩因素

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

(4)

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

(5)

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

元件i與元件j的相關程度矩陣可以表示為

(6)

式中：m為元件個數，oij表示元件i與元件j的相關程度。

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

元件i和其余元件j的距離、色彩數學模型描述為

(7)

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

2.2 元件距離因素

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

(8)

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

(9)

2.2.1 距離對比度

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

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

(10)

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

元件i和其余元件距離對比度數學模型描述為

(11)

2.2.2 距離相關性

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

元件i和其余元件距離相關性數學模型描述為

(12)

根據式(11)和式(12)，元件距離對比度和距離相關性數學模型可以描述為

(13)

式中：α和β分別表示元件距離對比度和距離相關性的權重。

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

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

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

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

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

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

2.3.2 注意力等級模型建立

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

視覺注意力等級數學模型可描述為

(14)

約束條件如下

(15)

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

2.4 目標函數構建

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

(16)

3 實例分析

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

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

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

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

3.2 視覺等級區域分析

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

圖3 優化前決策界面的視覺注意等級分析

3.3 決策元件尺寸參數

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

表2 決策元件尺寸參數值

根據決策元件的尺寸參數值，用li和wi直接求出每個決策元件的面積Si。設定優化前與優化后決策元件的尺寸大小不發生改變。

3.4 確定界面決策元件權重值

3.4.1 決策元件重要度計算

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

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

(17)

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

(18)

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

(19)

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

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

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

表3 決策元件重要度排序

3.4.3 決策元件權重值

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

3.5 決策元件相關程度

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

3.6 決策元件Lab色彩參數

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

4 求解算法

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

4.1 染色體編碼

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

4.2 確定適應度函數

由于遺傳算法的適應度函數與目標函數均為求解最大值問題，因此適應度函數表示為

Fit[f(x)]=

(20)

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

其中Fit[f(x)]為適應度函數，f(x) 為目標函數，Cmin為目標函數的最小估值。

4.3 確定進化機制

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

4.4 算法參數標定

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

表4 決策元件權重值

表5 決策元件相關程度

表6 Lab色彩各通道參數

4.5 求解及結果解碼

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

表7 優化后決策元件坐標

5 實驗驗證

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

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

圖4 優化后決策界面

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

6 結束語

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