看看大神是怎麼設計一個好的H5的

知識 09-19

看看大神是怎麼設計一個好的H5的

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

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

1- 內容創意

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

案例：Next Idea x 故宮-騰訊

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

加群六二三九六六八零六免費領取前端學習資料，群里還有大神解答問題和交流

2- 誘發傳播

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

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

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

加群六二三九六六八零六免費領取前端學習資料，群里還有大神解答問題和交流

3- 優質渠道

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

5. H5交互形式案例

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

1 – 展示型交互

2 – 引導型交互

3 – 遊戲型交互

1 – 展示型

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

優缺點

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

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

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

1-1 視頻式

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

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

1-2 幻燈片式

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

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

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

（1）話題法，追蹤熱點事件，發表三觀極正或者反彈琵琶的觀點；

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

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

（4）溫情法，一個節日的問候，一個對母校的祝福，騙來了數以百萬計的轉發;

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

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

1-3 空間展示

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

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

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

這是一個一鏡到底+萬花筒得設計。進入頁面，動畫自動播放，鏡頭從遠慢慢拉近，以一鏡到底的形式展現youku網站上收錄的電視劇、綜藝等各類節目，按住屏幕不滑動時，展現方式會變成萬花筒，鬆開則恢復。最後一頁到達YOUKU會員推廣頁面，點擊「拉上夥伴一起酷」分享給小夥伴，也可點擊「加入會員」跳轉到外部鏈接。

這個H5在整體設計上豐富艷麗，配合動感的音樂，效果炫酷，震撼人心。

2 – 引導型

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

優缺點：

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

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

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

2-1 互動視頻式

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

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

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

2-2 小場景式

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

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

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