基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)研究

胡佳儀 田星瀚

摘要：目的：數(shù)字化時(shí)代，用戶接收信息的渠道多樣，移動(dòng)端H5以其交互性強(qiáng)、傳播效益好等優(yōu)勢風(fēng)靡社交平臺(tái)，這也為無錫旅游推廣開啟了新局面。將無錫地域文化與H5交互設(shè)計(jì)結(jié)合，能豐富無錫旅游推廣形式和內(nèi)涵，助力其高效傳播。方法：文章基于H5交互設(shè)計(jì)與無錫旅游推廣現(xiàn)狀，指出兩者結(jié)合的必要性及價(jià)值，以交互五要素和H5趨勢為創(chuàng)新思路，在用戶、場景、媒介、行為和目的等方面進(jìn)行綜合分析，構(gòu)建用戶畫像，結(jié)合H5優(yōu)秀案例探究H5發(fā)展趨勢，得出插畫形式H5和小游戲H5頗受關(guān)注，有助于明確基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)方向。結(jié)果：在用戶畫像和設(shè)計(jì)方向的基礎(chǔ)上，總結(jié)出插畫形式H5和小游戲H5兩種無錫旅游推廣交互設(shè)計(jì)策略。通過“視覺—聽覺—觸覺”三類感官交互分析，得出插畫形式H5能以藝術(shù)化的形式呈現(xiàn)圖文內(nèi)容，更容易引發(fā)用戶情感共鳴；基于用戶行為三大要素，即動(dòng)機(jī)、能力、觸發(fā)，得出小游戲H5互動(dòng)性強(qiáng)的優(yōu)勢更能夠引起用戶興趣、觸發(fā)用戶行為、增強(qiáng)用戶體驗(yàn)感。結(jié)論：現(xiàn)今，無錫旅游推廣進(jìn)行得如火如荼，數(shù)字媒體已成主流，H5不僅要傳播無錫旅游的相關(guān)信息，更要注重用戶在了解過程中的參與感，提升傳播效率和質(zhì)量，最終實(shí)現(xiàn)商業(yè)價(jià)值和藝術(shù)價(jià)值的雙贏，助推無錫旅游業(yè)高質(zhì)量發(fā)展。

關(guān)鍵詞：無錫旅游；旅游推廣；H5交互設(shè)計(jì)

中圖分類號(hào)：F592.7；TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1004-9436（2023）23-0-03

隨著“5G+互聯(lián)網(wǎng)”的蓬勃發(fā)展，移動(dòng)端的加載速率飛速提升?！吨袊苿?dòng)互聯(lián)網(wǎng)發(fā)展報(bào)告（2022）》顯示，截至2022年底，中國移動(dòng)手機(jī)用戶規(guī)模達(dá)16.83億人。這為活躍于移動(dòng)端的H5提供了發(fā)展契機(jī)，H5的內(nèi)容與表現(xiàn)形式變得更加豐富，同時(shí)也為無錫旅游的“出圈”帶來了更多的機(jī)會(huì)。一方面，H5能夠依托各種社交平臺(tái)隨時(shí)隨地傳播信息，用戶可以實(shí)時(shí)進(jìn)行分享反饋；另一方面，H5融合了視覺、聽覺、觸覺等不同的感知方式，能夠增強(qiáng)用戶體驗(yàn)感和參與感。

1 H5交互設(shè)計(jì)與無錫旅游推廣現(xiàn)狀

1.1 H5交互設(shè)計(jì)價(jià)值與現(xiàn)狀

自2014年起，以H5為核心的內(nèi)容創(chuàng)新成為社會(huì)關(guān)注的焦點(diǎn)，新媒體的推陳出新使信息內(nèi)容的呈現(xiàn)形式更加靈活多樣。移動(dòng)端H5的具體形式主要包括：插畫圖文、測試、小游戲、一鏡到底、實(shí)景VR等。它突破了靜態(tài)圖文的限制，能夠結(jié)合視聽體驗(yàn)和可交互性，提升用戶感知、優(yōu)化內(nèi)容閱讀形式，且具有極強(qiáng)的傳播性［1］。

