基于用戶體驗(yàn)的網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)設(shè)計(jì)

錢 江

（蘇州科技大學(xué)，江蘇 蘇州 215000）

0 引 言

現(xiàn)如今，有很多互聯(lián)網(wǎng)產(chǎn)品在功能上都非常相似，網(wǎng)頁(yè)界面的外觀始終得不到創(chuàng)新發(fā)展，如何設(shè)計(jì)一個(gè)符合用戶需求、新穎且創(chuàng)新的網(wǎng)頁(yè)界面，是引發(fā)用戶瀏覽網(wǎng)頁(yè)的關(guān)鍵。網(wǎng)頁(yè)界面視覺傳達(dá)主要從用戶的感官、行為和情感三個(gè)方面出發(fā)，得到網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的設(shè)計(jì)方法[1]。國(guó)內(nèi)對(duì)于網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的關(guān)注開始逐漸增加，創(chuàng)新型網(wǎng)頁(yè)界面的數(shù)量也呈現(xiàn)著上升趨勢(shì)，但是整體的互聯(lián)網(wǎng)行業(yè)現(xiàn)狀仍然不夠理想。國(guó)內(nèi)從事網(wǎng)頁(yè)界面設(shè)計(jì)的專業(yè)人士越來越多，各大高校也陸續(xù)開設(shè)了視覺傳達(dá)專業(yè)，但是針對(duì)網(wǎng)頁(yè)界面視覺傳達(dá)來說，國(guó)內(nèi)的研究比較少[2]。國(guó)外的網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)已經(jīng)發(fā)展了很長(zhǎng)時(shí)間，如今已經(jīng)形成一套成熟的設(shè)計(jì)理論，并在設(shè)計(jì)過程中積累了大量的經(jīng)驗(yàn)，使得網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)飛速發(fā)展[3]。

文獻(xiàn)[4]以提升網(wǎng)頁(yè)界面用戶體驗(yàn)為主線，以視覺傳達(dá)系統(tǒng)設(shè)計(jì)作為切入點(diǎn)，分析網(wǎng)頁(yè)界面開發(fā)人員在追求網(wǎng)頁(yè)界面設(shè)計(jì)美感的同時(shí)，如何使網(wǎng)頁(yè)界面設(shè)計(jì)更加符合用戶的使用習(xí)慣和審美期待，從而減輕用戶的思維負(fù)擔(dān)；從視覺傳達(dá)特性、界面布局、心理學(xué)特征下的色彩搭配等方面為網(wǎng)頁(yè)界面開發(fā)人員提供以用戶體驗(yàn)為中心的視覺傳達(dá)系統(tǒng)設(shè)計(jì)理論依據(jù)。文獻(xiàn)[5]中為了改善用戶對(duì)網(wǎng)頁(yè)界面的體驗(yàn)效果，利用計(jì)算機(jī)視覺成像技術(shù)采集網(wǎng)頁(yè)界面視覺傳達(dá)的圖像信息，與邊緣輪廓提取法相結(jié)合，實(shí)現(xiàn)了網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)中圖像輪廓的檢測(cè)。網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)設(shè)計(jì)過程中，邊界特征檢測(cè)和多層結(jié)構(gòu)分解是在用戶體驗(yàn)效果的基礎(chǔ)上進(jìn)行的。通過對(duì)網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的鄰域像素信息融合，重建了其底層視覺結(jié)構(gòu)，并建立了用戶體驗(yàn)效果評(píng)估模型，針對(duì)用戶體驗(yàn)的影響，優(yōu)化了網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)。實(shí)驗(yàn)結(jié)果表明，該方法在網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)設(shè)計(jì)中具有良好的用戶體驗(yàn)和視覺傳達(dá)能力。

基于以上背景，本文將用戶體驗(yàn)應(yīng)用到了網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)設(shè)計(jì)中，有效提升網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的用戶體驗(yàn)效果。

1 網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)硬件設(shè)計(jì)

1.1 網(wǎng)頁(yè)界面搜索模塊設(shè)計(jì)

