基于圖形美化技術的視覺傳達設計研究

李云歌

摘 要： 傳統基于認知心理學的網頁界面視覺傳達設計方法同用戶間的情感交流以及互動性差，用戶滿意度低。因此，設計基于圖形美化技術的視覺傳達設計方法。其基于心理學以及符號學，設計網頁界面設計中的信息傳達模式以及信息接收模式；對網頁界面視覺傳達設計過程中采用的圖像美化技術視覺信息元素的圖形化表達形式實施分析；設計網頁界面中的點化、線化以及面化的圖形化表達方式；對信息圖形化在網頁界面設計中的文字圖形化以及音樂圖形化進行設計；對網頁界面中信息圖形化與交互設計過程中的提示和反饋以及信息圖形化的情感進行詳細設計。在遵守美學原則的基礎上，通過圖形美化技術帶給用戶更好的體驗。實驗結果說明，所提方法設計的網頁界面的視覺傳達效果佳，具有較高的用戶滿意度。

關鍵詞： 圖形美化； 視覺傳達； 信息傳達； 圖形化； 情感設計； 視覺信息元素

中圖分類號： TN911?34； TP391.41 文獻標識碼： A 文章編號： 1004?373X（2018）13?0065?05

Abstract： The traditional design method of webpage interface visual communication based on cognitive psychology has poor emotional communication and interaction with users， and low user satisfaction. Therefore， a visual communication design method based on graphic beautification technique was designed. On the basis of psychology and semiology， the information transmission mode and information acceptance mode in webpage interface design are designed. The graphical expression form of visual information element is analyzed while the image beautification technology is adopted in the design process of webpage interface visual communication. The graphical expression forms （point， line and plane） in webpage interface are designed. The character graphics and music graphics in webpage interface design of information graphics are designed. The reminder and feedback in the process of information graphics and interaction design in webpage interface， and emotion of the information graphics are designed in detail. In compliance with the aesthetic principle， the graphic beautification technology can provide a better experience for users. The experimental results show that the visual communication effect of the webpage interface designed with the proposed method is perfect， and has high user satisfaction.

Keywords： graphic beautification； visual communication； information transmission； graphics； emotional design； visual information element

0 引 言

由于計算機網絡技術的高速發展，網頁設計領域也日益引起人們的關注。網頁界面是一種常用的傳播媒介，其可全面采用文本、圖像以及動畫等視覺傳達內容向用戶反饋信息和內容。依據網頁界面特征，其設計過程中應關注信息傳達的需求。視覺信息是當前網頁界面傳達的關鍵信息，網頁界面設計的關鍵視覺元素以及設計規范應遵守視覺傳達的規律。傳統基于認知心理的網頁界面視覺傳達設計方法同用戶間的情感交流以及互動性差，用戶滿意度低[1]。圖形美化技術是一種個性化的視覺傳達方法，其能夠提高網頁視覺傳達設計的情感性以及交互性，提高用戶滿意度。因此，本文研究了基于圖像美化技術的視覺傳達設計方法，增強了網頁界面視覺傳達設計效果。

1 基于圖像美化技術的視覺傳達設計研究

1.1 網頁界面設計中的信息傳達設計

1.1.1 信息傳達模式設計

網頁界面視覺傳達設計過程中的信息傳達模式為：設計人員將信息變換成視覺語言后再編碼成圖形化的網頁界面，用戶對信息實施解碼變換，得到所需的有價值信息，詳細過程用圖1描述。

利用圖形可對設計師以及用戶同網頁界面進行互動的過程進行準確描述，完成信息的傳達以及接收。設計師同網頁界面實施互動的過程[2]能夠看成是原始數據變換成視覺信息的過程；用戶同網頁間的互動過程能夠看成是視覺信息變換成知識的過程。基于結構主義以及符號學原理可將上述兩個過程當成是“編碼”以及“解碼”過程，兩個過程能夠對網頁視覺傳達過程進行直觀描述。

