基于視覺傳達(dá)的網(wǎng)頁界面信息顯示系統(tǒng)案例分析

張燕，姚江 （常州大學(xué)，江蘇 常州 213000） 摘??要：為了解決傳統(tǒng)信息顯示系統(tǒng)存在的用戶滿意率低以及響應(yīng)時(shí)間長(zhǎng)的問題，文中設(shè)計(jì)一種基于視覺傳達(dá)的網(wǎng)頁界面信息顯示系統(tǒng)。系統(tǒng)硬件分別由信息采集模塊、信息導(dǎo)入模塊、信息顯示模塊、素材管理模塊和交互模塊組成，各個(gè)模塊之間緊密聯(lián)系，系統(tǒng)的運(yùn)行能力得到提升。在系統(tǒng)硬件的支持下進(jìn)行軟件設(shè)計(jì)，采用激光掃描設(shè)備采集網(wǎng)頁界面多角度圖像，根據(jù)視覺傳達(dá)理論分析網(wǎng)頁界面的紋理、顏色特征，對(duì)全部圖像進(jìn)行配準(zhǔn)，以配準(zhǔn)結(jié)果為基礎(chǔ)進(jìn)行網(wǎng)頁界面的幾何建模，并將建模結(jié)果映射到交互過程中，顯示網(wǎng)頁界面信息，基于此實(shí)現(xiàn)基于視覺傳達(dá)的網(wǎng)頁界面信息顯示系統(tǒng)設(shè)計(jì)。仿真實(shí)驗(yàn)結(jié)果表明，該系統(tǒng)的用戶滿意度高，網(wǎng)頁界面信息顯示情況少，且響應(yīng)時(shí)間更短。 ?

0 引 言

隨著數(shù)字化技術(shù)的誕生及其在實(shí)際中的廣泛應(yīng)用，促使視覺藝術(shù)逐步朝著多媒體融合以及跨媒介融合方向發(fā)展[1]。網(wǎng)頁設(shè)計(jì)作為一種綜合多學(xué)科的數(shù)字媒體藝術(shù)形式，到目前為止，網(wǎng)頁設(shè)計(jì)在互聯(lián)網(wǎng)的支持下逐步走向成熟并呈現(xiàn)出多樣化的特點(diǎn)，因此優(yōu)化網(wǎng)頁界面信息顯示效果已經(jīng)成為視覺設(shè)計(jì)領(lǐng)域的熱點(diǎn)話題[2?3]。

目前對(duì)于網(wǎng)頁界面信息顯示系統(tǒng)的研究很少，更多的是針對(duì)于教育與其他社會(huì)領(lǐng)域，例如基于單片機(jī)的網(wǎng)絡(luò)化教室教學(xué)信息顯示系統(tǒng)[4]以及結(jié)合圖像語義分割的增強(qiáng)現(xiàn)實(shí)型平視顯示系統(tǒng)設(shè)計(jì)與研究[5]，但這兩種應(yīng)用適用性較差，影響用戶體驗(yàn)。在網(wǎng)頁界面信息顯示系統(tǒng)設(shè)計(jì)過程中，需要將用戶體驗(yàn)作為重點(diǎn)，為用戶提供一個(gè)完美的視覺享受，發(fā)揮網(wǎng)頁設(shè)計(jì)的獨(dú)特魅力[6]。因此，根據(jù)這些需求，本文設(shè)計(jì)一種基于視覺傳達(dá)的網(wǎng)頁界面信息顯示系統(tǒng)，并通過實(shí)驗(yàn)驗(yàn)證了該系統(tǒng)的實(shí)際應(yīng)用效果。

1 網(wǎng)頁界面信息顯示系統(tǒng)

1.1 系統(tǒng)硬件設(shè)計(jì)

1.1.1 信息采集模塊

在用戶通過賬戶與密碼登錄系統(tǒng)后，系統(tǒng)通過網(wǎng)絡(luò)協(xié)議位置獲取用戶的地理位置，同時(shí)需要把采集到的地理位置的環(huán)境資訊轉(zhuǎn)換為環(huán)境參數(shù)。信息采集模塊硬件結(jié)構(gòu)具體如圖 1所示。

