【H5項(xiàng)目總結(jié)】“小五語(yǔ)音情書”H5創(chuàng)作全過程
嗨，大家好，我是“H5案例分享”公眾號(hào)的小五，微信號(hào)guanfangxiao5，上面這個(gè)H5案例叫“小五語(yǔ)音情書”，這次就分享這支H5的生產(chǎn)過程。
這支H5在（春節(jié)、情人節(jié)）時(shí)上線，效果很不錯(cuò)，這次我來個(gè)創(chuàng)作全解析：從創(chuàng)意、策劃，到設(shè)計(jì)、開發(fā)，再到上線、傳播，最后的數(shù)據(jù)及效果，給大家分享一個(gè)關(guān)于“愛情”的故事。
如果還沒有體驗(yàn)過“小五情書”的讀者，可以點(diǎn)擊“H5案例分享”（微信公眾號(hào)：h5-share）底部第一個(gè)菜單“小五情書”，根據(jù)反饋的文字回復(fù)“520”，即可以體驗(yàn)。
當(dāng)然，如果你沒有關(guān)注微信公眾號(hào)：H5案例分享，需要關(guān)注一下先。
不啰嗦，開始啦：
00 背景
“H5案例分享” 微信公眾號(hào)從2015年7月開創(chuàng)，堅(jiān)持每天分享至少1個(gè)創(chuàng)意H5案例，到2016年底，已經(jīng)累積了近100000粉絲。
為讓用戶能持續(xù)的通過這個(gè)號(hào)，方便獲取“高質(zhì)創(chuàng)意H5案例”和H5相關(guān)干貨，小五做了一些工作：
① 成立了8個(gè)微信群（案例分享、公開課）；
② 上線了h5-share.com網(wǎng)站：可以搜“創(chuàng)意H5”；
③ 上線了語(yǔ)音搜：跟公眾號(hào)語(yǔ)音說一個(gè)關(guān)鍵詞，返回“創(chuàng)意H5”；
④ 開通了投稿：不管是個(gè)人，還是公司，只要H5優(yōu)質(zhì)，小五就會(huì)接收。可以將H5鏈接發(fā)到郵箱：tougao@h5-share.com，也可以從我們的網(wǎng)站/公眾號(hào)入口提交。
問題來了
如何在過節(jié)（春節(jié)、情人節(jié)）的時(shí)候，跟粉絲互動(dòng)一下，讓關(guān)注很久的老粉活動(dòng)一下筋骨？
01目標(biāo)
只促活，不拉新。
目標(biāo)用戶：
活躍已關(guān)注“H5案例分享”（微信公眾號(hào)：h5-share）的粉絲用戶；
“H5案例分享”微信群里的用戶；
“H5案例分享”網(wǎng)站（http://www.h5-share.com）的用戶。
02 創(chuàng)意及策劃
簡(jiǎn)單解釋一下“創(chuàng)意”和“策劃”：
創(chuàng)意：一個(gè)idea，這個(gè)idea的目的和大體思路；
策劃：將“創(chuàng)意”分解到每一屏，每一個(gè)元素和邏輯。
以“小五語(yǔ)音情書”H5為例：
創(chuàng)意：以“語(yǔ)音情書”的形式展現(xiàn)，讓用戶看情書、聽聲音，感受陪伴和愛；
策劃：
p0-Loading加載；
p1-情書信封；
p2-語(yǔ)音情書；
p3-未關(guān)注用戶看到格式
小五選的策劃工具是：Axure RP Pro7.0
策劃稿大致長(zhǎng)這個(gè)樣子：
策劃思路：
以“小五語(yǔ)音情書”為主題，用 “小五”“語(yǔ)音”“情書”三個(gè)點(diǎn)來引起大家興趣，大家在體驗(yàn)“情書”的過程中，再生成“榮譽(yù)證書”，不期分享，只要用戶認(rèn)真讀完，就能產(chǎn)生兩點(diǎn)效果：
大家用行動(dòng)證明了“陪伴”；
真愛小五（愛，就深愛，不愛，才離開）；
如果有未關(guān)注公眾號(hào)的用戶通過分享鏈接進(jìn)入這支H5，因?yàn)?span style="color: rgb(255, 51, 102);">微信靜默授權(quán)調(diào)不起來，所以無(wú)法正常展現(xiàn)（細(xì)節(jié)會(huì)在后面的“開發(fā)”部分說明），就給一個(gè)關(guān)注公眾號(hào)的引導(dǎo)頁(yè)面。
關(guān)于小五
“H5案例分享”微信號(hào)的客服人員，不管是公眾號(hào)粉友，還是微信群里的群友，還是網(wǎng)站上的網(wǎng)友，一直以來，都在猜測(cè)Ta是男生還是女生，我們團(tuán)隊(duì)一直沒有正面回答過這個(gè)問題，所以，大量粉絲一直存疑，“好奇心”驅(qū)使，會(huì)使用戶/粉絲去看下“熟悉又陌生”的小五在搞什么鬼。
關(guān)于語(yǔ)音
排除上面好奇心的因素，主要考慮比文字、圖片更形象的交互方式，一是語(yǔ)音，一是視頻，后者被小五直接拒絕，所以，用小五好聽的聲音，也是不錯(cuò)的一種選擇。
關(guān)于情書
訴情點(diǎn)有4個(gè)：
陪伴，通過微信靜默授權(quán)，獲取用戶昵稱、頭像、關(guān)注時(shí)間，參與感和時(shí)間，讓用戶感覺到溫度，“關(guān)注天數(shù)”會(huì)讓用戶驚嘆時(shí)間的無(wú)聲無(wú)息，轉(zhuǎn)眼已關(guān)注400多天；
信+聲音，靜靜的文字流淌在信紙上，小五一直覺得很親切，像情人在安靜的傾訴，而你一直在靜聽；打破安靜，來段語(yǔ)音，好像更活潑和生動(dòng)，使看信的人心情更近一步；
榮譽(yù)證書，根據(jù)關(guān)注天數(shù)，生成帶用戶昵稱的榮譽(yù)證書，榮譽(yù)感和儀式感滿滿。證書直接采用lol英雄聯(lián)盟的等級(jí)+延展；
互動(dòng)，調(diào)研用戶想與小五做哪些事情（找H5，做H5，學(xué)H5，推H5），用戶點(diǎn)選后，進(jìn)入落款；
關(guān)于策劃，補(bǔ)充兩點(diǎn)：
1. 策劃工具：大家不用糾結(jié)于策劃工具，它是輔助溝通策劃細(xì)節(jié)用的，重要的是策劃內(nèi)容，而不是形式。可以是手畫的草圖，也可以是Word、PPT，只要能說明白就好。Axure當(dāng)然也是很好的選擇，快速高效，修改靈活，還能迅速發(fā)布成web格式，供異地團(tuán)隊(duì)線上同步交流。
2. 微信API：就是微信應(yīng)用開發(fā)接口文檔，對(duì)于依托于微信公眾號(hào)（訂閱號(hào)、服務(wù)號(hào)、企業(yè)號(hào)、小程序）來開發(fā)的H5（或者小產(chǎn)品），一定要仔細(xì)研讀微信接口，不然，一些策劃的功能，壓根就無(wú)法實(shí)現(xiàn)。
03 設(shè)計(jì)：視覺及交互
信封
一種信紙，多種顏色，用戶每次進(jìn)來顯示不同顏色，代表不同心情。
用戶點(diǎn)擊“紅心”拆封，才能悄悄進(jìn)入。
信紙
同信封一致，信封有20種顏色，信紙也有20種，只是想讓用戶打開這支H5時(shí)，稍微有一些心情上的調(diào)整，視覺上的五顏六色，會(huì)影響豐富多彩的小心情噠。
這封信讀完大約需要50秒，有5次交互。
榮譽(yù)證書
玩lol的朋友，可能看著會(huì)比較眼熟，沒錯(cuò)，這就是“英雄聯(lián)盟”里的天梯級(jí)別。
每個(gè)徽章，象征著不同的級(jí)別、力量和榮譽(yù)，獲取的難度也不同。
長(zhǎng)按可以保存“榮譽(yù)證書”，分享不分享全憑自愿。
而關(guān)注和陪伴小五的粉絲們，把這種力量和榮譽(yù)，傳遞給了小五，才使得小五找到了堅(jiān)持下去的方向和力量，這份力量和榮譽(yù)，應(yīng)該共享。
小五認(rèn)為“鉆石級(jí)”的徽章最好看，你認(rèn)為呢，可以在留言區(qū)PK小五的審美。
小五頭像
魔鬼往往藏在細(xì)節(jié)中。
為了這支H5，小五有了自己的頭像形象，并且還有很多。
設(shè)計(jì)師給我弄的5個(gè)粗手指，跟我苗條的內(nèi)心嚴(yán)重不相匹配。
第一眼看到這個(gè)設(shè)計(jì)，內(nèi)心默默喊了一句：“五魁首”
名字下方的“別點(diǎn)我”，最后定稿時(shí)改成了“點(diǎn)點(diǎn)我”，輕點(diǎn)頭像即可看所有的小五形象。
用戶交互
找H5、學(xué)H5、做H5、推H5，輕點(diǎn)一下，小五就接收到你的心聲了。
未關(guān)注用戶頁(yè)面
直接告訴用戶，關(guān)注、交互后，可以獲取體驗(yàn)鏈接。
整體設(shè)計(jì)理念：簡(jiǎn)單、簡(jiǎn)潔、簡(jiǎn)約。
不要讓用戶思考，一看就明白；
用戶不仔細(xì)看文字也沒有關(guān)系，一聽就明白；
用戶不聽不看，也要讓其感受到小五用心的氣息。
04 開發(fā)
對(duì)于設(shè)計(jì)稿到H5的轉(zhuǎn)化，小五習(xí)慣于用代碼開發(fā)，涉及技術(shù)：
HTML
CSS
JavaScript
課程預(yù)告
“H5案例分享”團(tuán)隊(duì)的技術(shù)大牛，會(huì)在下周五（3月10日）單獨(dú)開一次公開課，step by step講“小五語(yǔ)音情書”開發(fā)的細(xì)節(jié)和過程，感興趣的可以先加小五微信，開課前拉大家入群，微信號(hào)：guanfangxiao5
當(dāng)然，有一些設(shè)計(jì)、運(yùn)營(yíng)和新媒體崗的同學(xué)，不懂代碼開發(fā)，兩種方式：
找技術(shù)的小伙伴支持；
自己研究一些H5工具平臺(tái)，有的平臺(tái)功能還是很豐富的。
這里不逐行講代碼啦，那分析“小五語(yǔ)音情書”H5案例最核心的一個(gè)微信API接口，這個(gè)接口直接影響了H5的傳播和展現(xiàn)形式，如下：
想獲取用戶的昵稱、頭像和關(guān)注時(shí)間，需要有一個(gè)前提：在關(guān)注者與公眾號(hào)產(chǎn)生消息交互后。這個(gè)前提，其實(shí)要求用戶滿足兩個(gè)行為：一是關(guān)注過公眾號(hào)；二是與公眾號(hào)產(chǎn)生過消息交互。
這樣調(diào)取接口的好處只有一個(gè)：不讓用戶顯示授權(quán)。
但根據(jù)這個(gè)接口的限制要求，導(dǎo)致了這支H5：
入口：只能是微信公眾號(hào)底部菜單，先與公眾號(hào)交互后，才能體驗(yàn)；
傳播：不利于朋友圈分享，只能引導(dǎo)用戶“先關(guān)注、再體驗(yàn)”；
對(duì)應(yīng)公眾號(hào)的影響：
將微信公眾號(hào)從“編輯模式”改成“開發(fā)模式”，可以接收參數(shù)給后臺(tái)
如果想做類似H5的小伙伴，一定要先弄清楚你們的公眾號(hào)是否支持開發(fā)模式，不然，后續(xù)會(huì)很麻煩。
05 傳播
2017春節(jié)放假前，最后一天（1月24日）下午，“小五語(yǔ)音情書”悄悄上線。
最先，發(fā)力的是小五個(gè)人的朋友圈，有熱心的粉絲將“榮譽(yù)證書”扔到群里，引發(fā)了“這是從哪里來的”眾多疑問。
其次，隨著這些問題在8個(gè)微信群里引爆后，干脆就直接將“小五語(yǔ)音情書”里的榮譽(yù)證書獲取方式在群里公布，頓時(shí)，后臺(tái)就慢了，慢了...
之后，就是春節(jié)和情人節(jié)的小五交互，你只需要將“榮譽(yù)證書”私信給小五，小五就發(fā)一個(gè)小紅包。兩個(gè)節(jié)日，小五手動(dòng)發(fā)了超過500+個(gè)紅包，雖然紅包額度不大。
收到小五微信紅包的童鞋，自動(dòng)在“留言區(qū)”打1，沒有收到的，趕緊發(fā)證書，私信小五。
最后，就是菜單的長(zhǎng)尾效應(yīng)了，現(xiàn)在每天都會(huì)有幾十個(gè)新老粉絲，對(duì)小五說“520”（我愛你），這句話真好聽，一輩子都聽不煩。
謝謝各位粉絲們的厚愛~
06 迭代
“小五語(yǔ)音情書”上線后，在跟粉絲互動(dòng)的過程中，我們獲得了以下反饋：
榮譽(yù)證書沒有用戶昵稱，不知道這是誰(shuí)的證書；
Loading太慢，半天進(jìn)不去；
進(jìn)入后，是一個(gè)信封，沒有看到信和證書；
看到信了，卻找不到“榮譽(yù)證書”。
我們做了以下優(yōu)化和迭代：
將用戶微信昵稱直接合成到榮譽(yù)證書上，每個(gè)人每天獲取的都不一樣；
優(yōu)化素材大小和加載機(jī)制，發(fā)現(xiàn)第2次上線更換音樂時(shí)，有一個(gè)4M的《i remember》未壓縮；
在信封處，增加了動(dòng)態(tài)“箭頭”指引；
在信的內(nèi)容頁(yè)，語(yǔ)音、榮譽(yù)證書、選項(xiàng)上均增加“小手”引導(dǎo)；
07 總結(jié)
如果不做這支H5，不知道那么多粉絲用戶，對(duì)小五不離不棄；
如果不做這支H5，不知道你已經(jīng)陪伴了小五好多“年”；
如果不做這支H5，就聽不到很多粉絲的反饋和激勵(lì)；
如果不做這支H5，錯(cuò)過也就錯(cuò)過了。
陪伴，是最長(zhǎng)情的告白，
你們的愛，小五get到了。
小五會(huì)一如既往分享優(yōu)質(zhì)創(chuàng)意H5案例，
歡迎大家和小五一起學(xué)習(xí)、成長(zhǎng)和分享。
這次H5一共產(chǎn)生“榮譽(yù)證書”3900+張，
小五發(fā)出去的小紅包500+個(gè)，
不是小五喚醒了你，
而是你，
感動(dòng)到了小五。
運(yùn)營(yíng)公眾號(hào)號(hào)的小伙伴么，
憑借最好看的“鉆石級(jí)”榮譽(yù)證書，
可以從小五處免費(fèi)獲取“小五語(yǔ)音情書”【全套源代碼和素材包】。
好了，看看下面的榮譽(yù)證書，有木有你的：
這么辛苦看到最后了，再告訴你兩個(gè)點(diǎn)：
關(guān)注時(shí)間是實(shí)時(shí)獲取的，隨著時(shí)間，你的關(guān)注天數(shù)會(huì)增加；
如果取消關(guān)注，再關(guān)注，以最新關(guān)注時(shí)間為準(zhǔn)。
和小五一起向【骨灰級(jí)】粉絲進(jìn)發(fā)吧~
找創(chuàng)意H5，上 h5-share.com
這是小五的“H5案例分享”公眾號(hào)二維碼，關(guān)注后和小五親密互動(dòng)吧
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）