信息傳達過程需要先解析網頁中的初始數據，將這些數據變換成信息，實現不同數據的解釋。通過組織以及加工的初始數據能夠變換成有價值的信息[3]，為網頁用戶實現交流提供基礎。網頁設計師通過分析以及匯總獲取的數據，是向用戶反饋的內容，將這些數據信息通過合理的手段實施描述，能夠實現視覺信息高效、準確的傳達。將設計師規劃好的傳達數據通過網頁界面基于圖形美化技術實現數據變換后，通過視覺信息的方式顯示給用戶，該數據變換過程是信息的“編碼”過程。

1.1.2 信息接收模式設計

信息接收模式是“譯碼”的過程，如果網頁中的視覺信息激發了用戶的興趣度，用戶會基于自身的需求理解該視覺信息，采用合理的方式闡釋這些信息，將其變換成知識。人的信息操作系統包括感覺器官、中樞神經系統以及運動器官，用圖2描述。中樞神經系統對感覺器官實施管控，采集外界信息，再通過中樞神經系統對信息實施加工，完成信息的辨識、記憶以及分析，傳遞出相關的處理命令。網頁界面進行視覺傳達過程中，人們重點對網頁中的視覺信息產生視覺翻譯，產生相關的心理活動，最終接收網頁信息。考慮到不同用戶的心理以及生理因素，用戶視線流向具有規律性，呈現視覺流程的屬性。高質量的網頁界面視覺傳達設計過程中，應確保視覺流程的清晰性和直觀性[4]，而圖形美化技術可實現該效果，確保網頁頁面視覺傳達設計更為緊湊美觀，增強用戶的興趣度。并且采用圖形美化技術可提高用戶對網頁信息的“解碼”效率以及對網頁信息的認知能力。

1.2 視覺信息元素的圖形化表達形式

1.1節分析了圖像美化技術在網頁界面視覺傳達設計過程中的作用以及價值，網頁界面設計中采用圖形美化技術對圖形元素實施設計，可提高網頁的視覺美化效果，降低用戶記憶負擔，引導用戶瀏覽網頁，獲取有價值信息。下面對網頁界面視覺傳達設計過程中采用圖像美化技術時視覺信息元素的圖形化表達形式實施分析。

1.2.1 點 化

點是組成平面的關鍵圖形元素，平面中的圖標以及字符都能產生點的狀態，可帶給用戶“中心感”，將用戶視覺聚集到點中。多于兩個點連接，基于合理的規律進行分布，能夠形成規律感以及空間感[5]，點的位置、方向以及大小會對用戶產生不同的興趣度，如圖3所示。

1.2.2 線化以及面化

點的變動構成線，產生運動性以及情感性，直線以及曲線分別呈現靜態性以及動態性。通常在面向女性的網頁視覺傳達設計過程中采用曲線，通過曲線呈現女性曼妙的身體曲線、飄動的裙擺等。線還是網頁設計中的關鍵組成運算，其能夠確保將網頁頁面內的關鍵信息在視覺上關聯起來，并且實現界面的劃分。

線構成的封閉圖形則是面，具備面積感，幾何形面能夠呈現一定的性格屬性，正方形以及圓形呈現一定的規則感和生命感，自由曲面擁有活潑以及柔軟的屬性。網頁界面視覺傳達設計時采用大圖片、導航，字符采用規則排列，在視覺中表現出面的屬性[6]，不同面間存在小部分的留白區域，可形成線的感覺，如圖4所示。

1.3 信息圖形化在網頁界面設計中的表現方式

1.3.1 文字圖形化

