H5開發，你該知道的H5玩法和設計技巧

時間：2019-08-06 16:21:18 | 來源：

運營目標與受眾需求

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

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

怎樣設計一個好的H5？

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

內容創意+誘發傳播+優質渠道

1- 內容創意

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

案例：Next Idea x 故宮-騰訊

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

2-誘發傳播

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

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

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

3- 優質渠道

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

H5交互形式案例

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

1 – 展示型交互
2 – 引導型交互
3 – 游戲型交互

1 – 展示型

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

優缺點

優點：易于流暢地呈現一個完整的品牌故事或品牌形象；技術難度較低，交互層級較少。
缺點：對內容的要求非常高，而且必須完整觀看完整個展示才能達到傳播作用。交互形式簡單乏味，容易引起受眾流失。

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

1-1 視頻式

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

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

1-2 幻燈片式

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

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

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

話題法，追蹤熱點事件，發表三觀極正或者反彈琵琶的觀點；
數據法，用數據說故事，比如每年支付寶微信年末都要做的事情；
科普法，介紹有趣有用或者極其重要卻鮮為人知的小知識（想起來我們爸媽的朋友圈了嘛？？？）;
溫情法，一個節日的問候，一個對母校的祝福，騙來了數以百萬計的轉發;
產品介紹法。幾頁幻燈片切換，介紹一個美好的新產品。

案例：2017春節和家人怎么過？- Airbnb

1-3 空間展示

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

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

案例：一鏡到底、一刀未剪的大劇發布-優酷

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

2 – 引導型

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

優缺點：

優點：豐富了用戶與H5之間的交互，讓用戶在閱讀過程中始終對故事保持沉浸感。同時安插得好的交互觸點可以增強宣傳推廣作用。
缺點：用戶依然是在觀看中被動地接受故事，參與感并沒有實質的提升。

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

2-1 互動視頻式

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

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

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

2-2 小場景式

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

案例：媽媽再打我一次-京東母親節

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