唐蕓莉 譚坤 陳金梅

摘? 要：近幾年，由于微信移動(dòng)社交平臺(tái)的崛起，微信訪問量迅猛增長。這給H5的發(fā)展提供了條件，讓基于微信平臺(tái)的H5迅速成為最炙手可熱的營銷形式之一，有效幫助企業(yè)的活動(dòng)進(jìn)行快速借勢營銷和宣傳。本文以基于微信平臺(tái)的H5為研究對(duì)象，分析其在營銷中的優(yōu)勢和劣勢，并以此為切入點(diǎn)，研究在H5營銷廣告同質(zhì)化泛濫的情況下，微信H5設(shè)計(jì)如何轉(zhuǎn)變思路，以用戶為主導(dǎo)，從傳統(tǒng)的營銷產(chǎn)品轉(zhuǎn)向營銷內(nèi)容，提升用戶黏度和傳播力。

關(guān)鍵詞：H5；營銷；用戶體驗(yàn)設(shè)計(jì)

基金項(xiàng)目：本文系北京電子科技職業(yè)學(xué)院校內(nèi)社科類一般項(xiàng)目“基于微信端的H5界面視覺設(shè)計(jì)研究”（2021Z100-SXY）研究成果。

H5是隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展和HTML5技術(shù)的廣泛應(yīng)用而產(chǎn)生的，曾被誤認(rèn)為是HTML5的簡稱。實(shí)際上，H5雖然涉及HTML5的規(guī)范，但并不等同于HTML5，而是一種運(yùn)行在移動(dòng)端的，基于HTML5技術(shù)的動(dòng)態(tài)交互頁面[1]。H5本質(zhì)上就是移動(dòng)端網(wǎng)頁，它具有跨平臺(tái)的特點(diǎn)，兼容安卓、IOS兩大系統(tǒng)，完美適應(yīng)智能手機(jī)等移動(dòng)終端設(shè)備。可以說，H5技術(shù)的成熟，開辟了一種全新的營銷方式[2]。

H5語言編寫的界面與微信的兼容性較好。近幾年來，微信異軍突起，成為目前國內(nèi)最為流行的社交媒體平臺(tái)。由于微信用戶群的龐大，越來越多的商家將微信營銷作為最終的營銷選擇之一，這為基于微信平臺(tái)的H5提供了廣闊的發(fā)展舞臺(tái)。目前的H5大多集中于微信端，所以，基于微信平臺(tái)的H5就當(dāng)仁不讓成為H5的代言人。

一、基于微信平臺(tái)的H5在營銷中的優(yōu)勢

（一）操作簡化靈活，適合移動(dòng)媒體

現(xiàn)如今，手機(jī)的智能化程度越來越高，融合了交互、動(dòng)畫、圖表、全景、應(yīng)用等各種內(nèi)容形式。與傳統(tǒng)媒體介質(zhì)相比，手機(jī)屏幕更小，尺寸更豐富；瀏覽靈活，可橫屏也可豎屏，展示形式多樣；而且能夠隨身攜帶，可隨時(shí)隨地進(jìn)行瀏覽。

比起本地APP應(yīng)用，基于微信平臺(tái)的H5優(yōu)勢十分明顯：免安裝下載、啟動(dòng)時(shí)間短、不占存儲(chǔ)空間。并且最重要的是，在微信內(nèi)直接點(diǎn)開鏈接就可以快速瀏覽，操作流程十分簡化快捷，有效提升了用戶的瀏覽體驗(yàn)，簡直是為手機(jī)這樣小巧便攜的移動(dòng)媒體量身定做的。

（二）瀏覽隨時(shí)隨地，利用碎片時(shí)間

在當(dāng)前這個(gè)快節(jié)奏的社會(huì)中，人們可以進(jìn)行深入閱讀的大塊時(shí)間越來越少。智能手機(jī)功能強(qiáng)大又小巧便攜，可以說是一部移動(dòng)的微型電腦，用戶可以隨時(shí)隨地進(jìn)行信息閱讀，從而產(chǎn)生了新的閱讀形式——碎片化閱讀?；谖⑿牌脚_(tái)的H5內(nèi)容淺、層級(jí)少、形式炫，點(diǎn)開就可以瀏覽。這種不以深度取勝的短平快的方式，很適合碎片化閱讀，讓排隊(duì)、等餐等一些很難利用的閑暇時(shí)間具有了意義。

