打造一款百万级传播HTML 5的技巧（附案例）

H5划页动画，相信大家已再熟悉不过。随着越来越多H5生成工具不断出现和各自功能提升优化，H5制作成本已越来越低，周期越来越短。就推广效果来说，虽然在付费转化率方面的成效一般，但在提升品牌曝光率和事件影响力方面，可以说是广告互联网视觉革命的先行军。

作为移动端主流营销推广方式的一种，虽然曾一度因时效性短、转化成交下单率低、创意成本高等原因广受诟病，但到现在，能依然受各大品牌商和UED团队青睐，还能让微信平台特意为H5推广定制权限规范并为优秀作品大开绿灯。H5的作用影响力可见一斑。

纵观H5整个创作过程：策划、操作逻辑构思、脚本草图绘制、设计制作、开发实现…真的会很嗨，但当大家都在致力于研习H5的不同表现手法时，是否有关注和反思一个问题——我们的H5会不会看起来像是自娱自乐？

终于扯到正题了，high还是要high的，但怎么做到让H5不止于自嗨？

首先了解几种用户现象——什么情况下会促使用户点击或主动转发？

1. 用户发自内心觉得喜欢

戳中用户痛点，自然会引起共鸣。以下痛点，可以试着戳戳看：

1.好玩－互动娱乐类、轻型小游戏。像早前火爆朋友圈的脑洞神作“围住神经猫”和更近百度外卖的“种太阳”。

2.炫酷—开进你朋友圈的宝马的M2上市推广、淘宝造物节全景图重力体验邀请函，还有其他各种牛逼的3D H5、VR H5，一看就跟外面那些五（yao）毛（yan）特（jian）效（huo）不一样。

3.实用—如“十个iPhone手机使用技巧” 和“绝对干货!!旅行收纳实用技巧汇总”，这种一看就low不屑点开，但身体还是会很诚实的点开并悄悄发给身边的好基友。

4.攀比心—晒消费，晒得分，晒皮肤年龄…能满足人艰不拆的小小优越感和大家都晒我也得晒的“被”从众心理。

5.同理心—能引起情感共鸣，细腻走心的内容，像“我们之间就一个字”，和更近频频让人惊艳到的方太抽油烟机广告，还有被淘宝一下就戳中味蕾的鲅鱼水饺…

6.冷知识（涨姿势） — 知乎、果壳、好奇心日报这些内容为王的平台为我们提供的远不止这些。

图1：(部分案例）

2. 利益驱使下被动分享

比起细分领域的礼品，大众优惠项—如返利、优惠券、购物券、电影券等吸引力一般会大一些。

其次要知道几个数据真相：

1.只有微信推送的情况下，H5的活跃周期更多3天；

2.更佳发布推送时间为21点到22点；

3.6～8页为H5更佳浏览页数，P数过多或单P体量过大都会增加H5跳失率。

（图2：H5传播监测分析工具DATASTORY）

了解这些数据后，再来思考几个问题：

1. 活动背景/目的

拉新？留存？促活？提升品牌曝光率？不同目的决定策略方向及投入成本（成本意识很重要）

2. 针对用户群体是哪些

从消费心理角度界定用户群体不同属性，为自己的目标用户量身定制推广题材（来自数英网的一则数据新闻：浏览量更高的1000个H5作品中，42%是心灵鸡汤，更高17,358,480 uv；27%是测试题，更高49,940,339 uv；15%是社交互动游戏，更高2,892,047 uv；5%是大型品牌宣传，更高551,195 uv。）

3.推广渠道定哪些

除了H5本身的吸引力，渠道也是影响传播的重大因素，微信公众号、朋友圈、微信群、微信广告、微博、LinkedIn、QQ群、QQ空间、新闻客户端、App广告、广点通，都是国内H5推广的可行渠道，根据分析目标用户社交习惯，针对性选择渠道来有效提升传播效率。

磨刀不误砍柴工，确定市场需求和推广目的，才有可能保证方案 “先做对，再做好”。（借用DDC运营设计师Gary的经验观点，与市场预期不契合，再好的创意方案也是不能推的）为避免“胎死腹中”的高成本悲剧，还是先做好这些前期准备工作

案例太少是不是看着不够过瘾？那些家喻户晓的H5就不一一赘述了，分享一些身边的案例：

案例一

某广告公司六一儿童节的“自娱自乐”项目，但作为一次小范围、零渠道费的推广，意外收获上万PV，走心的选项题勾起一波80后的浓浓怀旧心，也算是一个不错的case（http://fdc16b73d368.ih5.cn）

案例二

傅园慧受采访第二天粉丝暴涨，同日墨迹天气的小游戏推出，追热点就是要速度够快，他们做到了，2天时间内PV轻松过百万（http://promo.moji.com）

案例三

笔者帮朋友的项目做的设计支持，根据项目要求关键元素：老上海、红色延安、舞台剧来进行分镜创作。由于p数过多，动效繁碎，对加载速度有所影响，算是一个有经验教训的case分享给大家：http://www.miaos.me

H5要兼具娱乐性和推广性，不是件容易事。但如果能兼顾市场需求同时又能让设计“玩”起来，是件听起来挺刺激的事儿。

数据能帮我们验证一些问题和发现一些潜在趋势，但PV／UV也不是衡量推广效果的唯一标准，没有达到百万用户的H5就不是好的营销推广？也不然，定位精准用户，找到适合的推广方式才是重点要考虑的。

文章摘录链接 ：http://www.uisdc.com/great-html-5-design-skills#