如何打造刷屏級的H5？本文作者從自己的實踐經(jīng)驗出發(fā)，結(jié)合相關案例，分享了 H5 營銷創(chuàng)意、內(nèi)容、設計、推廣等方面非常有用的知識，供大家一同參考和學習。

從 2015 開始，H5 營銷逐漸成為了互聯(lián)網(wǎng)公司的公關利器。借助社交媒體天然的流量池，一個 H5 活動可能瞬間刷屏，讓此前處在低位的企業(yè)迅速完成冷啟動。

在營銷領域，有越來越多的公司強化了對 H5 的重視。用網(wǎng)易傳媒文創(chuàng)事業(yè)部總經(jīng)理劉晶的話來說：“目前這個形態(tài)的生命力是很旺盛的。甚至可以說整個行業(yè)里面，有很多的同行在做同樣的事情，大家都同樣努力?！?/p>

企業(yè)之所以重視 H5，主要是因為 H5 營銷的天然優(yōu)勢。

首先，低成本。H5 營銷的策劃、設計、開發(fā)均可由本公司現(xiàn)有團隊完成，占用人力少，所謂成本僅體現(xiàn)在“引爆前”的推廣費用；

其次，高溢價。一個 H5 營銷活動，可以搭載品宣、拉新、促活等多種功能，PR 推廣、引導下載、裂變分享、外部引流理論上都可以通過一次 H5 活動完成；

第三，傳播快。H5 營銷和社交媒體具有天然的綁定關系，一個適銷對路的 H5 會在短時間內(nèi)借助所謂的私域流量瞬間引爆，并形成快速的刷屏效果。

相比于傳統(tǒng)的廣告，或者日常的信息流廣告，H5 營銷無疑具有更強的宣傳致效性。

站在個人角度，H5 營銷的策劃與籌備，也逐漸成為互聯(lián)網(wǎng)運營從業(yè)者的必備技能。

就我個人而言，在從業(yè)兩年半的時間里，經(jīng)歷的 H5 營銷活動近 10 次，主導的 H5 營銷包括“咪咕 x 刷屏 H5 營銷項目”，“刷屏斯普蘭格性格測試”等，并分別實現(xiàn)了 PV426532、UV460325 和 PV 194793 、UV357716 的數(shù)據(jù)表現(xiàn)。

所以，于公于私，了解、學習并掌握 H5 策劃的技能都是非常重要的。

好了，鋪墊就做到這里。接下來，我將結(jié)合個人的實踐經(jīng)驗，從 H5 營銷的創(chuàng)意、內(nèi)容、設計、推廣等方面延展開來，希望對你有所裨益。

一、設定核心目標

盡管一次 H5 營銷可以承載多目標任務，但所有的任務也應當有主次、有輕重。

在策劃之初，一定要在所有的系統(tǒng)中找到最重要的核心目標，這會為你后續(xù)的營銷策劃提供決策依據(jù)，每當方案搖擺不定的時候，一切以是否有利于核心目標為準。

分類來看，核心目標可以繼續(xù)細分，不同的核心目標也對應了不同的用戶痛點和承載形式。

1. 品宣

這是 H5 營銷活動中最常見、最底層的目的。

打造一次刷屏爆款，擴大品牌露出，產(chǎn)生最大程度的品牌曝光，讓品牌或產(chǎn)品出圈，使用戶產(chǎn)生模糊、粗淺但卻有效的品牌記憶。

例如，《抖音》的《第一屆文物戲精大會》、網(wǎng)易噠噠 x 第五人格的《榮格心理測試》、網(wǎng)易新聞的飼養(yǎng)手冊以及我策劃的咪咕 x 刷屏《你內(nèi)心住著怎樣的靈魂歌手》均屬于此類活動。

（《第一屆文物戲精大會》 by 抖音）

用戶痛點：在創(chuàng)意上應該把吸引用戶放在首要位置，滿足用戶的好奇、興趣、娛樂等可以直接促進參與和轉(zhuǎn)發(fā)的需求。

