如何制作H5？筆者依據(jù)工作中具體實踐的所思所想，并結(jié)合案例等分享了H5制作中遇到的一些問題和解決方法，與大家分享。

其實我想說的是，經(jīng)過幾年H5的混戰(zhàn)，大家對H5的感覺越來越習以為常，曾經(jīng)名噪一時的套路當下也難故伎重演。

在2015年-2017年間我一直有接觸H5的制作，結(jié)合其中遇到的各種問題，踩過的各種坑，整理了思路寫出一些總結(jié)，希望對你有幫助。

（網(wǎng)易刷屏H5）

一、H5的目標和優(yōu)點

首先，我們?yōu)槭裁匆鯤5？因為H5是講故事的工具和形式之一，可以借它實現(xiàn)信息傳達和行為引導。

H5的優(yōu)點有哪些？

1. 較強的感官刺激帶來較深刻的體驗和記憶——具有較強的煽動性；
2. 降低觀看的心理門檻，讓用戶忽略部分不利因素——具有偽裝性。

一個H5可能是營銷項目的主體，也可能是作為流量渠道之一成為營銷項目的配套，也可能承載著引導下載app、收集參與者信息等目的。

H5的目標能分為兩大類：品牌推廣和拉新促活。

品牌推廣是傳遞信息，重目標群體對信息的接收程度；對于拉新促活來說，看重的是短效拉活能力（重量），長效促活能力（重質(zhì)），且能作為用戶增長和用戶生命周期分層運營的靈活抓手。

二、關(guān)于H5的出入口

H5各層數(shù)據(jù)和目標用戶選擇、渠道質(zhì)量、H5內(nèi)的轉(zhuǎn)化強相關(guān)，接來下談談入口、出口和主體。

流量入口分為兩種：弱關(guān)系觸達和強關(guān)系觸達，前者是被動觸達，后者是主動、半主動觸達。

1. 弱關(guān)系是平臺到人，常見的方式有APP客戶端（開屏廣告位、信息流橫幅、推送…）、Facebook/Twitter/官微等；
2. 強關(guān)系是熟人到人，如Whatsapp、Facebook、Twitter、終端地推（校園渠道/海報/易拉寶等），國內(nèi)的微信、微博好友等。

在H5的傳播中，弱關(guān)系更象征一種正式感、權(quán)威感，強關(guān)系能帶來高效率、高轉(zhuǎn)化。

入口的設(shè)計，從導量角度出發(fā)，以下因素有利于提高開始率：弱廣告性、趣味性、懸念、明確利益、美感、明星等。

遵循流量漏斗，從初始流量到二次回流，流量逐漸遞減，但只有少數(shù)的H5能打破流量漏斗，讓回流反超初次到達。因此，推廣的出入口同H5主體一樣重要，因為它能降低獲客成本及擴寬信息的覆蓋面/影響面。

在出口流量上，復雜的心理因素影響用戶在社交平臺的分享，推薦經(jīng)典讀物《影響力》、《娛樂至死》、《烏合之眾》。

1. 什么能促進分享？利益、分數(shù)頭銜等可炫耀之物、有情有趣、出人意料、實用、與己相關(guān)、朋友間強互動、地域歸屬……
2. 什么會阻礙分享？硬廣、暴露隱私、和自身不符、低俗、有礙社交形象……

H5主體，因為它承載了制作者的創(chuàng)意部分——一個華麗龐大的城堡，重視程度不用再強調(diào)了。關(guān)于如何制作H5主體也是老生常談，簡單羅列一些要點：

1. 明確引導，避免困惑感；
2. 適當挑戰(zhàn)，避免強烈的挫敗感；
3. 降低操作門檻，盡量滿足；
4. 流程勿長，持續(xù)提供新鮮感或感官刺激。

以UC News（資訊產(chǎn)品）印度版“人拉人”的H5活動為例：用戶參與活動時即可獲得一定金幣和一個邀請碼，通過邀請好友輸入邀請碼可獲得一定隨機金幣獎勵（每人只可輸入一次），待進度條集滿，即可將顯示的金幣提現(xiàn)。