（三）交互順暢深入，提升用戶體驗(yàn)

H5是融媒體，內(nèi)容形式豐富，圖文并茂，支持視音頻、動(dòng)畫等多種媒體形式，具有良好的感官體驗(yàn)。更重要的是，目前H5技術(shù)日趨成熟，作品視覺效果豐富炫酷，繪圖、擦除、搖一搖、重力感應(yīng)、3D虛擬現(xiàn)實(shí)等互動(dòng)效果無需第三方插件的支持就可以輕松實(shí)現(xiàn)，而且需要消耗的流量很少，具有很好的交互性，用戶參與性強(qiáng)，使用體驗(yàn)好。

（四）信息傳播即時(shí)，降低宣傳成本

微信是點(diǎn)對(duì)點(diǎn)式的傳播，以社交關(guān)系為傳播紐帶，最終信息傳播的數(shù)量會(huì)呈幾何級(jí)數(shù)增長，是一種互動(dòng)性更強(qiáng)、擴(kuò)散性更快的傳播方式。H5借助微信強(qiáng)大的分享功能達(dá)到快速傳播的目的，一夜之間刷爆朋友圈的H5層出不窮。

比起傳統(tǒng)媒體，基于微信平臺(tái)的H5制作簡便，傳播過程是用戶自主自發(fā)傳播，信息傳播即時(shí)性強(qiáng)，企業(yè)宣傳成本大大降低，容易以低成本獲取高曝光。同時(shí)，微信平臺(tái)營銷數(shù)據(jù)統(tǒng)計(jì)實(shí)時(shí)全面、方便快捷，企業(yè)可以及時(shí)有效獲取客戶的反饋，并根據(jù)信息反饋及時(shí)調(diào)整宣傳計(jì)劃。

二、基于微信平臺(tái)的H5在營銷中的劣勢

基于微信平臺(tái)的H5具有創(chuàng)作形式新、交互體驗(yàn)好、分享速度快、傳播范圍廣、開發(fā)難度易、推廣成本低等特點(diǎn)，對(duì)于企業(yè)的營銷可以說是有著得天獨(dú)厚的優(yōu)勢，但是受形式和平臺(tái)限制，其也存在明顯的不足。

（一）承載內(nèi)容較少，營銷不易深入

移動(dòng)端屏幕比PC端屏幕尺寸小很多，尤其是手機(jī)，屏幕可顯示的內(nèi)容非常有限。如果沒有進(jìn)行良好的視覺設(shè)計(jì)，沒有從用戶的需求出發(fā)，那么就會(huì)嚴(yán)重影響用戶瀏覽時(shí)的視覺體驗(yàn)。另一方面，H5屬于輕應(yīng)用，這種形式要適應(yīng)用戶快速瀏覽的需求，更關(guān)注信息傳播的高效和用戶使用的流暢度，這就使得H5的層級(jí)較少、內(nèi)容單一。

（二）用戶黏性較低，營銷難以持續(xù)

用戶在微信中打開H5之后在頁面中的停留時(shí)間較短，瀏覽關(guān)閉之后很容易就會(huì)被微信鋪天蓋地的信息所淹沒，因此用戶留存率和二次點(diǎn)擊率較低。如果沒能夠在第一時(shí)間留住用戶并關(guān)注轉(zhuǎn)發(fā)，就會(huì)失去傳播力。

（三）平臺(tái)限制較多，營銷容易踩坑

基于微信平臺(tái)的H5需要受微信審核規(guī)則的制約，而微信平臺(tái)的規(guī)則會(huì)不斷出臺(tái)更新，很多H5一不小心就會(huì)被微信限制或屏蔽。如判定為誘導(dǎo)分享行為、過度營銷行為等都可能會(huì)導(dǎo)致H5頁面被封。因此，必須保證操作嚴(yán)格規(guī)范，這也導(dǎo)致基于微信平臺(tái)的H5營銷有著一定的局限性。

盡管微信審核規(guī)則越來越嚴(yán)格，但是良好的微信生態(tài)環(huán)境對(duì)于H5的發(fā)展也具有推動(dòng)作用。逐漸從一味追求嘩眾取寵、誘導(dǎo)分享等捷徑回歸到創(chuàng)意和內(nèi)容上，對(duì)于H5的高品質(zhì)發(fā)展來說有益無害。

