李云歌

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

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

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

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

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

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

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

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

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

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

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

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

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

1.2.1 點(diǎn) 化

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

1.2.2 線化以及面化

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

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

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

1.3.1 文字圖形化

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

1.3.2 音樂圖形化

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

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

1.4.1 提示和反饋

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

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

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

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

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

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

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

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

2.2 性能檢測(cè)

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

2.3 購(gòu)物效果檢測(cè)

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

3 結(jié) 語(yǔ)

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

參考文獻(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].中國(guó)機(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)頁(yè)圖文摘要算法[J].計(jì)算機(jī)工程與設(shè)計(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.