• 為什么要做“人拉人”H5活動？產(chǎn)品增長期，需要提升用戶量級（后發(fā)現(xiàn)這活動可作為產(chǎn)品的一支強心針，需要時用于沖頂）。
• 如何引導用戶效率最快？社媒上引爆，“收徒”的分銷模式。
• 如何提高拉新的趣味性？除大獎外，和好友共享成果增加趣味性，通過商務合作設(shè)立普獎。
• 如何制造新奇和熱點？蹭熱點，如印度的灑紅節(jié)（Holi）、排燈節(jié)（Diwali）、板球季。

這個營銷模板在印度反饋很好（但審美疲勞導致熱度下降是必然趨勢），因此進行了模板化，在產(chǎn)品需要時重新包裝上線，這期間也踩過一些坑：

1. 頭部設(shè)計過多，首屏不能看到完整的UI，首頁參與率下降；
2. 某次為配合節(jié)日意境，將進度條改為一條彎彎的小河，參與率驟跌——相比餅圖、百分比、曲線等形式，進度條最能鼓動用戶參與活動；
3. 閃屏提前1-2天配置可以大大提高到達率；
4. 流量激增會影響服務的穩(wěn)定性，如全量push和開屏廣告位錯開——流量錯峰，保證穩(wěn)定；
5. 誘導分享被社媒封鏈，需備有plan B；
6. 其他

三、關(guān)注哪些數(shù)據(jù)指標？

頁面漏斗數(shù)據(jù)大致如下，詳見下一篇推送《數(shù)據(jù)分析敲門磚》。

由于該活動的目的是拉新促活，關(guān)注頁面漏斗數(shù)據(jù)是為了提高效率，但更應該關(guān)注實際的增長效果，如下圖，可區(qū)分客戶端用戶（活躍）和非客戶端用戶（新增），各環(huán)節(jié)效果就清晰明了，還可以和歷次活動對比從而得出判斷和優(yōu)化方案。

除了以上數(shù)據(jù)，還有其他指標可以看看？（好的指標怎能不寫在匯報PPT里？）

端內(nèi)：

1. APP日活及留存變化
2. 端內(nèi)評論量變化

端外：

1. 外部相關(guān)搜索指數(shù)
2. 外部媒體自發(fā)報道篇數(shù)
3. 相關(guān)搜索熱度
4. 應用商店用戶評分變化

如板球季期間，UC News的印度“人拉人”活動：

1. 活動傳播碼，帶動端內(nèi)日均評論量提升30%；
2. 活動期間UC News在印度GP總榜霸榜第2位一周，Google Trends出現(xiàn)峰值；
3. Google上有大量自發(fā)的活動相關(guān)文章、視頻；
4. 大量用戶在社媒、GP、網(wǎng)站等渠道傳播自己的活動傳播碼，中獎用戶在社媒曬獎；
5. 活動造就的CricFund概念有一定的搜索熱度。

四、策劃的產(chǎn)品思維

有的H5小主會將自己定位為營銷策劃而非產(chǎn)品策劃，認為天馬行空“高大上”的創(chuàng)意即可創(chuàng)造出爆款，錯！在各種兼容問題層出不窮和時間緊迫中做出一個個艱難的取舍，各種心塞跪求各位大大后，才會痛悟“頁端產(chǎn)品思維有多么的重要”。

H5制作流程：營銷目的與策略->創(chuàng)意策劃->需求評審->研發(fā)設(shè)計->前期測試->正式推廣->線上監(jiān)控->推廣收尾->項目復盤。

研發(fā)設(shè)計期間，三份文檔保平安：

1. H5頁面需求文檔：感性創(chuàng)意+縝密思維；
2. 物料設(shè)計需求文檔：流量拆解和預估全靠它；
3. 數(shù)據(jù)統(tǒng)計需求文檔：上線才打點就晚了。

（物料設(shè)計需求文檔示例）

（數(shù)據(jù)統(tǒng)計需求文檔示例）

前期測試口訣“五多一看一跑”：多機型、多系統(tǒng)、多平臺、多網(wǎng)絡、多踩坑，看得懂，跑得通。做到以上這些，能解決90%的bug。

對H5制作流程的了解，最直接的方式是經(jīng)歷2-3個H5的制作，這里就不做大篇幅講述了，提醒一些關(guān)注點：

