H5推广大盘点：你该知道的H5玩法和设计技巧

一款H5产品是需要仔细打磨的，但大部分失败的制作者期望高、投入少、时间急还不动脑，想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处，唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

1. H5已死？

经过几年H5的混战，大家对H5的感觉越来越习以为常，曾经名噪一时的套路当下也难故伎重演。于是“H5已死”的论调一时间甚嚣尘上。

如今到了2017年，H5究竟死不死？在这里先和大家分享一份2017年初H5在线创作平台MAKA发布的《2016年度H5数据报告》[1]。

报告中指出，2016年带商业转化功能的H5从2015年的15%左右攀升至45.5%，翻了三倍之多；2015年的H5以纯内容展示为主，通过H5的趣味性传播带来品牌曝光，而2016年的H5正从单一的展示传播转变为更实际的商业用途。

在H5商业转化方面，最常用功能是报名表单（15.6%）、地图功能（4.3%）、接力功能（2.7%）、投票功能（1.1%）、抽奖功能（0.6%）。

同时，在MAKA上，H5平均页面浏览量1208，高于去年的954，同比增26.6%。这个数据和微信30%月活跃用户增长速度相近似。

从以上数据来看，“H5已死”的论调可能还为时过早。

2. 2016：H5的活法

既然H5还没死，那么现在的H5的传播数据到底怎样呢？我们继续看MAKA的这份报告。

1- 受众地域分布

从数据来看，受众多数来自一线城市，北上广深四个城市是H5访问的主要来源地，这与H5想要接触的目标人群是一致的。其中北京遥遥领先，重庆、成都紧随北上广深。

2- H5访问时间

用户访问高峰集中在午休11:00-14:00和晚上20:00-23:00，与微信公众号的阅读时间分布曲线相近似。具体的推广时间需要结合具体场景，而H5发布的最佳时机由此可见一斑。

3- H5渠道排行

从MAKA平台H5的阅读来源分析，59.6%的用户通过朋友圈进入H5，与2015年相比下降了6个百分点，这个转变可能与微信限制诱导分享有关。此消彼长，从微信公众号浏览量增加7.9%，公众号来源逐渐成为成为一次传播的主要战场。

4- H5阅读页数分析

通过对访问量最高的1000个H5分析，发现高访问量的H5页数多集中在6-10页，其中9页最多，占比高达21.0%。用户向来是非常挑剔的，太过复杂或者异常的操作会导致用户流失。早在2015年就有分析指出[2]，H5层级越深流失率也越大。既要保证传播的内容，也要减少用户流失，6-10页的H5是比较合适的。

5- 最受欢迎的H5形式

H5小游戏曾在朋友圈风靡一时。而2016年刷屏的H5小游戏就没有那么多了，这与微信对诱导分享H5严控有直接关系。1000个高访问量的H5中，以故事营销为主题的H5作品最受用户亲睐，其中包括品牌故事、人生哲学等鸡汤软文的形式展现。内容仍是王道，好的内容更容易被用户接受。

3. 运营目标与受众需求

在设计一个H5之前，首先要明确的是我们的运营目标和受众需求。运营目标会依据最终目的有所不同，针对的受众也有可能因为运营目标不同而发生变化。成功的运营应当是通过满足受众的某种需求，最终实现运营目的。过多倾向于用户，会导致PV上升而CV低迷；过多倾向于运营推广而忽略受众需求，会失去流量最终也达不到目标。

举一个反例，曾一度刷爆朋友圈的著名H5《吴亦凡要入伍》，其通过视频展示的方式很有创意，吴亦凡的帅气形象也深得很多粉丝的心。然而这真的是一支成功的H5吗？如果没有特别注意，很容易误认为这个H5主要是为腾讯新闻做宣传。因为除了腾讯新闻的标题以外，H5的宣传目标“全民突击”游戏名只出现在了结束页的左上角，以及吴亦凡视频的口头描述中。虽然满足了受众（粉丝们）欣赏偶像的需求，可是宣传推广“全民突击”的运营需求却没有真正完成。

总的来说一款H5产品是需要仔细打磨的，但大部分失败的制作者期望高、投入少、时间急还不动脑，想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处，唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