在此基礎上，盡可能使策劃內(nèi)容與產(chǎn)品相結(jié)合。例如“網(wǎng)易噠噠 x 第五人格”的《榮格心理測試》，既滿足了探索自我的需求，又結(jié)合了第五人格的游戲特點。

承載形式：品宣類的 H5 多以性格測試、創(chuàng)意故事等形式出現(xiàn)，方便用戶理解和操作。整體構建勿貪多貪全，要把用戶體驗放在首位，不能為了轉(zhuǎn)化而干擾用戶使用。

舉個例子，我司團隊曾策劃了《渣男渣女鑒渣測試》。在結(jié)果頁上，并沒有一次性給出測試答案，反而需要用戶下載 APP 才能查看全部答案。

這樣設計的最初考量是在品牌曝光的同時能夠帶動 APP 下載，但最終數(shù)據(jù)卻是uv10000+，pv44000+。這說明單個用戶寧愿自己測試很多次，也不愿意下載查看全部答案。

同時，在多次的測試中，用戶逐漸消耗了分享欲望，以至于次測試最終沒能出圈。

（《康康你能不能識別渣男渣女》 by 刷屏）

2. 促活

促活是產(chǎn)品盤活用戶存量的行為，其目的是保持用戶對產(chǎn)品的依存度，同時宣傳產(chǎn)品的新功能或新體驗。

用戶痛點：促活的用戶痛點是解決用戶為什么使用、為什么持續(xù)使用以及使用后有什么價值增量的問題。

這個價值增量或者是一個新功能，或者是提升了一種使用產(chǎn)品的價值維度。

以此前刷屏的網(wǎng)易云音樂《私人歌單》為例，就是在原來聽歌的基礎上，突出了數(shù)據(jù)統(tǒng)計和分析的功能。用戶在分享到社交媒體后，還會產(chǎn)生一種附加的社交價值。

甚至有用戶會根據(jù)這個 H5 校正自己的聽歌行為，從聽鳳凰傳奇變成了聽巴赫， 以便在分享后更能彰顯自己的聽歌品味。

（《網(wǎng)易云音樂私人歌單》 by 網(wǎng)易云）

承載形式：促活 H5 需要建立在用戶對產(chǎn)品有認知或有使用的基礎上，宜采用數(shù)據(jù)整合、復盤類的形式。

知乎的《平行世界》、騰訊的 QQ《個人軌跡》、花唄的年度賬單皆屬于此類。

3. 營銷

以營銷為核心目的的 H5，一切向轉(zhuǎn)化看齊。最理想的效果是用戶在使用完 H5 之后，能夠馬上上頭，即時付費，迅速購買。

用戶痛點：這類目的最原始，但效果也最難實現(xiàn)。因為用戶的購買欲需要在短短幾分鐘被徹底激發(fā)。

此類 H5 多用于商業(yè)推廣、品牌促銷、門票購買等中活動中，需要品牌或產(chǎn)品自身的吸引力作為鋪墊。

例如《「我」是草莓音樂節(jié) H5》、《Kindle：每個人都是一本奇書，你是哪一本》、《寶潔 P&G：過年別再給我送男朋友了！》均屬于此類。

承載形式：應體現(xiàn)出較強的煽動力和交互性，使 H5 充分體現(xiàn)用戶自身的屬性， 讓用戶覺得物有所值。

以《寶潔 P&G：過年別再給我送男朋友了！》為例，整個 H5 是典型的場景布置設定，用戶根據(jù)個人喜好裝扮自己的家，滿意后分享到社交媒體，再邀請好友給自己送禮物。

用戶在整個過程中極致地展現(xiàn)了個人的審美意志，并通過分發(fā)擴大了社交價值， 寶潔則在此過程中實現(xiàn)了優(yōu)惠券的派發(fā)和淘寶店的導流。

（《過年別再給我送男朋友了！》 by 寶潔）

4. 拉新

拉新的首要任務是促進用戶注冊、下載，目標對象是此前沒有使用過產(chǎn)品的新用戶。

