一款H5產(chǎn)品是需要仔細(xì)打磨的，但大部分失敗的制作者期望高、投入少、時間急還不動腦，想靠一款粗糙的H5產(chǎn)品來引爆朋友圈。這種思維在當(dāng)下H5產(chǎn)品競爭中毫無可取之處，唯有真正從產(chǎn)品與用戶兩個角度出發(fā)才能盡量避免產(chǎn)品的失敗。

1. H5已死？

經(jīng)過幾年H5的混戰(zhàn)，大家對H5的感覺越來越習(xí)以為常，曾經(jīng)名噪一時的套路當(dāng)下也難故伎重演。于是“H5已死”的論調(diào)一時間甚囂塵上。

如今到了2017年，H5究竟死不死？在這里先和大家分享一份2017年初H5在線創(chuàng)作平臺MAKA發(fā)布的《2016年度H5數(shù)據(jù)報告》[1]。

報告中指出，2016年帶商業(yè)轉(zhuǎn)化功能的H5從2015年的15%左右攀升至45.5%，翻了三倍之多；2015年的H5以純內(nèi)容展示為主，通過H5的趣味性傳播帶來品牌曝光，而2016年的H5正從單一的展示傳播轉(zhuǎn)變?yōu)楦鼘嶋H的商業(yè)用途。

在H5商業(yè)轉(zhuǎn)化方面，最常用功能是報名表單（15.6%）、地圖功能（4.3%）、接力功能（2.7%）、投票功能（1.1%）、抽獎功能（0.6%）。

同時，在MAKA上，H5平均頁面瀏覽量1208，高于去年的954，同比增26.6%。這個數(shù)據(jù)和微信30%月活躍用戶增長速度相近似。

從以上數(shù)據(jù)來看，“H5已死”的論調(diào)可能還為時過早。

2. 2016：H5的活法

既然H5還沒死，那么現(xiàn)在的H5的傳播數(shù)據(jù)到底怎樣呢？我們繼續(xù)看MAKA的這份報告。

1- 受眾地域分布

從數(shù)據(jù)來看，受眾多數(shù)來自一線城市，北上廣深四個城市是H5訪問的主要來源地，這與H5想要接觸的目標(biāo)人群是一致的。其中北京遙遙領(lǐng)先，重慶、成都緊隨北上廣深。

2- H5訪問時間

用戶訪問高峰集中在午休11:00-14:00和晚上20:00-23:00，與微信公眾號的閱讀時間分布曲線相近似。具體的推廣時間需要結(jié)合具體場景，而H5發(fā)布的最佳時機(jī)由此可見一斑。

3- H5渠道排行

從MAKA平臺H5的閱讀來源分析，59.6%的用戶通過朋友圈進(jìn)入H5，與2015年相比下降了6個百分點，這個轉(zhuǎn)變可能與微信限制誘導(dǎo)分享有關(guān)。此消彼長，從微信公眾號瀏覽量增加7.9%，公眾號來源逐漸成為成為一次傳播的主要戰(zhàn)場。

4- H5閱讀頁數(shù)分析

通過對訪問量最高的1000個H5分析，發(fā)現(xiàn)高訪問量的H5頁數(shù)多集中在6-10頁，其中9頁最多，占比高達(dá)21.0%。用戶向來是非常挑剔的，太過復(fù)雜或者異常的操作會導(dǎo)致用戶流失。早在2015年就有分析指出[2]，H5層級越深流失率也越大。既要保證傳播的內(nèi)容，也要減少用戶流失，6-10頁的H5是比較合適的。

5- 最受歡迎的H5形式

H5小游戲曾在朋友圈風(fēng)靡一時。而2016年刷屏的H5小游戲就沒有那么多了，這與微信對誘導(dǎo)分享H5嚴(yán)控有直接關(guān)系。1000個高訪問量的H5中，以故事營銷為主題的H5作品最受用戶親睞，其中包括品牌故事、人生哲學(xué)等雞湯軟文的形式展現(xiàn)。內(nèi)容仍是王道，好的內(nèi)容更容易被用戶接受。

3. 運(yùn)營目標(biāo)與受眾需求

在設(shè)計一個H5之前，首先要明確的是我們的運(yùn)營目標(biāo)和受眾需求。運(yùn)營目標(biāo)會依據(jù)最終目的有所不同，針對的受眾也有可能因為運(yùn)營目標(biāo)不同而發(fā)生變化。成功的運(yùn)營應(yīng)當(dāng)是通過滿足受眾的某種需求，最終實現(xiàn)運(yùn)營目的。過多傾向于用戶，會導(dǎo)致PV上升而CV低迷；過多傾向于運(yùn)營推廣而忽略受眾需求，會失去流量最終也達(dá)不到目標(biāo)。

