大眾點評的主營業(yè)務是預訂餐廳，而「聚」字表示朋友之間常聚，也就是需要大眾點評的服務。這個作品的精髓在于文字擬物化的精美動畫，推出之后引起了大量模仿。

3）悅榕莊「喚起這一刻」

悅榕莊是高端酒店品牌，一般開在風景秀麗、環(huán)境優(yōu)美的自然景區(qū)，根據當地的特點，酒店環(huán)境設計與當地環(huán)境融為一體，非常漂亮。結合品牌特點，他們推出了「喚起這一刻」H5 頁面，展現了黃山悅榕莊的極致美學。

畫面采用了中國風元素，分為四個畫面，用戶長按畫面可以聽到應景的一段音頻。第一個畫面是黃山一角，配音為風聲鳥鳴；第二個畫面為留白，長按出現對著山谷吶喊的聲音；第三個畫面為油菜花田地，長按出現風吹田野的聲音；第四個畫面為傳統徽派建筑，長按出現女子的傳統吟唱。

H5頁面把黃山之美展現得淋漓盡致，僅僅通過這個H5就能讓人感受到在悅榕莊的放松和美好。

 4）QQ「這可能是地球上最美的 H5」

H5 發(fā)展越到后期，技術要求也越高，QQ 發(fā)布的「這可能是地球上最美的 H5」就是大手筆制作，把網頁技術和精美畫面結合，為用戶帶來科技與藝術的享受。

進入 H5 后，用戶看到的是一個完整地球，用戶可以自由轉動地球。在不同地方放置了不同的錨點，用戶長按可以穿梭云層，一探此地的美景。

這個 H5 宣傳的是「QQ X 計劃」，在全球招募地球探索者去地球最美的地方，把地球之美展現給全球網友。而這個計劃的推出也是服務于 QQ 的品牌宣傳，QQ 的戰(zhàn)略是年輕化，避開與微信的直接競爭，對地球的探索也展現了 QQ 充滿探索精神的年輕氣質。

 2.

技術取勝  

1）全民突擊「吳亦凡入伍」

要說技術取勝的代表作品，首先值得大書特書的就是全民突擊做的吳亦凡入伍 H5。它不僅一夜之間刷爆了朋友圈，也開啟了 H5 頁面動態(tài)視頻與靜態(tài)頁面相結合的時代，具有「劃時代」的意義。

明星題材具有天然的吸引力。吳亦凡人氣爆棚，「入伍」更是引人注意，因為大陸基本上不會有明星入伍的事情。就算它是一篇娛樂新聞，自身就是傳播性很強的爆點新聞了。

仿真，然后出其不意的突破。模擬騰訊娛樂新聞，所有人一開始都以為是一篇娛樂新聞，但是畫風突變，吳亦凡動了起來，這時候看客發(fā)現不對勁。吸引住注意力，故事才能一步一步講下去。

劇情緊湊，看客眼球被牢牢抓住。引人注意的標題新聞中的吳亦凡忽然動了起來（違反常規(guī)）。畫面閃爍，吳亦凡跳出「模擬吳亦凡來電」與吳亦凡的視頻通話（謎底揭曉）。

這些接觸點，每一個都自帶極強的吸引力，讓用戶一個個場景跟著走下來，最后吳亦凡在視頻中揭曉故事的來龍去脈（謎底），用戶恍然大悟，覺得剛才這一連串的劇情很有意思。

2）奔馳「七夕鵲橋會」

雙屏互動是 H5 頁面中的一個流派，需要兩個人的手機進入同一個頁面，可以看到兩臺手機中的 H5 進行聯動，在情侶、朋友相關的營銷活動中用的較多。奔馳的這個 H5 在七夕期間推出，主題是鵲橋相會，追熱點表達浪漫的愛情，畫面制作精良。

但雙屏互動的 H5 至今沒有誕生過爆款，究其原因可能是操作成本過高，畢竟在碎片化時間要找到另外一個人用手機進行互動是很難的事情，大部分人都直接放棄了。

3）AKQA「夢幻水晶球」

很多人小時候可能都擁有過一個水晶球，尤其是女生，AKQA 推出的這個 H5 頁面打起懷舊牌，利用簡單的重力感應技術，讓用戶進入水晶球探索球里面的美妙世界。搖晃手機還會出現下雪的效果，用戶可以定制水晶球的祝福語，然后分享給好友，送出溫馨的冬日祝福。

這個 H5 在 2014 年末推出，現在看來其中所運用的重力感應、3D 技術并不復雜，不過在那個時期大部分是平面的 H5 作品，這種交互式 3D 畫面的 H5 還是挺驚艷的。

4）NIKE「每雙球鞋都有一個故事」

NIKE 搭建了一個「鞋族宇宙」，展現旗下不同鞋子的故事，畫面是 3D 的，鞋子用 Polygon 繪畫技術展現，用戶可以通過手指的上下左右滑動來切換視角，點擊某個元素可以放大查看詳情。

 3.

情節(jié)取勝  

