一文读懂H5：值得收藏的干货合集

编辑导读：H5作为营销运营的重要手段，好的创意很容易让其在朋友圈刷屏，引起广泛传播。尽管很多人都在谈论H5，但是有些人甚至连H5的定义都不清楚，更别说它的使用场景和玩法了。本文将从运营的角度，围绕H5进行九个角度的分析，希望对你有帮助。

一、什么是H5?

程序猿：H5，是HTML5的简称，不是一项技术，而是一个标准

大家口中的H5只是借助H5标准制作的网页，是对技术的狭义解释，下次不要再问我“这个H5能不能做了”，这是对俺专业的不负责，直接问我“这个手机端PPT能不能做”？

运营喵：H5，是可交互的移动端网页，便于营销推广分享传播

无论是淘宝的“年度账单”还是网易的“饲养手册”，或者是朋友圈经常看到的裂变活动/邀请函/报名表单/电子相册/每日打卡/微商城等，都可以算作运营人眼中的H5。

和甲方爸爸或客户解释技术原理可能比较复杂，因为大部分人都是通过别人家的“H5案例”进行了解的，即使把这些活动统称为“H5”比较狭义，但是却是最接地气的叫法，只是在和技术大大沟通时需要详细描述需求类型，不要含糊的描述为“别人家的H5”。

设计狮：H5，是平面视觉、广告创意设计的分支，需要大量原创设计

对比普通的平面或UI设计，H5的制作需要更多的原创设计。将策划创意在这一步进行视觉实现，需要在沟通时对尺寸、风格、配色、交互逻辑进行梳理确认，最终的效果呈现会和这一关键步骤紧密相关。

二、H5常见使用场景

在图文时代，可交互的H5算是线上营销的“奢侈品”，既酷炫又新颖的活动展现方式能够让用户眼前一亮，但随着“品效合一”的口号，着重品宣效果的展示类H5慢慢被冷落了。

除了看重品宣效果又多金的头部团队还在坚持，中小商家的注意力逐渐放在了转化效果更好的投票/抽奖/拼团/砍价/分销/秒杀等营销类H5。

一句化总结：行业头部团队借助H5话题营销仍在不断打造刷屏爆款，中小商家作为业务宣传载体进行推广和转化，正在从展示类H5过度到营销类H5。

三、适用的行业类型

除了汇总过往的数据报告，我还对比了H5模板网站的热门素材和行业分类规律，筛选出了下面这些对H5有高频需求的行业：

新媒体、电商微商、保险金融、教育培训、婚礼婚庆、地产中介、广告传媒、生活娱乐等行业，这些行业都有一个共通点，那就是有大量的信息需要借助可视化的载体通过社交媒体传递给用户。

这些行业其实也是TOB营销工具的金主爸爸，大部分团队缺少设计和技术开发资源，但日常工作中又有很大的营销需求，无论是图片还是H5活动制作，很多模板化的营销工具刚好能够解决痛点，给了懒人成为营销多面手的机会。

四、常见的玩法分类

根据常见的H5玩法，我浏览了大概上百个案例，觉得可以大概分为以下几类：个性测试/总结盘点/定制DIY/互动游戏/答题竞赛/趣味恶搞/营销推广/限时福利。

接下来我会按照上面的分类列举一些爆款案例：

1. 个性测试

案例《网易哒哒-饲养手册》

2. 总结盘点

案例《支付宝-年度账单》

3. 定制DIY

案例《腾讯新闻-迎国庆换新颜》

4. 互动游戏

案例《腾讯医学ME大会-手速挑战，拯救人类你有多快？》

5. 答题竞赛

案例《新华社-民法典大冲关》

6. 趣味恶搞

案例《跳跳糖创意-我的地摊我做主》

7. 营销推广

案例《腾讯-全球数字生态大会》

8. 限时福利

案例《京东-年终福利》

五、常用的交互方式

H5交互方式汇总：滑动、单击、连击、长按、拖拽、缩放、声音、书写、重力、3D、全景等，这个知识点来自网易哒哒团队的干货文章哦！

我发现大部分案例都是通过滑动和单击这类简单交互来完成的，叠加更多的交互方式意味着开发设计难度和用户学习成本同步增加。

新颖的交互方式可能会让用户眼前一亮，但如果没有和创意很好的结合，同时又增加了开发周期和用户使用难度，那就得不偿失了。

复杂交互≠优质H5，在策划阶段讨论创意实现方式时，我们需要结合团队实际情况来确定方案，毕竟运营的脑暴灵感+设计创意+技术开发才能完成一个完整的H5。（如果团队只有你自己一个人，那就跳过这个步骤吧，请看下段文字中提到的速成方案）

对了，记得每一个交互都要增加步骤引导，即使是滑动这类简单的操作也要进行提示，因为大部分用户在活动中找不到下一步如何操作时会直接关闭页面。

流畅的交互体验能够减少过程中的流失率，毕竟我们不是在做解密游戏，给每一个交互步骤增加引导或使用提示非常有必要。

六、制作方式和流程