分析圖1可知，用戶信息采集模塊通過Python采集用戶所有信息，包括歷史瀏覽信息以及位置信息等；并利用主單片機(jī)調(diào)控整個(gè)模塊，保證信息采集模塊的正常運(yùn)行[7?8]。在此基礎(chǔ)上，將所采集到的信息通過GPRS/GSM網(wǎng)絡(luò)傳輸至系統(tǒng)中，并將信息存儲(chǔ)至SPI串行FLASH存儲(chǔ)器中，為后續(xù)的網(wǎng)頁界面信息顯示提供數(shù)據(jù)基礎(chǔ)。時(shí)鐘主要是為用戶信息采集模塊提供時(shí)間標(biāo)記功能。 1.1.2 信息導(dǎo)入模塊 需要根據(jù)用戶需求利用WireFusion中自帶的多種功能對(duì)資源進(jìn)行重新編寫，因此信息導(dǎo)入模塊是系統(tǒng)的重要組成部分之一[9]。利用 WireFusion 的腳本對(duì)各種信息進(jìn)行編寫以及為后續(xù)的3D模型制作和場(chǎng)景漫游提供重要支撐。一般的WireFusion工作模式具體如 圖2所示。 由圖2可知，WireFusion腳本編寫過程中首先需要在腳本區(qū)域面板中放置對(duì)象模塊，進(jìn)而選擇該模塊中的某一個(gè)輸出變量并與另一對(duì)象相連接，實(shí)現(xiàn)不同對(duì)象之間的數(shù)據(jù)傳輸，完成信息導(dǎo)入[10]。

1.1.3 信息顯示模塊

信息顯示模塊是網(wǎng)頁界面信息顯示系統(tǒng)中的最重要的模塊，主要由平面設(shè)計(jì)子模塊、驅(qū)動(dòng)程序子模塊、網(wǎng)頁界面信息顯示子模塊三個(gè)子模塊組成。平面設(shè)計(jì)子模塊的主要功能是根據(jù)用戶需求調(diào)動(dòng)存儲(chǔ)在數(shù)據(jù)庫中的圖像信息，并且利用相關(guān)的圖像處理工具對(duì)圖像進(jìn)行裁剪、修正、像素等方面的調(diào)整[11?12]。驅(qū)動(dòng)程序子模塊的功能是構(gòu)建基礎(chǔ)環(huán)境，當(dāng)用戶在瀏覽網(wǎng)頁時(shí)，自動(dòng)啟動(dòng)平面圖象設(shè)計(jì)子模塊，提供個(gè)性化的服務(wù)；網(wǎng)頁界面信息顯示子模塊將所有的個(gè)性化信息包括數(shù)據(jù)以及圖像等展示給用戶，以提升用戶體驗(yàn)。三個(gè)模塊既相互獨(dú)立又相互聯(lián)系，它們組成了一個(gè)相互傳遞信息的開放式并行系統(tǒng)[13]。在網(wǎng)頁界面信息顯示系統(tǒng)中，這三個(gè)子模塊工作可以同時(shí)進(jìn)行。三個(gè)子模塊的連接關(guān)系見圖3。

信息顯示模塊構(gòu)建的過程就是該模塊發(fā)展演變的過程，只有當(dāng)這三個(gè)子模塊趨于穩(wěn)定時(shí)，就可以輸出個(gè)性化的網(wǎng)頁界面信息顯示結(jié)果。 1.1.4?素材管理模塊 素材管理可以用于一般的網(wǎng)頁頁面信息管理，也可以用于三維媒體管理。該模型在瀏覽1張圖片的過程中會(huì)根據(jù)腳本中的媒體信息在數(shù)據(jù)庫中創(chuàng)建一個(gè)數(shù)據(jù)包，進(jìn)而對(duì)這一數(shù)據(jù)包處理，最后根據(jù)用戶交互需求調(diào)動(dòng)不同的數(shù)據(jù)包。系統(tǒng)與用戶在進(jìn)行交互時(shí)會(huì)存在場(chǎng)景的切換[14?15]，因此在素材管理模塊中，根據(jù)每一種網(wǎng)頁設(shè)計(jì)生成一個(gè)組件，并利用數(shù)字媒體管理器對(duì)這些組件進(jìn)行管理，具體過程如圖4所示。

