2016年10大年度H5盤點 | 微互動

微互動（wihudong）精選了2016年出現的H5的精彩案例，為大家分享。根據H5的交互方式，我們把所有的H5分成三大類：互動-展示型、遊戲型和功能型。

1）互動-展示型H5的內容都是固定的，以畫面和文字的展示為主，很少與用戶產生互動，或者只有上下左右的滑動那樣簡單互動；

2）遊戲型H5以遊戲為主要內容，還可以直接代入自己的頭像、昵稱等，生成專屬的結果；

3）功能型H5能提供類似產品的功能或服務。

互動-展示型

展示型的H5讓用戶不需要花注意力去互動，從而能夠把關注點放在H5的內容上。

在需要傳達的內容極為豐富的情況下，展示型的H5的優勢在於：可以用視頻或自動播放的方式在用戶不需要頻繁互動下就可以完成觀看，達到傳播的目的。相反，那些需要翻十幾頁才能看完的，很多人不會看到最後。這種類型的H5優點是往往視覺效果比較好，缺點是互動性低。

01薛之謙史上最瘋狂的廣告

騰訊動漫App

案例描述

這款H5中，薛之謙穿越到了二次元世界，進入了騰訊動漫的幾個故事，結果發現有的故事竟然要兩個男主角在一起，真是槽點滿滿；還有吃下一塊巧克力就能讓全世界女生喜歡你的奇葩設定。最後薛之謙從二次元世界中清醒過來的時候，表示願意守護這個世界。

....

分析

1）這支廣告的成功之處主要在於吃透了二次元受眾的口味，找對了薛之謙這個代言人。薛之謙幽默搞笑，鬼畜化之後也毫無違和感，氣質和二次元群體比較接近。他在微博上的經典台詞「我的願望是——世界和平」帶有濃厚的中二氣質，非常符合二次元文化的格調；

2）打開H5之後會進入一個真實的薛之謙微博界面，在你滑動閱讀的時候突然畫面一閃，薛之謙真人居然出現了，會讓你感覺非常意外。因為劇情是靠滑動推進的，所以用戶學習成本非常低，幾乎看到了就知道怎麼操作，學習成本低帶來的好處就是轉化率很好。

3）非常有趣。薛之謙對情節里腦洞大開的地方進行了精彩的演繹，誇張的身體語言收到了非常戲劇性的效果。

評分：

02韓寒最新微博：我說的比唱的好

騰訊遊戲

案例描述

打開這款H5，我們看見的是韓寒的微博。不過所有的微博配圖都被改成了動圖，用搞笑的方式呈現出來，比如表現韓寒嘴巴一張一合的樣子，被炸彈炸過之後滿臉灰黑的樣子。配曲採用說+唱的形式。韓寒在旁白中自誇遊戲技術很不一般，並邀請其他玩家在遊戲里和他比拼。最後以「我說的比唱的好」總結全文。

分析

這款H5利用代言人韓寒，通過符合他經歷、性格和身份的闡釋，巧妙地向玩家發出了公測邀請。韓寒很配這款遊戲，這款H5很配韓寒，所以能讓受眾順理成章地接受邀請。

1）採用微博時間流的形式。微博時間流的瀏覽方式是我們所熟悉的，把微博的所有配圖改成了動圖，在熟悉裡面加上了一點意外，就收到了強烈的搞笑效果。

2）韓寒和這款遊戲匹配度很好。用搞笑的方式配合歌詞，把韓寒喜歡自黑的性格演繹得淋漓盡致。他本人是資深玩家，而他在各個領域的傑出表現，都符合遊戲的氣質。

3）靈活處理意外情況。比如韓寒沒時間唱歌，策劃團隊就把「我說的比唱的好」這句台詞讓韓寒念出來，完全符合韓寒自黑的性格，反而因此收到了意外的效果。

評分：☆

03出來種太陽，遲早要還的

百度錢包市場部

案例描述