三、基于微信平臺(tái)的H5設(shè)計(jì)轉(zhuǎn)型

基于微信平臺(tái)的H5火爆朋友圈，受到企業(yè)和商家的追捧，H5營銷廣告鋪天蓋地。但是絕大多數(shù)的H5盲目跟風(fēng)，從形式到內(nèi)容缺乏創(chuàng)意，導(dǎo)致作品同質(zhì)化嚴(yán)重。這樣營銷過度的結(jié)果就是用戶產(chǎn)生厭煩情緒，主動(dòng)忽略或關(guān)閉H5廣告的推送，導(dǎo)致作品無法得到關(guān)注，更不用說分享了。因此，針對(duì)營銷企業(yè)而言，如何轉(zhuǎn)變思路，在有限的時(shí)間和空間內(nèi)快速吸引用戶的注意，提高用戶瀏覽效率、分享率，提升用戶轉(zhuǎn)化率是需要迫切解決的問題。

（一）打開敘事視角，內(nèi)容故事化

針對(duì)H5的特點(diǎn)進(jìn)行合理的內(nèi)容設(shè)計(jì)，采用敘事的方式，把內(nèi)容簡短直接地故事化，擺脫說教、指導(dǎo)的形式，讓用戶能以第一人稱的視角產(chǎn)生身臨其境的感覺。H5互動(dòng)電影在從營銷向內(nèi)容的轉(zhuǎn)變上做了很多的探索，2016年H5《活口》的爆火，為影視作品做宣傳打造的H5互動(dòng)電影打開了一扇嶄新的大門。觀眾與電影進(jìn)行互動(dòng)，用戶可以參與結(jié)局，比起海報(bào)宣傳和視頻宣傳，這種推廣方式更為新穎，交互性極強(qiáng)。但值得注意的是，很多大制作、大投入的作品并沒有成功霸占朋友圈，究其原因就是用戶在瀏覽H5時(shí)往往是利用碎片時(shí)間，精力不集中，更多是為了打發(fā)消磨時(shí)間，不會(huì)像看電影一樣集中精力去選擇、去探索。因此，一些時(shí)間短、交互少、快節(jié)奏的H5互動(dòng)電影作品往往因其輕松有趣、淺顯易懂的內(nèi)容更受用戶歡迎。

《大時(shí)代的故事》是測試游戲類的H5作品，用戶穿越回20世紀(jì)80年代，經(jīng)歷了1977年恢復(fù)高考、1979年成為“老三屆”、畢業(yè)或工作解決各種問題等人生選擇而不同的選擇會(huì)解鎖不同的職業(yè)和人生，如鄉(xiāng)鎮(zhèn)干部、農(nóng)場技術(shù)員、外企員工等，最后輸入名字生成自己穿越回八十年代的人生海報(bào)。作品整體采用版畫風(fēng)格的黑白色調(diào)插畫，每一次的測試都如同在講述一個(gè)故事，而故事是由用戶做選擇和做主導(dǎo)形成的（如圖1）。

（二）巧用情感元素，獲取認(rèn)同感

人是感性的，親情、愛情、友情是人生不可或缺的情感訴求。提取能夠表現(xiàn)品牌或主題的核心價(jià)值，從情感方面找尋作品訴求對(duì)于用戶的意義關(guān)聯(lián)，在H5的內(nèi)容中巧妙融入情感元素，以情動(dòng)人，引起目標(biāo)用戶的共鳴而觸發(fā)分享行為[3]。這樣的H5，雖然本質(zhì)上仍然是營銷廣告，但是用戶本身并不易察覺，能在潛移默化間達(dá)到目的，可以說是不是營銷的營銷。

《家中40年老物件回憶猜》是紀(jì)念改革開放40年的優(yōu)秀H5作品，采用有趣的猜謎游戲形式展現(xiàn)出了改革開放40年來中國發(fā)生的巨大改變。這個(gè)作品的創(chuàng)意亮點(diǎn)是以情動(dòng)人，具有強(qiáng)烈時(shí)代感的老物件配合20世紀(jì)80年代畫報(bào)的視覺畫面以及精準(zhǔn)煽情的文案，激起了70后、80后用戶的集體回憶，產(chǎn)生情感共鳴，而沒有相關(guān)生活經(jīng)歷的用戶看到這些帶有歲月痕跡的物件也會(huì)覺得新奇（如圖2）。作品交互操作簡潔，用戶心中選取物件后采用問答形式猜謎，通過選擇“是”或“不是”按鈕，其最終總能猜中用戶心中所想。用戶在參與游戲的過程中往往會(huì)陷入回憶，由于情感上的共鳴使心理上產(chǎn)生認(rèn)同感，用戶往往樂此不疲地重復(fù)參與游戲并樂于分享。

