基于信息圖形化的網(wǎng)頁界面視覺均衡優(yōu)化仿真

李馥穎,蔣 強

(1. 沈陽理工大學,遼寧 沈陽 110159;2. 沈陽理工大學自動化與電氣工程學院,遼寧 沈陽 110159)

1 引言

在網(wǎng)絡快速發(fā)展的時代,人類的生活方式發(fā)生了改變,網(wǎng)上沖浪、聊天、購物已經(jīng)成為生活和工作中必不可少的一部分。網(wǎng)頁界面設計不僅影響網(wǎng)站形象,也關(guān)系到用戶訪問率。因此,界面視覺優(yōu)化受到相關(guān)領(lǐng)域的高度重視。但從整體設計發(fā)展情況來看,依然存在一些弊端,例如內(nèi)容單一、重點內(nèi)容不突出等。為此,相關(guān)學者也針對此問題展開如下研究。文獻[1]利用視覺注意機制實現(xiàn)網(wǎng)頁的布局優(yōu)化,結(jié)合視覺注意機制,選取色彩、間距等多個影響因素,將視覺注意力最高作為目標,建立目標函數(shù),使用遺傳算法求解目標函數(shù),根據(jù)求解結(jié)果完成界面優(yōu)化設計。文獻[2]研究一種基于用戶觸點的界面優(yōu)化方法,將用戶觸點作為研究核心,合理分析界面中所有觸點模塊,以提高用戶滿意度作為目標,設置界面可行性優(yōu)化方案。立足用戶觸點,提高界面設計的個性化與人性化。

在現(xiàn)有研究的基礎上,本文提出一種基于信息圖形化的網(wǎng)頁界面視覺優(yōu)化方法。圖形和文字相比優(yōu)勢更加明顯,能夠?qū)⑽谋緮?shù)據(jù)形象、直觀的表示出來,更加吸引人們的注意。將信息圖形化應用到網(wǎng)絡界面設計中,可以確保界面高度一致,滿足用戶個性化需求,促進用戶和頁面的互動。

2 信息圖形化設計準則

2.1 網(wǎng)頁界面中信息傳達過程

1)信息傳達

針對網(wǎng)頁界面設計而言,信息傳達就是設計者將文字信息變換成視覺語言展示到網(wǎng)頁中[3-5]。用戶通過終端登錄網(wǎng)頁,可以獲取感興趣的信息。在此過程中,信息傳達方式如圖1所示。

圖1 網(wǎng)頁界面設計的信息傳達方式

由圖1可知,信息傳達過程是將初始數(shù)據(jù)利用視覺化手段變換為視覺信息,用戶通過網(wǎng)頁界面獲取感興趣的信息。從上述過程看出,界面上的視覺信息尤為關(guān)鍵,是用戶獲得信息的唯一形式,決定了用戶獲取信息的速率,這正是進行網(wǎng)頁界面優(yōu)化的基本原因。

2)信息接收

信息接收過程就是對網(wǎng)頁信息翻譯的過程[6],因網(wǎng)頁的自身交互特征明顯,所以在信息傳達過程中不是讓用戶被動的接收信息,而是使用戶主動獲取對自己有用的信息。如果某個網(wǎng)頁中的信息吸引了用戶,則更加容易被記住。

在信息接收過程中,需要分析用戶對信息處理的流程,如圖2所示。

圖2 用戶信息接收過程示意圖

分析圖2可知,感覺器官包括很多種,但在網(wǎng)頁界面中視覺刺激是最重要的,因此在界面優(yōu)化過程中應格外注重用戶的視覺效果。

2.2 信息圖形化設計準則

在界面優(yōu)化過程中,按照信息圖形化設計準則進行優(yōu)化,可以更好地提高信息傳遞的準確性與全面性,帶給用戶全新的體驗。設計準則通常包括如下幾點:

1)人性化原則[7]:信息圖形化的最終目的是傳遞信息,只有用戶通過圖形獲取準確的信息,才算達到目的。所以,設計過程中,必須將以人為本作為基礎,例如需要分析用戶的認知心理與操作習慣等。

2)簡潔原則:優(yōu)化過程中,應確保界面結(jié)構(gòu)簡單,摒棄復雜的裝飾,將實用性放在首位。但簡單并非無裝飾,是在精準傳遞信息的基礎上盡可能減少裝飾元素。

3)創(chuàng)意化原則:有創(chuàng)意性的圖形能產(chǎn)生更好的表達效果,在界面設計中,創(chuàng)意圖形是在信息傳達的基礎上提高用戶注意力。

4)普遍性原則[8]:在日常生活中,很多領(lǐng)域都會進行圖形設計,因此設計者需要探究大量信息,從中找出共性,進而設計出用戶易懂、易于接受的圖形,盡量避免地域差異,為信息傳遞提供便利。

