從營銷到內容

唐蕓莉 譚坤 陳金梅

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

關鍵詞：H5；營銷；用戶體驗設計

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

H5是隨著移動互聯網的發展和HTML5技術的廣泛應用而產生的，曾被誤認為是HTML5的簡稱。實際上，H5雖然涉及HTML5的規范，但并不等同于HTML5，而是一種運行在移動端的，基于HTML5技術的動態交互頁面[1]。H5本質上就是移動端網頁，它具有跨平臺的特點，兼容安卓、IOS兩大系統，完美適應智能手機等移動終端設備。可以說，H5技術的成熟，開辟了一種全新的營銷方式[2]。

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

一、基于微信平臺的H5在營銷中的優勢

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

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

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

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

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

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

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

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

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

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

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

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

（一）承載內容較少，營銷不易深入

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

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

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

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

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

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

三、基于微信平臺的H5設計轉型

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

（一）打開敘事視角，內容故事化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結語

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

參考文獻：

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

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

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

[4]網易傳媒設計中心.H5匠人手冊——霸屏H5實戰解密[M].北京：清華大學出版社，2018：8.

作者簡介：

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

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

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