唐蕓莉 譚坤 陳金梅

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

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

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

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

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

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

（一）操作簡化靈活，適合移動媒體

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

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

（二）瀏覽隨時隨地，利用碎片時間

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

（三）交互順暢深入，提升用戶體驗

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

（四）信息傳播即時，降低宣傳成本

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

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

二、基于微信平臺的H5在營銷中的劣勢

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

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

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

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

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

（三）平臺限制較多，營銷容易踩坑

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

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

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

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

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

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

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

（二）巧用情感元素，獲取認同感

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

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

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

（三）用戶主導參與，交互多元化

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

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

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

（四）動效元素豐富，視覺個性化

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

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

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

四、結(jié)語

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

參考文獻：

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

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

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

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

作者簡介：

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

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

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