利用計算機交互技術的網頁界面文本視覺優化設計

楊勐荷　鄭雷

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

關鍵詞： 網頁界面; 文本視覺優化; 人機交互; 大數據處理; 數據融合; 結果分析

中圖分類號： TN919?34; TP391 ? ? ? ? ? ? ? ? ?文獻標識碼： 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 ?引 ?言

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

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

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

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

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

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

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

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

2） 增強局部對比度。圖像整體低照度區域的細節在圖像整體亮度調整后也得以提高，為使圖像細節更加優化，利用局部區域像素灰度值間的關聯性提高圖像亮度局部對比度[12]。

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

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

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

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

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

1.4 ?網頁界面文本文字優化

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

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

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

2 ?方法驗證

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

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

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

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

3 ?結 ?論

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

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

參考文獻

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

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

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

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

[5] 符斌，任鴻翔，李小濤.觸控式航海模擬器人機交互系統優化設計[J].艦船科學技術，2017，39（11）：110?114.

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

[7] 林麗，高蕓坤，陽明慶，等.基于視覺認知理論的產品形態優化設計方法[J].包裝工程，2019，40（8）：16?22.

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

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

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

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

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

[13] 王鼎.基于學習的魯棒自適應評判控制研究進展[J].自動化學報，2019，45（6）：1031?1043.

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

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

作者簡介：楊勐荷（1992—），女，山東金鄉人，博士在讀，研究方向為視覺傳達設計。

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