基于圖形美化技術(shù)的視覺傳達(dá)設(shè)計研究

李云歌

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

關(guān)鍵詞： 圖形美化； 視覺傳達(dá)； 信息傳達(dá)； 圖形化； 情感設(shè)計； 視覺信息元素

中圖分類號： TN911?34； TP391.41 文獻(xiàn)標(biāo)識碼： 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 引 言

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

1 基于圖像美化技術(shù)的視覺傳達(dá)設(shè)計研究

1.1 網(wǎng)頁界面設(shè)計中的信息傳達(dá)設(shè)計

1.1.1 信息傳達(dá)模式設(shè)計

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

利用圖形可對設(shè)計師以及用戶同網(wǎng)頁界面進(jìn)行互動的過程進(jìn)行準(zhǔn)確描述，完成信息的傳達(dá)以及接收。設(shè)計師同網(wǎng)頁界面實(shí)施互動的過程[2]能夠看成是原始數(shù)據(jù)變換成視覺信息的過程；用戶同網(wǎng)頁間的互動過程能夠看成是視覺信息變換成知識的過程。基于結(jié)構(gòu)主義以及符號學(xué)原理可將上述兩個過程當(dāng)成是“編碼”以及“解碼”過程，兩個過程能夠?qū)W(wǎng)頁視覺傳達(dá)過程進(jìn)行直觀描述。

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

1.1.2 信息接收模式設(shè)計

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

1.2 視覺信息元素的圖形化表達(dá)形式

1.1節(jié)分析了圖像美化技術(shù)在網(wǎng)頁界面視覺傳達(dá)設(shè)計過程中的作用以及價值，網(wǎng)頁界面設(shè)計中采用圖形美化技術(shù)對圖形元素實(shí)施設(shè)計，可提高網(wǎng)頁的視覺美化效果，降低用戶記憶負(fù)擔(dān)，引導(dǎo)用戶瀏覽網(wǎng)頁，獲取有價值信息。下面對網(wǎng)頁界面視覺傳達(dá)設(shè)計過程中采用圖像美化技術(shù)時視覺信息元素的圖形化表達(dá)形式實(shí)施分析。

1.2.1 點(diǎn) 化

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

1.2.2 線化以及面化

點(diǎn)的變動構(gòu)成線，產(chǎn)生運(yùn)動性以及情感性，直線以及曲線分別呈現(xiàn)靜態(tài)性以及動態(tài)性。通常在面向女性的網(wǎng)頁視覺傳達(dá)設(shè)計過程中采用曲線，通過曲線呈現(xiàn)女性曼妙的身體曲線、飄動的裙擺等。線還是網(wǎng)頁設(shè)計中的關(guān)鍵組成運(yùn)算，其能夠確保將網(wǎng)頁頁面內(nèi)的關(guān)鍵信息在視覺上關(guān)聯(lián)起來，并且實(shí)現(xiàn)界面的劃分。

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

1.3 信息圖形化在網(wǎng)頁界面設(shè)計中的表現(xiàn)方式

1.3.1 文字圖形化

網(wǎng)頁只通過文字無法滿足用戶的情感需要，應(yīng)通過圖形化的媒介實(shí)現(xiàn)用戶同網(wǎng)頁間的交流。大多數(shù)用戶會通過掃描檢索感興趣的文字以及語音，圖形比文字更能提升用戶的興趣度。圖形化文字可通過圖形元素描述文字，提高文字的表達(dá)性能。網(wǎng)頁設(shè)計過程中，采用合理的圖形化符號描述不同信息模塊鏈接，能夠?qū)τ脩舻恼J(rèn)知感受進(jìn)行直觀、準(zhǔn)確的描述，實(shí)現(xiàn)信息的傳達(dá)。網(wǎng)頁設(shè)計中的“請按這里”以及“敲擊進(jìn)入”等文字采用語義描述向用戶提供理念上的導(dǎo)向服務(wù)，并對文字實(shí)施圖形化操作[7]，能夠?qū)τ脩粜纬勺杂X的視覺導(dǎo)向服務(wù)。將海量文字簡化成擁有邏輯關(guān)系的圖形表達(dá)，激發(fā)用戶的興趣度，確保用戶采集到有價值的信息；在百度網(wǎng)站檢索產(chǎn)品內(nèi)嵌入“檢索華爾茲”的模式，確保圖像構(gòu)成關(guān)鍵新聞人物的關(guān)系圖片，如圖5所示，這些內(nèi)容都基于最新新聞事實(shí)連接，確保用戶能夠檢索明星近期的活動關(guān)聯(lián)性。用戶通過該圖形變換到結(jié)果頁面，能夠提高網(wǎng)站的點(diǎn)擊率。

1.3.2 音樂圖形化

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

1.4 網(wǎng)頁界面中信息圖形化與交互設(shè)計

1.4.1 提示和反饋

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

1.4.2 網(wǎng)頁界面中信息圖形化的情感設(shè)計

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

2 實(shí)驗結(jié)果與分析

2.1 運(yùn)行效果檢測

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

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

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

2.2 性能檢測

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

2.3 購物效果檢測

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

3 結(jié) 語

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

參考文獻(xiàn)

[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] 張寶，丁敏，李燕杰.基于視覺感知強(qiáng)度的人機(jī)交互界面優(yōu)化設(shè)計[J].中國機(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本體構(gòu)建的網(wǎng)頁圖文摘要算法[J].計算機(jī)工程與設(shè)計，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.