舉一個反例，曾一度刷爆朋友圈的著名H5《吳亦凡要入伍》，其通過視頻展示的方式很有創(chuàng)意，吳亦凡的帥氣形象也深得很多粉絲的心。然而這真的是一支成功的H5嗎？如果沒有特別注意，很容易誤認(rèn)為這個H5主要是為騰訊新聞做宣傳。因為除了騰訊新聞的標(biāo)題以外，H5的宣傳目標(biāo)“全民突擊”游戲名只出現(xiàn)在了結(jié)束頁的左上角，以及吳亦凡視頻的口頭描述中。雖然滿足了受眾（粉絲們）欣賞偶像的需求，可是宣傳推廣“全民突擊”的運(yùn)營需求卻沒有真正完成。

總的來說一款H5產(chǎn)品是需要仔細(xì)打磨的，但大部分失敗的制作者期望高、投入少、時間急還不動腦，想靠一款粗糙的H5產(chǎn)品來引爆朋友圈。這種思維在當(dāng)下H5產(chǎn)品競爭中毫無可取之處，唯有真正從產(chǎn)品與用戶兩個角度出發(fā)才能盡量避免產(chǎn)品的失敗。

4. 怎樣設(shè)計一個好的H5？

綜合考慮運(yùn)營目標(biāo)和受眾目標(biāo)，并結(jié)合之前的數(shù)據(jù)，想要設(shè)計一個好的H5需要考慮以下三個方面：

內(nèi)容創(chuàng)意+誘發(fā)傳播+優(yōu)質(zhì)渠道

1-  內(nèi)容創(chuàng)意

創(chuàng)意。還是創(chuàng)意。一個好的創(chuàng)意可以把運(yùn)營需求和受眾痛點很好的結(jié)合在一起，在安慰或激勵用戶的同時推廣了自身活動、產(chǎn)品或品牌。

案例：Next Idea x 故宮-騰訊

這個H5是騰訊創(chuàng)新大賽報名通知。明朝永樂皇帝朱棣從故宮的畫中穿越到現(xiàn)在，戴上太陽鏡、唱著rap、跳著騎馬舞、玩自拍、發(fā)朋友圈……想法很有新意，迎合了創(chuàng)新大賽的主題。

2- 誘發(fā)傳播

H5內(nèi)容的觸發(fā)點，同時也必須是吸引用戶的點。在第一時間引誘用戶過來點擊很重要，否則再好的H5也不會轉(zhuǎn)化成流量。觸發(fā)點要有誘惑性，提供用戶不得不點的理由。這個誘因可以是獎勵，可以是觸到痛點的文案，可以是美食美色，可以用以下方式：標(biāo)題吸睛——利用人們的好奇心;懸念營銷——制造懸念，引人猜想;紅包利誘——“送送送“、“發(fā)發(fā)發(fā)”，受眾從來不會拒絕這一套。同時，為了獲得需要的宣傳效果或者品牌影響力，需要選擇合適的傳播機(jī)制。例如集贊或接力方式，一人發(fā)布可以換來可持續(xù)的病毒式傳播，可以在短時間內(nèi)造成病毒式影響。

案例：七夕開撕 最美新娘打PK，Baby倪妮你會支持誰？

這個H5是為宣傳電影《新娘大作戰(zhàn)》制作的。作為劇中的主角，Baby與倪妮是敵對關(guān)系。那么誰會贏得最終的勝利呢？投票權(quán)在用戶的手里，點擊花球，拋給兩位女神，她們會爭搶花球，誰搶到了花球就為自己的獲勝機(jī)會增加了一票。想要為自己的女神增加更多花球？那就轉(zhuǎn)發(fā)給朋友們，為心愛的女神積攢花球吧。

3- 優(yōu)質(zhì)渠道

以上三點確立，需要的就是合適的發(fā)放渠道了。盡你所能利用所有能推廣H5的渠道。目前比較常用的方式：通過公眾號的圖文群發(fā)推廣、微信群推廣、線下二維碼推廣，以及前面提到的KOL轉(zhuǎn)發(fā)和投稿等。APP和自身公眾號的推廣算是比較保守的形式，前提是自身APP有足夠大的用戶群體或者自身公眾號有足夠多的活躍受眾。否則的話，KOL營銷，或者找到熱衷于創(chuàng)造與轉(zhuǎn)發(fā)內(nèi)容的種子用戶，是最有效的方式。

