嗨，大家好，我是“H5案例分享”公众号的小五，上面这个H5案例叫“小五语音情书”，这次就分享这支H5的生产过程。

这支H5在（春节、情人节）时上线，效果很不错，这次我来个创作全解析：从创意、策划，到设计、开发，再到上线、传播，最后的数据及效果，给大家分享一个关于“爱情”的故事。

如果还没有体验过“小五情书”的读者，可以点击微信公众号“H5案例分享”底部第一个菜单“小五情书”，根据反馈的文字回复“520”，即可以体验。

不啰嗦，开始啦：

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+个，

不是小五唤醒了你，

而是你，

感动到了小五。

运营公众号号的小伙伴么，

凭借最好看的“钻石级”荣誉证书，

可以从小五处免费获取“小五语音情书”【全套源代码和素材包】。

这么辛苦看到最后了，再告诉你两个点：

1.关注时间是实时获取的，随着时间，你的关注天数会增加；

2.如果取消关注，再关注，以最新关注时间为准。

和小五一起向【骨灰级】粉丝进发吧~