【H5项目总结】“小五语音情书”H5创作全过程
嗨，大家好，我是“H5案例分享”公众号的小五，微信号guanfangxiao5，上面这个H5案例叫“小五语音情书”，这次就分享这支H5的生产过程。
这支H5在（春节、情人节）时上线，效果很不错，这次我来个创作全解析：从创意、策划，到设计、开发，再到上线、传播，最后的数据及效果，给大家分享一个关于“爱情”的故事。
如果还没有体验过“小五情书”的读者，可以点击“H5案例分享”（微信公众号：h5-share）底部第一个菜单“小五情书”，根据反馈的文字回复“520”，即可以体验。
当然，如果你没有关注微信公众号：H5案例分享，需要关注一下先。
不啰嗦，开始啦：
00 背景
“H5案例分享” 微信公众号从2015年7月开创，坚持每天分享至少1个创意H5案例，到2016年底，已经累积了近100000粉丝。
为让用户能持续的通过这个号，方便获取“高质创意H5案例”和H5相关干货，小五做了一些工作：
① 成立了8个微信群（案例分享、公开课）；
② 上线了h5-share.com网站：可以搜“创意H5”；
③ 上线了语音搜：跟公众号语音说一个关键词，返回“创意H5”；
④ 开通了投稿：不管是个人，还是公司，只要H5优质，小五就会接收。可以将H5链接发到邮箱：tougao@h5-share.com，也可以从我们的网站/公众号入口提交。
问题来了
如何在过节（春节、情人节）的时候，跟粉丝互动一下，让关注很久的老粉活动一下筋骨？
01目标
只促活，不拉新。
目标用户：
活跃已关注“H5案例分享”（微信公众号：h5-share）的粉丝用户；
“H5案例分享”微信群里的用户；
“H5案例分享”网站（http://www.h5-share.com）的用户。
02 创意及策划
简单解释一下“创意”和“策划”：
创意：一个idea，这个idea的目的和大体思路；
策划：将“创意”分解到每一屏，每一个元素和逻辑。
以“小五语音情书”H5为例：
创意：以“语音情书”的形式展现，让用户看情书、听声音，感受陪伴和爱；
策划：
p0-Loading加载；
p1-情书信封；
p2-语音情书；
p3-未关注用户看到格式
小五选的策划工具是：Axure RP Pro7.0
策划稿大致长这个样子：
策划思路：
以“小五语音情书”为主题，用 “小五”“语音”“情书”三个点来引起大家兴趣，大家在体验“情书”的过程中，再生成“荣誉证书”，不期分享，只要用户认真读完，就能产生两点效果：
大家用行动证明了“陪伴”；
真爱小五（爱，就深爱，不爱，才离开）；
如果有未关注公众号的用户通过分享链接进入这支H5，因为微信静默授权调不起来，所以无法正常展现（细节会在后面的“开发”部分说明），就给一个关注公众号的引导页面。
关于小五
“H5案例分享”微信号的客服人员，不管是公众号粉友，还是微信群里的群友，还是网站上的网友，一直以来，都在猜测Ta是男生还是女生，我们团队一直没有正面回答过这个问题，所以，大量粉丝一直存疑，“好奇心”驱使，会使用户/粉丝去看下“熟悉又陌生”的小五在搞什么鬼。
关于语音
排除上面好奇心的因素，主要考虑比文字、图片更形象的交互方式，一是语音，一是视频，后者被小五直接拒绝，所以，用小五好听的声音，也是不错的一种选择。
关于情书
诉情点有4个：
陪伴，通过微信静默授权，获取用户昵称、头像、关注时间，参与感和时间，让用户感觉到温度，“关注天数”会让用户惊叹时间的无声无息，转眼已关注400多天；
信+声音，静静的文字流淌在信纸上，小五一直觉得很亲切，像情人在安静的倾诉，而你一直在静听；打破安静，来段语音，好像更活泼和生动，使看信的人心情更近一步；
荣誉证书，根据关注天数，生成带用户昵称的荣誉证书，荣誉感和仪式感满满。证书直接采用lol英雄联盟的等级+延展；
互动，调研用户想与小五做哪些事情（找H5，做H5，学H5，推H5），用户点选后，进入落款；
关于策划，补充两点：
1. 策划工具：大家不用纠结于策划工具，它是辅助沟通策划细节用的，重要的是策划内容，而不是形式。可以是手画的草图，也可以是Word、PPT，只要能说明白就好。Axure当然也是很好的选择，快速高效，修改灵活，还能迅速发布成web格式，供异地团队线上同步交流。
2. 微信API：就是微信应用开发接口文档，对于依托于微信公众号（订阅号、服务号、企业号、小程序）来开发的H5（或者小产品），一定要仔细研读微信接口，不然，一些策划的功能，压根就无法实现。
03 设计：视觉及交互
信封
一种信纸，多种颜色，用户每次进来显示不同颜色，代表不同心情。
用户点击“红心”拆封，才能悄悄进入。
信纸
同信封一致，信封有20种颜色，信纸也有20种，只是想让用户打开这支H5时，稍微有一些心情上的调整，视觉上的五颜六色，会影响丰富多彩的小心情哒。
这封信读完大约需要50秒，有5次交互。
荣誉证书
玩lol的朋友，可能看着会比较眼熟，没错，这就是“英雄联盟”里的天梯级别。
每个徽章，象征着不同的级别、力量和荣誉，获取的难度也不同。
长按可以保存“荣誉证书”，分享不分享全凭自愿。
而关注和陪伴小五的粉丝们，把这种力量和荣誉，传递给了小五，才使得小五找到了坚持下去的方向和力量，这份力量和荣誉，应该共享。
小五认为“钻石级”的徽章最好看，你认为呢，可以在留言区PK小五的审美。
小五头像
魔鬼往往藏在细节中。
为了这支H5，小五有了自己的头像形象，并且还有很多。
设计师给我弄的5个粗手指，跟我苗条的内心严重不相匹配。
第一眼看到这个设计，内心默默喊了一句：“五魁首”
名字下方的“别点我”，最后定稿时改成了“点点我”，轻点头像即可看所有的小五形象。
用户交互
找H5、学H5、做H5、推H5，轻点一下，小五就接收到你的心声了。
未关注用户页面
直接告诉用户，关注、交互后，可以获取体验链接。
整体设计理念：简单、简洁、简约。
不要让用户思考，一看就明白；
用户不仔细看文字也没有关系，一听就明白；
用户不听不看，也要让其感受到小五用心的气息。
04 开发
对于设计稿到H5的转化，小五习惯于用代码开发，涉及技术：
HTML
CSS
JavaScript
课程预告
“H5案例分享”团队的技术大牛，会在下周五（3月10日）单独开一次公开课，step by step讲“小五语音情书”开发的细节和过程，感兴趣的可以先加小五微信，开课前拉大家入群，微信号：guanfangxiao5
当然，有一些设计、运营和新媒体岗的同学，不懂代码开发，两种方式：
找技术的小伙伴支持；
自己研究一些H5工具平台，有的平台功能还是很丰富的。
这里不逐行讲代码啦，那分析“小五语音情书”H5案例最核心的一个微信API接口，这个接口直接影响了H5的传播和展现形式，如下：
想获取用户的昵称、头像和关注时间，需要有一个前提：在关注者与公众号产生消息交互后。这个前提，其实要求用户满足两个行为：一是关注过公众号；二是与公众号产生过消息交互。
这样调取接口的好处只有一个：不让用户显示授权。
但根据这个接口的限制要求，导致了这支H5：
入口：只能是微信公众号底部菜单，先与公众号交互后，才能体验；
传播：不利于朋友圈分享，只能引导用户“先关注、再体验”；
对应公众号的影响：
将微信公众号从“编辑模式”改成“开发模式”，可以接收参数给后台
如果想做类似H5的小伙伴，一定要先弄清楚你们的公众号是否支持开发模式，不然，后续会很麻烦。
05 传播
2017春节放假前，最后一天（1月24日）下午，“小五语音情书”悄悄上线。
最先，发力的是小五个人的朋友圈，有热心的粉丝将“荣誉证书”扔到群里，引发了“这是从哪里来的”众多疑问。
其次，随着这些问题在8个微信群里引爆后，干脆就直接将“小五语音情书”里的荣誉证书获取方式在群里公布，顿时，后台就慢了，慢了...
之后，就是春节和情人节的小五交互，你只需要将“荣誉证书”私信给小五，小五就发一个小红包。两个节日，小五手动发了超过500+个红包，虽然红包额度不大。
收到小五微信红包的童鞋，自动在“留言区”打1，没有收到的，赶紧发证书，私信小五。
最后，就是菜单的长尾效应了，现在每天都会有几十个新老粉丝，对小五说“520”（我爱你），这句话真好听，一辈子都听不烦。
谢谢各位粉丝们的厚爱~
06 迭代
“小五语音情书”上线后，在跟粉丝互动的过程中，我们获得了以下反馈：
荣誉证书没有用户昵称，不知道这是谁的证书；
Loading太慢，半天进不去；
进入后，是一个信封，没有看到信和证书；
看到信了，却找不到“荣誉证书”。
我们做了以下优化和迭代：
将用户微信昵称直接合成到荣誉证书上，每个人每天获取的都不一样；
优化素材大小和加载机制，发现第2次上线更换音乐时，有一个4M的《i remember》未压缩；
在信封处，增加了动态“箭头”指引；
在信的内容页，语音、荣誉证书、选项上均增加“小手”引导；
07 总结
如果不做这支H5，不知道那么多粉丝用户，对小五不离不弃；
如果不做这支H5，不知道你已经陪伴了小五好多“年”；
如果不做这支H5，就听不到很多粉丝的反馈和激励；
如果不做这支H5，错过也就错过了。
陪伴，是最长情的告白，
你们的爱，小五get到了。
小五会一如既往分享优质创意H5案例，
欢迎大家和小五一起学习、成长和分享。
这次H5一共产生“荣誉证书”3900+张，
小五发出去的小红包500+个，
不是小五唤醒了你，
而是你，
感动到了小五。
运营公众号号的小伙伴么，
凭借最好看的“钻石级”荣誉证书，
可以从小五处免费获取“小五语音情书”【全套源代码和素材包】。
好了，看看下面的荣誉证书，有木有你的：
这么辛苦看到最后了，再告诉你两个点：
关注时间是实时获取的，随着时间，你的关注天数会增加；
如果取消关注，再关注，以最新关注时间为准。
和小五一起向【骨灰级】粉丝进发吧~
找创意H5，上 h5-share.com
这是小五的“H5案例分享”公众号二维码，关注后和小五亲密互动吧
参与评论
参与评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）