5)準確性原則:優(yōu)化過程中,待表達的信息具有零散性特征,且復雜度較高,為保證信息傳達的精準性,需要對其進一步歸納和總結(jié),明確區(qū)分主、次信息,突出重點內(nèi)容。

3 網(wǎng)頁界面視覺優(yōu)化

基于網(wǎng)頁界面中信息傳達過程與信息圖形化設計準則,展開網(wǎng)頁界面視覺優(yōu)化研究。通過界面數(shù)據(jù)聚類處理,明確信息主次,提高界面簡潔度;通過界面圖像平滑處理,提高對比度;通過界面色彩增強,提高界面亮度的舒適性。

3.1 信息預處理

數(shù)據(jù)信息在圖形化之前種類較多,且較為分散,為提高信息傳達的準確性,需要對待圖形化的信息進行處理。本文利用大數(shù)據(jù)聚類算法將有相同特征的信息分類在一起,且明確主次信息[9]。

采用大數(shù)據(jù)聚類算法處理界面信息時,應構(gòu)建數(shù)據(jù)分布時域函數(shù)[10]:

(1)

使用交叉編譯法描述聚類屬性的特征分布情況:

(2)

式中,z表示固定常數(shù),n表示界面交互參數(shù)。

為確定聚類中心,通過分布類間離散度完成特征分類[11]:

(3)

使用數(shù)據(jù)融合輸出算法,計算界面數(shù)據(jù)流之間存在聚類中心向量bi與bj的間距[12]:

(4)

根據(jù)上述距離,得到最終的界面信息聚類結(jié)果為:

(5)

式中,e表示界面數(shù)據(jù)的維數(shù)總量,μif表示聚類空間分布維數(shù)。

經(jīng)過上述聚類,將圖形化之前的界面數(shù)據(jù)進行預處理,確保相同特征的數(shù)據(jù)聚集在一起。這樣不但能夠提高界面的簡潔度,還能提高信息傳達的精準性。

3.2 圖形界面平滑處理

要想給用戶帶來良好的瀏覽體驗,必須保證界面的清晰度,如果界面中的圖形模糊,用戶的觀感將大打折扣。為此,本文分別從照度與反射兩個分量對界面圖形作平滑處理。

由于網(wǎng)頁圖像具有鄰近性,利用雙邊濾波算法計算圖像邊緣特征[13]:

(6)

式中,W表示邊緣特征值,K表示濾波系數(shù),σ表示環(huán)繞參數(shù),a表示界面亮度差,x與y表示單位距離。

利用下述公式完成圖像卷積計算,獲取照度分量:

(7)

式中,L(x,y)表示真實距離x與y的照度分量,ξi′表示高斯函數(shù),可以對各類特征賦予權(quán)重系數(shù)。

網(wǎng)頁圖像大多為彩色圖像,所以為增強用戶的視覺效果,通過建立彩色雙邊濾波來計算圖像綜合照度,使用的函數(shù)公式如下:

(8)

根據(jù)界面的亮度特點,設計下述對比度調(diào)整函數(shù)[14]:

(9)

式中,β表示對比度調(diào)整系數(shù),CDF表示一種矩陣計算方式。

則圖像反射分量計算公式如下:

(10)

式中,r表示反射分量,t表示尺度參數(shù)。

3.3 界面彩色增強

(11)

式中,I表示色彩空間,U表示增益系數(shù),ωN表示N個圖像的色彩權(quán)重,Fj′表示顏色偏移量,是一個固定常數(shù)。

將色彩空間當作某個分量,結(jié)合界面入射光和反光角度α獲取亮度與飽和度存在的關(guān)系,得到RGB色彩變換的增強函數(shù):

X(RGB)=I(x,t)+α

(12)

式中,X(RGB)表示增強函數(shù),如果α的值不變,可結(jié)合I的變化情況得到增強函數(shù)的變化趨勢。

網(wǎng)頁界面圖像的亮度會存在一定波動,要想獲取圖像的最大亮度值,需要進行以下計算

(13)

式中,Fmax表示圖像最大亮度值,[χR(b,c)]、[χG(b,c)]和[χB(b,c)]表示圖像在RGB空間中像素點的像素分量。

運算Fmax中高于灰度閾值的色彩數(shù)量,公式如下

(14)

上述操作不僅增強了界面色彩,還能將界面亮度調(diào)整到合適的閾值,改善用戶的瀏覽體驗。

在優(yōu)化過程中,除了注重色彩搭配和亮度以外,還要關(guān)注頁面的布局是否規(guī)范。設計師需要明確界面主題,將關(guān)鍵信息放在醒目位置,達到良好的視覺傳達效果。主要從如下幾方面出發(fā):