國內(nèi)移動(dòng)端H5更關(guān)注高效的傳播方式，從依附于微信逐漸拓展至微博、知乎等各大平臺(tái)，國外移動(dòng)端H5研究起步較早，目前呈穩(wěn)定發(fā)展的趨勢，他們側(cè)重于用戶體驗(yàn)研究，認(rèn)為成功的移動(dòng)端H5交互設(shè)計(jì)首先要滿足大眾需求［2］?！禜5營銷下半場——2019—2020年度H5營銷白皮書》一文顯示，移動(dòng)端H5的應(yīng)用場景已深深植根于人們的日常生活和工作，它的價(jià)值隨著市場愈發(fā)激烈的競爭而不斷提升，成為一種符合當(dāng)下需求的創(chuàng)新技術(shù)。

1.2 無錫旅游推廣現(xiàn)狀

無錫作為一座地理位置優(yōu)越、文化底蘊(yùn)深厚的城市，為旅游產(chǎn)業(yè)的發(fā)展提供了強(qiáng)大支撐。無錫的地域文化也是中華優(yōu)秀傳統(tǒng)文化的重要組成部分，因此很有必要面向世界推廣無錫的地域文化。華彥鈞的《二泉映月》將無錫的藝術(shù)表現(xiàn)打上了國際標(biāo)簽；紫砂壺經(jīng)歷鍛造后沖泡出吳文化所特有的茶味道；惠山泥人中的“大阿?！币云錈崆楹每偷男蜗髿g迎每一個(gè)來錫的游客。因此，地域文化賦能無錫旅游推廣至關(guān)重要。

現(xiàn)今，無錫旅游推廣借助數(shù)字媒體平臺(tái)已滲透到人們生活的方方面面。例如，央視文化節(jié)目《非遺里的中國》聚焦紫砂陶制作技藝，展現(xiàn)出無錫“非遺”傳承創(chuàng)新的新活力；由無錫廣電出品的江南文化動(dòng)畫片《茶婆婆漁婆婆蠶婆婆》在央視網(wǎng)、學(xué)習(xí)強(qiáng)國等平臺(tái)推送，播放量突破8億；無錫發(fā)放50萬張門票邀請(qǐng)港澳同胞前來旅游，此舉被央視《新聞30分》報(bào)道。由此可見，無錫已在旅游推廣方面取得部分成果，然而，這些形式僅僅是媒介單方面向用戶輸出內(nèi)容，用戶的體驗(yàn)感不強(qiáng)。為此，將無錫地域文化與H5交互設(shè)計(jì)相結(jié)合，旨在優(yōu)化用戶體驗(yàn)，為用戶營造更多維的交互氛圍。

2 基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)創(chuàng)新思路

2.1 基于交互五要素的H5交互設(shè)計(jì)創(chuàng)新思路

交互五要素是交互過程產(chǎn)生的五個(gè)重要元素，即用戶、場景、媒介、行為和目的［3］。簡單來說，即用戶在某個(gè)場景通過某種媒介操作達(dá)成目的。結(jié)合交互五要素構(gòu)建用戶使用場景，有利于繪制H5用戶畫像。

在基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)中，目標(biāo)用戶是想去無錫旅游并正在網(wǎng)上查找攻略的游客，其大多是懷著輕松、愉悅的心情搜索無錫旅游的相關(guān)信息的，因此H5中的視覺呈現(xiàn)、配樂、交互等會(huì)對(duì)旅游信息的傳達(dá)起到錦上添花的效果。H5能夠在微博、微信、美團(tuán)等應(yīng)用進(jìn)行訪問及分享，與用戶搜索旅游信息所使用的媒介完全重合。在使用H5之前，用戶已搜索到一些碎片化的信息，它們大多以文字、圖片、視頻等單向傳播的形式進(jìn)行推廣，因此，用戶更加期待能夠獲取完整、詳盡的游玩攻略，渴望體驗(yàn)更多元化的交互方式，進(jìn)而深入了解旅游景點(diǎn)相關(guān)信息，如票價(jià)、距離、交通工具、游覽時(shí)間、附近美食等。