網頁只通過文字無法滿足用戶的情感需要，應通過圖形化的媒介實現用戶同網頁間的交流。大多數用戶會通過掃描檢索感興趣的文字以及語音，圖形比文字更能提升用戶的興趣度。圖形化文字可通過圖形元素描述文字，提高文字的表達性能。網頁設計過程中，采用合理的圖形化符號描述不同信息模塊鏈接，能夠對用戶的認知感受進行直觀、準確的描述，實現信息的傳達。網頁設計中的“請按這里”以及“敲擊進入”等文字采用語義描述向用戶提供理念上的導向服務，并對文字實施圖形化操作[7]，能夠對用戶形成自覺的視覺導向服務。將海量文字簡化成擁有邏輯關系的圖形表達，激發用戶的興趣度，確保用戶采集到有價值的信息；在百度網站檢索產品內嵌入“檢索華爾茲”的模式，確保圖像構成關鍵新聞人物的關系圖片，如圖5所示，這些內容都基于最新新聞事實連接，確保用戶能夠檢索明星近期的活動關聯性。用戶通過該圖形變換到結果頁面，能夠提高網站的點擊率。

1.3.2 音樂圖形化

用戶通過谷歌音樂的圖形化檢索措施得到所需的音樂檢索結果，如圖6所示。網頁通過滑塊選擇展示不同的音樂檢索數據，該效果具有更高的動感以及空間感，提高了用戶興趣度。

1.4 網頁界面中信息圖形化與交互設計

1.4.1 提示和反饋

提示以及反饋是界面的輸出結果，由界面元素、聲音以及震動等構成，是用戶同網頁實施信息交互的過程。網頁界面提示以及反饋的內容是信息、警告以及確認等內容。用戶對界面內的表達元素實施處理，能夠獲取可視化結果，從圖表以及鏈接等區域采集信息提示[8]。圖形可在提示以及反饋時為用戶提供幫助以及認知，確保用戶高效率地采集反饋信息，實施后續操作。合理采用圖表可確保用戶迅速地對自身行為結果實施反應，圖7描述了淘寶網注冊表格內的欄目，當用戶輸入信息后，右端會產生相關的反饋信息，若信息輸入存在錯誤，則會產生紅色叉號圖標，用于描述錯誤以及警告[9]。網頁交互設計過程中的圖形可確保用戶快速地采集信息。

1.4.2 網頁界面中信息圖形化的情感設計

用戶瀏覽網頁過程是人機交互的過程，因此在采用圖形美化技術設計網頁過程中，應關注用戶的感受以及同網頁交互的情感感受，對面向目標用戶的情感體驗實施設計，確保用戶心情愉悅。通過圖形化的語言能夠確保用戶同網頁交互方式呈現情感性，基于目標用戶的情感場景產生的視覺傳達[10]可提高產品同用戶間的交流性。如淘寶網頁檢索不到結果時，通過表情圖案描述，確保產品同用戶情感相溝通，用戶會覺得自己被理解，減弱了用戶檢索不到結果形成的失望情感，進而提高用戶對淘寶網頁的滿意度，如圖8所示。

2 實驗結果與分析

2.1 運行效果檢測

實驗分析采用本文提出的圖形美化技術設計的幾種社會交往網站的運行效果，如開心網以及人人網的網站頁面設計，結果用圖9描述，能夠看出本文方法設計的社會交往網站簡潔，都具備主導航、登錄信息以及LOGO等內容。

分析圖9還能夠看出，本文方法設計的社會交往界面滿足用戶視覺流程，呈現關鍵信息以及功能，關注交互性，應用性強。這些漂亮的圖形界面能夠給用戶帶來更好的情感感受，得到用戶的好感。其中的QQ校友界面最為精致，具有光影以及空間感，受到用戶的青睞。

設計師設計網頁界面的目的是提高網頁的知名度以及信譽度，通過更好的視覺傳達效果提高用戶對網頁的關注度。采用本文方法可通過圖形美化技術更多地吸引用戶以及感染用戶，塑造網頁同用戶間的情感連接。在頁面中通過圖像美化技術塑造合理的氛圍，如圖10所示。確保用戶在瀏覽網頁時，不斷深入到該氛圍內，帶動同戶向其他群體的推廣熱情，增強網頁的點擊率，提高網頁的經濟效益。

2.2 性能檢測

