武漢旅游文化傳播主題的H5交互設(shè)計(jì)研究

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

關(guān)鍵詞：H5交互設(shè)計(jì)；武漢城市形象；城市宣傳

中圖分類號：TB47；G124 文獻(xiàn)標(biāo)識碼：A 文章編號：1004-9436（2022）10-00-03

0 引言

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

1 H5設(shè)計(jì)的優(yōu)勢

1.1 交互性

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

1.2 傳播性

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

1.3 社會性

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

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

2.1 情感共鳴式的交互體驗(yàn)

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

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

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

2.2 故事講述式的交互體驗(yàn)

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

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

由此可見，新媒體正快速發(fā)展，H5設(shè)計(jì)被廣泛運(yùn)用且產(chǎn)生了很好的傳播效果，正在往多感官化、情感化、注重用戶體驗(yàn)的方向發(fā)展。

3 武漢城市形象推廣H5設(shè)計(jì)實(shí)踐

3.1 受眾定位心理分析

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

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

3.2 交互性行為設(shè)計(jì)

交互設(shè)計(jì)需要把用戶體驗(yàn)放在首位，而福格行為模型能夠幫助探究用戶行為，其認(rèn)為觸發(fā)、動機(jī)、能力是成功觸發(fā)行為的三個(gè)關(guān)鍵性因素［3］。

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

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

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

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

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

3.3 音效設(shè)定

音效是渲染場景氛圍的重要環(huán)節(jié)。在H5設(shè)計(jì)中，聲音效果分為背景聲音效果和特殊聲音效果。背景聲音可用來推動故事的發(fā)展和增強(qiáng)主題的氣氛。特殊聲音效果則是用戶在激活某個(gè)元素時(shí)產(chǎn)生的特定聲音效果，能起到豐富聽覺等感官體驗(yàn)的作用。在音效設(shè)定方面，背景音效選擇應(yīng)具有趣味性的音樂，特殊音效則根據(jù)不同的背景特點(diǎn)，選擇不同的音效。

3.4 視覺設(shè)計(jì)

視覺設(shè)計(jì)采用扁平化的風(fēng)格，通過元素簡約化的形式將復(fù)雜的信息簡潔化，可以突出信息的重要部分。隨著互聯(lián)網(wǎng)的發(fā)展，扁平式風(fēng)格也很適合移動網(wǎng)絡(luò)設(shè)備。目前，網(wǎng)絡(luò)上經(jīng)?？梢钥匆姳馄交L(fēng)格的設(shè)計(jì)，這種極簡的設(shè)計(jì)也很符合當(dāng)代人的審美需求。此外，色彩對于視覺也同樣重要，色彩具有烘托、美化頁面的特點(diǎn)，以具有代表性的色彩與形狀作為聯(lián)系手段，形成視覺引導(dǎo)力，能夠引導(dǎo)用戶感受地區(qū)風(fēng)土人情和民俗文化［5］（見圖1）。

3.5 界面設(shè)計(jì)

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

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

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

4 結(jié)語

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

參考文獻(xiàn)：

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

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

［3］ 胡玲俐.烏鎮(zhèn)戲劇節(jié)文化推廣中H5廣告的應(yīng)用研究［D］.上海：東華大學(xué)，2021：41-42.

［4］ 徐子彧.基于用戶體驗(yàn)的H5交互廣告設(shè)計(jì)研究［D］.武漢：武漢紡織大學(xué)，2020：18-19.

［5］ 孫雅君. H5技術(shù)支持下“魅力威海”文化創(chuàng)意的設(shè)計(jì)與呈現(xiàn)研究［J］.通訊世界，2020（1）：277-278.

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