用戶痛點：集中體現(xiàn)產(chǎn)品的核心優(yōu)勢，在痛點上要滿足用戶的功能性需求，也就是回答“用戶為什么要下載你的 APP，成為你的會員”。

承載形式：緊扣產(chǎn)品的核心功能，且以滿足用戶的某項實際需求你為目的。

比如天天 P 圖的《前世青年照》，英語流利說的《你的發(fā)音像哪個明星》等等， 皆是從自身產(chǎn)品的核心功能出發(fā)，讓用戶一下就明白你是干什么的。

與此同時，還為用戶提供切實的功能，例如自動上傳照片的 P 圖功能，后來在“青年照”、“軍裝照”、“兒童照”中都曾多次復現(xiàn)。

（《我的前世青年照》 by 天天P圖）

5. 公益

以公益為核心目的的 H5，與品宣類 H5 具有一定的相似性。其不同在于，品宣類H5 是品牌先行，在設計時需要把品牌露出放在首位；而公益類 H5 則需要把某種觀念放在優(yōu)先位置。

用戶痛點：公益類 H5 首先需要擊中用戶自己的“善念”，也要在轉(zhuǎn)發(fā)后，成為用戶的社交貨幣，塑造出“我很善良”的優(yōu)越感。

此類 H5 的代表作品是騰訊公益的《小朋友畫廊》、網(wǎng)易的《她掙扎 48 小時后死去,無人知曉》。

承載形式：此類 H5 適于故事類題材,通過巧妙地故事架構和煽情的文案，觸動用戶的善意，盡量減少交互和使用干擾，以營造出不被破壞的慈善氛圍。

（《她掙扎 48 小時后死去,無人知曉》 by 網(wǎng)易）

二、形成創(chuàng)意

有了核心目標之后，就可以圍繞目標形成創(chuàng)意。不同類型的 H5 可能有不同的創(chuàng)意表現(xiàn)，但優(yōu)秀的創(chuàng)意大都有以下內(nèi)核。

第一，與“我”相關

互聯(lián)網(wǎng)上顛婆不播的真理是，用戶只關心自己。在高度去中心化的時代，用戶就是傳播網(wǎng)絡中的分散節(jié)點。而要擊發(fā)這個節(jié)點，H5 必須與其本身高度相關。

這個相關，可以是讓用戶了解自己，比如近兩年大火的測試類 H5；

可以是讓用戶標榜自己，使其樹立熱衷潮流、熱心慈善的形象，比如網(wǎng)易的《她掙扎 48 小時后死去,無人知曉》；

可以是用戶的社交貨幣，能夠讓他微信朋友圈中跟上節(jié)奏，不落伍，比如我司的《測測你是致命女人中的誰》。

總之，一定要跟用戶本身產(chǎn)生強烈的關系，讓他感受到這個 H5 就是為她打造的。

第二，能夠出圈

優(yōu)秀的 H5 要能夠在社交網(wǎng)絡引發(fā)大范圍的傳播，也就是出圈。

這就要求一個創(chuàng)意既要足夠吸引人，又要降低排他性，盡可能地弱化職業(yè)、年齡、地域等屬性的干擾。比如：“全國吃貨測試”就是比“四川省吃貨測試”更優(yōu)秀的創(chuàng)意。

同時，H5 還要讓用戶有分享欲。這點非常重要，如果一個 H5 不能夠引發(fā)他人的分享，基本上它會在很早期的階段就停步了。

第三，有話題度

一個好的創(chuàng)意還要引發(fā)充分的討論，讓用戶在在轉(zhuǎn)發(fā)和分享之后，迅速完成輿論聚焦。

這一要求可以通過主題設定實現(xiàn)，也可以通借助熱點事件完成。比如，我們前不久推出的《測測你是致命女人中的誰》就屬于典型的蹭熱點。

原本只是一個 APP 內(nèi)部的測試，但卻因為《致命女人》的大結(jié)局而在微博、豆瓣引發(fā)討論，最終斬獲了 15w+UV。