4. 怎样设计一个好的H5？

综合考虑运营目标和受众目标，并结合之前的数据，想要设计一个好的H5需要考虑以下三个方面：

内容创意+诱发传播+优质渠道

1-  内容创意

创意。还是创意。一个好的创意可以把运营需求和受众痛点很好的结合在一起，在安慰或激励用户的同时推广了自身活动、产品或品牌。

案例：Next Idea x 故宫-腾讯

这个H5是腾讯创新大赛报名通知。明朝永乐皇帝朱棣从故宫的画中穿越到现在，戴上太阳镜、唱着rap、跳着骑马舞、玩自拍、发朋友圈……想法很有新意，迎合了创新大赛的主题。

2- 诱发传播

H5内容的触发点，同时也必须是吸引用户的点。在第一时间引诱用户过来点击很重要，否则再好的H5也不会转化成流量。触发点要有诱惑性，提供用户不得不点的理由。这个诱因可以是奖励，可以是触到痛点的文案，可以是美食美色，可以用以下方式：标题吸睛——利用人们的好奇心;悬念营销——制造悬念，引人猜想;红包利诱——“送送送“、“发发发”，受众从来不会拒绝这一套。同时，为了获得需要的宣传效果或者品牌影响力，需要选择合适的传播机制。例如集赞或接力方式，一人发布可以换来可持续的病毒式传播，可以在短时间内造成病毒式影响。

案例：七夕开撕 最美新娘打PK，Baby倪妮你会支持谁？

这个H5是为宣传电影《新娘大作战》制作的。作为剧中的主角，Baby与倪妮是敌对关系。那么谁会赢得最终的胜利呢？投票权在用户的手里，点击花球，抛给两位女神，她们会争抢花球，谁抢到了花球就为自己的获胜机会增加了一票。想要为自己的女神增加更多花球？那就转发给朋友们，为心爱的女神积攒花球吧。

3- 优质渠道

以上三点确立，需要的就是合适的发放渠道了。尽你所能利用所有能推广H5的渠道。目前比较常用的方式：通过公众号的图文群发推广、微信群推广、线下二维码推广，以及前面提到的KOL转发和投稿等。APP和自身公众号的推广算是比较保守的形式，前提是自身APP有足够大的用户群体或者自身公众号有足够多的活跃受众。否则的话，KOL营销，或者找到热衷于创造与转发内容的种子用户，是最有效的方式。

5. H5交互形式案例

目前就交互形式来说，H5在移动端的交互形式无外乎常见的几种：点击，滑动，擦除，长按等等，还有一些产品本身就是H5制作的，这里略去不谈。按照交互轻重程度的区别，H5推广可以分为以下三大类：

• 1 – 展示型交互
• 2 – 引导型交互
• 3 – 游戏型交互

1 – 展示型

对展示型的定义，就是非常简单的，打开H5页面或者几个简单的滑动或点击操作就开始展示内容，对交互的要求最少，对内容的要求最高。这种H5一般就一小段H5视频或者动画，要求在开始展示的一瞬间就抓住受众的注意力。

优缺点

• 优点：易于流畅地呈现一个完整的品牌故事或品牌形象；技术难度较低，交互层级较少。
• 缺点：对内容的要求非常高，而且必须完整观看完整个展示才能达到传播作用。交互形式简单乏味，容易引起受众流失。

展示型交互的常见的表现形式有以下几种。

1-1 视频式

视频式H5最为简单，打开H5就开始播放视频，一直到H5结束。这种H5对于视频内容的要求极高，能不能达到运营目的，就要看视频给不给力了。

案例：薛之谦史上最疯狂的广告-腾讯动漫

1-2 幻灯片式

传统的幻灯片式的播放也属于展示型交互。通过触发切换不同页面内容，一页一页地观看，利用图文和音乐播放来讲故事。比较近的案例如网易云音乐的2016年度总结，通过呈现几组简单数据来记录你与网易云音乐在2016年的过往，既煽情也有趣。

应用场景——由于制作简单，周期短，这种H5展现形式适用于频繁、小型的需求。用在线编辑器的话，不需要任何开发，你只需要要配备一名设计和文案。因此，幻灯片式特别适应定期发布或者结合热点的营销。