這款H5開頭，用戶點一下瞄準太陽的弓箭，就播放一段配樂視頻。視頻採用了把漫畫做成動圖的形式，畫風仿照了80、90後的小學課本，還把太陽的形象和最近很火的emoji結合起來。配曲借用了段子手重新混音的80、90後童年神曲《種太陽》這首歌。這首歌開頭吐槽天上的太陽太多，然後提到想把這些討厭的太陽統統送給朋友，但是無論如何天氣還是這麼熱。最後結尾出現了百度外賣的logo。

....

分析

這款H5最大的亮點在於，把人們吐槽的心情和賣點結合得非常好。

1）《種太陽》這首歌的remix版本，從今年六、七月份的時候，就開始在網上流傳。百度外賣敏銳地從中捕捉到了能加以利用的地方，製作了這款H5。

2）從吐槽天氣熱，到推斷人們熱天不願意出門，到推薦人們使用百度外賣，這條敘事邏輯非常流暢自然。

3）對流行元素的有效利用。葛優癱是當季的流行元素。百度外賣針對人們熱天不想出門的心理，非常恰當地使用了這個流行元素。復古童年風，也喚醒了小夥伴們暑假在家的記憶。百度外賣越是把「夏天」和「出門」對立起來，就越有可能成功推送自己的服務。

評分：☆

04穿越宇宙的邀請函

天貓雙十一

案例描述

天貓的雙十一H5邀請函，打開之後就看到很多禮物、俊男靚女湧現出來，中間讓開一條大道，讓用戶體驗到了從購物節直奔星際、穿越宇宙的快感。這一H5的場景基本左右對稱，有大片般的視覺效果，營造了歡快的節日氣氛。此外，雙十一的商品頁面也和場景很好地融合在一起，把廣告信息巧妙傳遞給了觀眾。

（圖片來源：網路）

分析

在這款H5炫酷的視覺效果背後，有技術人員辛勤汗水的結晶。

1）這款H5實現了一鏡到底的視覺效果，在功能方面，這種手法減少用戶頻繁翻頁的痛苦；在審美方面，保證了場景在時間和空間上的連續性，給人氣勢宏大的感覺。

2）雖然這款H5畫面複雜，實現了3D效果，但觀看卻極為流暢，這是因為天貓沒有採用傳統的H5的製作手法，而是在threejs + webGL的支持下，使用了多種不同的圖片格式。

3）邀請函採用了當前流行的VR技術，觀眾可佩戴VR眼鏡獲得更好的視覺體驗。

這款H5總共有200多個圖層，據說花費超過150萬元人民幣製作，也確實非常華麗。用這種炫酷的視覺效果，這款H5成功凸顯了天貓想要表現的主題：天貓不再是中國的天貓，更是走出國門之後的世界的天貓。

評分：

05

和吳秀波對視5秒

神州專車

案例描述

打開H5以後，出現了一個倒計時5秒的視頻，期間吳秀波就直愣愣地看著你。5秒結束之後，他說了一句「像您這麼有調調的人，應該坐神州專車」，接著說「沒坐過？拿去用，我請客」，然後從兜里掏出一張卡。點擊這張卡，輸入手機號就可以獲得一張神州專車的打車券。

....

分析

這款H5雖然短小，但是非常精悍，全程無尿點，每個階段、每句台詞都經過了精心的安排。

1）在視頻開頭，採用對視這種新鮮好玩形式，讓大家來挑戰這一過程。

2）隨後，借用吳秀波之口，用恭維的方式討用戶喜歡，同時抬高了神州專車的身價。

3）最後，用吳秀波發獎的形式來誘惑用戶。用戶是從吳秀波手中接過這張卡的，因此這使得這張卡上附帶了一定的人情內涵，顯得比從公司手裡取到的卡更加可貴，也就更容易實現轉化。

