武漢旅游文化傳播主題的H5交互設計研究

摘要：近年來，以微信為代表的新媒體的迅速崛起和普及，為城市提供了更多傳播形象的渠道，H5以其便捷性、交互性、傳播性等優勢在其中發揮了舉足輕重的作用。文章首先分析H5交互性的特點和優勢，運用案例分析法具體研究相關案例，再結合用戶定位心理分析的結果，從交互行為、音效、視覺、界面設計對武漢城市形象H5交互設計進行設計實踐，以期實現傳播武漢城市形象的目的。

關鍵詞：H5交互設計；武漢城市形象；城市宣傳

中圖分類號：TB47；G124 文獻標識碼：A 文章編號：1004-9436（2022）10-00-03

0 引言

隨著新媒體的發展，越來越多的宣傳都逐漸采取線上傳播的模式，H5以其獨特的傳播方式迅速流行起來。H5交互設計綜合了人類多感官來實現信息的交流與傳播，由于其融入了動態效果、多維度體驗，給互聯網用戶帶來了全新的感官沖擊。武漢的歷史文化底蘊深厚，有許多歷史建筑，在“一帶一路”倡議下，作為長江中下游重要節點城市，其城市形象的傳播獲得了有利的發展機遇。在媒體融合時代，運用H5交互設計讓用戶在愉悅的交互體驗中感受武漢城市形象的文化魅力，為武漢城市形象的傳播創造了更有效的途徑。

1 H5設計的優勢

1.1 交互性

隨著新媒體的發展，H5的傳播方式引發了一波新媒體交互風潮，H5的交互設計超越了靜態圖形的限制，通過不同的交互方式以及多感官互動體驗形式，整合了視覺、聽覺、觸覺等不同的感知方式，有效吸引了用戶的注意力，從以往的單向傳播轉向雙向傳播。人機交互通過調動用戶的肢體動作來獲取信息，常見的觸覺交互形式包括點擊、左右滑動、連續按壓、手指滑動等手勢，能夠增強用戶交互的體驗感和參與感。

1.2 傳播性

隨著新媒體的發展，利用互聯網查詢信息的渠道逐漸轉向手機、平板等智能設備，給信息傳播帶來了極大的便利。目前，通過移動互聯網傳播信息，意味著用戶可以在任何地方、任何時間通過手機等設備獲取各類信息，并可以實時進行分享反饋。由于其推廣成本低，H5制作周期短，更容易響應公眾的即時需求，迅速拉近了用戶與H5之間的心理距離，形成了良好的人機互動體驗。

1.3 社會性

隨著在互聯網的高速發展，人們依靠社交媒體在網絡上建立了自己的社交圈，區別于以往的社交圈，信息時代的社交圈大大提升了信息的傳播效率，比如，如今作為社交媒體的QQ、微信就為H5的傳播架設了一座橋梁，人們可以更好地通過這些平臺在自己的社交圈隨時隨地分享、轉發自己的所見所聞，進行一系列的線上交流互動。

2 《幸福長街40號》H5案例分析

2.1 情感共鳴式的交互體驗

情感共鳴式的H5交互設計利用熟悉的活動和場景與用戶進行互動，從而使用戶產生情感上的共鳴，把用戶帶入“回憶殺”中，大大削減了交互時的疏離感。

作為紀念改革開放40周年的H5新聞《幸福長街40號》，其設計通過豎屏版長圖連環畫和音效等多感官融合的方式展現出來，連環畫帶有文化懷舊與記憶的基因，具有認知門檻低和直觀性、形象性強的優勢，加上融新舊于一體的創新互動形式，很容易獲得全年齡段、全文化層次人群的喜歡［1］。該H5設計選取了240個具有代表性的歷史事件和現象，通過場景化設計如實還原了當時的社會風貌。

在H5新聞中融入場景，讓用戶借助熟悉的場景、經驗和行為來接收和理解信息，進而主動傳播信息，這是激勵受眾轉發、傳播信息的重要手段［2］。以具有年代氣息的熱鬧街景為背景，展現人們當時的穿著打扮、生活習慣、交通方式，加強人們對改革開放歷史記憶的情感體驗，讓人仿佛置身于那個年代，感受到當時的時代氛圍，讓人們從中找到共鳴，拉近人機之間的距離。除此之外，還添加了極具年代感的背景音效，比如巷子胡同里的吆喝聲，人們來來往往的腳步聲、紛紛雜雜的說話聲，抑或是某個街角里播放的流行歌曲，這些具有時代感、情感化的元素輕而易舉地把人拉回到那個年代中去。