幻灯片式的常见玩法可以罗列如下：

1. 话题法，追踪热点事件，发表三观极正或者反弹琵琶的观点；
2. 数据法，用数据说故事，比如每年支付宝微信年末都要做的事情；
3. 科普法，介绍有趣有用或者极其重要却鲜为人知的小知识（想起来我们爸妈的朋友圈了嘛？？？）;
4. 温情法，一个节日的问候，一个对母校的祝福，骗来了数以百万计的转发;
5. 产品介绍法。几页幻灯片切换，介绍一个美好的新产品。

案例：2017春节和家人怎么过？- Airbnb

1-3 空间展示

空间展示指的是讲移动端屏幕当做一个展示窗口，打开后可以通过简单交互（移动或触控）看到很多信息。常见的形式包括全景交互以及一镜到底。

一镜到底算是2016年下半年炒热的一个概念，但是采用这种形式的并不多，因为一般加载的内容多，技术实现复杂。但是用得好的话效果酷炫，展示内容丰富，造成的传播力也强大。2016年天猫双11一镜到底也属于这种播放式的H5，只需要一步操作，就可以看到一个宇宙，让人赞不绝口。类似的，别的厂也做了炫酷的一镜到底展示。

案例：一镜到底、一刀未剪的大剧发布-优酷

这是一个一镜到底+万花筒得设计。进入页面，动画自动播放，镜头从远慢慢拉近，以一镜到底的形式展现youku网站上收录的电视剧、综艺等各类节目，按住屏幕不滑动时，展现方式会变成万花筒，松开则恢复。最后一页到达YOUKU会员推广页面，点击“拉上伙伴一起酷”分享给小伙伴，也可点击“加入会员”跳转到外部链接。
这个H5在整体设计上丰富艳丽，配合动感的音乐，效果炫酷，震撼人心。

2 – 引导型

其实引导型和展示型很像，非常注重内容。之所以将其分开，是因为在这里需要强调一下H5中互动的重要性。毕竟大部分受众是很难坚持静静看完一段视频或者动画的（要不然优酷土豆bilibili的存在就没意义了）。H5和视频相对不同的是它可以加入互动。当我们说一个故事的时候，通过有一定引导的交互让受众和故事有一点点互动，会提升受众的参与感，激励受众继续看下去。因此引导式交互更适用于讲故事。要强调的是，在推广用的H5中，默认界面和故事对用户来说都是新的，所以所有的交互都要有一定程度的引导，否则会让用户不小心迷失在界面中。

优缺点：

• 优点：丰富了用户与H5之间的交互，让用户在阅读过程中始终对故事保持沉浸感。同时安插得好的交互触点可以增强宣传推广作用。
• 缺点：用户依然是在观看中被动地接受故事，参与感并没有实质的提升。

根据内容形式不同，引导式交互的H5可以细分为以下几种交互方式：

2-1 互动视频式

缺乏交互的展示型视频很难长时间吸引注意力，如果是有一定互动性的视频就有意思地多了。这种案例需要精心选择触发时机，配合故事的结构，烘托整个故事的气氛。

案例：首个手机话剧团开张了 – 天猫

这支H5最近很火，一方面它的话剧部分非常魔性，演员很有表现力，视觉冲击感很强，另一方面又结合上恰到好处的交互触点，把控住受众观看的节奏，将“天猫无忧购”这几个字牢牢地印在了人的脑海里。

2-2 小场景式

用户在幻灯片切换这种沉闷无聊的交互中坚持不了几页，所以当下的切换往往会采用小场景方式，每一页是一个场景，在当前场景中制造一个有趣的热点，让用户触发热点切换到下一个场景；或者有多个场景可以选择，每一个场景会有一个互动性的小故事。

案例：妈妈再打我一次-京东母亲节

采用回到小时候挨妈妈打，结合小游戏的形式，引起回忆，带来欢乐。先选择妈妈打你的理由，之后，演绎这个场景，之后随机出现四种打击方法：如来神掌、打狗棍、无影脚、召唤术，每种妈妈打你的方式都配着搞笑夸张的动画，打完还问舒不舒服，认不认错~如果认错就进入主题页，妈妈老了，再也打不动你了，母亲节了，你想妈妈了么？如果不认错，就挨次体验各种被虐招式吧~