5. H5交互形式案例

目前就交互形式來說，H5在移動端的交互形式無外乎常見的幾種：點擊，滑動，擦除，長按等等，還有一些產(chǎn)品本身就是H5制作的，這里略去不談。按照交互輕重程度的區(qū)別，H5推廣可以分為以下三大類：

• 1 – 展示型交互

• 2 – 引導(dǎo)型交互

• 3 – 游戲型交互

1 – 展示型

對展示型的定義，就是非常簡單的，打開H5頁面或者幾個簡單的滑動或點擊操作就開始展示內(nèi)容，對交互的要求最少，對內(nèi)容的要求最高。這種H5一般就一小段H5視頻或者動畫，要求在開始展示的一瞬間就抓住受眾的注意力。

優(yōu)缺點

• 優(yōu)點：易于流暢地呈現(xiàn)一個完整的品牌故事或品牌形象；技術(shù)難度較低，交互層級較少。

• 缺點：對內(nèi)容的要求非常高，而且必須完整觀看完整個展示才能達(dá)到傳播作用。交互形式簡單乏味，容易引起受眾流失。

展示型交互的常見的表現(xiàn)形式有以下幾種。

1-1 視頻式

視頻式H5最為簡單，打開H5就開始播放視頻，一直到H5結(jié)束。這種H5對于視頻內(nèi)容的要求極高，能不能達(dá)到運(yùn)營目的，就要看視頻給不給力了。

案例：薛之謙史上最瘋狂的廣告-騰訊動漫

1-2 幻燈片式

傳統(tǒng)的幻燈片式的播放也屬于展示型交互。通過觸發(fā)切換不同頁面內(nèi)容，一頁一頁地觀看，利用圖文和音樂播放來講故事。比較近的案例如網(wǎng)易云音樂的2016年度總結(jié)，通過呈現(xiàn)幾組簡單數(shù)據(jù)來記錄你與網(wǎng)易云音樂在2016年的過往，既煽情也有趣。

應(yīng)用場景——由于制作簡單，周期短，這種H5展現(xiàn)形式適用于頻繁、小型的需求。用在線編輯器的話，不需要任何開發(fā)，你只需要要配備一名設(shè)計和文案。因此，幻燈片式特別適應(yīng)定期發(fā)布或者結(jié)合熱點的營銷。

幻燈片式的常見玩法可以羅列如下：

1. 話題法，追蹤熱點事件，發(fā)表三觀極正或者反彈琵琶的觀點；

2. 數(shù)據(jù)法，用數(shù)據(jù)說故事，比如每年支付寶微信年末都要做的事情；

3. 科普法，介紹有趣有用或者極其重要卻鮮為人知的小知識（想起來我們爸媽的朋友圈了嘛？？？）;

4. 溫情法，一個節(jié)日的問候，一個對母校的祝福，騙來了數(shù)以百萬計的轉(zhuǎn)發(fā);

5. 產(chǎn)品介紹法。幾頁幻燈片切換，介紹一個美好的新產(chǎn)品。

案例：2017春節(jié)和家人怎么過？- Airbnb

1-3 空間展示

空間展示指的是講移動端屏幕當(dāng)做一個展示窗口，打開后可以通過簡單交互（移動或觸控）看到很多信息。常見的形式包括全景交互以及一鏡到底。

一鏡到底算是2016年下半年炒熱的一個概念，但是采用這種形式的并不多，因為一般加載的內(nèi)容多，技術(shù)實現(xiàn)復(fù)雜。但是用得好的話效果酷炫，展示內(nèi)容豐富，造成的傳播力也強(qiáng)大。2016年天貓雙11一鏡到底也屬于這種播放式的H5，只需要一步操作，就可以看到一個宇宙，讓人贊不絕口。類似的，別的廠也做了炫酷的一鏡到底展示。

案例：一鏡到底、一刀未剪的大劇發(fā)布-優(yōu)酷

這是一個一鏡到底+萬花筒得設(shè)計。進(jìn)入頁面，動畫自動播放，鏡頭從遠(yuǎn)慢慢拉近，以一鏡到底的形式展現(xiàn)youku網(wǎng)站上收錄的電視劇、綜藝等各類節(jié)目，按住屏幕不滑動時，展現(xiàn)方式會變成萬花筒，松開則恢復(fù)。最后一頁到達(dá)YOUKU會員推廣頁面，點擊“拉上伙伴一起酷”分享給小伙伴，也可點擊“加入會員”跳轉(zhuǎn)到外部鏈接。
這個H5在整體設(shè)計上豐富艷麗，配合動感的音樂，效果炫酷，震撼人心。