針對(duì)網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)而言，應(yīng)用詞語(yǔ)分類、專業(yè)術(shù)語(yǔ)等作為設(shè)計(jì)原則[6]，將網(wǎng)頁(yè)界面信息作為視覺傳達(dá)對(duì)象，網(wǎng)頁(yè)界面具有自身的視覺傳達(dá)系統(tǒng)。網(wǎng)頁(yè)界面搜索模塊的設(shè)計(jì)步驟如下：

1）明確網(wǎng)頁(yè)界面的具體搜索內(nèi)容

將網(wǎng)頁(yè)界面搜索區(qū)域展示在合適的區(qū)域，運(yùn)用搜索要素進(jìn)行內(nèi)容搜索，這種方式要比搜索所有文檔快，此時(shí)合適的搜索要素就變成了網(wǎng)頁(yè)界面搜索的關(guān)鍵問題。

2）明確網(wǎng)頁(yè)界面搜索算法

網(wǎng)頁(yè)界面搜索模塊包括語(yǔ)義算法和關(guān)鍵詞算法[7]，語(yǔ)義算法相對(duì)比較復(fù)雜。

3）構(gòu)造查詢生成器

對(duì)于網(wǎng)頁(yè)界面搜索模塊的查詢功能而言，不僅可以賦予搜索算法相應(yīng)的服務(wù)，還會(huì)影響搜索結(jié)果。

根據(jù)網(wǎng)頁(yè)界面搜索模塊的設(shè)計(jì)步驟，得到了網(wǎng)頁(yè)界面搜索模塊流程如圖1 所示。

圖1 網(wǎng)頁(yè)界面搜索模塊流程圖

網(wǎng)頁(yè)界面搜索模塊可以為用戶提供網(wǎng)站內(nèi)信息的搜索導(dǎo)向，讓用戶通過搜索目標(biāo)關(guān)鍵詞就可以搜索出相應(yīng)的內(nèi)容，滿足用戶對(duì)網(wǎng)站的體驗(yàn)需求。

1.2 網(wǎng)頁(yè)界面導(dǎo)航模塊設(shè)計(jì)

導(dǎo)航模塊作為網(wǎng)頁(yè)界面的對(duì)應(yīng)服務(wù)，網(wǎng)頁(yè)界面導(dǎo)航模塊可以完成網(wǎng)站縱覽的功能，讓用戶對(duì)網(wǎng)站內(nèi)部的相關(guān)信息一目了然。網(wǎng)頁(yè)界面導(dǎo)航模塊和銜接構(gòu)造是構(gòu)建網(wǎng)站過程中的關(guān)鍵步驟[8]。網(wǎng)站銜接結(jié)構(gòu)和導(dǎo)航模塊都是利用直接關(guān)聯(lián)至網(wǎng)站的方式，對(duì)用戶是否可以成功進(jìn)入網(wǎng)站起到了明顯作用。因此，需要仔細(xì)設(shè)計(jì)網(wǎng)頁(yè)界面導(dǎo)航模塊，圍繞網(wǎng)頁(yè)界面菜單形式和效果，對(duì)網(wǎng)頁(yè)界面導(dǎo)航模塊進(jìn)行詳細(xì)的設(shè)計(jì)。

構(gòu)建連接結(jié)構(gòu)和導(dǎo)航模塊對(duì)網(wǎng)頁(yè)界面的使用具有重要作用，其包括設(shè)定主菜單的位置、位置欄框架、鏈接結(jié)構(gòu)以及主頁(yè)鏈接返回模式[9]。網(wǎng)頁(yè)界面導(dǎo)航模塊的實(shí)現(xiàn)圖如圖2 所示。

圖2 網(wǎng)頁(yè)界面導(dǎo)航模塊的實(shí)現(xiàn)圖

根據(jù)網(wǎng)頁(yè)界面搜索模塊的設(shè)計(jì)步驟，設(shè)計(jì)了網(wǎng)頁(yè)界面搜索模塊流程，完成網(wǎng)頁(yè)界面搜索模塊設(shè)計(jì)，基于網(wǎng)頁(yè)界面導(dǎo)航模塊的實(shí)現(xiàn)，設(shè)計(jì)了網(wǎng)頁(yè)界面導(dǎo)航模塊，實(shí)現(xiàn)網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的硬件設(shè)計(jì)。

2 網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)軟件設(shè)計(jì)

2.1 采集網(wǎng)頁(yè)界面的視覺傳達(dá)信息

