基于虛擬現(xiàn)實的多彩UI界面分塊布局方法

張 鑫，安見才讓

(青海民族大學計算機學院，青海 西寧 810007)

1 引言

隨著互聯(lián)網(wǎng)與現(xiàn)代科技的不斷發(fā)展，智能設(shè)備與各式各樣的APP相互合作，為人們的工作和生活提供可靠技術(shù)。多彩UI界面分塊布局，直接影響用戶對設(shè)備和軟件的使用體驗，關(guān)系到智能設(shè)備的普及和軟件的發(fā)展，因此，相關(guān)學者對UI界面布局問題進行了深入研究。

文獻[1]提出基于人因特性驅(qū)動蟻群算法的操作界面布局優(yōu)化方法，利用人因工程分析軟件對可視域與可達域進行分析，建立界面布局優(yōu)化函數(shù)。依據(jù)位置關(guān)系，引入約束條件，實現(xiàn)對布局位置的限定，最后運用蟻群算法對布局結(jié)果進行布局排列。實驗結(jié)果表明，該方法可提升人機交互性能，但是分塊過密，界面布局效果不佳。文獻[2]提出基于視覺注意機制虛擬交互界面布局優(yōu)化方法，運用視覺注意機制，提取交互元件色彩，再進行界面布局優(yōu)化。實驗結(jié)果表明，該方法優(yōu)化后的界面能夠符合視覺注意機制，但是色彩不夠顯著。除此之外，還有學者提出了多彩UI界面分塊布局邊緣點定位方法，利用成像模型檢測圖像邊緣，以此提升分塊布局的融合效果。

在傳統(tǒng)方法的基礎(chǔ)上，為提高多彩UI界面分塊布局的視覺表達效果，提出基于虛擬現(xiàn)實的多彩UI界面分塊布局方法。在了解該技術(shù)核心理論與使用技巧的前提下，重新設(shè)置一個多彩UI界面分塊布局方法，為用戶的設(shè)備使用界面、軟件應(yīng)用界面，提供更好的優(yōu)化技術(shù)，增強用戶的視覺體驗。

2 基于虛擬現(xiàn)實的多彩UI界面分塊布局方法

2.1 明確用戶視覺與UI界面之間的關(guān)系

根據(jù)用戶對多彩UI界面的使用感受，對UI界面分塊布局進行優(yōu)化改進，加深設(shè)計細節(jié)，節(jié)約設(shè)計成本，提升工作效率。在整個設(shè)計過程中，以用戶為起點和中心，將用戶需求中隱藏的視覺感知部分提取出來，作為分塊的一項參考數(shù)據(jù)[3]。根據(jù)視覺思維的基本研究內(nèi)容可知，用戶交互體驗源于視覺思維偏好，而特定情況下的用戶需求，受地域、民族意識、企業(yè)制度、年齡段以及專業(yè)能力的影響，還存在文化差異上的區(qū)別，影響UI界面的分塊布局[4]。

同時，在UI界面分塊布局中，色彩的應(yīng)用對用戶視覺有極大的影響。用戶對色彩的感知能力，取決于光波與物體的交互方式。人們通過透明物體看到物體，透明物體允許大部分光波通過。UI界面雖然已出現(xiàn)虛擬現(xiàn)實和鐳射等技術(shù)，屏幕也出現(xiàn)了STN、TFT以及UFB屏幕，但目前的UI界面仍以LED為主。一些光波被物體吸收或反射，此時反射波的頻率決定了物體的顏色。假設(shè)光線都被反射，那么物體的顏色會呈現(xiàn)出白色；若光線無法被反射，那么物體的顏色會呈現(xiàn)黑色。用戶在觀察色彩時，都有屬于每個顏色的反射區(qū)域。假設(shè)一個人觀察物體為藍色，那么這個物體在藍色區(qū)域中的光波反射率強于其它頻率；如果物體的黃色區(qū)域光波反射也很強，那么在用戶眼中就會是綠色。因此，對UI界面分塊布局時，要充分考慮屏幕特性以及視覺對于光源的感受規(guī)律，對傳統(tǒng)分塊布局進行修正[5]。

2.2 定位UI界面分塊布局邊緣點

根據(jù)上述分析結(jié)果，求取擬合點及其灰度差值，粗定位UI界面分塊布局邊緣點。假設(shè)粗定位邊緣點集中存在一個任意點Q0，以該點為中心，沿其梯度方向，在兩邊各取6個相鄰節(jié)點，分別記為A1～A6和B1～B6，此時的粗定位邊緣及其鄰近點為擬合點。默認兩個相鄰節(jié)點之間的距離為d個像素值，此時的參數(shù)d與任意點Q0的梯度方向存在關(guān)聯(lián)性[6]。當任意點Q0梯度方向與水平線之間的夾角α小于45°時，說明任意兩相鄰節(jié)點，在x軸方向的距離為1個像素值，否則任意兩相鄰節(jié)點，在y軸方向的距離為1個像素值。