4）和很多佔用用戶很多時間精力的H5相比，這款H5隻需要用戶和吳秀波對視五秒，時間很短，不花用戶什麼精力，但體驗卻非常新鮮，採用了吳秀波發獎這樣富有人情味的方式。因此這款H5更容易獲得用戶轉發。

評分：

遊戲型

遊戲型H5的主體部分是一個小遊戲。

遊戲型H5的優點是，容易讓用戶產生代入感，能夠生成針對用戶的個性化內容。還有的H5能生成排行榜，讓用戶相互PK。在用戶在攀比和社交中，遊戲型H5就能獲得更多的流量。

06請你用洪荒之力，畫一個小人

網易

案例描述

H5開頭先是邀請用戶畫一個小人，接著讓用戶畫繩子和降落傘，幫助小人從女人的胸部逃脫。降落傘緩緩飄進里約各國的朋友圈，此時可以看到和里約奧運會有關的朋友圈內容進行評論、點贊之類，突然，有個人的朋友圈裡一隻美洲豹活過來了，要追殺小人，這個時候要滑動屏幕幫小人逃離。

....

分析

比起其他H5遊戲，這款遊戲的創意之處就在於這個我們親手繪製的小人。

1）我們關心小人的命運，是因為這個小人是我們親手畫的，是屬於我們的。也就是說網易為用戶打造了一個性化獨一無二的場景，這時候我們就會感到這個個性化的場景中包含了我們難以割捨的元素。

2）有些時候，由於H5時間太長，用戶沒看完就關閉了。但是網易的這款H5能把用戶的注意力牢牢綁定，直至完成信息的傳遞。這是因為我們的情緒和「利益」都捆綁在了這個我們親手勾勒的小人身上。

3）但是這款H5也有一些缺點。最重要的問題是，想要推廣的品牌和廣告沒有有機結合起來，因此用戶玩完遊戲之後記不住網易噠噠。另外，H5的畫面也不夠精美。

評分：☆

07請選出你的2016關鍵詞

網易新聞&網易噠噠

案例描述

打開H5，界面是日曆風格。長按屏幕下方的「長按 換詞」按鈕，可以抽出不同的簽，代表著2016一年運氣的一個詞，例如「扯」、「胖」、「初心」等。選中這個詞之後，就進入了另一個界面，可以和這個詞進行有趣的互動，象徵在來年獲得好運。比如在「鹹魚」這個詞的界面上，用手指戳動「鹹魚」就可以讓它翻身。

....

分析

1）這款H5的本質是去年很火的新年簽。新年簽由於有一定的隨機成分，彷彿象徵著運氣，在新年之際很受大眾歡迎。

2）相比去年的新年簽，做出了很大的改進。不是抽取靜態的簽，而是滑動頁面，和抽到的字進行有趣的互動，玩法非常多樣化。

3）一些無節操的頁面，比如「扯」這個字裡面坐了一個裸男，用戶要扯掉他最後的蔽體之物，這種風格貼近網路人群的愛好。

4）頁面載入非常流暢，體量輕而效果好。

評分：

功能型

能夠實現廣告推廣之外的另一個明確目的的H5就是功能型H5。

功能型H5的優點是製作簡單，相對App可以在比較短的時間內上線。不過，製作者一定要能把握住用戶的需求，並為用戶的需求提供好的解決方案，才能讓這類H5流行起來。

08假結婚證生成器

愛分享團隊

案例描述

假結婚證生成器的功能非常簡單，在界面里輸入任何人的姓名，即可生成以假亂真的結婚證，並分享到朋友圈。這是一款在情人節上線的應景H5。

（圖片來源：網路）

分析

這款H5的效果非常好。僅情人節當天就生成了超過1000萬張結婚證書，公眾號賬號漲粉超過100萬，微博搜索量400萬，排名熱搜榜第二名。取得如此優異的成果，是因為抓准了用戶需求。

1）情人節那天原本是情侶秀恩愛，虐單身狗的日子，可單身狗招誰惹誰了，他們非要在家啃狗糧嗎？這些單身人士產生了強烈的怒氣，為發泄和傳播創造了契機；