此前，如《測測你是復聯(lián)中的誰》《測測你是都挺好中的誰》《測測你是長安十二時辰》中的誰，大都延用了此套路，且最終數(shù)據(jù)呈現(xiàn)都不錯。

綜上，一個好的創(chuàng)意要做到三點：與我相關，能夠出圈，有話題度。

三、策劃流程（純干貨）

有了創(chuàng)意接下來就要看具體怎么做了。為了方便大家理解，我將以《刷屏 x 咪咕音樂《測測你是致命女人中的誰》為例，全面拆解 H5 的策劃流程。

1. 確定主題

在策劃初期，首先要弄清楚，H5 的核心目標是什么，我要達成怎樣的目的， H5 應該有怎樣的主題。

這個主題最好與自己的品牌或產(chǎn)品相關，且這個相關最好能引起用戶興趣。如果在主題確定過程中，能夠蹭到熱點，就更好了。

比如，我們跟咪咕音樂做這次聯(lián)名開發(fā)時， 前期就確定了品宣的核心目標。

由此連想到的就是咪咕音樂的品牌屬性，也基本明確了本次 H5 活動的主題必須要與音樂相關。

與此同時，根據(jù)開發(fā)排期，本次 H5 開發(fā)和上線時，恰逢湖南衛(wèi)視《歌手》節(jié)目的熱播，正好是用戶關注音樂的熱點時期，也為我們提供了一個“蹭熱點”的契機。

2. 確定形式

有了主題之后，就要想到 H5 用什么形式來呈現(xiàn)，換言之，H5 的核心優(yōu)勢是什么？

是一個工具？一個測試？一個腳本故事？還是一次派發(fā)福利的廣告？很多人常常在確定主題之后，沒有選擇一個好的形式，導致功歸一簣。

近兩年，在所有的形式當中，最容易出爆款的就是測試類 H5。這是一個屢試不爽的形態(tài)，甚至一些 H5 團隊策劃能力并沒有那么好，也可以通過這種玩法偶爾給行業(yè)一次比較有意思或現(xiàn)象級的傳播案例。

在形式設定之初，我們一早就確定了測試類 H5 的基本形態(tài)。而后再把測試、音樂、歌手等元素結(jié)合在一起，很容易就會聯(lián)想到“你是哪一類歌手” “你適合唱哪類歌手的歌曲”“你內(nèi)心的性格是怎樣的歌手類型”等等， 綜合考量后，我們鎖定了“你內(nèi)心住著怎樣的靈魂歌手”的創(chuàng)意。

基于“測試+音樂”的主題下，這一創(chuàng)意的表現(xiàn)力和傳播力最強。

3. 尋找理論

確定了測試類 H5 的方向后，還需要扎實的心理學理論依據(jù)做支撐。

很多開發(fā)團隊在設計時一味貪快，或者把測試想得過于簡單，認為只要拍拍腦袋就能設計出一個爆款測試。

結(jié)果就是整個 H5 測試缺少理論支撐，缺少信度（說服力）和效度（準確性）， 最終沒能引發(fā)傳播。要知道，用戶需要的不是測試，而是一次準確的測試。

因此，找到理論依據(jù)就非常關鍵，而理論依據(jù)又包括兩個方面：

（1）理論基礎

在所有的測試類 H5 中，都應用到了巴納姆效應。該理論認為每個人都會很容易相信一個籠統(tǒng)的、一般性的人格描述特別適合他，這一點在星座、算命以及職業(yè)特征中都所有應用。

利用大數(shù)據(jù)和概率學催生的格式文案，是非常具有迷惑性的。

（2）心理學理論

盡管在學術領域中，心理學理論浩如煙海，但具體到人格理論就相對有限， 比較著名的如大五、大七、斯普蘭格、九型人格、十六型格理論、卡特爾人格理論、奧爾波特特質(zhì)論等等。而這其中，能夠適用于 H5 測試的就更加有限。

要判斷一個理論是否可用，可以參考以下三個指標：

第一，是否通俗易懂。全世界大多數(shù)人都知道佛洛依德，但是誰又能說清楚他的理論依據(jù)呢？如果想要把這種理論加以應用，你顯然需要一次 2 小時的心理診療，而不是 2 分鐘的 H5 測試；