實驗通過用戶調查問卷方式，檢測采用本文設計方法以及傳統設計方法設計購物網站后，用戶對購物網站的興趣度情況，進而對本文設計方法的應用效果實施檢測。實驗在某大學城附近向學生隨機發放100份調查問卷，收回100份，有效率是100%，采用不記名措施以及百分制實施打分，調查問卷中包括用戶對購物網站的直觀感受評分、使用簡便性評分、情感氛圍評分、感興趣度評分等，將100份調查問卷隨機劃分成10組，統計10組調查問卷的平均分，結果用表1以及表2描述。對比分析兩個表能夠看出，用戶對本文方法設計的購物網站各項內容的評分都高于傳統方法設計的購物網站，說明本文方法更能提高購物網站的應用性、藝術效果以及用戶滿意度，是一種高質量的網頁界面視覺傳達設計方法。

2.3 購物效果檢測

實驗檢測用戶對上述不同方法設計的購物網站進行實際購物過程中的購物完成情況，完成情況越高，說明對應購物網站的實用價值越高。實驗對象為某高校經濟、法律、軟件以及英語專業的100名學生，分別統計這些學生對本文方法以及傳統方法設計的購物網站進行實際購物時，美妝、服裝、學習用品、零食的購物完成度結果分別用圖11以及圖12描述。對比分析兩個圖可得，用戶對兩種方法設計的購物網站中的零食以及學習用品等價格較低產品的購物完成度基本一致；而用戶對本文方法設計的購物網站中的美妝以及服裝等價格較高產品的購物完成度高于傳統方法設計的購物網站的購物完成度。說明相對于傳統方法，本文方法設計的購物網站更能激發用戶的購物欲望，網站的視覺傳達效果更佳、實用價值更高，能夠創造更好的經濟效益。

3 結 語

本文提出基于圖像美化技術的視覺傳達設計方法，在網頁界面設計中采用圖形美化技術對圖形元素實施設計，增強網頁的視覺美化效果，提高用戶興趣度，引導用戶瀏覽網頁，獲取有價值信息。

參考文獻

[1] HUANG R， CAI J. The Application and research of dynamic structuring element in visual communication design [J]. Journal of Sichuan Vocational & Technical College， 2016， 36（1）： 249?251.

[2] 張寶，丁敏，李燕杰.基于視覺感知強度的人機交互界面優化設計[J].中國機械工程，2016，27（16）：2196?2202.

ZHANG Bao， DING Min， LI Yanjie. Optimization design of human machine interaction interface based on visual perception [J]. China mechanical engineering， 2016， 27（16）： 2196?2202.

[3] CHEN Y. Based on the diversity of visual communication design development in digital era environment [J]. Journal of Jiamusi Vocational Institute， 2017， 40（7）： 126?129.

[4] LUO M. Exploring the practice of visual communication design in the new era based on the view of "Art+Technology" [J]. Asian journal of science studies， 2017， 2（3）： 8?16.

[5] 韓鳳嬌，周竹榮.基于OWL本體構建的網頁圖文摘要算法[J].計算機工程與設計，2014，35（5）：1833?1839.

HAN Fengjiao， ZHOU Zhurong. Graphical?text abstract algorithm based on building OWL ontology [J]. Computer engineering and design， 2014， 35（5）： 1833?1839.

[6] WANG C， JIANG P. Deep neural networks based order completion time prediction by using real?time job shop RFID data [J]. Journal of intelligent manufacturing， 2017（4）： 1?16.

[7] WANG Y. Research on the visual communication design based on technology of computer graphics [J]. Advanced materials research， 2014， 846： 1064?1067.

[8] HE Fei. Industrial product graphic design based on visual communi?cation concept [J]. Acta technica csav， 2017， 62（1）： 269?278.

[9] XU X. Design of visual communication symbols for integration hidden Markov model [C]// 2017 IEEE International Conference on Robots & Intelligent System. [S.l.]： IEEE， 2017： 124?126.

[10] RITTER S， BARRETT D G T， SANTORO A， et al. Cognitive psychology for deep neural networks： a shape bias case study [EB/OL]. [2017?06?29]. http：//pdfs.semanticscholar.org/39fb/9fa2615620f043084a2ecbbdb1a1f8c707c9.pdf.