利用計算機(jī)交互技術(shù)的網(wǎng)頁界面文本視覺優(yōu)化設(shè)計

楊勐荷　鄭雷

摘 ?要： 以搭建人與計算機(jī)信息交流橋梁為目的，提出基于計算機(jī)交互技術(shù)的網(wǎng)頁界面文本視覺優(yōu)化設(shè)計方法。通過圖形用戶界面、用戶需求分析、數(shù)據(jù)處理、界面圖像增強、界面文本優(yōu)化等步驟實現(xiàn)網(wǎng)頁界面文本視覺優(yōu)化設(shè)計。其中，數(shù)據(jù)處理采用的是基于計算機(jī)交互技術(shù)的大數(shù)據(jù)集成處理界面交互過程中產(chǎn)生的信息，提高人機(jī)界面交互時的大數(shù)據(jù)融合及信息聚類能力;采用基于視覺特性的網(wǎng)頁界面圖像色彩增強算法，結(jié)合文字外形特征與色彩的優(yōu)化，共同實現(xiàn)網(wǎng)頁界面文本視覺優(yōu)化設(shè)計，提高人機(jī)交互網(wǎng)頁界面視覺效果。測試結(jié)果表明，所提方法的大數(shù)據(jù)處理效率較高，可營造更加舒適的網(wǎng)頁界面圖像視覺效果，能夠達(dá)到絕大多數(shù)用戶的滿意度需求。

關(guān)鍵詞： 網(wǎng)頁界面; 文本視覺優(yōu)化; 人機(jī)交互; 大數(shù)據(jù)處理; 數(shù)據(jù)融合; 結(jié)果分析

中圖分類號： TN919?34; TP391 ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識碼： A ? ? ? ? ? ? ? ? ? ? ? 文章編號： 1004?373X（2020）24?0092?04

Design of web interface text visual optimization utilizing computer interaction technology

YANG Menghe1， ZHENG Lei2

（1. Dankook University， Yongin 16890， South Korea; 2. Xuzhou University of Technology， Xuzhou 221000， China）

Abstract： A method of web interface text visual optimization design based on computer interaction technology is proposed to build a bridge of information communication between human and computer. The text visual optimization design of web interface is realized by the steps of graphical user interface， user demand analysis， data processing， interface image enhancement， interface text optimization， etc. The data processing adopts the big data integration based on the computer interaction technology to process the information generated in the interface interaction process， so as to improve the abilities of big data fusion and information clustering in the human?computer interface interaction. The design of web interface text visual optimization is achieved by means of the web interface image color enhancement algorithm based on the visual characteristic and in combination with character shape features and color optimization， so as to improve the visual effect of the human?computer interaction web interface. The testing results show that the proposed method has high efficiency in big data processing， and can create a more comfortable visual effect of web interface images， which can meet the satisfaction requirements of most users.

Keywords： web interface; text visual optimization; human?computer interaction; big data processing; data fusion; result analysis

0 ?引 ?言

計算機(jī)交互技術(shù)是人與計算機(jī)通過計算機(jī)輸入/輸出設(shè)備，有效地實現(xiàn)人與計算機(jī)對話的技術(shù)。網(wǎng)頁界面是一種可以同時展示文本、圖形、聲音、視頻等內(nèi)容的新興界面，其具備表現(xiàn)形式多、互動功能強的優(yōu)勢。為使人與計算機(jī)更好地完成對話、實現(xiàn)心理和情感的交流，需要對人機(jī)交互的網(wǎng)頁界面進(jìn)行優(yōu)化[1]。在人機(jī)交互的過程中有很多因素導(dǎo)致界面圖像、文本的界面呈現(xiàn)效果的視覺感受不佳，因此，本文提出基于計算機(jī)交互技術(shù)的網(wǎng)頁界面文本視覺優(yōu)化的方法，從整體數(shù)據(jù)處理、界面文本圖像增強優(yōu)化和文本文字優(yōu)化幾個方面進(jìn)行優(yōu)化，使文字、圖像等多種類型的信息能夠完全呈現(xiàn)出來[2]，實現(xiàn)網(wǎng)頁界面文本視覺優(yōu)化的目的。

