青青科技精選了近幾年出現的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游戲，這款游戲的創意之處就在于這個我們親手繪制的小人。

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

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

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

        評分：★★★★☆