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

1. H5已死？

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

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

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

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

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

從以上數據來看，“H5已死”的論調可能還為時過早。

2. 2016：H5的活法

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

1- 受眾地域分布

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

2- H5訪問時間

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

3- H5渠道排行

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

4- H5閱讀頁數分析

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

5- 最受歡迎的H5形式

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

3. 運營目標與受眾需求

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

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

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

4. 怎樣設計一個好的H5？

綜合考慮運營目標和受眾目標，并結合之前的數據，想要設計一個好的H5需要考慮以下三個方面：

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

1-  內容創(chuàng)意

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

案例：Next Idea x 故宮-騰訊

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

2- 誘發(fā)傳播

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

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

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

3- 優(yōu)質渠道

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

5. H5交互形式案例

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

• 1 – 展示型交互

• 2 – 引導型交互

• 3 – 游戲型交互

1 – 展示型

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

優(yōu)缺點

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

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

展示型交互的常見的表現形式有以下幾種。

1-1 視頻式

視頻式H5最為簡單，打開H5就開始播放視頻，一直到H5結束。這種H5對于視頻內容的要求極高，能不能達到運營目的，就要看視頻給不給力了。

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

1-2 幻燈片式

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

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

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

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

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

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

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

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

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

1-3 空間展示

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

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

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

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

2 – 引導型

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

優(yōu)缺點：

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

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

根據內容形式不同，引導式交互的H5可以細分為以下幾種交互方式：

2-1 互動視頻式

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

案例：首個手機話劇團開張了 – 天貓

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

2-2 小場景式

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

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

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

2-3 頁面探索

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

案例：杜蕾斯美術館-杜蕾斯

3 – 游戲式交互

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

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

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

3-1 圖片合成

案例：我的小學生照片 – 天天P圖

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

3-2 做測試

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

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

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

3-3 抽簽

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

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

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

案例：2017年雞雞向上- Sigma

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

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

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

參考資料：

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

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

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

部分案例來自于H5分享網站：www.h5-share.com。

作者：程望舒

來源：攜程設計委員會

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