另外，用戶的行為與目的有著直接關(guān)系。在設(shè)計(jì)之前就必須明確用戶目的，促使用戶產(chǎn)生使用H5的行為。總體來說，用戶目的具有隨機(jī)性、模糊性、明確性。隨機(jī)性是指用戶帶著好奇心瀏覽H5；模糊性是指用戶還未明確具體游玩景點(diǎn)；明確性是指用戶有了明確的游玩目的地，會(huì)在H5中進(jìn)行更深層次的交互探索。因此，H5的首頁應(yīng)該擁有精美的視覺效果且標(biāo)題簡潔、指向明確，能激發(fā)隨機(jī)性目標(biāo)用戶的好奇心，同時(shí)H5設(shè)計(jì)又需要?jiǎng)h繁就簡、交互簡易，以吸引模糊性和明確性目標(biāo)用戶參與。

通過分析交互設(shè)計(jì)的五個(gè)要素，繪制用戶畫像，H5交互設(shè)計(jì)將更具針對(duì)性、更加嚴(yán)謹(jǐn)，從而有效傳播和推廣相關(guān)信息，這為基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)創(chuàng)新做了鋪墊。

2.2 基于趨勢分析的H5交互設(shè)計(jì)創(chuàng)新思路

根據(jù)目前H5的變化，推測未來設(shè)計(jì)趨勢，是提出基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)方向的方式之一。在旅游推廣中，H5不僅是一種信息傳播方式，還是一種全新的流量轉(zhuǎn)化方式。H5需要借助新技術(shù)實(shí)現(xiàn)進(jìn)一步發(fā)展，提高內(nèi)容品質(zhì)、優(yōu)化互動(dòng)，助力其擴(kuò)大影響。

隨著傳播技術(shù)的進(jìn)步，傳播形式對(duì)傳播效果的影響在不斷強(qiáng)化［4］。H5交互形式逐漸多元化，出現(xiàn)了插畫、小游戲等展示方式。例如，紀(jì)念改革開放40周年的H5新聞《幸福長街40號(hào)》通過復(fù)古風(fēng)格的豎版長圖插畫的形式得以展現(xiàn)，這類插畫形式H5具有認(rèn)知門檻低、形象生動(dòng)、直觀性強(qiáng)的優(yōu)勢；由網(wǎng)易新聞和貴州茅臺(tái)合作的H5《茅臺(tái)重陽登高計(jì)劃》，用戶進(jìn)入動(dòng)態(tài)古畫中左右滑動(dòng)，可跟隨著茅臺(tái)公仔的跳動(dòng)，登上貴州的一些著名登高地，如迎賓山、飛天山等，在重陽節(jié)的氛圍中，加深對(duì)品牌的認(rèn)知。這類小游戲形式的H5新穎有趣、體驗(yàn)感強(qiáng)，能夠高效助力信息傳播。

通過分析H5發(fā)展趨勢和優(yōu)秀案例，可以發(fā)現(xiàn)插畫形式H5和小游戲H5特點(diǎn)鮮明、優(yōu)勢突出，在塑造良好的品牌形象方面起到了積極作用，獲得了眾多用戶的喜愛和好評(píng)。

3 基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)策略

H5交互設(shè)計(jì)要盡可能滿足用戶需求，重視用戶的情感表達(dá)，營造良好的用戶體驗(yàn)，并合理預(yù)測和把控用戶行為感知，引發(fā)用戶情感共鳴［5］。本文基于用戶畫像和H5趨勢，從多感官下的插畫形式H5和用戶行為下的小游戲H5兩個(gè)角度，研究無錫旅游推廣交互設(shè)計(jì)策略。

3.1 基于多感官的插畫形式H5的無錫旅游推廣交互設(shè)計(jì)

相較于傳統(tǒng)的圖文結(jié)合的H5，畫面精美的插畫形式H5更容易被用戶接受，其信息傳達(dá)更具趣味性、娛樂性。插畫形式H5不僅能給用戶帶來更強(qiáng)的視覺享受，還能延伸至多感官，這需要通過可視化、可觸性等手段刺激敏感的感官，將信息傳達(dá)給用戶，從而產(chǎn)生交互的可能性。