[?=bels8·Length·Wide·100256] （15）

式中：[bels8]表示8位二進(jìn)制沒有符號的整數(shù);[Length]為圖像的長;[Wide]為圖像的寬;256和100分別為灰度值數(shù)量和閾值的量。

閾值的灰度值不小于像素點無需調(diào)整，降低數(shù)量較小灰度值對映射的影響，映射后的灰度值也是指數(shù)映射函數(shù)，其為：

[MapRGBi，j=255?a-1b-2h1] （16）

式中：[a和b]為常數(shù);[MapRGBi，j]為映射后灰度值。則圖像最優(yōu)像素灰度值[h1]為：

[h1=0.042 8?LvAVG2-0.115 2?LvAVG+ ? ? ? ? 0.572 2] （17）

式中，[AVG]為圖像[MapRGBi，j]灰度均值。

2） 增強局部對比度。圖像整體低照度區(qū)域的細(xì)節(jié)在圖像整體亮度調(diào)整后也得以提高，為使圖像細(xì)節(jié)更加優(yōu)化，利用局部區(qū)域像素灰度值間的關(guān)聯(lián)性提高圖像亮度局部對比度[12]。

為使存儲圖像的邊緣細(xì)節(jié)可以更好地存儲，采用中值濾波實現(xiàn)存儲，因此中值濾波的方法運算亮度均值[PasRGBi，j]為：

[PasRGBi，j=AVGMapRGBi，j] （18）

結(jié)合式（18）獲取亮度均值后，完成圖像色彩局部對比度增強值為：

[BiuRGBi，j=h2MapRGBi，j-PasRGBi，j+ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?MapRGBi，j] （19）

式中：[h2]=2;[MapRGBi，j]為整體亮度處理后的像素灰度值;[PasRGBi，j]為區(qū)域亮度均值;[BiuRGBi，j]為局部對比增強的灰度值。

1.4 ?網(wǎng)頁界面文本文字優(yōu)化

人機(jī)交互界面除了圖像信息，還有文字信息。文字作為文本的一種視覺表意符號，通常只將其視為傳遞信息的一種手段，只看重其本身含有的意義與圖形文字的美觀性，卻忽略了其作為一種視覺表意符號在表達(dá)情感方面的作用。因此，文本提出的視覺優(yōu)化，能在一定程度上彌補文本缺失的細(xì)節(jié)，使情感能夠通過文本文字來表達(dá)[13?14]。這也是計算機(jī)交互的網(wǎng)頁界面文本視覺優(yōu)化的一部分。

為了使文本帶給人們不同的心理感受，以及傳達(dá)不同的心情，通過文本字體的改變實現(xiàn)情感的表達(dá)，圖2為不同的文本字體視覺展現(xiàn)。

圖2中三種不同的字體會給人們帶來不同的心理感受，舒體在視覺上會讓人有種急切感，華文彩云字體會給人一種很安心的視覺感受，這兩種字體會帶動人們的情緒和情感，而黑體就沒有這些視覺感受，也沒有任何情緒的帶動。因此，文本文字作為造型要素來傳達(dá)情感的時候，主要由其外形特征體現(xiàn)想要傳達(dá)的視覺的感受[15]，不同的外形特征會帶給人們不一樣的視覺動向。除此之外，文本文字的色彩選擇也是帶動人們情感的因素之一，圖2中用了溫馨的粉色，會使人們視覺上覺得溫暖。因此，網(wǎng)頁界面文本視覺優(yōu)化相關(guān)的文本字體和色彩至關(guān)重要。

2 ?方法驗證