第二，是否論證充分。此處的論證尤其強調(diào)定量研究，也就是說這個理論是心理學家通過調(diào)查問卷測出來的，是有充分的被試證明了的，而不是心理學家臆想出來的。

第三，是否維度清晰。就是說這個理論能不能表達成幾個清晰的特征，或者用幾個形容詞就把人的性格介紹完成， 還能做到不重不漏。

比如，大五人格理論就把人的性格劃分成了開放、責任、外向、宜人、神經(jīng)質(zhì)等特征，十六型格理論把人分成了建筑師、指揮官、調(diào)停者、守衛(wèi)者等十六中類型。

滿足以上三條標準，基本上就可以應用到 H5 測試中。

當然，了解一個 H5 并不是要求你成為該理論的學者，但是你需要明白這個理論的源起和內(nèi)容。因此，非常建議大家通過科學上網(wǎng)，在維基百科查看相關詞條，其內(nèi)容和鏈接基本就能滿足你的需求。

4. 設計結(jié)果頁

確定了主題和理論，就可以開始上手設計 H5 了。這個時候請注意：

H5 的設計是從結(jié)果頁開始的！

H5 的設計是從結(jié)果頁開始的！

H5 的設計是從結(jié)果頁開始的！

（重要的事情說三遍）

結(jié)果頁在一次測試中最后出現(xiàn)，但卻是 H5 測試真正的門面，因為用戶對H5 的評價、分享大部分取決于結(jié)果頁的質(zhì)量；

在社交媒體中，曝光最多的也是結(jié)果頁，新用戶會不會參與你的 H5，也完全取決于結(jié)果頁的吸引力。

結(jié)果頁的設計主要包含文案和 UI 兩個部分，其中文案先于 UI。

（1）文案設計

首先，結(jié)果頁上包含哪些要素。

一般情況下，一個完整的測試結(jié)果頁包括主題，用戶名稱，頭像，雷達圖， 二維碼、品牌 LOGO，結(jié)果描述等等。

雷達圖可以說是測試類 H5 必備的要素，因為它最能夠直觀、細致的反應用戶的性格構成，也讓你的 H5 顯得更加可信。

雷達圖的幾個維度要根據(jù)選擇的理論來設定，比如本次測試使用的是大五人格理論，所以就有五個維度；之前的斯普蘭個測試把人分成了六種性格， 所以就有六個維度。

第二，結(jié)果描述細分為 punchline 和結(jié)果詳解。

Punchline 能夠在一瞬間擊中用戶，因此務必簡潔、經(jīng)典，建議從一些小眾但經(jīng)典的文學名句中尋找；

結(jié)果詳解則務必準確、生動，一般可用“主題詞+解釋”的形式構成。主題詞不是憑空設想的，要從原有的心理學理論中抽象出來；

“解釋”也要注意貼合主題， 把性格描述融入到測試主題當中。

比如“稟賦：你天資聰穎，學習能力強，能夠博采眾長，各種樂器都能在你手中幻化成絕美的樂章”

第三，結(jié)果詳解一定要謹記“彩虹屁原則”。

要深信人性是有弱點的，所有的 H5 剖析到最后，一定都是對用戶的彩虹屁。所以你的創(chuàng)意無論如何包裝，在內(nèi)核上都要變著花樣的夸他。

比如，我們之前跟咪咕合作的“你內(nèi)心住著怎樣的靈魂歌手”測試，盡管使用了音樂和歌手等元素，但最后的結(jié)果還是對用戶的各種吹捧。（甚至部分用戶反映比他自己認為的自己還好）

（2）UI 設計

UI 設計是在文案設計的基礎上進行的。UI 設計需要考慮本次 H5 主題、基調(diào)，以及結(jié)果頁內(nèi)容的排列組合，同時還要想到結(jié)果頁上需要哪些精心設計的小元素。

一般情況下,一個合格的 UI 會提供至少三種結(jié)果頁樣本，然后共同討論、協(xié)商、豐富細節(jié)，形成最后的結(jié)果頁。