視覺傳達(dá)主要表現(xiàn)在圖像、文字、色彩等方面。通過視覺傳播，刺激感官產(chǎn)生即時(shí)反應(yīng)，視覺設(shè)計(jì)需要將每個(gè)具象或抽象的元素，在色彩、形態(tài)、質(zhì)感、構(gòu)圖等方面進(jìn)行統(tǒng)一，按照一定的規(guī)則將這些元素轉(zhuǎn)化為具有相似特征的視覺圖形。在基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)中，可以采用豎版長圖插畫的形式，以建筑景點(diǎn)為主，美食、文化等元素為輔，運(yùn)用山、水元素串聯(lián)長圖畫面，以綠色為主色調(diào)，凸顯江南風(fēng)情，向下滑動(dòng)的視覺動(dòng)態(tài)畫面依次是：靈山大佛晃頭微笑、黿頭渚上櫻花紛飛、三國城前勇士練武、惠山古鎮(zhèn)“阿?！焙汀鞍⑾病睋]手相迎等，豐富的插畫內(nèi)容可使用戶沉浸其中。

聽覺上的傳達(dá)是整個(gè)設(shè)計(jì)的點(diǎn)睛之筆，烘托了H5的整體氛圍，伴隨著手勢產(chǎn)生的背景音樂和音效，與動(dòng)態(tài)插畫相輔相成。在基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)中，可以選取悠揚(yáng)婉轉(zhuǎn)且極具江南特色的背景音樂來豐富故事層次。音效能夠優(yōu)化交互體驗(yàn)，輔助動(dòng)態(tài)圖形的變化，為整體設(shè)計(jì)增添娛樂性和趣味性。

觸覺方面的交互主要體現(xiàn)在手勢上，結(jié)合手機(jī)端觸控，在基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)中，交互以滑動(dòng)、點(diǎn)擊、切換頁面這三種手勢為主，用戶滑動(dòng)到感興趣的景點(diǎn)便可以點(diǎn)擊查看具體攻略，同時(shí)也可以利用手勢設(shè)計(jì)刺激用戶轉(zhuǎn)發(fā)、收藏、分享等行為。

通過“視覺—聽覺—觸覺”三類感官交互分析，插畫形式H5能夠?qū)⒖菰锓ξ兜奈淖滞ㄟ^藝術(shù)化的形式，生動(dòng)地將無錫旅游景點(diǎn)呈現(xiàn)在用戶面前，配合音效和手勢，帶給用戶沉浸式體驗(yàn)，引發(fā)用戶產(chǎn)生情感共鳴。

3.2 基于用戶行為的小游戲H5的無錫旅游推廣交互設(shè)計(jì)

交互小游戲在觸發(fā)用戶行為、增強(qiáng)用戶黏性等方面具備絕對(duì)優(yōu)勢［6］。結(jié)合用戶畫像和H5趨勢，分析用戶行為三大要素，即動(dòng)機(jī)、能力、觸發(fā)，并加以設(shè)計(jì)，促使用戶產(chǎn)生交互行為以達(dá)到設(shè)計(jì)目標(biāo)，而小游戲則具有更強(qiáng)的趣味性。

動(dòng)機(jī)引導(dǎo)用戶做出某種行為，它本身在于用戶是否能夠從中得到實(shí)質(zhì)性的利益或滿足心理訴求，可以通過簡單有趣的小游戲吸引想要旅游的用戶來體驗(yàn)。在基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)中，小游戲畫面展示的是無錫景點(diǎn)地圖，以個(gè)性化的IP角色作為小游戲H5中的主角，并使用戶以第一人稱視角在某個(gè)具體的地點(diǎn)體驗(yàn)相關(guān)小游戲，如“黿頭渚看海鷗找碴”，最后可以通過收藏地圖中感興趣的景點(diǎn)，完善現(xiàn)實(shí)中的游玩計(jì)劃安排。