2.2 故事講述式的交互體驗

在眾多種類的H5交互設計中，故事講述式的H5更具有吸引力，允許受眾與之互動，從而助力進一步的傳播。

在H5新聞《幸福長街40號》中，用戶通過手指上下滑動屏幕長圖便可以看到1978—2018年中國改革開放40年以來的發展變化，新聞采用線性敘事的方法展現了改革開放40年的社會變遷。此外，每張街景圖還設置了拍照互動的環節，用戶以第一視角進行相關交互體驗，在交互中了解當時發生的歷史事件，大大增強了用戶體驗的趣味性。

由此可見，新媒體正快速發展，H5設計被廣泛運用且產生了很好的傳播效果，正在往多感官化、情感化、注重用戶體驗的方向發展。

3 武漢城市形象推廣H5設計實踐

3.1 受眾定位心理分析

近年來，隨著新媒體的發展，移動設備給信息傳播帶來了極大的便利，這種傳播方式受到了年輕人的青睞和追捧。如今，互聯網與人們的生活密不可分，信息傳播速度越來越快，網紅城市、網紅景點等新媒體時代的產物應運而生，各大城市也開始通過各種媒介平臺進行不同形式的宣傳。互聯網越來越普及，但是此種宣傳形式的主要受眾群體仍然是年輕人。

新媒體的快速發展與應用廣泛影響了現在的年輕人，他們會在旅游前通過互聯網搜索相關信息做好旅行攻略，旅游景點攻略、美食攻略等已經成為新一代人旅行出發前必做的功課。因此，為滿足用戶的使用需求，許多推廣設計開始通過各種創意宣傳吸引用戶，H5設計通過多感官的視聽體驗吸引用戶的關注，趣味的交互設計提高了用戶的參與積極性，并使其愿意將這份樂趣分享出去，以吸引更多的年輕人前來參與。所以，根據年輕人熱愛旅行、喜歡追隨潮流的特點，現在很多城市與景點都開始利用新媒體進行宣傳，也越來越注重用戶的參與性與體驗性，通過各式各樣的趣味方式吸引著新一代年輕人的注意力，制造新的潮流動向。

3.2 交互性行為設計

交互設計需要把用戶體驗放在首位，而福格行為模型能夠幫助探究用戶行為，其認為觸發、動機、能力是成功觸發行為的三個關鍵性因素［3］。

H5交互設計的觸發點是看H5分享內容或標題是否滿足用戶的需求，所以對H5標題和內容的選擇至關重要。因此，將武漢城市形象的H5設計的標題設置為“一起去武漢游玩吧！”，趣味性的標題能夠激發用戶的好奇心，從而實現外部觸發。從標題文字所展示的信息來看，用戶也能明確得知該H5設計的內容，便于用戶識別該H5是否滿足自己的需求動機，從而激發用戶的下一步行動。

動機是引發人做出某種行為的力量和念頭，該H5設計采用講故事的方式進行內容的展開與互動，與用戶產生共鳴，并激發用戶闡述自我的深層次需求。通過故事設置引發用戶好奇心，以第一人稱視角來講述故事能讓用戶具有沉浸感、參與感，仿佛自己就是故事的主角，以此成為用戶進行交互行為的動機［4］。武漢歷史文化底蘊深厚，從地域優秀文化中汲取養分，通過展示武漢旅游景點的場景插畫，設計個性化的人物角色引導故事的發展，以人物角色在武漢的游玩過程為故事線，用戶通過交互行為，同角色一起完成游玩體驗。

在角色的旅行游玩過程中，分析用戶在情景中可能產生的交互行為，為用戶的身份賦予更多可能性，從而喚起用戶的同理心。在設定中，用戶化身為正在武漢旅游的人，在主界面地圖上可以自由選擇想要參觀的景點，按照提示觸屏點擊按鈕便可以進入相應的子界面，子界面會出現此景點的詳細介紹以及與此景點相關的旅行攻略和附近小吃推薦，并且在每個景點處設有拍照打卡的交互行為，打卡完一個景點后，用戶通過觸屏“左右滑動”這一交互方式，便會回到主界面，接著點擊會話框，界面下方便會出現與人物角色進行對話的彈框，然后可通過點擊屏幕和人物角色進行問答式互動。互動結束后，可以自行選擇下一游玩景點，此時在背景地圖上會自動連成一條軌跡，并顯示上一景點到此景點的實際距離和交通方式，以便最終游玩路線符合用戶的實際需求。用戶做出不同的選擇會形成不同的游玩路線，最后可以通過此條游玩路線實現自己現實世界的游玩計劃安排。