美學取勝需要高額的設計成本，技術取勝需要強大的技術力量，這些類型的 H5 可能意味著一分錢一分貨，花的錢越多制作就越精美，更好看的畫面才能打動用戶。那么有沒有可能通過更好的設計另辟蹊徑呢？

接下來我們就來看以劇情取勝的 H5 類型，通過巧妙的情節(jié)設計來吸引用戶的目光，看完它們就像看完了一個微電影一樣。

1）大眾點評「這個陌生來電你敢接嗎」

H5 頁面模擬 iPhone 的來電界面，有一個未知號碼來電，一開頭就用設置懸疑引起用戶好奇。

接通之后，畫面變黑，出現陌生男子的旁白，隨后居然有人在畫面中要打破手機屏幕，越來越讓人好奇到底發(fā)生了什么。

最后揭曉答案，原來是《復仇者聯盟 2》即將上映了，大眾點評購票有優(yōu)惠，前面敲打屏幕的人都是復仇者聯盟里面的英雄，讓用戶提著的心放了下來，恍然大悟。

大眾點評的這個 H5 頁面同樣出自 W 公司，是第一支模擬手機場景的作品，隨后有越來越多的 H5 開始模擬手機場景，企圖以假亂真，給用戶帶來驚喜。

2）百度手機助手「時代姐妹花」

這個 H5 界面則是全程模擬日常手機場景，一系列場景帶用戶進入劇情：鎖屏消息、解鎖界面、微信聯系人列表、聊天窗口、朋友圈等都是用戶每天接觸的界面。

H5 推出期間正是《小時代 4》熱映時期，因此以小時代為主題，用戶「解鎖后」進入一個聊天群，群里面小時代的各個角色在「爭論」，用戶甚至還可以發(fā)一句話參與群聊。隨后場景轉換到朋友圈，繼續(xù)「爭論」，最后引出百度手機助手的宣傳海報。

H5 頁面高度還原了日常的微信使用場景，但又更進一步，不僅僅是模擬，還加入了用戶互動部分，讓用戶參與電影角色的爭論大戲中，全程讓用戶有很強的代入感。

3）一加手機「1步1步看清韓寒」

H5 頁面模擬傳統的打字機，擬物化的設計非常有質感，用戶長按按鈕，打字機就可以打印出圖片和文案，展現韓寒成長歷程，以及一加手機與韓寒氣質契合的部分，解釋了韓寒成為一加手機代言人的原因。

當所有人都跟風模仿手機界面、微信界面的時候，W 公司再次帶頭創(chuàng)新，模擬現實中的物品。打字機逐字逐句把文案打印出來的設計，也讓用戶的注意力集中在文案上，讓人關注接下來會出現什么內容，所以基本可以保證所有文案、圖片都是被用戶認真看完的，保證了品牌宣傳效果。

4）騰訊「NEXT IDEA × 故宮」

這個 H5 頁面在劇情設計上更加大膽，讓人驚艷。它宣傳的活動是騰訊和故宮聯合舉辦的「NEXTIDEA」創(chuàng)意大賽，用符合當代人的喜好的創(chuàng)意來推廣故宮。

H5 頁面主角是朱棣皇帝（他建造了故宮），人們印象中的皇帝都是莊嚴肅穆的，但是這里展現的皇帝則是一個「潮男」。他唱著 Rap 跳著舞、玩自拍、玩朋友圈和 QQ，帶著后宮玩各種高科技產品，傳統和現代的碰撞，顛覆了常規(guī)的認知，加上歡樂的氣氛，讓人會心一笑。

 4.

 互動取勝  

最后一個類型是互動為主的 H5 頁面，它們不需要高成本投入，卻能取得顯著的傳播效果，其核心秘訣是與「我」相關的互動，讓用戶有很強的參與感，給用戶許多社交貨幣，滿足了他們的社交需求。

例如一個游戲類 H5，可以跟身邊的好友分享自己的戰(zhàn)績；一個測試類的 H5，可以分享給朋友看你是怎么樣一個人；一個匿名聊天 H5，可以讓你和好友互動起來；一個惡搞 H5，可以讓你在朋友圈變有趣。

1）輕游戲

圍住神經貓是第一個爆紅的 H5 小游戲，在 24 小時內訪問量達到數千萬 PV，隨后被微信封殺。其實在 PC 互聯網時代已經有無數類似的小游戲，那么為什么在移動互聯網時代變得更加火爆起來呢？其成功的原因可以總結如下。

社交攀比。游戲結束后，把成績告訴用戶：你用了 xx 步，排名第 xxx，擊敗了 xxx 網友，獲得 xxx 稱號。并且給出一個按鈕引導用戶分享給好友。這樣的數據、稱號，可以在好友之間引發(fā)熱烈的討論。當你用了 15 步完成游戲，其他人就會挑戰(zhàn)在 15 步之內完成，攀比心理讓用戶欲罷不能。

玩法簡單。基本上不需要用戶動腦，在幾秒鐘之內就能熟練掌握玩法完成游戲，在碎片化的移動互聯網時代，簡單是很重要的特質。用戶可能在吃飯排隊期間、上班休息間隙、電視廣告時間就能完成幾輪游戲，無需占用更多時間精力。

