H5頁面的刷屏往往產(chǎn)生巨大影響力。然而，形成刷屏本身是一個(gè)“技術(shù)活”，本文總結(jié)了以往成功的H5頁面，發(fā)現(xiàn)了美學(xué)取勝、技術(shù)取勝、情節(jié)取勝和互動(dòng)取勝等操作策略。
本文作者范冰，《增長黑客》作者。本文首發(fā)于范冰創(chuàng)立的新媒體——增長官研究院，歡迎大家關(guān)注“增長官研究院”。
「亞馬遜 Kindle 服務(wù)號(hào)」新推送了一篇《點(diǎn)擊查看你的 Kindle 閱讀史》，讓「摯愛閱讀，向光而行」的擁躉們攢足了分享私人圖書館的社交貨幣，紛紛轉(zhuǎn)發(fā)朋友圈。
我也翻出吃灰的 Kindle，登錄帳號(hào)，統(tǒng)計(jì)了一番，發(fā)現(xiàn)在 Kindle 上買的最貴的書居然是原版《Starcraft》小說「幽靈行動(dòng)」。而 Kindle Unlimited 也在試用一個(gè)月后束之高閣。Anyway，我的個(gè)體行為不具備代表性。
陽光底下并無新事。刷屏 H5 的表現(xiàn)形式總是千變?nèi)f化，但套路卻不離其宗。今天，我們?yōu)槟銡w納總結(jié)了刷屏 H5 的若干套路和案例。我們來看看不同類型的 H5 是如何俘獲用戶歡心的。
1.
美學(xué)取勝
1）首草「首草先生的情書」
這是一個(gè)早期的 H5 作品，在 2014 年末推出，頁面元素很簡單：純凈的背景音樂+溫馨的配圖+走心的文案，畫面雖然簡單，不過意義深遠(yuǎn)，推出之后在用戶群中得到瘋傳，可謂是 H5 的啟蒙作品之一，開啟了 H5 營銷的潮流。
首草是面向中國企業(yè)家的高端養(yǎng)生品牌，營銷公司 W（W 是一家著名的新媒體營銷公司）為它的品牌宣傳活動(dòng)定的主題是「女人最好的補(bǔ)品不是首草，而是愛」。「首草先生的情書」H5 頁面就是第一波宣傳。
打開頁面，映入眼簾的是淡雅的畫面，伴隨著舒緩的鋼琴背景音樂，用戶可以翻閱 17 頁真摯的情書，以時(shí)間先后為線索，表達(dá)了「首草先生」作為一位男士對(duì)妻子深深的愛意。最后回歸到主題「女人最好的補(bǔ)品不是首草，而是愛」。
整個(gè) H5 有近 20 多頁，大部分都配上了長長的文案，也許我們?cè)?jīng)聽過一個(gè)原則叫「能用圖表達(dá)的盡量少用文字」，但這個(gè)H5 依然贏得了用戶的喜愛。
首先是在情緒渲染上抓住了用戶的注意力，而每頁有大標(biāo)題和小文案，看到大標(biāo)題就可以了解在講什么，小文案并不是必須的。其次是 H5 的目標(biāo)用戶群是稍微年長的中年男士，具有讀文的習(xí)慣，他們可能會(huì)更喜歡這些能引起他們共鳴的文案。
總體來說，首草先生的 H5 是以美取勝的作品，簡約淡雅的畫面加上引起共鳴的走心文案，渲染出充滿濃濃愛意的情緒，強(qiáng)化了首草代表對(duì)女性之愛的品牌宣傳訴求。
2）大眾點(diǎn)評(píng)「我們之間就一個(gè)字」
當(dāng)一個(gè) H5 全部都是文字，你覺得還會(huì)有人看嗎？不僅有，而且還有很多。
「我們之間就一個(gè)字」是 W 公司給大眾點(diǎn)評(píng)做的 H5 推廣頁面，雖說是全文字的形式，但他們把文字變成了「圖」，常見的文字被擬物化，直觀地展現(xiàn)了這個(gè)字的含義。
「人與人之間的情分，言之不盡，感之不彌，不如一字以道之。」這幾個(gè)字分別是：金、本、欠、夢、日、朋、拼、贊、聚，代表了朋友之間相處之道，最后一個(gè)字是「聚」，巧妙地和大眾點(diǎn)評(píng)品牌結(jié)合起來。
大眾點(diǎn)評(píng)的主營業(yè)務(wù)是預(yù)訂餐廳，而「聚」字表示朋友之間常聚，也就是需要大眾點(diǎn)評(píng)的服務(wù)。這個(gè)作品的精髓在于文字?jǐn)M物化的精美動(dòng)畫，推出之后引起了大量模仿。
3）悅榕莊「喚起這一刻」
悅榕莊是高端酒店品牌，一般開在風(fēng)景秀麗、環(huán)境優(yōu)美的自然景區(qū)，根據(jù)當(dāng)?shù)氐奶攸c(diǎn)，酒店環(huán)境設(shè)計(jì)與當(dāng)?shù)丨h(huán)境融為一體，非常漂亮。結(jié)合品牌特點(diǎn)，他們推出了「喚起這一刻」H5 頁面，展現(xiàn)了黃山悅榕莊的極致美學(xué)。
畫面采用了中國風(fēng)元素，分為四個(gè)畫面，用戶長按畫面可以聽到應(yīng)景的一段音頻。第一個(gè)畫面是黃山一角，配音為風(fēng)聲鳥鳴；第二個(gè)畫面為留白，長按出現(xiàn)對(duì)著山谷吶喊的聲音；第三個(gè)畫面為油菜花田地，長按出現(xiàn)風(fēng)吹田野的聲音；第四個(gè)畫面為傳統(tǒng)徽派建筑，長按出現(xiàn)女子的傳統(tǒng)吟唱。
H5頁面把黃山之美展現(xiàn)得淋漓盡致，僅僅通過這個(gè)H5就能讓人感受到在悅榕莊的放松和美好。
4）QQ「這可能是地球上最美的 H5」
H5 發(fā)展越到后期，技術(shù)要求也越高，QQ 發(fā)布的「這可能是地球上最美的 H5」就是大手筆制作，把網(wǎng)頁技術(shù)和精美畫面結(jié)合，為用戶帶來科技與藝術(shù)的享受。
進(jìn)入 H5 后，用戶看到的是一個(gè)完整地球，用戶可以自由轉(zhuǎn)動(dòng)地球。在不同地方放置了不同的錨點(diǎn)，用戶長按可以穿梭云層，一探此地的美景。
這個(gè) H5 宣傳的是「QQ X 計(jì)劃」，在全球招募地球探索者去地球最美的地方，把地球之美展現(xiàn)給全球網(wǎng)友。而這個(gè)計(jì)劃的推出也是服務(wù)于 QQ 的品牌宣傳，QQ 的戰(zhàn)略是年輕化，避開與微信的直接競爭，對(duì)地球的探索也展現(xiàn)了 QQ 充滿探索精神的年輕氣質(zhì)。
2.
技術(shù)取勝
1）全民突擊「吳亦凡入伍」
要說技術(shù)取勝的代表作品，首先值得大書特書的就是全民突擊做的吳亦凡入伍 H5。它不僅一夜之間刷爆了朋友圈，也開啟了 H5 頁面動(dòng)態(tài)視頻與靜態(tài)頁面相結(jié)合的時(shí)代，具有「劃時(shí)代」的意義。
明星題材具有天然的吸引力。吳亦凡人氣爆棚，「入伍」更是引人注意，因?yàn)榇箨懟旧喜粫?huì)有明星入伍的事情。就算它是一篇娛樂新聞，自身就是傳播性很強(qiáng)的爆點(diǎn)新聞了。
仿真，然后出其不意的突破。模擬騰訊娛樂新聞，所有人一開始都以為是一篇娛樂新聞，但是畫風(fēng)突變，吳亦凡動(dòng)了起來，這時(shí)候看客發(fā)現(xiàn)不對(duì)勁。吸引住注意力，故事才能一步一步講下去。
劇情緊湊，看客眼球被牢牢抓住。引人注意的標(biāo)題新聞中的吳亦凡忽然動(dòng)了起來（違反常規(guī)）。畫面閃爍，吳亦凡跳出「模擬吳亦凡來電」與吳亦凡的視頻通話（謎底揭曉）。
這些接觸點(diǎn)，每一個(gè)都自帶極強(qiáng)的吸引力，讓用戶一個(gè)個(gè)場景跟著走下來，最后吳亦凡在視頻中揭曉故事的來龍去脈（謎底），用戶恍然大悟，覺得剛才這一連串的劇情很有意思。
2）奔馳「七夕鵲橋會(huì)」
雙屏互動(dòng)是 H5 頁面中的一個(gè)流派，需要兩個(gè)人的手機(jī)進(jìn)入同一個(gè)頁面，可以看到兩臺(tái)手機(jī)中的 H5 進(jìn)行聯(lián)動(dòng)，在情侶、朋友相關(guān)的營銷活動(dòng)中用的較多。奔馳的這個(gè) H5 在七夕期間推出，主題是鵲橋相會(huì)，追熱點(diǎn)表達(dá)浪漫的愛情，畫面制作精良。
但雙屏互動(dòng)的 H5 至今沒有誕生過爆款，究其原因可能是操作成本過高，畢竟在碎片化時(shí)間要找到另外一個(gè)人用手機(jī)進(jìn)行互動(dòng)是很難的事情，大部分人都直接放棄了。
3）AKQA「夢幻水晶球」
很多人小時(shí)候可能都擁有過一個(gè)水晶球，尤其是女生，AKQA 推出的這個(gè) H5 頁面打起懷舊牌，利用簡單的重力感應(yīng)技術(shù)，讓用戶進(jìn)入水晶球探索球里面的美妙世界。搖晃手機(jī)還會(huì)出現(xiàn)下雪的效果，用戶可以定制水晶球的祝福語，然后分享給好友，送出溫馨的冬日祝福。
這個(gè) H5 在 2014 年末推出，現(xiàn)在看來其中所運(yùn)用的重力感應(yīng)、3D 技術(shù)并不復(fù)雜，不過在那個(gè)時(shí)期大部分是平面的 H5 作品，這種交互式 3D 畫面的 H5 還是挺驚艷的。
4）NIKE「每雙球鞋都有一個(gè)故事」
NIKE 搭建了一個(gè)「鞋族宇宙」，展現(xiàn)旗下不同鞋子的故事，畫面是 3D 的，鞋子用 Polygon 繪畫技術(shù)展現(xiàn)，用戶可以通過手指的上下左右滑動(dòng)來切換視角，點(diǎn)擊某個(gè)元素可以放大查看詳情。
3.
情節(jié)取勝
美學(xué)取勝需要高額的設(shè)計(jì)成本，技術(shù)取勝需要強(qiáng)大的技術(shù)力量，這些類型的 H5 可能意味著一分錢一分貨，花的錢越多制作就越精美，更好看的畫面才能打動(dòng)用戶。那么有沒有可能通過更好的設(shè)計(jì)另辟蹊徑呢？
接下來我們就來看以劇情取勝的 H5 類型，通過巧妙的情節(jié)設(shè)計(jì)來吸引用戶的目光，看完它們就像看完了一個(gè)微電影一樣。
1）大眾點(diǎn)評(píng)「這個(gè)陌生來電你敢接嗎」
H5 頁面模擬 iPhone 的來電界面，有一個(gè)未知號(hào)碼來電，一開頭就用設(shè)置懸疑引起用戶好奇。
接通之后，畫面變黑，出現(xiàn)陌生男子的旁白，隨后居然有人在畫面中要打破手機(jī)屏幕，越來越讓人好奇到底發(fā)生了什么。
最后揭曉答案，原來是《復(fù)仇者聯(lián)盟 2》即將上映了，大眾點(diǎn)評(píng)購票有優(yōu)惠，前面敲打屏幕的人都是復(fù)仇者聯(lián)盟里面的英雄，讓用戶提著的心放了下來，恍然大悟。
大眾點(diǎn)評(píng)的這個(gè) H5 頁面同樣出自 W 公司，是第一支模擬手機(jī)場景的作品，隨后有越來越多的 H5 開始模擬手機(jī)場景，企圖以假亂真，給用戶帶來驚喜。
2）百度手機(jī)助手「時(shí)代姐妹花」
這個(gè) H5 界面則是全程模擬日常手機(jī)場景，一系列場景帶用戶進(jìn)入劇情：鎖屏消息、解鎖界面、微信聯(lián)系人列表、聊天窗口、朋友圈等都是用戶每天接觸的界面。
H5 推出期間正是《小時(shí)代 4》熱映時(shí)期，因此以小時(shí)代為主題，用戶「解鎖后」進(jìn)入一個(gè)聊天群，群里面小時(shí)代的各個(gè)角色在「爭論」，用戶甚至還可以發(fā)一句話參與群聊。隨后場景轉(zhuǎn)換到朋友圈，繼續(xù)「爭論」，最后引出百度手機(jī)助手的宣傳海報(bào)。
H5 頁面高度還原了日常的微信使用場景，但又更進(jìn)一步，不僅僅是模擬，還加入了用戶互動(dòng)部分，讓用戶參與電影角色的爭論大戲中，全程讓用戶有很強(qiáng)的代入感。
3）一加手機(jī)「1步1步看清韓寒」
H5 頁面模擬傳統(tǒng)的打字機(jī)，擬物化的設(shè)計(jì)非常有質(zhì)感，用戶長按按鈕，打字機(jī)就可以打印出圖片和文案，展現(xiàn)韓寒成長歷程，以及一加手機(jī)與韓寒氣質(zhì)契合的部分，解釋了韓寒成為一加手機(jī)代言人的原因。
當(dāng)所有人都跟風(fēng)模仿手機(jī)界面、微信界面的時(shí)候，W 公司再次帶頭創(chuàng)新，模擬現(xiàn)實(shí)中的物品。打字機(jī)逐字逐句把文案打印出來的設(shè)計(jì)，也讓用戶的注意力集中在文案上，讓人關(guān)注接下來會(huì)出現(xiàn)什么內(nèi)容，所以基本可以保證所有文案、圖片都是被用戶認(rèn)真看完的，保證了品牌宣傳效果。
4）騰訊「NEXT IDEA × 故宮」
這個(gè) H5 頁面在劇情設(shè)計(jì)上更加大膽，讓人驚艷。它宣傳的活動(dòng)是騰訊和故宮聯(lián)合舉辦的「NEXTIDEA」創(chuàng)意大賽，用符合當(dāng)代人的喜好的創(chuàng)意來推廣故宮。
H5 頁面主角是朱棣皇帝（他建造了故宮），人們印象中的皇帝都是莊嚴(yán)肅穆的，但是這里展現(xiàn)的皇帝則是一個(gè)「潮男」。他唱著 Rap 跳著舞、玩自拍、玩朋友圈和 QQ，帶著后宮玩各種高科技產(chǎn)品，傳統(tǒng)和現(xiàn)代的碰撞，顛覆了常規(guī)的認(rèn)知，加上歡樂的氣氛，讓人會(huì)心一笑。
4.
互動(dòng)取勝
最后一個(gè)類型是互動(dòng)為主的 H5 頁面，它們不需要高成本投入，卻能取得顯著的傳播效果，其核心秘訣是與「我」相關(guān)的互動(dòng)，讓用戶有很強(qiáng)的參與感，給用戶許多社交貨幣，滿足了他們的社交需求。
例如一個(gè)游戲類 H5，可以跟身邊的好友分享自己的戰(zhàn)績；一個(gè)測試類的 H5，可以分享給朋友看你是怎么樣一個(gè)人；一個(gè)匿名聊天 H5，可以讓你和好友互動(dòng)起來；一個(gè)惡搞 H5，可以讓你在朋友圈變有趣。
1）輕游戲
圍住神經(jīng)貓是第一個(gè)爆紅的 H5 小游戲，在 24 小時(shí)內(nèi)訪問量達(dá)到數(shù)千萬 PV，隨后被微信封殺。其實(shí)在 PC 互聯(lián)網(wǎng)時(shí)代已經(jīng)有無數(shù)類似的小游戲，那么為什么在移動(dòng)互聯(lián)網(wǎng)時(shí)代變得更加火爆起來呢？其成功的原因可以總結(jié)如下。
社交攀比。游戲結(jié)束后，把成績告訴用戶：你用了 xx 步，排名第 xxx，擊敗了 xxx 網(wǎng)友，獲得 xxx 稱號(hào)。并且給出一個(gè)按鈕引導(dǎo)用戶分享給好友。這樣的數(shù)據(jù)、稱號(hào)，可以在好友之間引發(fā)熱烈的討論。當(dāng)你用了 15 步完成游戲，其他人就會(huì)挑戰(zhàn)在 15 步之內(nèi)完成，攀比心理讓用戶欲罷不能。
玩法簡單。基本上不需要用戶動(dòng)腦，在幾秒鐘之內(nèi)就能熟練掌握玩法完成游戲，在碎片化的移動(dòng)互聯(lián)網(wǎng)時(shí)代，簡單是很重要的特質(zhì)。用戶可能在吃飯排隊(duì)期間、上班休息間隙、電視廣告時(shí)間就能完成幾輪游戲，無需占用更多時(shí)間精力。
有趣放松。大部分爆紅起來的游戲都是有趣、使人放松的。神經(jīng)貓賤賤的形象、flappy bird 令人抓狂的關(guān)卡設(shè)計(jì)、八分音符用音調(diào)操作等元素都讓人覺得有趣，它們沒有精美的畫面或者震撼的配樂，但是有趣的畫風(fēng)、簡單的玩法能讓人放松心情，能幫用戶舒緩壓力的小游戲自然受人追捧。
密室逃脫或偵探游戲是另外一個(gè)流派，特點(diǎn)是在一個(gè)封閉的空間內(nèi)找齊不同的東西，讓用戶過了一把偵探癮。這類游戲能讓用戶沉浸在 H5 當(dāng)中，意味著可以更長時(shí)間地把我們想要宣傳的東西曝光給用戶，所以通過有趣的藏匿設(shè)計(jì)，用戶會(huì)對(duì)品牌活動(dòng)產(chǎn)生更加深刻的印象。
2）測試類
測試類的 H5 實(shí)在是太流行了，經(jīng)久不衰。典型套路是給出一系列題目，最后給出一個(gè)得分和分析結(jié)果，甚至輸入一個(gè)名字、傳一張照片就給出一個(gè)結(jié)果。當(dāng)然這種結(jié)果是沒有任何科學(xué)性可言的，只是博君一笑而已。
有很多人對(duì)此非常熱衷，經(jīng)常會(huì)轉(zhuǎn)發(fā)類似的H5。也許只要跟「自己」相關(guān)的東西，總是能獲得大部分人關(guān)注吧，每個(gè)人總是想看看把自己代入到這個(gè)測試中會(huì)有什么結(jié)果。
3）匿名類
匿名聊天類 H5 在朋友圈的生命力也非常旺盛，微信是熟人社交，平時(shí)大家都是認(rèn)識(shí)的，忽然切換到匿名語境就會(huì)變得有意思。有個(gè)產(chǎn)品叫「朋友印象」就是專門做這一類型的 H5 頁面，比如說你可以匿名評(píng)價(jià)一個(gè)好友，對(duì)他說一些匿名的悄悄話。由于誘導(dǎo)性太強(qiáng)，相關(guān)服務(wù)悉數(shù)被微信封殺，足以見得用戶對(duì)這類 H5 是多么「上癮」。
匿名社交是社交軟件的一個(gè)分支，用戶可以在這類社區(qū)里暢所欲言。移植到 H5 頁面中，發(fā)布者可以了解自己在好友中的真實(shí)形象，這是一個(gè)剛需，畢竟所有人都希望呈現(xiàn)一個(gè)美好的自己，所以大家都希望知道好友對(duì)自己的評(píng)價(jià)。而對(duì)于匿名留言者來說，可以借機(jī)表達(dá)平時(shí)不方便說的話，如果對(duì)方是喜歡的人，則可以一表情愫；如果對(duì)方是不喜歡的人，也可以適當(dāng)發(fā)泄一番。
4）惡搞類
「惡搞」一詞變得越來越流行，這個(gè)不那么文雅的詞曾表示通過賣弄、做作獲取虛榮心的滿足，向他人展現(xiàn)自己不具備的特征。這個(gè)解釋或許過于言重，很多人僅僅是在日復(fù)一日的平凡生活中幽默一番，向好友分享一些惡搞的東西。
有一類 H5 就是迎合了這個(gè)心理而變得流行，它讓用戶「體驗(yàn)」平時(shí)無法發(fā)生的事情，例如網(wǎng)易娛樂就推出了一個(gè)「我要上頭條」的 H5，用戶輸入性別、名字，就可以生成一篇浮夸的假新聞，滿足了用戶登上頭條的幻想。
還有一種形式是生成一張假照片，例如結(jié)婚證、房產(chǎn)證、工作證、名片、名人合照等。一般生成的照片都會(huì)帶上一個(gè)二維碼，掃描后進(jìn)入活動(dòng)頁面，讓用戶生成自己的假照片。
惡搞類的 H5 如果能夠跟自身的產(chǎn)品結(jié)合起來，能獲得很好的下載轉(zhuǎn)化和品牌宣傳，但是如果僅僅是為了惡搞而惡搞，則會(huì)面臨活動(dòng)效果不明顯的局面。
在微信體系內(nèi)，很多人的做法是加上公眾號(hào)的二維碼，企圖增加粉絲，不過這種方式容易導(dǎo)致公眾號(hào)被微信封殺，所以做一個(gè)這樣的活動(dòng)無異于*行為。在準(zhǔn)備上線類似的 H5 時(shí)，我們要思考這個(gè)活動(dòng)到底能為產(chǎn)品帶來什么價(jià)值。
5.
其他Tips
1）善用 H5 模板工具提高效率
H5 的流行也帶動(dòng)了很多 H5 模板工具的發(fā)展，它們提供了一整套技術(shù)方案和設(shè)計(jì)模板，運(yùn)營人員自己就可以發(fā)布一個(gè) H5，不需要走漫長的流程，對(duì)于小團(tuán)隊(duì)來說是非常棒的工具。
不過缺點(diǎn)也很明顯，那就是只能套用固定的模板，設(shè)計(jì)也顯得過于粗糙，只能用于簡單、小范圍內(nèi)使用的 H5。如果只是一些簡單的信息告知，或者用戶量非常小的互動(dòng)，則可以用模板快速制作上線。如果想要打造一個(gè)傳播范圍更廣的 H5，還是需要從設(shè)計(jì)到開發(fā)都用自己的團(tuán)隊(duì)來完成。
2）成功經(jīng)驗(yàn)分享促成二次傳播
做出一個(gè)爆款 H5，刷屏了兩三天，是否就從此銷聲匿跡，或者埋頭準(zhǔn)備下一個(gè)爆款呢？其實(shí)你還可以選擇進(jìn)行「二次傳播」，所謂的「二次傳播」就是把如何做成爆款 H5 的成功經(jīng)驗(yàn)在媒體中進(jìn)行分享，這樣也能帶來不少的曝光量。
我們現(xiàn)在用搜索引擎查某一個(gè)成功的案例，可以找到大量的分析解讀、經(jīng)驗(yàn)分享等文章，也許 H5 的生命只有兩三天，但這類文章卻會(huì)永久沉淀下來，持續(xù)地為品牌、創(chuàng)作團(tuán)隊(duì)帶來曝光。所以如果對(duì)自己的 H5 有信心的話，可以提前準(zhǔn)備好經(jīng)驗(yàn)分享，等 H5 火了之后第一時(shí)間分享出來。
申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