同樣是紀(jì)念改革開放40年的主題，H5作品《幸福長街40號(hào)》采用的則是長圖拖放的形式。這個(gè)作品是人民日?qǐng)?bào)客戶端聯(lián)合快手推出的，其創(chuàng)意來自于名畫《清明上河圖》。隨著用戶手指的滑動(dòng)，憑票供應(yīng)、女排三連冠、亞運(yùn)會(huì)、香港澳門回歸、奧運(yùn)會(huì)等40年來最有代表性和記憶感的240多個(gè)歷史事件或者場景，在一條長街上徐徐展現(xiàn)。作品的主要事件采用動(dòng)效，配合具有當(dāng)時(shí)典型時(shí)代特征的歌曲和音樂，呈現(xiàn)出中國社會(huì)40年來的變化歷程（如圖3）。畫面中的情節(jié)和場景是大多數(shù)人的生活經(jīng)歷，從而讓人很容易就能跟隨畫面產(chǎn)生聯(lián)想，代入感極強(qiáng)。這一作品獲得了用戶的極大關(guān)注和好評(píng)，成為霸屏的好作品。

（三）用戶主導(dǎo)參與，交互多元化

2014年H5剛面世時(shí)是以靜態(tài)信息展示工具的面貌出現(xiàn)的，其形態(tài)類似于幻燈片，交互通常就是點(diǎn)擊瀏覽、點(diǎn)擊翻頁等簡單形式，更多的是在界面的視覺美化上做文章。后來隨著微信用戶的大量關(guān)注，對(duì)內(nèi)容和交互的要求也越來越高，用戶不再滿足于被動(dòng)的瀏覽，H5的交互形式也就呈現(xiàn)出多元化的趨勢，用戶的參與度越來越高，瀏覽體驗(yàn)得到大幅提升。

《伯樂找馬，馬到成功》是新年時(shí)進(jìn)行床墊新品宣傳的H5作品，采用繪制精美的古風(fēng)畫卷的形式，構(gòu)思源自于《戰(zhàn)國策》中伯樂和千里馬的故事。作品設(shè)置游戲和抽獎(jiǎng)吸引用戶參與，在瀏覽過程中隨著引導(dǎo)，用戶不由自主地化身“伯樂”，從畫卷中尋找到六匹駿馬并解鎖一系列豐富有趣的游戲及抽獎(jiǎng)環(huán)節(jié)（如圖4）。作品并沒有明顯地宣傳品牌和產(chǎn)品，但是畫卷中店鋪的招牌、幌子上的品牌名字在用戶尋找線索和參與游戲的過程中潛移默化地印入用戶的腦海，駿馬線索及游戲中的床墊元素也含蓄表明了產(chǎn)品。

H5作品《向野之型》是秋冬線上虛擬時(shí)裝秀，采用虛擬現(xiàn)實(shí)的技術(shù)打造線上秀臺(tái)，充滿幾何元素的炫酷的3D秀場，營造出眩暈和破碎感。用戶點(diǎn)擊“切換鏡頭”按鈕可以從最佳視角觀看模特動(dòng)態(tài)的走臺(tái)，也可以滑動(dòng)屏幕從不同角度進(jìn)行觀看，還可以預(yù)約直播和領(lǐng)取不同新款的數(shù)字虛擬海報(bào)（如圖5）。比起實(shí)地現(xiàn)場觀看，線上形式的場景更炫酷，且不受開放時(shí)間和地域的限制，不受嘈雜人群的干擾，用戶可以隨時(shí)隨地全方位地細(xì)細(xì)欣賞。隨著虛擬現(xiàn)實(shí)技術(shù)的進(jìn)步，線上秀場、線上展廳、線上博物館的體驗(yàn)感必然更真實(shí)，這種足不出戶的沉浸式觀展必將成為現(xiàn)場觀展的重要補(bǔ)充形式。

（四）動(dòng)效元素豐富，視覺個(gè)性化