1.1.5 交互模塊 用戶與網(wǎng)頁界面信息顯示系統(tǒng)進(jìn)行交互的流程為：首先需要在腳本程序中獲得瀏覽對(duì)象，并根據(jù)用戶個(gè)性化信息加載網(wǎng)頁界面信息；進(jìn)而利用瀏覽器對(duì)象訪問用戶交互場(chǎng)景，并由場(chǎng)景對(duì)象訪問節(jié)點(diǎn)對(duì)象；最后通過節(jié)點(diǎn)訪問域?qū)ο?。具體交互原理如圖5所示。用戶通過點(diǎn)擊JSP頁面控件來改變?nèi)S場(chǎng)景，還可以根據(jù)不同節(jié)點(diǎn)對(duì)三維場(chǎng)景漫游路徑與視角進(jìn)行選擇，以增強(qiáng)用戶體驗(yàn)。

1.2 基于視覺傳達(dá)的軟件設(shè)計(jì) 在網(wǎng)頁界面信息顯示過程中，采用激光掃描設(shè)備采集網(wǎng)頁界面多角度圖像，根據(jù)視覺傳達(dá)理論分析網(wǎng)頁界面的紋理、顏色特征，對(duì)全部圖像進(jìn)行配準(zhǔn)，以配準(zhǔn)結(jié)果為基礎(chǔ)進(jìn)行網(wǎng)頁界面的幾何建模，并將建模結(jié)果映射到交互過程中，實(shí)現(xiàn)網(wǎng)頁界面信息顯示。 假設(shè)網(wǎng)頁界面視覺圖像用f(x,y) 進(jìn)行描述，交互空間用αq進(jìn)行描述，具備相同坐標(biāo)點(diǎn)的點(diǎn)集用q[y]和q[h]進(jìn)行描述，對(duì)f(x,y)進(jìn)行變換處理，此時(shí)會(huì)輸出一個(gè)網(wǎng)頁界面視覺圖像 g(x,y)，網(wǎng)頁界面的紋理、顏色等特征提取公式具體如下： 式中:?(u)表示根據(jù)視覺傳達(dá)理論采集到的網(wǎng)頁界面多視角圖像；?(k)表示顏色特征向量;ν?(D)表示圖像紋理特征向量。假設(shè),用?(k)表示輸出的網(wǎng)頁界面視覺圖像輪廓線,w(k)表示兩個(gè)區(qū)域的匹配程度，則根據(jù)圖像特征對(duì)所有網(wǎng)頁界面多視角圖像進(jìn)行配準(zhǔn)處理，具體如下： 式中:ε(k)表示圖像特征點(diǎn)匹配度;E(R)表示圖像特征向量方差;?(ξ)表示圖像交互過程中的特征向量變化程度;μ(e)代表網(wǎng)頁界面多視角圖像像素點(diǎn)灰度級(jí)。 假設(shè),?(j)代表紋理排列規(guī)則,S(w) 表示投影矩陣，以配準(zhǔn)結(jié)果為基礎(chǔ)進(jìn)行網(wǎng)頁界面幾何建模并映射到圖像交互過程中，實(shí)現(xiàn)網(wǎng)頁界面信息顯示。 式中：XT代表圖像像素點(diǎn)；μ(W)代表網(wǎng)頁界面的幾何建模結(jié)果；?(?)代表用戶交互參數(shù)；α(w)代表像素坐標(biāo)和世界坐標(biāo)之間的關(guān)系；?(μ)代表視覺效果的最佳值。 ?

2 仿真實(shí)驗(yàn)設(shè)計(jì)

為了驗(yàn)證基于視覺傳達(dá)的網(wǎng)頁界面信息顯示系統(tǒng)的實(shí)際應(yīng)用效果，需要進(jìn)行實(shí)驗(yàn)測(cè)試。其中實(shí)驗(yàn)環(huán)境設(shè)置具體如表1所示。

