基于移動端H5的無錫旅游推廣交互設計研究

胡佳儀 田星瀚

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

關鍵詞：無錫旅游；旅游推廣；H5交互設計

中圖分類號：F592.7；TP393 文獻標識碼：A 文章編號：1004-9436（2023）23-0-03

隨著“5G+互聯網”的蓬勃發展，移動端的加載速率飛速提升。《中國移動互聯網發展報告（2022）》顯示，截至2022年底，中國移動手機用戶規模達16.83億人。這為活躍于移動端的H5提供了發展契機，H5的內容與表現形式變得更加豐富，同時也為無錫旅游的“出圈”帶來了更多的機會。一方面，H5能夠依托各種社交平臺隨時隨地傳播信息，用戶可以實時進行分享反饋；另一方面，H5融合了視覺、聽覺、觸覺等不同的感知方式，能夠增強用戶體驗感和參與感。

1 H5交互設計與無錫旅游推廣現狀

1.1 H5交互設計價值與現狀

自2014年起，以H5為核心的內容創新成為社會關注的焦點，新媒體的推陳出新使信息內容的呈現形式更加靈活多樣。移動端H5的具體形式主要包括：插畫圖文、測試、小游戲、一鏡到底、實景VR等。它突破了靜態圖文的限制，能夠結合視聽體驗和可交互性，提升用戶感知、優化內容閱讀形式，且具有極強的傳播性［1］。

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

1.2 無錫旅游推廣現狀

無錫作為一座地理位置優越、文化底蘊深厚的城市，為旅游產業的發展提供了強大支撐。無錫的地域文化也是中華優秀傳統文化的重要組成部分，因此很有必要面向世界推廣無錫的地域文化。華彥鈞的《二泉映月》將無錫的藝術表現打上了國際標簽；紫砂壺經歷鍛造后沖泡出吳文化所特有的茶味道；惠山泥人中的“大阿福”以其熱情好客的形象歡迎每一個來錫的游客。因此，地域文化賦能無錫旅游推廣至關重要。

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

2 基于移動端H5的無錫旅游推廣交互設計創新思路

2.1 基于交互五要素的H5交互設計創新思路

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

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

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

通過分析交互設計的五個要素，繪制用戶畫像，H5交互設計將更具針對性、更加嚴謹，從而有效傳播和推廣相關信息，這為基于移動端H5的無錫旅游推廣交互設計創新做了鋪墊。

2.2 基于趨勢分析的H5交互設計創新思路

根據目前H5的變化，推測未來設計趨勢，是提出基于移動端H5的無錫旅游推廣交互設計方向的方式之一。在旅游推廣中，H5不僅是一種信息傳播方式，還是一種全新的流量轉化方式。H5需要借助新技術實現進一步發展，提高內容品質、優化互動，助力其擴大影響。

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

通過分析H5發展趨勢和優秀案例，可以發現插畫形式H5和小游戲H5特點鮮明、優勢突出，在塑造良好的品牌形象方面起到了積極作用，獲得了眾多用戶的喜愛和好評。

3 基于移動端H5的無錫旅游推廣交互設計策略

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

3.1 基于多感官的插畫形式H5的無錫旅游推廣交互設計

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

視覺傳達主要表現在圖像、文字、色彩等方面。通過視覺傳播，刺激感官產生即時反應，視覺設計需要將每個具象或抽象的元素，在色彩、形態、質感、構圖等方面進行統一，按照一定的規則將這些元素轉化為具有相似特征的視覺圖形。在基于移動端H5的無錫旅游推廣交互設計中，可以采用豎版長圖插畫的形式，以建筑景點為主，美食、文化等元素為輔，運用山、水元素串聯長圖畫面，以綠色為主色調，凸顯江南風情，向下滑動的視覺動態畫面依次是：靈山大佛晃頭微笑、黿頭渚上櫻花紛飛、三國城前勇士練武、惠山古鎮“阿福”和“阿喜”揮手相迎等，豐富的插畫內容可使用戶沉浸其中。

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

觸覺方面的交互主要體現在手勢上，結合手機端觸控，在基于移動端H5的無錫旅游推廣交互設計中，交互以滑動、點擊、切換頁面這三種手勢為主，用戶滑動到感興趣的景點便可以點擊查看具體攻略，同時也可以利用手勢設計刺激用戶轉發、收藏、分享等行為。

通過“視覺—聽覺—觸覺”三類感官交互分析，插畫形式H5能夠將枯燥乏味的文字通過藝術化的形式，生動地將無錫旅游景點呈現在用戶面前，配合音效和手勢，帶給用戶沉浸式體驗，引發用戶產生情感共鳴。

3.2 基于用戶行為的小游戲H5的無錫旅游推廣交互設計

交互小游戲在觸發用戶行為、增強用戶黏性等方面具備絕對優勢［6］。結合用戶畫像和H5趨勢，分析用戶行為三大要素，即動機、能力、觸發，并加以設計，促使用戶產生交互行為以達到設計目標，而小游戲則具有更強的趣味性。

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

能力是指用戶與H5成功交互的能力，用戶在完成某一行為的過程中，設計者需要度量做出該行為需要付出的成本，復雜的交互設計可能消耗大量的時間，因此，邏輯的合理度和小游戲的順暢度至關重要［7］。頁面設計要刪繁就簡，從而提升用戶的專注度。在基于移動端H5的無錫旅游推廣交互設計中，無錫景點場景和交互按鈕既要風格統一，又要有明顯區別，前后應保持連貫，嵌入任務流程的小游戲環節應具有明顯的導向性。

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

通過分析用戶行為中動機、能力、觸發三大要素，發現互動性強的小游戲H5更容易引起用戶興趣，并觸發用戶行為。用戶可在小游戲交互中了解無錫旅游景點，在完成體驗后進行轉發、分享，從而提高信息的傳播效率。

4 結語

數字媒體時代，人們在信息獲取方面呈現明顯的碎片化趨勢，此次基于移動端H5的無錫旅游推廣交互設計旨在利用互聯網，通過H5這一方式將較為全面的無錫旅游信息傳達給用戶。本文通過交互五要素和H5趨勢兩個方面的創新思路分析，構建用戶畫像，同時找到明確的設計方向，最后總結出插畫形式H5和小游戲H5兩種無錫旅游推廣交互設計策略。總之，H5豐富的表現形式和互動能夠給予用戶多變的感受，從而為無錫旅游推廣開拓一條全新的途徑。

參考文獻：

［1］ 張藝欣.二十四節氣傳統文化兒童教育與傳播的H5設計研究［J］.藝術與設計（理論版），2022，2（2）：74-76.

［2］ 楊瑞.情感體驗下“空巢青年”主題H5交互設計研究［D］.湘潭：湘潭大學，2021.

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

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

［5］ 伏曉佳.基于動態插畫形式的H5廣告交互設計研究［D］.上海：東華大學，2020.

［6］ 張耿，項洋.移動端游戲互動式H5廣告設計研究［J］.設計，2020，33（3）：131-133.

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

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

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