為了提高網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的用戶體驗(yàn)效果，需要結(jié)合網(wǎng)頁(yè)界面的審美特征，來分析用戶的體驗(yàn)效果，建立網(wǎng)頁(yè)界面視覺傳達(dá)的信息采集模型，利用多維化特征重構(gòu)的方式[10]，處理網(wǎng)頁(yè)界面視覺傳達(dá)的審美元素。在此，結(jié)合邊緣結(jié)構(gòu)化特征提取方法，采集網(wǎng)頁(yè)界面視覺傳達(dá)信息并重構(gòu)網(wǎng)頁(yè)界面的特征，得到網(wǎng)頁(yè)界面視覺傳達(dá)的像素信息，表示為：

式中：I(x)表示網(wǎng)頁(yè)界面視覺傳達(dá)的像素信息；J(x)表示采集到的網(wǎng)頁(yè)界面視覺傳達(dá)信息；t(x)表示網(wǎng)頁(yè)界面視覺傳達(dá)的信息結(jié)構(gòu)；A表示網(wǎng)頁(yè)界面的特征。計(jì)算網(wǎng)頁(yè)界面視覺傳達(dá)每一個(gè)像素的直方圖，利用直方圖均衡化處理，建立網(wǎng)頁(yè)界面視覺的特征空間分布模型，根據(jù)網(wǎng)頁(yè)界面的平均梯度和信息熵的理論[11]，加權(quán)處理網(wǎng)頁(yè)界面視覺傳達(dá)的空間特征，通過上述處理，可以得到網(wǎng)頁(yè)界面視覺傳達(dá)的信息采樣模型，將其定義為：

式中：f(x)表示網(wǎng)頁(yè)界面視覺傳達(dá)的特征向量融合模型；(x1,x2,xn)∈Rn表示網(wǎng)頁(yè)界面視覺傳達(dá)信息的輸出特征集。在信息采樣模型的基礎(chǔ)上將其表示為：

式中：網(wǎng)頁(yè)界面像素x作為局部鄰域；ai表示信息采集模型的審美元素；J(w,e)表示網(wǎng)頁(yè)界面視覺傳達(dá)的用戶體驗(yàn)效果；bi表示利用模板匹配技術(shù)得到網(wǎng)頁(yè)界面的像素通道。網(wǎng)頁(yè)界面視覺傳達(dá)模型可表示為：

式中，stdfilt( )x,y,wi表示網(wǎng)頁(yè)視覺傳達(dá)的構(gòu)造模型。本文基于網(wǎng)頁(yè)界面的視覺因素，結(jié)合網(wǎng)頁(yè)界面的審美特征，分析了用戶的體驗(yàn)效果，采用模板匹配技術(shù)采集了網(wǎng)頁(yè)界面的視覺傳達(dá)信息。接下來通過提取網(wǎng)頁(yè)界面的邊緣輪廓，檢測(cè)網(wǎng)頁(yè)界面的輪廓。

2.2 檢測(cè)網(wǎng)頁(yè)界面的輪廓特征

基于網(wǎng)頁(yè)界面視覺傳達(dá)信息的采集，提取了網(wǎng)頁(yè)界面的多尺度結(jié)構(gòu)信息，并根據(jù)用戶對(duì)網(wǎng)頁(yè)界面的體驗(yàn)效果需求，檢測(cè)網(wǎng)頁(yè)界面的邊緣結(jié)構(gòu)特征。采用網(wǎng)頁(yè)界面的審美元素特征重構(gòu)方法[12]，重建網(wǎng)頁(yè)界面的視覺傳達(dá)。將場(chǎng)景表面陰影與網(wǎng)頁(yè)界面的局部進(jìn)行融合，以提高網(wǎng)頁(yè)界面空間視覺的表現(xiàn)能力。將直方圖均衡化處理技術(shù)引入到網(wǎng)頁(yè)界面輪廓特征檢測(cè)中得到：

式中：L表示網(wǎng)頁(yè)視覺傳達(dá)多尺度結(jié)構(gòu)信息；eiθ表示網(wǎng)頁(yè)界面審美元素特征；mi表示根據(jù)網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)過程中的網(wǎng)頁(yè)細(xì)節(jié)信息。從而提取出網(wǎng)頁(yè)界面的美術(shù)元素，結(jié)合小波特征分解方法，得到輪廓檢測(cè)的適應(yīng)度函數(shù)，即：