1）考慮不同平臺、系統(tǒng)展示效果，如

• 端內(nèi)：自身產(chǎn)品+矩陣產(chǎn)品
• 端外：Whatsapp/Twitter/Facebook/合作APP/微信/微博/其他瀏覽器

2）花點時間思考邊緣場景，如

• PC端打開網(wǎng)頁會看到什么？（靜態(tài)頁+二維碼？）
• 用戶昵稱的授權(quán)（Whatsapp很OK，F(xiàn)acebook怎么處理？）

3）前期既讓研發(fā)設(shè)計參與，善借外腦，如

• 創(chuàng)意構(gòu)想時，邀請研發(fā)設(shè)計參與（確認實現(xiàn)成本、周期、方式、發(fā)散創(chuàng)意、設(shè)計風格）；
• 若非文案外包，要自己把控H5大方向，引導供應商提供創(chuàng)意，輔助細節(jié)、點子、文案；

制作H5時，會根據(jù)目標人群（to B & to C）產(chǎn)生不同的創(chuàng)意，當你決定要開始一場H5 campaign時，你就成為了一活生生的“樞紐”。

公關(guān)、設(shè)計、研發(fā)、運營、商務、法務，都是一場H5戰(zhàn)役中你要接觸的人，項目負責人有責任將目標清晰地同步給各關(guān)聯(lián)方。

你會發(fā)現(xiàn)，你開始了一場艱難的爬坡活動?！翱澄铱梢?，砍需求不行”，“你再砍我的需求，我就開槍了”，“說出你的需求，I Don’t Want To Do It”，民間便流傳開這些相愛相殺的故事。

秉承“需求說在前，尊重專業(yè)性”的原則，前期溝通為王，盡可能把項目背景、目標、需求闡述清楚并同步到位，多找圖或其他可支持說明的東西將需求具象化，避免由想象力飛馳出現(xiàn)偏差；過程中如果提出修改意見，得目標導向，用數(shù)據(jù)支撐代替主觀臆想。

H5活動千辛萬苦上線了，終于可以喘口氣？NO！“在線觀測數(shù)據(jù)，及時調(diào)整迭代”是正確姿勢，如在線發(fā)現(xiàn)首頁點擊率較低，該層損失較多用戶，于是在該頁面增加動態(tài)點擊的gif引導，點擊率提高8%。

如果有條件，前期可以備有不同物料進行ab test，根據(jù)數(shù)據(jù)擇優(yōu)方案。

推廣收尾，事先已確定活動結(jié)束時間、狀態(tài)、下線時間（結(jié)束和下線有區(qū)別，活動結(jié)束用戶仍可以訪問H5頁面，一般做發(fā)獎或其他說明的緩沖；下線則是在服務器下線，用戶無法打開頁面），尤其紅包類利益相關(guān)、時效性相關(guān)的活動，狀態(tài)一定要改變，不然你會收到很多投訴，疲于應付投訴的同時損害了品牌形象。

對于一個相對精美的H5來說，除去渠道供應商的合作，1產(chǎn)品+1開發(fā)+1設(shè)計，花費20-30個工作日（根據(jù)不同復雜程度有差異），投入不算小，所以開始前我們得算一算ROI。同時試著將常用的H5套路做成模板，你會發(fā)現(xiàn)營銷產(chǎn)品化、模型化、組件化能大大提高效率降低成本。

結(jié)尾

國內(nèi)用戶對感官刺激逐漸回歸理性，吳亦凡H5的炫技型成功難以復制，且短視頻已發(fā)力流行，但傳統(tǒng)圖/文的傳播力依然強勁，想想微信10萬+文章，刷屏不限于形式，長圖、文字、視頻、直播等都有可能。

對國際上熱門的發(fā)展中國家來說，如印度印尼，H5依舊處在風口，能快速試錯調(diào)整，為產(chǎn)品提供數(shù)據(jù)支持。

學法練術(shù)，勿忘悟道，移動頁面營銷最應該傳播的是內(nèi)容或品牌信息，而不是H5本身。

（兩年前畫的業(yè)務思路圖，大家隨意看看吧）

本文由 @張小喵Miu 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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