5. 設計題目

題目設定要考慮以下內(nèi)容：

第一，題目有無腳本

有腳本的測試，題目之間是互相關聯(lián)的，一道題目會影響到另一道題目的選擇。這樣的好處是用戶做題時會感到連貫和自然，壞處是策劃需要非常完善的構思，讓題目的轉(zhuǎn)接不免強、不生硬。

無腳本的測試，題目之間沒有關聯(lián)，彼此獨立。這種設定可能會讓用戶找不到節(jié)奏，但也會給用戶超出預期的驚喜感。

在我所策劃的 H5 測試中，基本上都是采用無腳本題目。而從用戶反饋來看，無腳本與有腳本的題目對用戶而言，接受程度是差不多的。

所以，如果你有一個非常的故事設定，就可以設計有腳本的測試題目；反之，無腳本的題目對最終的測試效果上并沒有太大影響。

第二，數(shù)量

測試類題目而言，題目數(shù)量以 8-12 題為宜，用戶完成一次 H5 的體驗不要超過 2 分鐘；

第三，難度

測試題目太簡單或太難都不合適，所設定的題目一定是用戶需要思考才能完成。

例如：你周圍的世界是本來如此還是因你如此？錢是這個世界上最重要的嗎？丑下鴨最終會變成白天鵝還是大丑鴨？……

此類題目屬于簡單題目，用戶在第一次做題時會糾結(jié)，但在反復做題后往往會很快做出選擇。例如：

明早就要離開久居多年的城市，你今晚回去哪里吃晚餐？

a.最常去的餐廳

b.很想去但從未去過的餐廳

c.隨意找一個餐廳

d.在家中享受晚餐

這就屬于困難類題目，用戶不僅首次做題時會糾結(jié)，在多次做題時仍然也會思考選擇。

與此同時，這里要敲黑板。測試類 H5 的題目一定不能是非黑即白的對錯題。

比如，去年我們曾策劃了一個《測測你的吃瓜水平》，里面的題目大都圍繞 2018 年的娛樂圈事件設定。但題目本身存在明顯的對錯，一旦用戶多次選錯，就會失去做題的耐心。當然，最后的數(shù)據(jù)也證明了這一點。

第四，形式

測試類 H5 的題目一般會采用選擇題的形式，一般為二選、三選或四選。

且大多數(shù)題目都借鑒了心理學經(jīng)典的“主題統(tǒng)覺測驗”。

主題統(tǒng)覺測驗是由 H.A. 默里于 1935 年為性格研究而編制的一種測量工具。傳統(tǒng)的主題統(tǒng)覺測驗會提供給用戶 30 張內(nèi)容隱晦的黑白圖片，讓用戶做判斷， 并基于此來推測出用戶的性格。

例如：下圖中的老婦人是什么心情？是憂傷、邪惡、陰郁還是慈祥？

在爆款 H5 測試中，基本上都能看到主題痛覺測試的影子：

比如，網(wǎng)易云的《榮格心理測試》中的大灰狼與小紅帽的選擇題；

比如，《測測你內(nèi)心住著怎樣的靈魂歌手》中的看圖題：

又比如，聽這段音樂，你覺得作者表達了什么心情等等。

這些都是從主題統(tǒng)覺測驗中演繹出來的測試形式，可以說也是測試類 H5 的標配。

這一方面，是因為主題統(tǒng)覺測驗非常經(jīng)典；另一方面，主題統(tǒng)覺測驗在測試性格方面也具有非常強的準確度。

第五，題目分布

題目設計還要考慮題目的排列順序，也就是分布問題。

在多年的測試中，我總結(jié)出了一種交叉分布的節(jié)奏感，即：簡、簡、難、難、簡、難、難、簡、難、簡

前面兩題設置簡單，不至于讓用戶望而卻步，如果你第一道題就讓用戶解一道一元二次方程，他肯定馬上關掉測試走人；三、四題逐漸提升難度，讓用戶減少雜念，全身心投入到測試中。

