一、H5总体情况（via MAKA的H5报告）
1.1 访问时间
用户访问高峰集中在无袖11:00-14:00和晚上20:00-23:00，与微信公众号的阅读时间分布曲线近似。
1.2 H5渠道排行（2016）
| 朋友圈 | 公众号 | 微信群 | 其他 |
|---|---|---|---|
| 59.6% | 21.1% | 8.2% | 11.1% |
1.3 阅读页数分析
在对访问量统计最高的1000个H5进行分析：
| 1-5页 | 6-10页 | 11-15页 | 16-20页 | 20页以上 |
|---|---|---|---|---|
| 8.3% | 45.1% | 25.5% | 13.2% | 7.9% |
1.4 最受欢迎形式
故事营销(32.9%)>节日营销(19.2%)>企业招聘(15.9%)>邀请函(15.6%)>新闻热点(7.2%)
二、如何设计一个H5
考虑运营目标（业务方）和受众目标（用户）两方面的因素，设计一个好的H5需要：
2.1 内容创意
创意除了让用户看到内容产生惊喜之外，还需要把运营需求和受众痛点结合在一起。
安慰或者激励用户的同时推广自身活动、产品或者品牌。
e.g. 案例：Next Idea x 故宫-腾讯
这个H5是腾讯创新大赛报名通知。明朝永乐皇帝朱棣从故宫的画中穿越到现在，戴上太阳镜、唱着rap、跳着骑马舞、玩自拍、发朋友圈……想法很有新意，迎合了创新大赛的主题。
2.2 诱发传播 = 诱因+传播机制
一个诱惑性的出发点，即传播的诱因 —— 奖励、触及痛点的文案等
例如，标题吸睛——利用人们的好奇心;悬念营销——制造悬念，引人猜想;红包利诱——“送送送“、“发发发”。
在传播方面，集赞或接力方式，一人发布可以换来可持续的病毒式传播，可以在短时间内造成病毒式影响。
案例：七夕开撕 最美新娘打PK，Baby倪妮你会支持谁？
这个H5是为宣传电影《新娘大作战》制作的。作为剧中的主角，Baby与倪妮是敌对关系。那么谁会赢得最终的胜利呢？投票权在用户的手里，点击花球，抛给两位女神，她们会争抢花球，谁抢到了花球就为自己的获胜机会增加了一票。想要为自己的女神增加更多花球？那就转发给朋友们，为心爱的女神积攒花球吧。
2.3 优质渠道
目前比较常用的方式：通过公众号的图文群发推广、微信群推广、线下二维码推广，以及前面提到的KOL转发和投稿等。APP和自身公众号的推广算是比较保守的形式，前提是自身APP有足够大的用户群体或者自身公众号有足够多的活跃受众。否则的话，KOL营销，或者找到热衷于创造与转发内容的种子用户，是最有效的方式。
三、H5的交互形式
H5在移动端的操作动作：点击、滑动、擦除、长按等。如果按照交互轻重程度来分类：
- 展示型交互
- 引导型交互
- 游戏型交互
3.1 展示型
优点：易于流畅地呈现一个完整地品牌故事或者形象；技术难度低；交互层级少
缺点：对内容要求比较高，而且用户需要看完才能起到最好地传播效果。交互形式乏味，容易流失用户。
视频式H5最为简单，打开H5就开始播放视频，一直到H5结束。这种H5对于视频内容的要求极高，能不能达到运营目的，就要看视频给不给力了。
a. 话题法，追踪热点事件，发表三观极正或者反弹琵琶的观点；
b. 数据法，用数据说故事，比如每年支付宝微信年末都要做的事情；
c. 科普法，介绍有趣有用或者极其重要却鲜为人知的小知识（想起来我们爸妈的朋友圈了嘛）;
d. 温情法，一个节日的问候，一个对母校的祝福，骗来了数以百万计的转发;
e. 产品介绍法。几页幻灯片切换，介绍一个美好的新产品。
空间展示指的是讲移动端屏幕当做一个展示窗口，打开后可以通过简单交互（移动或触控）看到很多信息。
常见的形式包括全景交互以及一镜到底。
3.2 引导型
引导型除了注重内容，相比展示型增加了一些互动性。
优点：丰富了用户与H5之间的交互，让用户在阅读过程中始终对故事保持沉浸感。同时安插得好的交互触点可以增强宣传推广作用。
缺点：用户依然是在观看中被动地接受故事，参与感并没有实质的提升。
精心选择触发时机，配合故事的结构，烘托整个故事的气氛。
案例：首个手机话剧团开张了 – 天猫
这支H5最近很火，一方面它的话剧部分非常魔性，演员很有表现力，视觉冲击感很强，另一方面又结合上恰到好处的交互触点，把控住受众观看的节奏，将“天猫无忧购”这几个字牢牢地印在了人的脑海里。
用户在幻灯片切换这种沉闷无聊的交互中坚持不了几页，所以当下的切换往往会采用小场景方式，每一页是一个场景，在当前场景中制造一个有趣的热点，让用户触发热点切换到下一个场景；或者有多个场景可以选择，每一个场景会有一个互动性的小故事。
案例：妈妈再打我一次-京东母亲节
采用回到小时候挨妈妈打，结合小游戏的形式，引起回忆，带来欢乐。先选择妈妈打你的理由，之后，演绎这个场景，之后随机出现四种打击方法：如来神掌、打狗棍、无影脚、召唤术，每种妈妈打你的方式都配着搞笑夸张的动画，打完还问舒不舒服，认不认错~如果认错就进入主题页，妈妈老了，再也打不动你了，母亲节了，你想妈妈了么？如果不认错，就挨次体验各种被虐招式吧~
设计一个大场景，通过让受众在场景内主动探索来达到运营目的。在探索过程中，受众一边体验着浏览的乐趣，一边接受着H5推广宣传的故事或概念。在探索的最终，受众会被引导到相关的app或者活动页。
案例：杜勒斯美术馆
3.3 游戏型
通过有趣的游戏交互来达到吸引受众的目的，可以满足受众获得感官刺激、打发无聊时间或者炫耀自己的目的。一款设计良好的小游戏也可以间接的将自己的品牌价值或是活动目标推广给广大受众。
然而H5游戏在朋友圈的推广作用也有限，一方面H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。
案例：我的小学生照片 – 天天P图
一般是比较简单的几步问答选择，就给出一个有意思的测试结果。硬广营销的测试已经基本被封杀了，目前更多的是一些带有预测、恶搞、科普或者祝福意义的测试，然后博取关注公众号或下载APP。
案例：没想到你是这样的安全带 – 滴滴出行
测试完成给予红包奖励引导用户下载APP
基本同3.2
2017年，猎鱼达人给你一个嘚瑟的理由 – 腾讯游戏
腾讯猎鱼达人游戏节日推，通过摇一摇抽福签的形式展开，随后对抽到的福签进行解签，可以进行多次摇取，最后可以跳转app store进行游戏下载赢取红包，还可进行分享。
- 原创/移植小游戏
- 双屏互动
- 地理定位
- 声音识别
- 面部识别
四、H5类别与对应玩法
4.1 基于传感器
| 类别 | 玩法或适用场景 |
|---|---|
| 陀螺仪、重力感应 | 体感游戏、摇一摇、全景图/AR转换角度、转动收集制造视差效果 |
| 地理位置 | 提供周边生活服务、展示附近的优惠和广告、运动结合 |
| 人脸识别 | 将用户样貌与节日/游戏/电影等主题元素结合进行宣传的场景、与明星脸相似度、猜测年龄、情绪、模拟化妆等 |
| webRTC | 视频会议、视频聊天、在线教育、在线问诊等音视频通讯的场景 |
4.2 基于触摸屏操作
| 类别 | 玩法或适用场景 |
|---|---|
| 全景交互 | 虚拟全景展示、身临其境的实景展示或活动现场展示 |
| 多屏互动 | 合作/竞技游戏、你画我猜、一问一答、情侣互动、多个屏幕拼接 |
| 单屏滚动 | 公司主页、产品介绍、报告总结、邀请函 |
| 手势操作 | 放大查看、拖拽/旋转等场景、手势解锁、拼图游戏 |
4.3 基于画面呈现
| 类别 | 玩法或适用场景 |
|---|---|
| 视频/动画展示 | 产品、节日、游戏、电影等宣传场景；内容比较丰富的场景 |
| 图片裁剪和变形 | 碎片化的图片转换效果展示场景 |
五、注意事项
5.1 内容策划
创意除了让用户看到内容产生惊喜之外，还需要把运营需求和受众痛点结合在一起。
安慰或者激励用户的同时推广自身活动、产品或者品牌。
5.2 交互体验
总体上交互形式建议单一清晰，结构简单，用户一打开便可以理解场景的结构。
让用户感知产品的“活”。例如，列表点击效果，按钮的三种状态等。
- 点击某一个内容的时候，进行加载，给出加载进度条，确保下级页面打开的时候能够页面完整。图片设置为系统默认图。
- 刷新和导航切换的时候给出加载效果。
优点：满足用户对于进程的感知，以防出现突兀感；优化页面显示，提升用户体验。