選擇文獻(xiàn)[4]系統(tǒng)、文獻(xiàn)[5]系統(tǒng)以及本文系統(tǒng)進(jìn)行實(shí)驗(yàn)測(cè)試，通過比較三種系統(tǒng)的客戶滿意度、顯示錯(cuò)誤情況以及系統(tǒng)響應(yīng)時(shí)間來比較系統(tǒng)的綜合性能。 需要1100名用戶對(duì)三種系統(tǒng)的滿意度以及顯示錯(cuò)誤情況進(jìn)行評(píng)分與統(tǒng)計(jì)，其中滿意度最高分為10分，最低分為0分。詳細(xì)的評(píng)分過程為：向1100名用戶提供三種系統(tǒng)的登錄賬號(hào)以及密碼，并對(duì)這1100名用戶進(jìn)行網(wǎng)絡(luò)回訪，獲取用戶對(duì)三種系統(tǒng)的滿意度評(píng)分，其中回收問卷1010份，有效回收率為91.81%。由于用戶主觀性較強(qiáng)，可能會(huì)造成評(píng)分結(jié)果過于偏向主觀性，因此令用戶對(duì)三種系統(tǒng)進(jìn)行多次評(píng)價(jià)，最終對(duì)每名用戶的評(píng)價(jià)結(jié)果取均值。將1010名用戶分為10組，每組101人，取每組評(píng)分結(jié)果的平均值。具體評(píng)分結(jié)果見圖6。分析圖6可知，文獻(xiàn)[4]系統(tǒng)的用戶滿意度評(píng)分在5.2~7.1之間，文獻(xiàn)[5]系統(tǒng)的用戶滿意度評(píng)分在5.8~7.7之間，而與這兩種系統(tǒng)相比，本文所設(shè)計(jì)系統(tǒng)的用戶滿意度評(píng)分均在9.5以上，說明本文系統(tǒng)的用戶體驗(yàn)更好。以上結(jié)果并不能全面反映三種系統(tǒng)的性能，因此在上述基礎(chǔ)上比較了三種系統(tǒng)的顯示錯(cuò)誤情況，具體比較結(jié)果如表2所示。

分析表2可知，文獻(xiàn)[4]系統(tǒng)的顯示錯(cuò)誤總量為210個(gè)，文獻(xiàn)[5]系統(tǒng)的顯示錯(cuò)誤總量為 451個(gè)，本文所設(shè)計(jì)系統(tǒng)的顯示錯(cuò)誤總量為僅為24個(gè)。表明本文系統(tǒng)顯示錯(cuò)誤情況更少，系統(tǒng)性能更優(yōu)。最后比較了三種系統(tǒng)的響應(yīng)時(shí)間，結(jié)果如表3所示。

?

分析表3可知,文獻(xiàn)[4]系統(tǒng)的響應(yīng)時(shí)間均值為12.7s，文獻(xiàn)[5]系統(tǒng)的響應(yīng)時(shí)間均值為8.0 s，本文所設(shè)計(jì)系統(tǒng)的響應(yīng)時(shí)間均值為1.3s。與文獻(xiàn)[4]與文獻(xiàn)[5]相比，本文所設(shè)計(jì)系統(tǒng)的響應(yīng)時(shí)間更短，響應(yīng)效率更高。

3 結(jié) 論

傳統(tǒng)的網(wǎng)頁界面設(shè)計(jì)主要遵循功能性原則，基本上都是由字符組成，以此進(jìn)行信息的傳遞。近年來，隨著國(guó)民審美意識(shí)不斷提高，使得人們對(duì)網(wǎng)頁界面信息顯示提出了更高的要求。因此，本文結(jié)合視覺傳達(dá)理論，設(shè)計(jì)一種基于視覺傳達(dá)的網(wǎng)頁界面信息顯示系統(tǒng)，通過采用硬件架構(gòu)設(shè)計(jì)與軟件機(jī)制相結(jié)合的方式提升了網(wǎng)頁界面信息顯示的視覺效果，并通過實(shí)驗(yàn)驗(yàn)證了該系統(tǒng)的優(yōu)異性能，后續(xù)可以應(yīng)用在互聯(lián)網(wǎng)網(wǎng)頁界面設(shè)計(jì)的工作中。