為了測試本文方法在實現(xiàn)人機(jī)界面交互時大數(shù)據(jù)處理的性能，分別采用本文方法與仿生色彩增強方法處理同一金融行業(yè)的大數(shù)據(jù)，對比不同大數(shù)據(jù)量下兩種方法大數(shù)據(jù)處理所需時間，對比結(jié)果如表1所示。測試采用Matlab 數(shù)學(xué)軟件，大數(shù)據(jù)的分布樣本集為200，樣本采集的時間間隔為0.25 s， 大數(shù)據(jù)信息處理的嵌入式分布時間延遲[τ=5]。

由表1可知，伴隨大數(shù)據(jù)量的增加，兩種方法的大數(shù)據(jù)處理所需時間呈上升趨勢，當(dāng)大數(shù)據(jù)量較小時，兩種方法的大數(shù)據(jù)處理用時差異較小，但隨著大數(shù)據(jù)量的增加，本文方法用時呈穩(wěn)步增長態(tài)勢，而仿生色彩增強方法用時增長較快，當(dāng)大數(shù)據(jù)量達(dá)到5 000 GB時，本文方法用時僅為0.19 s，而仿生色彩增強方法用時達(dá)到0.62 s。由此可見，本文方法的大數(shù)據(jù)處理效率較高。為了衡量本文方法優(yōu)化設(shè)計完成的網(wǎng)頁界面文本圖像視覺效果，對比兩種方法優(yōu)化設(shè)計后網(wǎng)頁界面文本圖像的灰度值均值和圖像對比度提升指數(shù)，結(jié)果分別如圖3和圖4所示。

由圖3可知，采用本文方法優(yōu)化后的網(wǎng)頁界面圖像整體灰度值均值、局部灰度值均值分別為186.34，111.34，采用仿生色彩增強方法優(yōu)化后的圖像整體灰度值均值、局部灰度值均分別為131.56，96.42。本文方法優(yōu)化后的網(wǎng)頁界面圖像灰度值均值高于仿生色彩增強方法優(yōu)化后的圖像灰度值均值，因此采用本文方法優(yōu)化設(shè)計后的網(wǎng)頁界面圖像亮度更佳，具備更好的圖像視覺效果。由圖4可知，采用本文方法優(yōu)化后的網(wǎng)頁界面圖像整體對比度提升指數(shù)、局部提升指數(shù)分別為5.43，5.76，采用仿生色彩增強方法的網(wǎng)頁界面圖像整體對比度提升指數(shù)、局部提升指數(shù)分別為2.23，2.32。證明采用本文方法優(yōu)化設(shè)計后網(wǎng)頁界面圖像的視覺效果優(yōu)于別的，可營造更加舒適的網(wǎng)頁界面圖像視覺效果。為進(jìn)一步驗證網(wǎng)頁界面文本視覺優(yōu)化后的視覺效果，通過隨機(jī)抽取環(huán)球資源網(wǎng)中的100名用戶，平均分成10組，統(tǒng)計10組用戶對本文方法和仿生色彩增強方法優(yōu)化后的網(wǎng)頁界面文本視覺效果滿意度，對比結(jié)果見表2。

由表2可知，采用本文方法優(yōu)化設(shè)計后的網(wǎng)頁界面文本視覺效果的用戶滿意度都在98%以上，采用仿生色彩增強方法的用戶滿意度僅在91%左右，本文方法優(yōu)化設(shè)計后的網(wǎng)頁界面文本視覺滿意度顯著高于對比方法。測試結(jié)果表明，本文方法的網(wǎng)頁界面文本視覺優(yōu)化效果更好，可達(dá)到絕大多數(shù)用戶的滿意度需求。

3 ?結(jié) ?論