2）情人節的時候，情侶們無非就是吃個飯、逛個街、送個花、看個電影，而這款H5的用戶可以直接曬出結婚證，保證他們在驚嚇之餘還得默默送上祝福和點贊，整蠱效果非常好；

3）解決用戶需求的辦法夠簡單夠直接。用戶不需要花很多時間精力，一秒上傳照片分享朋友圈，就可以達到發泄情緒的目的。因此，這款H5後來出現了很多模仿者，例如曬豪宅、曬豪車、名人合影之類的。

評分：☆

09我的小學生證件照

天天p圖

案例描述

用戶只要把自己的照片上傳到這款H5中，就可以生成自己的童年照片。網上還產生了一些惡搞的玩法，比如把男演員的照片轉換成女童的照片，再比如把古代皇帝的肖像轉換成現代男童的照片。這是一款在兒童節上線的應景H5。

（圖片來源：網路）

分析

這款H5抓住了80、90後逐漸長大，開始懷念童年的心理。

1）誰都喜歡過節，然而看著自己一天天老去，離無憂無慮的兒童節越來越遠，很多人難免感到非常遺憾。這款H5抓住了這種心理，在兒童節當天把你「還原」成兒童，這樣80、90後和兒童節又重新產生了關係，這滿足了他們愛熱鬧、裝嫩的需求。

2）在使用H5的過程中，出現了很多創造性的玩法。比如生成名人童年照之後讓其他小夥伴們去猜；比如惡搞名人照片之後吐槽調侃；再比如故意賣關子讓其他人猜這是誰的童年照。這些玩法都很容易產生話題點，製造自來水的效果。

評分：☆

10查莆田系醫院

鳳凰資訊

案例描述

這款H5的功能也很簡單，選擇你所在的城市，就可以看到這座城市中所有莆田系醫院的列表。這款H5產生的背景是：滑膜肉瘤患者魏則西因在百度查到的莆田系醫院中耽誤了病情，於今年4月去世。這件事曝光之後，引起了大眾針對莆田系醫院和百度的憤慨。

....

分析

1）以非常簡單的方式，解決了大眾最急切的需求，省去了全國人民在一份長長的名單里找所在城市醫院的麻煩。

2）莆田系醫院這件事不僅和年輕人有關，和中老年人更有關係，所有年齡層的人都會很關心。這款H5的操作界面非常簡單，即使是手機技術一般的中老年人也能很快上手。

3）有鳳凰新聞的權威保證，和健康有關，又覆蓋了全國每個省份的人民，因此有很好的傳播量。

評分：☆

總結

今年H5呈現出如下趨勢

1）越來越多的H5用視頻呈現出來，減少了上下左右滑動或者點擊，讓用戶可以偷懶。

2）在設計和開發上投入的更多。例如，天貓的技術非常先進，幾百個人物和圖層，卻能將大小控制在5M以內。

3）製作成本都比較高。我們看到的不錯的案例基本上都是大公司製作，花費的巨額費用進行推廣才達到效果的，小公司的非常少。

4）場景很重要，要結合場景里的需求，才能完成轉化和傳播。

5）有名人代言的往往能取得不錯的效果；找對名人很關鍵。

我們可以從這些H5中學到如下幾條經驗

1）找准場景，把握用戶的情緒。今年的幾款功能型H5都是因為找准了場景，吃透了用戶在特定場景下產生的情緒才流行起來的。

2）精準定位風格。像一些展示型H5，找對了自己的代言人，也設計出了非常適合他們性格的H5。

3）要給用戶一個或有趣、或有用的解決方式。

4）要讓用戶可以偷懶。用戶精力有限，會比較青睞可以省時省力的展示型H5。

5）互動型H5和遊戲型H5，要用巧妙的設計讓用戶有更強的參與感。

關注公眾號 微互動（ID:wihudong），回復「H5」或「h5」，可查看本文中提到的案例鏈接。