H5活动主流制作方式有三种，分别是借助模板/对接外包/独立制作，每种方式的预算成本以及优劣势我帮大家进行了简单分析，下次做方案时可以直接用到：

1. 借助模板

借助第三方工具模板市场快速独立完成制作，但是模板化的H5可供修改的内容有限，主要的创意和交互方式都无法修改，只能对文字和图片等素材进行调整。

适合中小微商家或团队，以及对H5营销不熟悉的团队，试错成本低。

2. 对接外包

使用钞能力寻找第三方专业团队完成制作，你只需要提供灵感，哦不，或者你只需要讲清楚“五彩斑斓的黑”这样的需求即可，谁让我们是甲方爸爸呢（滑稽）。

专业第三方团队可以从创意策划到上线推广提供一条龙全案服务，但是需要充足的预算支持，行业头部公司一般会选择这种方式和第三方团队进行合作，虽然大家都懂“如何打造爆款”，但是真正实操时，专业领域的第三方团队距离成功爆款会更近一些。

普通外包团队只负责设计和技术开发部分，需要在合作前确定具体的创意需求和实现方式，作为甲方的我们需要完成前期策划-进度跟进-成品验收。为了防止踩坑，在合作前要对第三方团队进行能力评估，过程中来回扯皮延误进度或成品千差万别是最糟糕的。

3. 独立制作

由自己团队独立开发制作的成本也比较高，通常一个H5活动的制作周期大概为2-4周，同时需要运营+设计+技术等团队资源进行支持，需要占用比较多的团队资源。

更重要的是，大部分团队没有这类开发经验，甚至完整的协作流程，成熟团队在衡量原创H5的投入产出时，一般会否决这类品宣大于效果的创意策划。

所以作为运营的我们，在项目启动时就需要思考清楚，这个方案目前是不是最优选择，如果是初次接触H5活动策划，还是选择第一种低成本的实现方式最优。

七、用户分享的动机

用户分享是裂变传播的关键，分享率决定活动的流量回流率和传播层级，想要扩大影响范围，我们需要先清楚用户的分享动机，以及如何触动更多用户进行分享。

用户的分享动机：打造人设、怀旧回忆、情感共鸣、利益诱导、帮助别人、输出观点、热点讨论、知识学习。

上面这段可能有点难理解，我一般会把这种理论内容简单化，那就是自己代入目标用户角色根据策划方案写出不愿意分享的原因帮助优化方案，同时写出自己认为活动吸引自己参与和分享的主要动力，如果写不出或者自己参与都不可能分享，那就推翻重来。

自己或团队脑暴出的方案灵感觉得没问题后，还可以找目标用户聊一下，如果这样的活动发布出来，他会不会参与，会不会分享，以及最近有没有看到同类型的案例。同样流程，把用户沟通放在方案确定前期就是用户调研环节了，也是帮助我们做决策的方法。

除了理论上满足用户的分享动机，我们还需要清楚影响用户不愿意分享的因素有哪些？是否会涉及用户敏感隐私，是否会影响用户在朋友圈的人设等原因。总之，在项目前期明白用户为什么分享，以及不分享的可能原因能让我们在执行和推广时少踩坑。

八、爆款不容易复制

1. 创意难寻

能够和用户产生情感共鸣的案例才能达到全民刷屏效果，核心的灵感创意才是这个领域的护城河，即使掌握了打造爆款的全部方法论，也很难通过复制模仿达到同样的效果。

2. 成本较高

上面和大家分享了H5制作的几种方式，其中套用模板的方式成本虽然很低，但是几乎不会有产生爆款的可能，寻找第三方团队或独立制作的成本高昂，方案可能会在讨论或者需求评审阶段被放弃。

3. 封禁风险

为了增加传播速度和引流转化，可以在活动中增加奖励诱导，公众号或小程序和H5结合，可以通过红包或者任务类实物奖励激励用户进行分享传播，但是被举报后很容易会被微信爸爸封禁，建议对微信规则不熟悉的朋友尽量不要试探处罚边缘。

即使不进行利益诱导，只在海报上添加活动入口二维码，也不能保证百分之百安全，根据微信的风控阈值，达到定量的分享传播后，活动同样会被限制。例如朋友圈海报被屏蔽，其他好友无法看到—禁止链接分享—活动域名封禁。

九、放心大胆去做吧

希望这些资料可以在大家进行项目决策或写策划方案时提供帮助，最后讨论的“爆款不容易复制”，不是为了“劝退”大家，只是团队目标如果是以转化或是大范围刷屏的话，开发成本高/筹备周期长且效果不可控的H5活动不建议大家去做，毕竟还有很多更优的方案可供选择。

最后再跟大家分享一个我自己的案例，下面这个《测测你的单身理由H5》是两年前我和团队小伙伴完成的测试H5，当时为了蹭七夕的热点，从策划到上线只用了一周的时间，我一个人负责运营策划兼设计，还要从各处搜集手绘素材，过程很费劲，不过成果还很满意的，算是一个小范围传播的案例，下次有机会和大家详细拆解一下。

关于H5相关的问题就到这里了，希望大家都能够早日打造出自己的刷屏爆款！

本文由 @阿赵 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议