李馥穎,蔣 強(qiáng)

(1. 沈陽(yáng)理工大學(xué),遼寧 沈陽(yáng) 110159;2. 沈陽(yáng)理工大學(xué)自動(dòng)化與電氣工程學(xué)院,遼寧 沈陽(yáng) 110159)

1 引言

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

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

2 信息圖形化設(shè)計(jì)準(zhǔn)則

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

1)信息傳達(dá)

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

圖1 網(wǎng)頁(yè)界面設(shè)計(jì)的信息傳達(dá)方式

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

2)信息接收

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

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

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

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

2.2 信息圖形化設(shè)計(jì)準(zhǔn)則

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

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

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

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

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

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

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

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

3.1 信息預(yù)處理

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

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

(1)

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

(2)

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

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

(3)

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

(4)

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

(5)

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

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

3.2 圖形界面平滑處理

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

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

(6)

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

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

(7)

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

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

(8)

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

(9)

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

則圖像反射分量計(jì)算公式如下:

(10)

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

3.3 界面彩色增強(qiáng)

(11)

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

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

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

(12)

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

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

(13)

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

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

(14)

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

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

1)導(dǎo)航欄必須簡(jiǎn)潔醒目;

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

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

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

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

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

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

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

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

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

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

1)負(fù)載測(cè)試

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

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

(15)

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

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

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

2)界面清晰度測(cè)試

將灰度值作為網(wǎng)絡(luò)界面清晰度的評(píng)價(jià)指標(biāo),上述三種方法的灰度值如圖5所示。

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

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

3)界面整體效果

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

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

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

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

5 結(jié)論

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