由于微信端H5展示空間的限制，很多內(nèi)容和場景無法全面顯示，以動(dòng)效的形式對(duì)內(nèi)容進(jìn)行組織和優(yōu)化，在有限的空間內(nèi)表現(xiàn)出內(nèi)容的時(shí)空變化，拓展屏幕空間，增強(qiáng)頁面表現(xiàn)力。H5中最常用、最基本的動(dòng)效是轉(zhuǎn)場過渡效果，相對(duì)于靜態(tài)的圖片和文字，動(dòng)態(tài)的元素對(duì)用戶的視覺吸引力更強(qiáng)。隨著技術(shù)的進(jìn)步，動(dòng)效的形式越來越豐富。通過巧妙地將交互與動(dòng)效相結(jié)合，配合用戶手勢，不僅可以吸引用戶關(guān)注重點(diǎn)，提升內(nèi)容的視覺效果，還可以引導(dǎo)用戶按順序?yàn)g覽，將信息快速有效地傳達(dá)給用戶。

《2020我的微博播報(bào)》是新浪微博年終個(gè)人總結(jié)的H5作品，目標(biāo)用戶是新浪微博用戶，在回憶用戶一年的微博歷程之后，最終生成年度關(guān)鍵詞海報(bào)。作品采用卡通化的場景和人物形象，最大的亮點(diǎn)在于動(dòng)效的制作應(yīng)用是目前比較流行的SVG技術(shù)實(shí)現(xiàn)，瀏覽絲滑順暢（如圖6）。SVG是一種基于XML技術(shù)的矢量圖形格式，不受屏幕分辨率的影響，可以自由縮放不失真，且文件小巧，支持交互和動(dòng)態(tài)，用戶體驗(yàn)良好，目前應(yīng)用越來越廣泛。

需要注意的是，動(dòng)效可以引導(dǎo)用戶瀏覽、活躍頁面氣氛、增加瀏覽趣味，但使用要適度。過多的動(dòng)效，尤其是缺乏規(guī)律性的動(dòng)效，反而會(huì)分散用戶注意力，阻礙信息傳遞，破壞作品的瀏覽體驗(yàn)感。

四、結(jié)語

H5是為了傳播而生，是為了推廣宣傳內(nèi)容、活動(dòng)或品牌而制作的，目的是盡可能最大化地引導(dǎo)用戶分享和回流[4]。好的內(nèi)容是H5設(shè)計(jì)的根本，再炫的形式和交互都是為了營銷內(nèi)容的傳播。在目前營銷過度的情形下，H5的設(shè)計(jì)轉(zhuǎn)變思路，從內(nèi)容入手?jǐn)[脫硬性的營銷廣告，以情動(dòng)人來獲得用戶的認(rèn)同感并讓其主動(dòng)參與，使品牌形象在潛移默化間得到提升。隨著移動(dòng)終端硬件的升級(jí)、H5技術(shù)的不斷發(fā)展以及微信平臺(tái)的更新完善，基于微信平臺(tái)的H5將會(huì)在營銷中顯現(xiàn)出更大的優(yōu)勢。

參考文獻(xiàn)：

[1]網(wǎng)易噠噠.H5營銷策劃一本通[M].北京：電子工業(yè)出版社，2020：2.

[2]劉松異.H5移動(dòng)營銷廣告設(shè)計(jì)全攻略[M].北京：人民郵電出版社，2019：10.

[3]趙雅琳，李龍銳.新媒體視域下H5產(chǎn)品傳播策略研究——以網(wǎng)易H5產(chǎn)品為例[J].記者觀察，2022（20）：154-156.

[4]網(wǎng)易傳媒設(shè)計(jì)中心.H5匠人手冊(cè)——霸屏H5實(shí)戰(zhàn)解密[M].北京：清華大學(xué)出版社，2018：8.

作者簡介：

唐蕓莉，碩士，北京電子科技職業(yè)學(xué)院副教授。研究方向：數(shù)字媒體藝術(shù)設(shè)計(jì)。

譚坤，碩士，北京電子科技職業(yè)學(xué)院副教授。研究方向：數(shù)字媒體藝術(shù)設(shè)計(jì)。

陳金梅，碩士，北京電子科技職業(yè)學(xué)院副教授。研究方向：數(shù)字媒體藝術(shù)設(shè)計(jì)。