導(dǎo)讀：如何制作H5？如何借助第三方免費(fèi)創(chuàng)建投票活動、抽獎活動？筆者依據(jù)工作中具體實(shí)踐的所思所想，并結(jié)合案例等分享了H5制作中遇到的一些問題和解決方法，與大家分享。

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

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

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

一、H5的目標(biāo)和優(yōu)點(diǎn)

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

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

較強(qiáng)的感官刺激帶來較深刻的體驗(yàn)和記憶——具有較強(qiáng)的煽動性；降低觀看的心理門檻，讓用戶忽略部分不利因素——具有偽裝性。一個H5可能是營銷項(xiàng)目的主體，也可能是作為流量渠道之一成為營銷項(xiàng)目的配套，也可能承載著引導(dǎo)下載app、收集參與者信息等目的。

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

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

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

H5各層數(shù)據(jù)和目標(biāo)用戶選擇、渠道質(zhì)量、H5內(nèi)的轉(zhuǎn)化強(qiáng)相關(guān)，接來下談?wù)勅肟凇⒊隹诤椭黧w。

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

弱關(guān)系是平臺到人，常見的方式有APP客戶端（開屏廣告位、信息流橫幅、推送…）、Facebook/Twitter/官微等；強(qiáng)關(guān)系是熟人到人，如Whatsapp、Facebook、Twitter、終端地推（校園渠道/海報/易拉寶等），國內(nèi)的微信、微博好友等。在H5的傳播中，弱關(guān)系更象征一種正式感、權(quán)威感，強(qiáng)關(guān)系能帶來高效率、高轉(zhuǎn)化。

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

遵循流量漏斗，從初始流量到二次回流，流量逐漸遞減，但只有少數(shù)的H5能打破流量漏斗，讓回流反超初次到達(dá)。因此，推廣的出入口同H5主體一樣重要，因?yàn)樗芙档瞳@客成本及擴(kuò)寬信息的覆蓋面/影響面。

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

什么能促進(jìn)分享？利益、分?jǐn)?shù)頭銜等可炫耀之物、有情有趣、出人意料、實(shí)用、與己相關(guān)、朋友間強(qiáng)互動、地域歸屬……什么會阻礙分享？硬廣、暴露隱私、和自身不符、低俗、有礙社交形象……H5主體，因?yàn)樗休d了制作者的創(chuàng)意部分——一個華麗龐大的城堡，重視程度不用再強(qiáng)調(diào)了。關(guān)于如何制作H5主體也是老生常談，簡單羅列一些要點(diǎn)：

明確引導(dǎo)，避免困惑感；適當(dāng)挑戰(zhàn)，避免強(qiáng)烈的挫敗感；降低操作門檻，盡量滿足；流程勿長，持續(xù)提供新鮮感或感官刺激。以UC News（資訊產(chǎn)品）印度版“人拉人”的H5活動為例：用戶參與活動時即可獲得一定金幣和一個邀請碼，通過邀請好友輸入邀請碼可獲得一定隨機(jī)金幣獎勵（每人只可輸入一次），待進(jìn)度條集滿，即可將顯示的金幣提現(xiàn)。

為什么要做“人拉人”H5活動？產(chǎn)品增長期，需要提升用戶量級（后發(fā)現(xiàn)這活動可作為產(chǎn)品的一支強(qiáng)心針，需要時用于沖頂）。如何引導(dǎo)用戶效率最快？社媒上引爆，“收徒”的分銷模式。如何提高拉新的趣味性？除大獎外，和好友共享成果增加趣味性，通過商務(wù)合作設(shè)立普獎。如何制造新奇和熱點(diǎn)？蹭熱點(diǎn)，如印度的灑紅節(jié)（Holi）、排燈節(jié)（Diwali）、板球季。這個營銷模板在印度反饋很好（但審美疲勞導(dǎo)致熱度下降是必然趨勢），因此進(jìn)行了模板化，在產(chǎn)品需要時重新包裝上線，這期間也踩過一些坑：

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

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

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

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

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

端內(nèi)：

APP日活及留存變化端內(nèi)評論量變化端外：

外部相關(guān)搜索指數(shù)外部媒體自發(fā)報道篇數(shù)相關(guān)搜索熱度應(yīng)用商店用戶評分變化如板球季期間，UC News的印度“人拉人”活動：

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

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

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

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

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

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

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

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

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

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

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

端內(nèi)：自身產(chǎn)品+矩陣產(chǎn)品端外：Whatsapp/Twitter/Facebook/合作APP/微信/微博/其他瀏覽器2）花點(diǎn)時間思考邊緣場景，如

PC端打開網(wǎng)頁會看到什么？（靜態(tài)頁+二維碼？）用戶昵稱的授權(quán)（Whatsapp很OK，F(xiàn)acebook怎么處理？）3）前期既讓研發(fā)設(shè)計(jì)參與，善借外腦，如

創(chuàng)意構(gòu)想時，邀請研發(fā)設(shè)計(jì)參與（確認(rèn)實(shí)現(xiàn)成本、周期、方式、發(fā)散創(chuàng)意、設(shè)計(jì)風(fēng)格）；若非文案外包，要自己把控H5大方向，引導(dǎo)供應(yīng)商提供創(chuàng)意，輔助細(xì)節(jié)、點(diǎn)子、文案；制作H5時，會根據(jù)目標(biāo)人群（to B & to C）產(chǎn)生不同的創(chuàng)意，當(dāng)你決定要開始一場H5 campaign時，你就成為了一活生生的“樞紐”。

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

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

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

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

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

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

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

結(jié)尾

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

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

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

業(yè)務(wù)思路圖

作者：張小喵Miu

紅星成都活動公司（http://m.maxstart-hk.com/）免費(fèi)營銷互動活動制作工具，關(guān)注+引流+促銷，千款游戲活動模板，任意使用，0元體驗(yàn)，無門檻，5分鐘創(chuàng)建微信活動，一鍵發(fā)布，裂變吸粉。大轉(zhuǎn)盤/抽獎/砍價/砸金蛋等微信小游戲免費(fèi)制作。H5制作軟件，免費(fèi)創(chuàng)建微信互動游戲、微信裂變活動分享海報頁面。