參 考 文 獻(xiàn)

[1] 姚文婷，江菲飛 .數(shù)字式多媒體圖像連續(xù)視覺特征標(biāo)注仿真研究[J].計(jì)算機(jī)仿真，2019，36（8）：191?194.

[2] 劉銘瑀，劉學(xué)亮，胡駿 .一種自動(dòng)分類的網(wǎng)頁搜索排序算法[J].計(jì)算機(jī)應(yīng)用研究，2019，36（1）：87?90.

[3] 孫峻嶺，假露青，劉其軍，等 .基于集群的 Web并行超高分辨率顯示技術(shù)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2019，28（3）：66?72.

[4] 馬杏燁，馬陽陽，于慶濤，等 .一種基于單片機(jī)的網(wǎng)絡(luò)化教室教學(xué)信息顯示系統(tǒng)設(shè)計(jì)[J].信息記錄材料，2019，20（2）：42?43.

[5] 安喆，徐熙平，楊進(jìn)華，等 .結(jié)合圖像語義分割的增強(qiáng)現(xiàn)實(shí)型平視顯示系統(tǒng)設(shè)計(jì)與研究[J].光學(xué)學(xué)報(bào)，2018，38（7）：85?91.

[6] 文星.基于移動(dòng)終端適配技術(shù)的網(wǎng)站頁面信息顯示方法[J].自動(dòng)化與儀器儀表，2019（12）：126?129.

[7] 王紹奔，毛征，李猛，等 . 行車/行飛電子顯示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].國(guó)外電子測(cè)量技術(shù)，2020，39（5）：132?137.

[8] 何磊，梁發(fā)云，楊金遠(yuǎn)，等 . 基于 FPGA 的裸眼 3D 圖像顯示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].電子器件，2018，41（5）：1226?1230.

[9] 楊光義，郭宗昊，徐博，等 .多點(diǎn)觸控電子墨水屏顯示系統(tǒng)研究[J].實(shí)驗(yàn)技術(shù)與管理，2018，35（8）：73?78.

[10] 梁賽，王志斌，薛鵬，等 . 基于 AOTF 高光譜成像系統(tǒng)的采集顯示技術(shù)研究[J].電子器件，2018，41（1）：79?84.

[11] 金文祥，王紹偉，時(shí)繼潮，等 .一種低成本的 GPS定位信息采集顯示系統(tǒng)[J].單片機(jī)與嵌入式系統(tǒng)應(yīng)用，2018，18（8）：46?48.

[12] 肖朝，陳鋒，鐘敏，等 . 基于魚眼相機(jī)的全景顯示系統(tǒng)幾何校正方法[J].激光與光電子學(xué)進(jìn)展，2017，54（2）：225?231.

[13] 吳祥坤，章夢(mèng)彪，徐靈佳，等 .基于 Android平臺(tái)的信息采集與遠(yuǎn)程顯示系統(tǒng)研究[J].吉林大學(xué)學(xué)報(bào)（信息科學(xué)版），2017，35（2）：212?219.

[14] 曾崇，郭華龍，曾志宏，等 . 基于光場(chǎng)掃描的真三維立體顯示系統(tǒng)的開發(fā)[J].計(jì)算機(jī)科學(xué)，2018，45（z1）：598?600.

[15] 秦華鋒，周軍 .基于 Web 數(shù)值模式交互顯示系統(tǒng)設(shè)計(jì)[J].氣象科技，2018，46（1）：194?199.

作者簡(jiǎn)介：

張 燕（1986—），女，江蘇啟東人，碩士，講師，研究方向?yàn)?a target="_blank">產(chǎn)品系統(tǒng)設(shè)計(jì)開發(fā)、人機(jī)工程學(xué)、系統(tǒng)界面設(shè)計(jì)。

姚?江（1982—），女，陜西西安人，博士，副教授，研究方向?yàn)楫a(chǎn)品系統(tǒng)設(shè)計(jì)開發(fā)、視覺傳達(dá)、交互設(shè)計(jì)。

編輯：黃飛

?