網(wǎng)頁界面的視覺優(yōu)化是為更好地完成人機(jī)交互提供保障，網(wǎng)頁界面的圖像、文字等文本的視覺優(yōu)化，能夠更好地為人們提供視覺體驗，帶動人們的情感和情緒。為使信息以最好、最有效的方式在人與計算機(jī)之間傳遞，使人機(jī)交互更好地完成，本文采用基于視覺特性的網(wǎng)頁界面色彩圖像增強方法及文字優(yōu)化的方法，實現(xiàn)網(wǎng)頁界面文本視覺的優(yōu)化，通過測試分析可知，本文方法具有良好的視覺優(yōu)化效果。

注：本文通訊作者為鄭雷。

參考文獻(xiàn)

[1] 張輝，王盼，肖軍浩，等.一種基于三維建圖和虛擬現(xiàn)實的人機(jī)交互系統(tǒng)[J].控制與決策，2018，33（11）：1975?1982.

[2] 葉萌，吳凱，馮佰威，等.面向船型阻力性能優(yōu)化的知識獲取技術(shù)研究[J].船舶力學(xué)，2019，23（10）：1151?1159.

[3] 胡光忠，朱齡，喬鴻靜，等.基于灰色關(guān)聯(lián)分析法的線切割機(jī)床模塊化設(shè)計評價研究[J].包裝工程，2019，40（18）：53?60.

[4] 陳苗云，殷繼彬.三維交互界面中垂直多層交互技術(shù)的研究[J].計算機(jī)工程與科學(xué)，2019，41（1）：122?129.

[5] 符斌，任鴻翔，李小濤.觸控式航海模擬器人機(jī)交互系統(tǒng)優(yōu)化設(shè)計[J].艦船科學(xué)技術(shù)，2017，39（11）：110?114.

[6] 汪權(quán)方，張夢茹，張雨，等.基于視覺注意機(jī)制的大范圍水體信息遙感智能提取[J].計算機(jī)應(yīng)用，2020，40（4）：1038?1044.

[7] 林麗，高蕓坤，陽明慶，等.基于視覺認(rèn)知理論的產(chǎn)品形態(tài)優(yōu)化設(shè)計方法[J].包裝工程，2019，40（8）：16?22.

[8] 宋一凡，張鵬，劉立波.基于視覺手勢識別的人機(jī)交互系統(tǒng)[J].計算機(jī)科學(xué)，2019，46（z2）：570?574.

[9] 羅月童，丁偉強，黃文，等.聚變堆包層的可視智能輔助概念設(shè)計方法研究與應(yīng)用[J].計算機(jī)輔助設(shè)計與圖形學(xué)學(xué)報，2018，30（4）：568?576.

[10] 馬皎.基于遺傳算法的移動終端交互界面布局優(yōu)化[J].包裝工程，2017，38（10）：133?136.

[11] 張宏瑞，任家駿，李愛峰，等.大型礦用挖掘機(jī)操作界面的優(yōu)化設(shè)計研究[J].圖學(xué)學(xué)報，2019，40（4）：796?801.

[12] 覃京燕，雷月雯.基于智慧醫(yī)療理念的中醫(yī)文化APP交互設(shè)計研究[J].包裝工程，2017，38（8）：116?120.

[13] 王鼎.基于學(xué)習(xí)的魯棒自適應(yīng)評判控制研究進(jìn)展[J].自動化學(xué)報，2019，45（6）：1031?1043.

[14] 李旭，翟穎琳.基于數(shù)據(jù)分析平臺的APP交互設(shè)計測試評估研究[J].包裝工程，2018，39（2）：143?148.

[15] 趙杰，張睿，王桂萱.基于反應(yīng)位移法的地下管道抗震分析軟件開發(fā)及優(yōu)化設(shè)計[J].世界地震工程，2017，33（2）：220?226.

作者簡介：楊勐荷（1992—），女，山東金鄉(xiāng)人，博士在讀，研究方向為視覺傳達(dá)設(shè)計。

鄭 ?雷（1980—），男，江蘇徐州人，博士，副教授，研究方向為視覺傳達(dá)設(shè)計。