2-3 页面探索

设计一个大场景，通过让受众在场景内主动探索来达到运营目的。在探索过程中，受众一边体验着浏览的乐趣，一边接受着H5推广宣传的故事或概念。在探索的最终，受众会被引导到相关的app或者活动页。

案例：杜蕾斯美术馆-杜蕾斯

3 – 游戏式交互

游戏型H5相比于展示型和引导型来说，最注重交互。设计一个简单的小游戏，通过有趣的游戏交互来达到吸引受众的目的，可以满足受众获得感官刺激、打发无聊时间或者炫耀自己的目的。当年神经猫之类的游戏忽然间风靡一时，传播魔力之大令人乍舌。

然而H5游戏在朋友圈的推广作用也有限，一方面H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。另一方面受制于《微信外部链接内容相关管理规范》[3]对H5游戏的限制，微信中传播的小游戏只能是纯游戏，不能含有诱导式的宣传推广内容，否则活不过半天。

不过好的创意依然不缺乏受众，一款设计良好的小游戏也可以间接的将自己的品牌价值或是活动目标推广给广大受众。在这里列举一些常见的类型。

3-1 图片合成

案例：我的小学生照片 – 天天P图

想要炫耀自我吗？想要体验新奇吗？给你机会。通过一键生成图片，让你秒变小学生。

3-2 做测试

一般是比较简单的几步问答选择，就给出一个有意思的测试结果。硬广营销的测试已经基本被封杀了，目前更多的是一些带有预测、恶搞、科普或者祝福意义的测试，然后博取关注公众号或下载APP。

案例：没想到你是这样的安全带 – 滴滴出行

你知道多少关于安全带的知识呢？“汽车安全带雏形是哪个国家呢？”“最先使用三点式安全带是哪个汽车厂商？”“安全带的克星是什么”“乘坐出租车不系安全带可能发生什么”“安全带的织带主要组成成分是什么？”这些问题你知道么？通过一系列测试，案例最终将滴滴的安全出行理念传输给受众。

3-3 抽签

2017年，猎鱼达人给你一个嘚瑟的理由 – 腾讯游戏

腾讯猎鱼达人游戏节日推，通过摇一摇抽福签的形式展开，随后对抽到的福签进行解签，可以进行多次摇取，最后可以跳转app store进行游戏下载赢取红包，还可进行分享。

3-4 原创/移植小游戏

案例：2017年鸡鸡向上- Sigma

加载进入后，进入首页介绍主题“鸡鸡向上”，随后介绍游戏的玩法进入游戏，点击屏幕可以使小鸡跳动起来，左右晃动手机可以控制小鸡的坠落方向，除了灯笼外里面还有各种小道具，跳到小道具上可以使小鸡变身哦。想要不停向上，那么就来挑战吧。

当下H5游戏也有了很多新玩法，例如双屏互动、地理定位、声音识别、面部识别，就不一一详细列举了。。

以上就是2017年关于H5的一些基础知识。挂一漏万说了很多，总的来说一款H5产品是需要仔细打磨的，但大部分失败的制作者期望高、投入少、时间急还不动脑，想靠一款粗糙的H5产品来引爆朋友圈。这种思维在当下H5产品竞争中毫无可取之处，唯有真正从产品与用户两个角度出发才能尽量避免产品的失败。

参考资料：

• [1]  马东尼. MAKA发布《2016年度H5数据报告》：H5上升趋势明显.http://www.jiemian.com/article/1081611.html.
• [2]  一只耳大王. h5产品失败的的常见原因解析. http://www.devstore.cn/essay/essayInfo/930.html.
• [3]  微信外部链接内容相关管理规范. http://weixin.qq.com/cgi-bin/readtemplate?t=weixin_external_links_content_management_specification.

部分案例来自于H5分享网站：www.h5-share.com。

 

作者：程望舒

来源： 携程设计委员会

版权：人人都是产品经理遵循行业规范，任何转载的稿件都会明确标注作者和来源，若标注有误，请联系主编QQ：419297645