張 鑫，安見才讓

(青海民族大學(xué)計(jì)算機(jī)學(xué)院，青海 西寧 810007)

1 引言

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

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

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

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

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

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

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

2.2 定位UI界面分塊布局邊緣點(diǎn)

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

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

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

(1)

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

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

(2)

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

2.3 匹配UI界面分塊

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

(3)

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

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

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

(4)

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

(5)

(6)

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

(7)

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

(8)

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

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

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

(9)

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

(10)

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

(11)

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

3 實(shí)驗(yàn)研究

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

3.1 邊緣點(diǎn)定位測試

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

圖1 UI界面截圖

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

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

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

3.2 布局密度測試

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

圖2 游戲UI界面分塊圖

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

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

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

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

3.3 色彩差異測試

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

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

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

(12)

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

4 結(jié)論

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