式中：f(x),feasible 表示網(wǎng)頁(yè)界面的輪廓局部融合特征。將經(jīng)向紋理特征模型引入到網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)中，利用高斯函數(shù)對(duì)網(wǎng)頁(yè)界面輪廓特征進(jìn)行聯(lián)合加權(quán)，計(jì)算出網(wǎng)頁(yè)界面空間的加權(quán)函數(shù)族，將輪廓特征進(jìn)行紋理特征分解，得到網(wǎng)頁(yè)界面視覺傳達(dá)的輪廓形狀，即：

式中：mj(k)表示對(duì)網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的目標(biāo)先驗(yàn)形狀特征進(jìn)行統(tǒng)計(jì)學(xué)分析；zk-1表示建立網(wǎng)頁(yè)界面視覺輪廓檢測(cè)模型。從而可得到網(wǎng)頁(yè)界面輪廓特征的檢測(cè)輸出為：

式中，P1和P2分別表示網(wǎng)頁(yè)界面內(nèi)像素點(diǎn)的適應(yīng)度函數(shù)。通過以上處理提高了網(wǎng)頁(yè)視覺傳達(dá)的體驗(yàn)效果。

在直方圖均衡化處理技術(shù)的基礎(chǔ)上，得到網(wǎng)頁(yè)界面輪廓檢測(cè)的適應(yīng)度函數(shù)，再通過網(wǎng)頁(yè)界面視覺傳達(dá)的輪廓形狀，檢測(cè)出網(wǎng)頁(yè)界面的輪廓特征，接下來通過網(wǎng)頁(yè)界面的視覺傳達(dá)設(shè)計(jì)，來實(shí)現(xiàn)網(wǎng)頁(yè)界面的視覺傳達(dá)。

2.3 網(wǎng)頁(yè)界面的視覺傳達(dá)設(shè)計(jì)

通過網(wǎng)頁(yè)界面中相鄰像素信息的融合，重構(gòu)網(wǎng)頁(yè)界面視覺傳達(dá)的視覺結(jié)構(gòu)，通過建立網(wǎng)頁(yè)界面視覺傳達(dá)的用戶體驗(yàn)效果模型，得到了網(wǎng)頁(yè)界面視覺傳達(dá)的用戶體驗(yàn)適應(yīng)度函數(shù)，即：

式中Ct為根據(jù)網(wǎng)頁(yè)界面視覺傳達(dá)信息的觀測(cè)值。將網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的用戶體驗(yàn)效果評(píng)價(jià)集表示為：

式中，X表示網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的用戶體驗(yàn)效果初始向量；Y表示網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的審美元素特征差異性融合特征量；f1表示網(wǎng)頁(yè)視覺傳達(dá)的視覺結(jié)構(gòu)特征。根據(jù)網(wǎng)頁(yè)界面視覺傳達(dá)的重構(gòu)信息疊加值[4]，得到了網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的分布，即：

根據(jù)網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)過程中的色彩變化情況[14]，1 ≤j≤l表示得到了網(wǎng)頁(yè)界面視覺傳達(dá)的傳遞函數(shù)。根據(jù)網(wǎng)頁(yè)界面視覺傳達(dá)設(shè)計(jì)的藝術(shù)結(jié)構(gòu)信息，得到了網(wǎng)頁(yè)界面的審美元素，即：

這里重構(gòu)了網(wǎng)頁(yè)界面審美元素，在用戶體驗(yàn)的基礎(chǔ)上，根據(jù)審美元素重構(gòu)結(jié)果，實(shí)現(xiàn)了網(wǎng)頁(yè)界面的視覺傳達(dá)設(shè)計(jì)，并完成系統(tǒng)的軟件設(shè)計(jì)。

3 系統(tǒng)測(cè)試分析

為了驗(yàn)證基于用戶體驗(yàn)的測(cè)試網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的實(shí)用性，引入了文獻(xiàn)[4]網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)和文獻(xiàn)[5]網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)，從系統(tǒng)響應(yīng)時(shí)間和峰值信噪比兩個(gè)指標(biāo)，測(cè)試了系統(tǒng)的性能。