1)導航欄必須簡潔醒目;

2)遵從用戶瀏覽界面時的視覺習慣;

3)最大程度減少用戶視覺疲勞;

4)分清界面的主從功能,合理設計瀏覽過程。

4 仿真過程與結(jié)果分析

為分析所提方法的視覺優(yōu)化效果,需要依托視覺展示系統(tǒng)。因此,在此次仿真中,設置一個具有超強采集性能和兼容性能的視覺展示系統(tǒng)。該系統(tǒng)的整體結(jié)構(gòu)如圖3所示。

圖3 視覺展示系統(tǒng)結(jié)構(gòu)示意圖

為了給各類方法提供良好的展示平臺,需要保證系統(tǒng)展示界面清晰,因此對系統(tǒng)如下硬件部分進行重點處理:

信息采集器:主要作用是收集外部信號,其芯片型號為TUD232,此芯片可以實現(xiàn)視頻、文字等數(shù)據(jù)的同步采集,性能全面。

處理器:設備型號為AARM10,針對采集的數(shù)據(jù)做進一步處理,選擇合理的顯示模板,顯示各類信息,通過處理器來解決系統(tǒng)運行效率低的問題。

顯示器:綜合考慮分辨率、清晰度等因素,選擇液晶顯示器。

1)負載測試

負載是體現(xiàn)網(wǎng)頁界面是否會出現(xiàn)卡頓的重要指標,當界面彈出時,如果系統(tǒng)負載上升較快,則容易出現(xiàn)卡頓現(xiàn)象。為此,利用下述公式分別計算所提方法、視覺注意機制、用戶觸點算法優(yōu)化后的界面負載情況,測試結(jié)果如圖4所示。

圖4 不同優(yōu)化方法負載測試結(jié)果圖

(15)

式中,G(W∩H)表示交叉分布概率函數(shù),G(W)和G(H)分別表示特征量和交互數(shù)據(jù)的概率密度函數(shù)。

依據(jù)式(15)計算不同方法的負載情況,結(jié)果如圖4所示。

由圖4可知,所提方法從界面運行開始到結(jié)束,系統(tǒng)的負載基本沒有出現(xiàn)變化,且在三種方法中始終保持負載最低;視覺注意機制的負載最高,當測試時間在15s時,出現(xiàn)下降趨勢,但不明顯;用戶觸點算法在界面運行初期出現(xiàn)較大波動,說明界面不夠穩(wěn)定,容易出現(xiàn)卡頓問題。說明所提方法能夠使系統(tǒng)運行負載最小,是因為該方法使用了大數(shù)據(jù)處理技術(shù),通過數(shù)據(jù)聚類將類似的信息規(guī)整到一起,不僅能夠提高界面的簡潔度,還能減少界面運行時的負載。

2)界面清晰度測試

將灰度值作為網(wǎng)絡界面清晰度的評價指標,上述三種方法的灰度值如圖5所示。

圖5 不同方法網(wǎng)頁界面灰度值分布示意圖

分析圖5可知,所提方法的灰度值分布十分均勻,而其它兩種方法不同灰度級上的灰度值分布差異較大。這表明信息圖形化方法能提高界面的清晰度,不會出現(xiàn)圖形模糊現(xiàn)象,改善了用戶的視覺體驗。這是因為所提方法使用圖像平滑處理技術(shù),并通過色彩增強處理來提高對比度,進而改善頁面畫質(zhì)。

3)界面整體效果

為突出本文方法的優(yōu)化效果,將優(yōu)化前、后的界面進行對比,如圖6和圖7所示。

圖6 優(yōu)化前網(wǎng)絡界面視覺圖

圖7 優(yōu)化后網(wǎng)絡界面視覺圖

從圖6和圖7中可以看出,優(yōu)化前的界面較為雜亂,各圖標形式?jīng)]有統(tǒng)一,圖標不夠簡潔,甚至有些圖標難以直觀反映其表示的含義;而優(yōu)化后的圖標形式規(guī)整、簡潔,整個界面復雜度很低,便于用戶直觀的獲取圖標所表示的含義,更能吸引用戶。

5 結(jié)論

將復雜的文字變換為可視化圖形,能夠提高用戶獲取信息的速度,也是信息圖形化價值的展現(xiàn)。為此,本文利用信息圖形化方法實現(xiàn)網(wǎng)頁界面的視覺優(yōu)化。分析信息圖形化設計原則,探究信息傳遞過程,利用大數(shù)據(jù)處理方法將信息聚類,減少冗余,再通過圖像處理技術(shù)提高界面清晰度。通過此次優(yōu)化,信息圖形化將以新的方式呈現(xiàn),為用戶帶來更好的體驗,所提方法必將會成為信息傳播的一條重要捷徑。