能力是指用戶與H5成功交互的能力，用戶在完成某一行為的過程中，設(shè)計(jì)者需要度量做出該行為需要付出的成本，復(fù)雜的交互設(shè)計(jì)可能消耗大量的時(shí)間，因此，邏輯的合理度和小游戲的順暢度至關(guān)重要［7］。頁面設(shè)計(jì)要?jiǎng)h繁就簡，從而提升用戶的專注度。在基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)中，無錫景點(diǎn)場景和交互按鈕既要風(fēng)格統(tǒng)一，又要有明顯區(qū)別，前后應(yīng)保持連貫，嵌入任務(wù)流程的小游戲環(huán)節(jié)應(yīng)具有明顯的導(dǎo)向性。

觸發(fā)的具體表現(xiàn)為在合適的場景下，將動(dòng)機(jī)、能力合理地展現(xiàn)給用戶，提高產(chǎn)生交互行為的概率。在基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)中，首頁提供點(diǎn)擊入口、音樂開關(guān)、向下滑動(dòng)等圖標(biāo)，觸發(fā)用戶完成體驗(yàn)操作。合適的觸發(fā)點(diǎn)結(jié)合手勢設(shè)計(jì)，幫助用戶清楚了解交互的邏輯，如哪里可以返回、哪里可以再玩一次等，同時(shí)把握游戲節(jié)奏，配合合理的動(dòng)效設(shè)計(jì)完成有趣的交互。

通過分析用戶行為中動(dòng)機(jī)、能力、觸發(fā)三大要素，發(fā)現(xiàn)互動(dòng)性強(qiáng)的小游戲H5更容易引起用戶興趣，并觸發(fā)用戶行為。用戶可在小游戲交互中了解無錫旅游景點(diǎn)，在完成體驗(yàn)后進(jìn)行轉(zhuǎn)發(fā)、分享，從而提高信息的傳播效率。

4 結(jié)語

數(shù)字媒體時(shí)代，人們?cè)谛畔@取方面呈現(xiàn)明顯的碎片化趨勢，此次基于移動(dòng)端H5的無錫旅游推廣交互設(shè)計(jì)旨在利用互聯(lián)網(wǎng)，通過H5這一方式將較為全面的無錫旅游信息傳達(dá)給用戶。本文通過交互五要素和H5趨勢兩個(gè)方面的創(chuàng)新思路分析，構(gòu)建用戶畫像，同時(shí)找到明確的設(shè)計(jì)方向，最后總結(jié)出插畫形式H5和小游戲H5兩種無錫旅游推廣交互設(shè)計(jì)策略。總之，H5豐富的表現(xiàn)形式和互動(dòng)能夠給予用戶多變的感受，從而為無錫旅游推廣開拓一條全新的途徑。

參考文獻(xiàn)：

［1］ 張藝欣.二十四節(jié)氣傳統(tǒng)文化兒童教育與傳播的H5設(shè)計(jì)研究［J］.藝術(shù)與設(shè)計(jì)（理論版），2022，2（2）：74-76.

［2］ 楊瑞.情感體驗(yàn)下“空巢青年”主題H5交互設(shè)計(jì)研究［D］.湘潭：湘潭大學(xué)，2021.

［3］ 辛向陽.交互設(shè)計(jì)：從物理邏輯到行為邏輯［J］.裝飾，2015（1）：58-62.

［4］ 蘭小紅，張鑫.現(xiàn)象級(jí)H5產(chǎn)品的生產(chǎn)和傳播規(guī)律分析：以主流媒體國慶系列H5為例［J］.傳媒，2020（4）：71-73.

［5］ 伏曉佳.基于動(dòng)態(tài)插畫形式的H5廣告交互設(shè)計(jì)研究［D］.上海：東華大學(xué)，2020.

［6］ 張耿，項(xiàng)洋.移動(dòng)端游戲互動(dòng)式H5廣告設(shè)計(jì)研究［J］.設(shè)計(jì)，2020，33（3）：131-133.

［7］ 王慧.武漢旅游文化傳播主題的H5交互設(shè)計(jì)研究［J］.藝術(shù)科技，2022，35（10）：44-46.

作者簡介：胡佳儀（1999—），女，江蘇南通人，碩士在讀，研究方向：數(shù)字媒體藝術(shù)。

田星瀚（1973—），男，山東菏澤人，碩士，副教授，系本文通訊作者，研究方向：基于民族傳統(tǒng)文化的數(shù)字媒體藝術(shù)設(shè)計(jì)。