2 – 引導(dǎo)型

其實引導(dǎo)型和展示型很像，非常注重內(nèi)容。之所以將其分開，是因為在這里需要強(qiáng)調(diào)一下H5中互動的重要性。畢竟大部分受眾是很難堅持靜靜看完一段視頻或者動畫的（要不然優(yōu)酷土豆bilibili的存在就沒意義了）。H5和視頻相對不同的是它可以加入互動。當(dāng)我們說一個故事的時候，通過有一定引導(dǎo)的交互讓受眾和故事有一點點互動，會提升受眾的參與感，激勵受眾繼續(xù)看下去。因此引導(dǎo)式交互更適用于講故事。要強(qiáng)調(diào)的是，在推廣用的H5中，默認(rèn)界面和故事對用戶來說都是新的，所以所有的交互都要有一定程度的引導(dǎo)，否則會讓用戶不小心迷失在界面中。

優(yōu)缺點：

• 優(yōu)點：豐富了用戶與H5之間的交互，讓用戶在閱讀過程中始終對故事保持沉浸感。同時安插得好的交互觸點可以增強(qiáng)宣傳推廣作用。

• 缺點：用戶依然是在觀看中被動地接受故事，參與感并沒有實質(zhì)的提升。

根據(jù)內(nèi)容形式不同，引導(dǎo)式交互的H5可以細(xì)分為以下幾種交互方式：

2-1 互動視頻式

缺乏交互的展示型視頻很難長時間吸引注意力，如果是有一定互動性的視頻就有意思地多了。這種案例需要精心選擇觸發(fā)時機(jī)，配合故事的結(jié)構(gòu)，烘托整個故事的氣氛。

案例：首個手機(jī)話劇團(tuán)開張了 – 天貓

這支H5最近很火，一方面它的話劇部分非常魔性，演員很有表現(xiàn)力，視覺沖擊感很強(qiáng)，另一方面又結(jié)合上恰到好處的交互觸點，把控住受眾觀看的節(jié)奏，將“天貓無憂購”這幾個字牢牢地印在了人的腦海里。

2-2 小場景式

用戶在幻燈片切換這種沉悶無聊的交互中堅持不了幾頁，所以當(dāng)下的切換往往會采用小場景方式，每一頁是一個場景，在當(dāng)前場景中制造一個有趣的熱點，讓用戶觸發(fā)熱點切換到下一個場景；或者有多個場景可以選擇，每一個場景會有一個互動性的小故事。

案例：媽媽再打我一次-京東母親節(jié)

采用回到小時候挨媽媽打，結(jié)合小游戲的形式，引起回憶，帶來歡樂。先選擇媽媽打你的理由，之后，演繹這個場景，之后隨機(jī)出現(xiàn)四種打擊方法：如來神掌、打狗棍、無影腳、召喚術(shù)，每種媽媽打你的方式都配著搞笑夸張的動畫，打完還問舒不舒服，認(rèn)不認(rèn)錯~如果認(rèn)錯就進(jìn)入主題頁，媽媽老了，再也打不動你了，母親節(jié)了，你想媽媽了么？如果不認(rèn)錯，就挨次體驗各種被虐招式吧~

2-3 頁面探索

設(shè)計一個大場景，通過讓受眾在場景內(nèi)主動探索來達(dá)到運(yùn)營目的。在探索過程中，受眾一邊體驗著瀏覽的樂趣，一邊接受著H5推廣宣傳的故事或概念。在探索的最終，受眾會被引導(dǎo)到相關(guān)的app或者活動頁。

案例：杜蕾斯美術(shù)館-杜蕾斯

3 – 游戲式交互

游戲型H5相比于展示型和引導(dǎo)型來說，最注重交互。設(shè)計一個簡單的小游戲，通過有趣的游戲交互來達(dá)到吸引受眾的目的，可以滿足受眾獲得感官刺激、打發(fā)無聊時間或者炫耀自己的目的。當(dāng)年神經(jīng)貓之類的游戲忽然間風(fēng)靡一時，傳播魔力之大令人乍舌。

然而H5游戲在朋友圈的推廣作用也有限，一方面H5游戲因為操作簡單、競技性強(qiáng)，一度風(fēng)靡朋友圈，但創(chuàng)意缺乏和同質(zhì)化現(xiàn)象導(dǎo)致用戶對無腦小游戲逐漸產(chǎn)生了厭倦。另一方面受制于《微信外部鏈接內(nèi)容相關(guān)管理規(guī)范》[3]對H5游戲的限制，微信中傳播的小游戲只能是純游戲，不能含有誘導(dǎo)式的宣傳推廣內(nèi)容，否則活不過半天。