將界面圖像的像素看成正方形小網(wǎng)格，將小網(wǎng)格的中心點作為整像素點，而預(yù)設(shè)兩邊的12個擬合點不都是整像素點，因此，利用灰度線性插值法處理擬合點的灰度值。設(shè)置點Q0的坐標為(x0，y0)，當水平線夾角α小于45°時，則擬合點A1橫坐標為x1=x0+1，計算與A1點相近的兩個整像素點的灰度值，公式為

g(x1，y1)=(1-μ)g(x0，y0)+μg(x0，y0+1)

(1)

式中：μ=x0-y0；g(x1，y1)表示整像素點的灰度值[7]。當水平線夾角α大于45°時，A1點的縱坐標為y1=y0+1，根據(jù)點A1最相近的兩個整像素點的灰度值，進行線性插值處理，得到點A1的灰度值。

同理根據(jù)上述計算過程，計算剩余擬合點的灰度值。為了降低計算誤差，擬合點的灰度差值，通過后向差分和前向差分的平均值來確定。因此，設(shè)g(x0，y0)為點Q0的灰度值，g(x-1，y-1)為點B1的灰度值，則灰度差值計算結(jié)果為

(2)

同理確定其它擬合點的灰度值，其中A1～A6節(jié)點的灰度值分別為g1～g6，B1～B6的灰度值分別為g-1～g-6[8]。

2.3 匹配UI界面分塊

引入圖像尺度空間理論，利用虛擬現(xiàn)實技術(shù)匹配UI界面分塊。首先利用高斯卷積核進行尺度變換，生成尺度空間和極值點。假設(shè)二維圖像為P(x，y)，高斯卷積核為G(x，y，λ)，則圖像與高斯卷積核之間的卷積，可以描述圖像的尺度空間，該尺度的計算公式為

(3)

式中：L(x，y，λ)表示界面分塊的尺度空間；(x，y)表示已知某一點的像素空間位置；λ表示尺度因子；?表示卷積符號。假設(shè)相鄰尺度圖像差用s(x，y，λ)表示，建立高斯差分尺度空間，則存在

s(x，y，λ)=[G(x，y，τλ)-G(x，y，λ)]?P(x，y)

=L(x，y，τλ)-L(x，y，λ)

(4)

式中：τ表示相鄰兩個尺度間的比例因子[9]。利用擬合三維二次函數(shù)，去除不穩(wěn)定的擬合點灰度值，保證分塊邊緣點匹配的抗噪性和穩(wěn)定性，該函數(shù)公式為

(5)

(6)

利用D()剔除低對比度的不穩(wěn)定擬合點，當存在|D()}<0.03時，不穩(wěn)定點剔除率與穩(wěn)定點誤去除率之間的比值最大，因此，將0.03作為不穩(wěn)定點的剔除標準。設(shè)置一個閾值k，利用高斯差分算子構(gòu)成的Hessian矩陣，計算主曲率是否在閾值k之下，此時剔除邊緣響應(yīng)點的計算公式為

(7)

式中：tr(H)表示矩陣的跡；det(H)表示矩陣的模。通過大量的分析與處理，當閾值k的值為8時能夠得出更好的計算結(jié)果。擬合點鄰域像素梯度的模值和方向是描述旋轉(zhuǎn)不變的重要因素，兩個基本因素的計算過程，可通過下列公式描述

(8)

式中：β(x，y)表示梯度方向；h(x，y)表示梯度模值。將擬合點鄰域窗口內(nèi)的直方圖，平均分為36個方向，得到鄰域像素的梯度方向，其中峰值代表鄰域梯度的主方向。為保證UI界面分塊的不變性，通過梯度方向直方圖設(shè)置種子點，生成不同維度的描述子，通過上述計算步驟，實現(xiàn)對UI界面的分塊布局[10]。

2.4 基于虛擬現(xiàn)實技術(shù)渲染UI分塊界面色彩

利用虛擬現(xiàn)實技術(shù)，對UI分塊界面進行色彩渲染，則虛擬現(xiàn)實下的UI分塊界面，色彩區(qū)域分布信息量輸出結(jié)果為

(9)

公式中：N表示界面分塊顏色特征的總個數(shù)；n表示界面分塊顏色特征個數(shù)；v表示偏移系數(shù)；xi表示第i個分塊的信息分解量；ηj表示分區(qū)域j的像素特征分量；c表示顏色特征分解系數(shù)；u表示背景顏色分解系數(shù)[11-12]。通過虛擬現(xiàn)實技術(shù)在局部區(qū)域子塊內(nèi)建立界面分塊布局的區(qū)域分布模型，得到匹配后的邊緣輪廓信息

(10)

公式中：Δx表示界面分塊差異值；E表示界面分塊視差。利用虛擬現(xiàn)實技術(shù)定義UI界面的特征集，采用超像素重構(gòu)的方式，設(shè)置色彩渲染規(guī)則，按照上述公式描述的分塊輪廓信息，計算界面超像素生成統(tǒng)計特征量，公式為