3.1 測(cè)試過程

在Matlab 實(shí)驗(yàn)平臺(tái)上進(jìn)行網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)測(cè)試實(shí)驗(yàn)，將網(wǎng)頁(yè)界面視覺傳達(dá)信息的像素集設(shè)置為500×500，網(wǎng)頁(yè)界面分塊模板的匹配值設(shè)置為25×25，測(cè)試過程中選取的網(wǎng)頁(yè)界面灰度分布閾值為1.0，平均灰度值為24，在網(wǎng)頁(yè)界面內(nèi)視覺成像的光圈直徑為14 mm。根據(jù)測(cè)試環(huán)境和測(cè)試參數(shù)的設(shè)定，進(jìn)行網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的性能測(cè)試。

3.2 系統(tǒng)響應(yīng)時(shí)間測(cè)試

三個(gè)網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的響應(yīng)時(shí)間測(cè)試結(jié)果如圖3 所示。

從圖3 的測(cè)試結(jié)果可以看出，三個(gè)網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的響應(yīng)時(shí)間沒有太大差別。

圖3 網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的響應(yīng)時(shí)間測(cè)試結(jié)果

文獻(xiàn)[4]網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)隨著網(wǎng)絡(luò)攻擊程度的加深，該系統(tǒng)由于沒有按照用戶對(duì)網(wǎng)頁(yè)界面視覺傳達(dá)需求進(jìn)行設(shè)置，導(dǎo)致用戶在網(wǎng)頁(yè)界面查找相關(guān)內(nèi)容時(shí)，會(huì)在網(wǎng)站中迷路，使得系統(tǒng)不斷地響應(yīng)，延長(zhǎng)了系統(tǒng)的總體響應(yīng)時(shí)間。

文獻(xiàn)[5]網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)由于沒有設(shè)計(jì)搜索模塊，導(dǎo)致用戶經(jīng)常為了尋找搜索界面，而使系統(tǒng)多次運(yùn)行操作，從而減慢了系統(tǒng)的響應(yīng)時(shí)間。

基于用戶體驗(yàn)的網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)不僅設(shè)計(jì)了網(wǎng)頁(yè)界面的導(dǎo)航模塊，還設(shè)計(jì)了搜索模塊。當(dāng)用戶在訪問網(wǎng)站時(shí)，可以為用戶指引方向，滿足用戶體驗(yàn)的同時(shí)，還可以縮短系統(tǒng)的響應(yīng)時(shí)間。

3.3 系統(tǒng)峰值信噪比測(cè)試

三個(gè)網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的峰值信噪比測(cè)試結(jié)果如圖4 所示。

圖4 網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的峰值信噪比測(cè)試結(jié)果

從圖4 的測(cè)試結(jié)果可以看出：

文獻(xiàn)[4]網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)在采集網(wǎng)頁(yè)界面的視覺傳達(dá)信息時(shí)，缺少網(wǎng)頁(yè)界面視覺傳達(dá)的信息采樣模型設(shè)計(jì)，導(dǎo)致系統(tǒng)的信噪比偏低。

文獻(xiàn)[5]網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)由于沒有檢測(cè)網(wǎng)頁(yè)界面的輪廓特征，導(dǎo)致網(wǎng)頁(yè)界面的邊緣會(huì)存在瑕疵，降低了系統(tǒng)的信噪比。

基于用戶體驗(yàn)的網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)在軟件設(shè)計(jì)部分，先采集了網(wǎng)頁(yè)界面的視覺傳達(dá)信息，又對(duì)網(wǎng)頁(yè)界面的輪廓特征進(jìn)行了檢測(cè)，使得網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的峰值信噪得以提高。

4 結(jié) 語(yǔ)

本文提出了基于用戶體驗(yàn)的網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)設(shè)計(jì)，將用戶體驗(yàn)分別應(yīng)用到了網(wǎng)頁(yè)界面視覺傳達(dá)系統(tǒng)的硬件和軟件設(shè)計(jì)中，實(shí)現(xiàn)了網(wǎng)頁(yè)界面視覺傳達(dá)的設(shè)計(jì)，測(cè)試結(jié)果顯示，該系統(tǒng)不僅具有較高的性能，還可以提高用戶的體驗(yàn)效果。