不過好的創(chuàng)意依然不缺乏受眾，一款設(shè)計良好的小游戲也可以間接的將自己的品牌價值或是活動目標(biāo)推廣給廣大受眾。在這里列舉一些常見的類型。

3-1 圖片合成

案例：我的小學(xué)生照片 – 天天P圖

想要炫耀自我嗎？想要體驗新奇嗎？給你機(jī)會。通過一鍵生成圖片，讓你秒變小學(xué)生。

3-2 做測試

一般是比較簡單的幾步問答選擇，就給出一個有意思的測試結(jié)果。硬廣營銷的測試已經(jīng)基本被封殺了，目前更多的是一些帶有預(yù)測、惡搞、科普或者祝福意義的測試，然后博取關(guān)注公眾號或下載APP。

案例：沒想到你是這樣的安全帶 – 滴滴出行

你知道多少關(guān)于安全帶的知識呢？“汽車安全帶雛形是哪個國家呢？”“最先使用三點式安全帶是哪個汽車廠商？”“安全帶的克星是什么”“乘坐出租車不系安全帶可能發(fā)生什么”“安全帶的織帶主要組成成分是什么？”這些問題你知道么？通過一系列測試，案例最終將滴滴的安全出行理念傳輸給受眾。

3-3 抽簽

2017年，獵魚達(dá)人給你一個嘚瑟的理由 – 騰訊游戲

騰訊獵魚達(dá)人游戲節(jié)日推，通過搖一搖抽福簽的形式展開，隨后對抽到的福簽進(jìn)行解簽，可以進(jìn)行多次搖取，最后可以跳轉(zhuǎn)app store進(jìn)行游戲下載贏取紅包，還可進(jìn)行分享。

3-4 原創(chuàng)/移植小游戲

案例：2017年雞雞向上- Sigma

加載進(jìn)入后，進(jìn)入首頁介紹主題“雞雞向上”，隨后介紹游戲的玩法進(jìn)入游戲，點擊屏幕可以使小雞跳動起來，左右晃動手機(jī)可以控制小雞的墜落方向，除了燈籠外里面還有各種小道具，跳到小道具上可以使小雞變身哦。想要不停向上，那么就來挑戰(zhàn)吧。

當(dāng)下H5游戲也有了很多新玩法，例如雙屏互動、地理定位、聲音識別、面部識別，就不一一詳細(xì)列舉了。。

以上就是2017年關(guān)于H5的一些基礎(chǔ)知識。掛一漏萬說了很多，總的來說一款H5產(chǎn)品是需要仔細(xì)打磨的，但大部分失敗的制作者期望高、投入少、時間急還不動腦，想靠一款粗糙的H5產(chǎn)品來引爆朋友圈。這種思維在當(dāng)下H5產(chǎn)品競爭中毫無可取之處，唯有真正從產(chǎn)品與用戶兩個角度出發(fā)才能盡量避免產(chǎn)品的失敗。

參考資料：

• [1]  馬東尼. MAKA發(fā)布《2016年度H5數(shù)據(jù)報告》：H5上升趨勢明顯.https://www.jiemian.com/article/1081611.html.

• [2]  一只耳大王. h5產(chǎn)品失敗的的常見原因解析. https://www.devstore.cn/essay/essayInfo/930.html.

• [3]  微信外部鏈接內(nèi)容相關(guān)管理規(guī)范. https://weixin.qq.com/cgi-bin/readtemplate?t=weixin_external_links_content_management_specification.

部分案例來自于H5分享網(wǎng)站：www.h5-share.com。

作者：程望舒

來源：攜程設(shè)計委員會

紅星成都活動公司(http://m.maxstart-hk.com/)，一款助您大幅降低開發(fā)與運(yùn)營成本，實現(xiàn)場景化、精細(xì)化、數(shù)據(jù)化、自動化的專業(yè)H5游戲活動營銷工具，助力中小微企業(yè)快速創(chuàng)建符合自身特點的互動營銷小游戲，實現(xiàn)快速拉新、留存、促活，提升用戶轉(zhuǎn)化的活動營銷工具。應(yīng)用場景支持：APP應(yīng)用+H5+小程序+微信公眾號。立即去體驗：http://m.maxstart-hk.com/Index/login