(11)

根據(jù)式(11)所求結(jié)果，按照每一個UI界面中的分塊輪廓，進行色彩渲染，實現(xiàn)不同分塊與界面背景之間的顏色搭配，至此實現(xiàn)基于虛擬現(xiàn)實的多彩UI界面分塊布局方法。

3 實驗研究

將此次提出的布局方法，作為實驗組測試對象；將傳統(tǒng)文獻[1]方法和文獻[2]方法分別作為對照A組、對照B組測試對象，比較不同方法下的布局密度和色彩差異。選擇虛擬現(xiàn)實系統(tǒng)作為此次實驗的測試背景，利用3D技術(shù)軟件設(shè)計多彩UI界面。設(shè)計開始之前檢查系統(tǒng)三維場景編輯器是否可以正常運行，并檢測二次開發(fā)工具包是否能夠執(zhí)行設(shè)計任務(wù)，采用Matlab軟件設(shè)計多彩UI界面分塊。測試虛擬現(xiàn)實系統(tǒng)，沒有故障問題后開始實驗。

3.1 邊緣點定位測試

實驗組根據(jù)用戶視覺與UI界面之間的關(guān)系，定位UI界面分塊布局邊緣點，下圖1為某一設(shè)備的UI界面截圖。

圖1 UI界面截圖

實驗組根據(jù)圖1界面的基本信息，重新選擇與定位分塊邊緣點，調(diào)整多彩UI界面分塊布局，下表1為調(diào)整后其中4組邊緣點的位移信息。

表1 實驗組邊緣點定位調(diào)整參數(shù)

實驗組根據(jù)調(diào)整后的邊緣點位置，定位各個分塊中心節(jié)點，然后利用虛擬現(xiàn)實技術(shù)進行分塊匹配和色彩渲染。下面比較三個測試組的布局密度。

3.2 布局密度測試

三個測試組按照自身的布局流程，設(shè)計多彩UI界面分塊，下圖2是三個測試組為游戲商店設(shè)計的UI界面分塊布局示意圖。

圖2 游戲UI界面分塊圖

根據(jù)上圖2中設(shè)置的游戲UI界面分塊布局效果圖可知，實驗組的分塊更加醒目，給用戶直觀的視覺沖擊。而兩個對照組過于重視分塊內(nèi)容的多樣性，因此設(shè)置的分塊數(shù)量更多，雖然展示的信息更全面，但是分塊過密會影響用戶對界面信息的感知效果。

完成UI界面設(shè)計后，統(tǒng)計游戲商店界面商品的平均銷售用時，結(jié)果如下表2所示。

表2 游戲商店商品銷售用時均值(s)

根據(jù)表2中的統(tǒng)計數(shù)據(jù)可知，實驗組的游戲商店商品銷售用時均值比兩個對照組分別低了近236s和241s。雖然實驗組中界面內(nèi)的分塊較少，但單個信息更加全面，不僅讓用戶視覺受到?jīng)_擊，而且能夠促進用戶快速選擇想要購買的商品，可見實驗組分塊布局密度更合理。

3.3 色彩差異測試

色彩差異直接影響用戶的視覺體驗，因此，比較三個測試組的分塊布局在色彩上給用戶帶來的視覺差異，結(jié)果如圖3所示。

圖3 多彩UI界面色彩差異測試結(jié)果

根據(jù)圖3中的測試結(jié)果可以直觀看到，實驗組中的分塊之間、分塊與背景之間具有顯著的色彩差異。而兩個對照組中的分塊之間、分塊與背景之間的色彩差異不明顯。利用下列公式，計算三個測試組界面的色彩差異

(12)

式中：I(i，j)表示分塊色彩差異量；ω1、ω2分別表示明度和暗度的權(quán)重系數(shù)；Y(i，j)和X(i，j)分別為背景界面和分塊界面的色彩成分。運用式(12)進行計算，得出實驗組的色彩差異為0.62，對照組的色彩差異分別為0.41和0.33。可見實驗組的色彩差異跨度更大，分塊之間、分塊與背景之間的色彩差別更明顯。可見此次研究的分塊布局方法，更能滿足用戶的視覺體驗。

4 結(jié)論

為了解決傳統(tǒng)方法存在的分塊過密和色彩不夠顯著的問題，提出基于虛擬現(xiàn)實的多彩UI界面分塊布局方法。此次研究以傳統(tǒng)布局方法為基礎(chǔ)，通過明確用戶視覺與UI界面之間的關(guān)系，進一步優(yōu)化分塊布局效果。實驗結(jié)果表明，該方法的分塊密度更合理，色彩差異顯著。但此次研究過程中的計算量偏大，因此虛擬現(xiàn)實技術(shù)在應(yīng)用過程中，容易出現(xiàn)運算誤差，今后的研究工作可以設(shè)計一套驗證算法，檢驗分塊布局的計算誤差，提升界面設(shè)計的可靠性。