在經(jīng)歷了前兩題之后，用戶一般會繼續(xù)做下去。如果這個時候你給他一道簡單題目，他很可能會認為你的測試沒有深度，然后草草做完了事。

五到八題是尾部題目，影響了用戶結(jié)束測試時的心情和印象，所以至少有兩道題比較困難，讓用戶留下心理困惑，以便他會重復做題；而最后一題務必簡單，讓用戶的心情可以稍稍平復。

簡而言之，題目的排列組合也是對用戶心理的掌握，把握得準確，分布的巧妙，也能起到事半功倍的效果。

6. 設計規(guī)則

很多人認為，測試規(guī)則的設定是由產(chǎn)品或后端進行的，但由于文案是題目、結(jié)果頁的直接設計者，也是對 H5 最了解的人，因此整個 H5 的計分規(guī)則， 也應該由文案來設計。

就我個人的經(jīng)驗而言，測試類的 H5 一般選擇加法計分的方式來統(tǒng)計結(jié)果：

第一步，首先考慮清楚最后要輸出多少種結(jié)果；

第二步，給每一道題目中的每一個選項賦予分值，賦分的標準是這個選項與輸出結(jié)果的契合度；

第三步，根據(jù)用戶的選擇，進行加法運算，得分最高的結(jié)果項就是最終結(jié)果。

用 Excel 表格展示如下圖。

本次《靈魂歌手測試》總共有 9 種結(jié)果和 9 道題目；每道題目中的每個選項都對應了結(jié)果的一個分值；根據(jù)用戶的選擇，最后加總起來的就是 9 個結(jié)果的數(shù)值，其中數(shù)值最大的，就是最終結(jié)果。

7. UI 設計+前端開發(fā)

跟前面介紹的一樣，一個好的 UI 至少要提供三種設計方案以供選擇，然后通過集體論證確定設計基調(diào)。

測試類 H5 的設計應該要包含幾個部分：初始頁、loading 頁、轉(zhuǎn)場頁、題目頁、結(jié)果 loading 頁、結(jié)果頁和結(jié)果分享頁。

這其中，大多數(shù)人會更加關注題目頁和結(jié)果頁，這當然沒錯，但是其他頁面的設計也同樣重要。

初始頁的要能彰顯主題；

loading 頁要能交代清楚這個測試是怎么回事，轉(zhuǎn)場頁特效要自然；

結(jié)果 loading 頁要給結(jié)果計算留下充足的時間；

而結(jié)果頁，要設置不同的功能按鈕。比如再測一次、下載 APP 的引導、或者是給 WEB 端某個端口的導流。

在 UI 設計完成后，前端就要對內(nèi)容加以實現(xiàn)。對前端而言，有兩個關鍵問題需要解決。

一是特效。

UI 在做效果圖的時候，往往天馬行空，特效做的越炫越好，但前段往往很難將其完全實現(xiàn)。

這并不是說前端能力不足，而是前端需要考慮頁面的加載時間。理論上來說，如果一個頁面的轉(zhuǎn)場和露出超過 5s，那用戶就會失去耐心；

二是適配。

適配問題是前端最頭疼的問題，蘋果機型還好，但安卓機浩如煙海的屏幕分辨率讓適配很困難。前端需要不斷的調(diào)試，才能得到比較理想的結(jié)果。

當然，如果某些手機出現(xiàn)很大一片空白，那也只能將就了。

8. 后端開發(fā)

在題目和計分規(guī)則設計完成后，后端就可以進行開發(fā)了。

后端老師不止一次跟我說，加法運算的開發(fā)對他們來說是最簡單的，事實上，他們也只需要三天時間，就能碼完。

等前端完成后，雙方需要對接口。由于我的測試結(jié)果頁上有雷達圖，所以我往往會跟后端老師強調(diào)，盡可能的把雷達圖的參數(shù)夸張呈現(xiàn)。

比如最大值乘以 1.2，中間值不變，最小值乘以 0.8，以取得最佳的呈現(xiàn)效果。