通過這些交互設計，能有效增強用戶的參與感，最終形成一個既能展示武漢城市形象又能滿足用戶需求的H5交互設計。游玩結束后，結尾界面設有轉發分享、再玩一次的功能，用戶可以選擇再玩一次或者通過鏈接的方式進行分享與轉發。

能力是指用戶實現與H5交互完成的能力，所以交互設計應盡量與用戶的能力相匹配。比如，在互動內容中增加游戲化的體驗設計，將交互體驗設計成通關模式，這樣可以有效激發用戶的參與動力，但需要注意的是，如果游戲難度設置得太高，就會提高行為觸發的失敗率，因此需要設計者選擇適合用戶的游戲交互難度。

3.3 音效設定

音效是渲染場景氛圍的重要環節。在H5設計中，聲音效果分為背景聲音效果和特殊聲音效果。背景聲音可用來推動故事的發展和增強主題的氣氛。特殊聲音效果則是用戶在激活某個元素時產生的特定聲音效果，能起到豐富聽覺等感官體驗的作用。在音效設定方面，背景音效選擇應具有趣味性的音樂，特殊音效則根據不同的背景特點，選擇不同的音效。

3.4 視覺設計

視覺設計采用扁平化的風格，通過元素簡約化的形式將復雜的信息簡潔化，可以突出信息的重要部分。隨著互聯網的發展，扁平式風格也很適合移動網絡設備。目前，網絡上經常可以看見扁平化風格的設計，這種極簡的設計也很符合當代人的審美需求。此外，色彩對于視覺也同樣重要，色彩具有烘托、美化頁面的特點，以具有代表性的色彩與形狀作為聯系手段，形成視覺引導力，能夠引導用戶感受地區風土人情和民俗文化［5］（見圖1）。

3.5 界面設計

開始界面是用戶進入H5看到的第一個界面，界面傳達的內容需要滿足用戶的需求，以處于旅行狀態的人物角色設計加上地圖樣式背景作為開始界面的畫面元素，加上“一起去武漢游玩吧！”的主題文字，讓該H5交互設計所傳達的信息一目了然，能夠吸引用戶的興趣，引起外部的觸發（見圖2）。

進入“一起去武漢游玩吧！”H5交互設計后，就會進入主界面，主界面是一張介紹武漢各景點的插畫地圖。用戶可在此頁面選擇任意景點進行交互，在交互操作上，點擊景點便可以進入相應的子界面，子界面是介紹景點詳細信息的頁面，用戶采取“右滑動”這一交互方式，便能退出子界面回到主界面。在主界面上，除了設有進入詳情介紹的子界面外，還設定了與人物角色進行互動的對話提問情節，只要點擊相應景點旁的對話框，主界面下方便會彈出與人物角色對話的會話框界面，以問答的方式對景點信息進行呈現，用戶點擊相應答案就能實現問答體驗（見圖3）。

結束界面添加了分享轉發、再玩一次的功能，用戶可以選擇再玩一次或者通過鏈接的方式分享轉發給好友。

4 結語

隨著技術的不斷進步，傳播媒介也在不斷發展，H5交互設計已成為全媒體時代的重要產品，它改變了傳統的設計思維，利用不同感官互動給予用戶最好的精神體驗和心靈享受，給消費者帶來沉浸式的互動體驗，從而獲得用戶的認可。H5交互設計利用各種豐富的表現形式和互動給予用戶多變的感受，為城市形象宣傳開拓了一種全新的途徑，產生了積極的宣傳效應。

參考文獻：

［1］ 馬梅.新聞報道的融合、繼承與創新：以人民日報H5作品《幸福長街40號》為例［J］.青年記者，2019（4）：63.

［2］ 譚坤，呂悅寧.基于微信平臺的H5廣告設計策略分析［J］.包裝工程，2016，37（20）：199-200.

［3］ 胡玲俐.烏鎮戲劇節文化推廣中H5廣告的應用研究［D］.上海：東華大學，2021：41-42.

［4］ 徐子彧.基于用戶體驗的H5交互廣告設計研究［D］.武漢：武漢紡織大學，2020：18-19.

［5］ 孫雅君. H5技術支持下“魅力威海”文化創意的設計與呈現研究［J］.通訊世界，2020（1）：277-278.

作者簡介：王慧（1997—），女，湖北京山人，碩士在讀，研究方向：藝術設計。