有趣放松。大部分爆紅起來的游戲都是有趣、使人放松的。神經貓賤賤的形象、flappy bird 令人抓狂的關卡設計、八分音符用音調操作等元素都讓人覺得有趣，它們沒有精美的畫面或者震撼的配樂，但是有趣的畫風、簡單的玩法能讓人放松心情，能幫用戶舒緩壓力的小游戲自然受人追捧。

密室逃脫或偵探游戲是另外一個流派，特點是在一個封閉的空間內找齊不同的東西，讓用戶過了一把偵探癮。這類游戲能讓用戶沉浸在 H5 當中，意味著可以更長時間地把我們想要宣傳的東西曝光給用戶，所以通過有趣的藏匿設計，用戶會對品牌活動產生更加深刻的印象。

2）測試類

測試類的 H5 實在是太流行了，經久不衰。典型套路是給出一系列題目，最后給出一個得分和分析結果，甚至輸入一個名字、傳一張照片就給出一個結果。當然這種結果是沒有任何科學性可言的，只是博君一笑而已。

有很多人對此非常熱衷，經常會轉發(fā)類似的H5。也許只要跟「自己」相關的東西，總是能獲得大部分人關注吧，每個人總是想看看把自己代入到這個測試中會有什么結果。

3）匿名類

匿名聊天類 H5 在朋友圈的生命力也非常旺盛，微信是熟人社交，平時大家都是認識的，忽然切換到匿名語境就會變得有意思。有個產品叫「朋友印象」就是專門做這一類型的 H5 頁面，比如說你可以匿名評價一個好友，對他說一些匿名的悄悄話。由于誘導性太強，相關服務悉數被微信封殺，足以見得用戶對這類 H5 是多么「上癮」。

匿名社交是社交軟件的一個分支，用戶可以在這類社區(qū)里暢所欲言。移植到 H5 頁面中，發(fā)布者可以了解自己在好友中的真實形象，這是一個剛需，畢竟所有人都希望呈現一個美好的自己，所以大家都希望知道好友對自己的評價。而對于匿名留言者來說，可以借機表達平時不方便說的話，如果對方是喜歡的人，則可以一表情愫；如果對方是不喜歡的人，也可以適當發(fā)泄一番。

4）惡搞類

「惡搞」一詞變得越來越流行，這個不那么文雅的詞曾表示通過賣弄、做作獲取虛榮心的滿足，向他人展現自己不具備的特征。這個解釋或許過于言重，很多人僅僅是在日復一日的平凡生活中幽默一番，向好友分享一些惡搞的東西。

有一類 H5 就是迎合了這個心理而變得流行，它讓用戶「體驗」平時無法發(fā)生的事情，例如網易娛樂就推出了一個「我要上頭條」的 H5，用戶輸入性別、名字，就可以生成一篇浮夸的假新聞，滿足了用戶登上頭條的幻想。

還有一種形式是生成一張假照片，例如結婚證、房產證、工作證、名片、名人合照等。一般生成的照片都會帶上一個二維碼，掃描后進入活動頁面，讓用戶生成自己的假照片。

惡搞類的 H5 如果能夠跟自身的產品結合起來，能獲得很好的下載轉化和品牌宣傳，但是如果僅僅是為了惡搞而惡搞，則會面臨活動效果不明顯的局面。

在微信體系內，很多人的做法是加上公眾號的二維碼，企圖增加粉絲，不過這種方式容易導致公眾號被微信封殺，所以做一個這樣的活動無異于*行為。在準備上線類似的 H5 時，我們要思考這個活動到底能為產品帶來什么價值。

5.

其他Tips  

1）善用 H5 模板工具提高效率

H5 的流行也帶動了很多 H5 模板工具的發(fā)展，它們提供了一整套技術方案和設計模板，運營人員自己就可以發(fā)布一個 H5，不需要走漫長的流程，對于小團隊來說是非常棒的工具。

不過缺點也很明顯，那就是只能套用固定的模板，設計也顯得過于粗糙，只能用于簡單、小范圍內使用的 H5。如果只是一些簡單的信息告知，或者用戶量非常小的互動，則可以用模板快速制作上線。如果想要打造一個傳播范圍更廣的 H5，還是需要從設計到開發(fā)都用自己的團隊來完成。

2）成功經驗分享促成二次傳播

做出一個爆款 H5，刷屏了兩三天，是否就從此銷聲匿跡，或者埋頭準備下一個爆款呢？其實你還可以選擇進行「二次傳播」，所謂的「二次傳播」就是把如何做成爆款 H5 的成功經驗在媒體中進行分享，這樣也能帶來不少的曝光量。

我們現在用搜索引擎查某一個成功的案例，可以找到大量的分析解讀、經驗分享等文章，也許 H5 的生命只有兩三天，但這類文章卻會永久沉淀下來，持續(xù)地為品牌、創(chuàng)作團隊帶來曝光。所以如果對自己的 H5 有信心的話，可以提前準備好經驗分享，等 H5 火了之后第一時間分享出來。

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！