當然，如果你得 H5 沒有雷達圖，或者你設計的分值足夠完美，你也可以不進行這樣的操作。

9. 測試

在所有開發(fā)完成后，就要進行測試工作，這個時候會發(fā)現(xiàn)各種各樣的問題，從文案、設計、適配到結(jié)果可能都需要調(diào)整，BUG 也會層出不窮，這時千萬耐心，有錯就改。

一個 H5 至少要經(jīng)過三輪測試后才可以上線，確保萬無一失。

10 上線＋推廣

H5 準備好后，就可以上線了，可以說這里就是市場部同事的工作了。

首先，上線時間

一般建議上線時間安排在周二到周四之間，因為周一大家太忙，周五大家太慌， 周六、周日根本無心測試；

這其中，下午 3 點到 4 點之間，上線為最佳。因為這個時候大家普遍進入了一天的摸魚時期，非常有心情做一個測試。

而一般 H5 的引爆會在晚上 6 點到 9 點之間，提前上線也是為 H5 的刷屏進行充分預熱。

其次，推廣渠道

一般渠道包括微博 KOL，微信大號，微信群，朋友圈，其他產(chǎn)品的資源位等等。

這其中，性價比最高的還是微信群，因為 H5 營銷天然的帶有社交屬性，微信群是最容易引爆的。相反，KOL、大號的帶量效果一般，價格貴，有些時候并不能完全篤信。

當有些天然自帶話題的測試，還可以嘗試投放到免費渠道。

比如，上月的《測測你是致命女人中的誰》，我們就投放到了豆瓣小組，渠道免費，但帶量效果卻不錯。

有時候，并不是非要花大錢才能辦成事的。

第三，排期建議

很多人覺得開發(fā)一個 H5 需要很多時間，其實并不是這樣的，我的經(jīng)驗來看，一個 H5 的排期。

• 前期創(chuàng)意+文案設計：五個工作日，2 個人力
• UI 設計、后端開發(fā)可同時進行，大概需要 7 個工作日，設計 2 個人力，后端 1 個人力
• 前端：一周，1 個人力
• 測試：三個工作日，1 個人力。

也就是說，總共需要 22 個工作日，7 個人力。當然這其中會有賦予事件，總之，一個 H5 的測試，不宜超過一個月。

11 總結(jié)&分析

做完了整個 H5 之后，一定要進行分析和總結(jié)。這其中最關鍵的就是數(shù)據(jù)復盤。

在后端開發(fā) H5 的時候，就要進行數(shù)據(jù)埋點。其中基本數(shù)據(jù)包括昵稱、UUID、時間、鏈接。有這些數(shù)據(jù)就能得出 PV、uv 和用戶來源渠道。

進階的數(shù)據(jù)，包括留存時間、跳出率和分鐘級監(jiān)測。前兩者可以看出 H5 的質(zhì)量， 后者則可以看到 H5 的爆發(fā)和增長情況。

（《測測你是致命女人中的誰》流量檢測）

除了數(shù)據(jù)之外，還要關注設計的反饋，這一方面就主要靠口碑了，可以設計一個調(diào)查問卷，廣泛收集意見，在隨后的開發(fā)工作中，進行適當調(diào)整。

四、總結(jié)

H5 的營銷其實并不存在過高的門檻，把設計環(huán)節(jié)拆解來看，每一個步驟都是可量化、可控制的，只要每一步都做到金線之上，整體效果就不會太差。

當然，跟互聯(lián)網(wǎng)的其他營銷一樣，大品牌、大資本和大公司有更大的幾率去制造

爆款和刷屏。這一點，小企業(yè)其實不必羨慕，按照正確的方式做下去，用更少的人力、資源、成本去博取相對較大的點擊率，這種高性價比的 H5 其實也是一種成功的營銷。而大多數(shù)小公司或第一次上手做 H5 的運營，也都是這樣開始的。

作者：賈子苼 ，微信號：jiarui0828；公眾號：異論點

來源：https://mp.weixin.qq.com/s/VhkTj18eb_TZnNSeCdkZzQ

本文由 @賈子苼 授權發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議