H5营销：移动+社交，引无数品牌竞折腰

TOP 简介：H5如此迷人，吸引了无数品牌竞相角逐。

H5这个词大家一定不陌生。 就在2014年，一项相对不成熟的技术在微信社交舞台上大放异彩，让我们看到了“移动+社交”的巨大能量。 然而，这并非偶然，而是一种趋势。

在详细介绍H5营销之前，先给大家分享一些数据，该数据显示了2012年至2018年不同媒体渠道的品牌预算占比：

与逐年下降的电视、杂志、户外广告等传统媒体相比，品牌营销在数字化、移动端的投入却逐年增加。 此外，在所有渠道预算中，移动技术的投资增长最快，远高于其他渠道的增长。 当然，你不应该对这个结论感到惊讶，因为我们早已习惯了一天24小时都有手机陪伴的生活，而品牌最关心的就是消费者在“哪里”的问题。

根据美国调查数据，我们每天检查手机150次，44%的人睡觉时手机放在旁边，9%的美国人承认他们在做爱时使用手机……毫无疑问，手机是历史上最重要的事情。 最强大的媒介，这个几英寸的屏幕从我们早上醒来的那一刻到入睡前的每一秒都在与我们“交流”。

显然，移动营销已成为大势所趋。 我们可以看到广泛使用的登录和二维码技术，微信的新兴Wi-Fi连接，以及本文将与您分享的H5技术。 文章有点长，读完可能需要一些时间。 全文包括：H5技术及其特点介绍、如何实现、有哪些应用场景、如何推广。

什么是H5？

经常有朋友来找我咨询H5问题，但在与他们交流的过程中，我发现很多人对H5的理解都停留在用户层面，比如邀请函、小游戏、品牌展示、抽奖等。其实，如果上升到营销层面，仅仅站在用户层面思考是不够的，因为任何沟通都必须考虑有效性的问题。 如果100万PV只带来刷屏效果，不会给品牌带来任何效益。 转型，这样的沟通显然是不成功的。

在认识事物的时候，如果我们不能从多个角度进行分析，我们就很难跳出原有的思维框架来看待问题。 因此，在这篇文章中，我想从一个更原创的角度来解释一下，从H5技术本身出发； 事实上，互联网技术的发展本质上是需求驱动的，编程语言实际上是高于应用层面的产品。 希望下面的内容不会太晦涩难懂，也希望能够对您有所启发。

简单来说，H5是一种先进的网页技术。 我们平时看到的邀请函、小游戏都是H5网页。 准确的说是HTML 5（目前国外还没有H5的名字）。 和我们平时在网上看到的很相似。 这些网页本质上没有什么区别，只不过普遍接受的网页技术版本是HTML4，而且这个版本发布于1997年。

什么是 HTML？ 我在这里简单解释一下——想象一下两台计算机正在通信的场景。 如果A想给B发图文消息，B在沟通过程中肯定会出现这样的问题：你给我了。 这么多信息，哪个是网页标题，哪个是文字，哪个是图片？ 于是，A和B讨论了一种使用一些符号来标记不同类型内容的方法，而这些标记的完整规范集就是HTML。

例如，当A想要将图片和文字的标题传递给B时，最终给B的表达是这样的：品牌H5营销完整实用指南

如果设计HTML语言的人是中国人的话，表达方式会是这样的：品牌H5营销完全实用指南

所以你可以看到HTML实际上是一个非常人性化的发明。 对HTML技术详细讲解感兴趣的读者可以自行查看。 这里我主要给大家介绍一下营销人员应该关注的几个H5功能。 它可以让你对 H5 的功能有一个基本的了解。

No.1绘图功能（SVG）

这是H5的一个非常重要的特性。 你在很多H5中看到的动画效果都是利用H5的绘图功能制作的。 一个典型的例子就是STC 分享的可口可乐的例子。 如果您有兴趣，可以点击文末的“阅读”。 看看原文吧。

为了更容易理解，你可以将H5的绘图功能与Flash进行比较，但唯一决定性的区别是Flash制作的动画无法在移动浏览器中浏览，因为Adobe已经在2012年停止支持移动Flash的开发。 毫无疑问，未来的手机网页游戏和动漫将由H5主导。

从技术实现上看，H5可以用JS（一种编程语言）制作任意的二维动画，而且由于是网页元素，所以所有元素都可以监听用户点击的数据，也就是说可以知道用户的行为点击H5动画。 网页上的所有交互。 但在实际应用中，我们必须考虑周期、成本、用户体验等问题。 复杂的动画会增加制作周期和成本，还可能影响加载速度等用户体验相关问题。

下面这个网站是H5绘图功能的典型例子，功能非常强大。 您可以选择不同类型的画笔、笔触半径和墨水颜色。 整个绘画过程非常流畅，还有模拟手握画笔的人性化设计。

No.2 三维效果（CSS3 3D）

H5的华丽效果离不开一种叫做CSS的技术。 打个比方，如果把HTML5比作漫画，CSS就是用来着色的，相当于word界面上方的格式化工具栏。 如果没有CSS，我们会看到你得到的H5网页只能是“素颜”才能看到。 如果你熟悉互联网技术的命名规则，你应该知道CSS3是CSS的升级版本。

CSS3中一个非常酷的功能是三维渲染，这意味着H5可以创建3D动画甚至3D游戏。 目前我们在H5中看到CSS3 3D的应用还很少。 这可能是H5应用的下一个营销热点。 建议您继续关注。

以下两款网页游戏均采用H5+CSS3 3D制作。 第一个是 3D 版的俄罗斯方块。 想象一下在三维空间中玩俄罗斯方块是什么感觉。 喜欢挑战空间想象力的​​朋友可以尝试一下； 第二款游戏是坦克大战的3D版本。 这是一款非常精致且可玩的游戏。 评论中有一句话是“根本停不下来”。

PS：以上网站均需要在PC浏览器中打开。 虽然有点麻烦，但是绝对值得。

No.3 离线存储（HTML5 Web）

H5的另一个重要特性是离线存储，可以将用户的资源文件保存在本地，以便网页在加载时可以使用本地资源，从而实现Web应用程序的离线访问。 例如，通过离线存储，无需网络连接就可以阅读公众号的文章（当然这只是技术上可行，微信目前还没有这个功能）。

当然，离线存储可以容纳的数据量是有限制的，这取决于浏览器。 目前支持5M。 这件事大家或多或少都知道。 它还记录用户浏览数据。 比如百度根据你的搜索习惯向你推荐的广告就是通过这种技术实现的，但它的容量是4k。

你可以忽略技术细节，但至于离线存储功能，你可以发挥你的想象——假设离线存储容量为100G以上，浏览器就变成了一个超级应用门户，所有的Web应用程序都具有离线存储和功能在线浏览此时可以实现在线、在线记事本甚至在线。 我们的电脑只需要安装一个程序——浏览器。 在这个假设中，浏览器将被杀死，所有用户操作将在云端执行！ 有点难理解，但是仔细看还是可以理解的。

以下是使用离线存储的示例。 这个提供在线笔记功能的网站无论是否有互联网连接都可以访问，并且您记录的所有笔记都会被保存。 这是一个非常实用的网站。 如果你有兴趣，可以尝试一下。

科普结束了。 虽然H5有很多功能，但由于篇幅有限，本文只能介绍营销相关的内容。 许多其他功能都是程序员的工作。 如果你想了解更多，我可以再写一篇。 详细介绍。

怎么玩H5？

了解了H5的一些基础知识后，相信大家最关心的就是应用层面的问题——H5能做什么、有哪些玩法？ 接下来我举几个典型例子与大家共同探讨：

1 幻灯片

相信很多人都见过下面特斯拉的例子。 精美的图片设计+简单的翻页效果。 在我的印象中，当我在三、四月份看到特斯拉的H5时，人们并不认识。 微信营销可以这样玩。 我记得我们看到的时候，一周之内就做了一个类似的H5，用于STC的品牌展示。 当然，在此之后，H5里成千上万的梨树都开花了。

这是H5最早也是最典型的玩法。 由于它简单实用，至今仍然很受欢迎。 效果是简单的图片展示&翻页交互，最终的整体表现很像幻灯片。

其实现在已经出现了很多幻灯片式H5的在线制作软件供大家使用，所以现在制作成本看起来几乎为零。 放在以前，开发这样一个应用可能要花费近万（再次见证了互联网思维的破坏力）。 当然，这对于品牌商来说是一件好事，因为很多时候这种简单的展示就可以满足需求，而无需花费不必要的金钱。

★ 应用场景

由于制作简单、周期短，这种H5展示格式适合频繁、小型的需求。 使用在线编辑器，不需要开发，只需要设计师和文案。

这不是一个完整的总结。 滑盖式H5可能有以下应用场景：

1. 定期发布内容，预算几乎为零。 这些内容都比较常规，但有时微信图文并不能达到理想的效果。 以H5的形式会更容易传播。 当然，前提是要有好的设计。 例如数据报告、频繁推出的新产品或功能、小型线下活动邀请、活动相册等。

2、营销与热点相结合，周期很短。 在这种情况下，及时性就非常重要。 如果开发H5需要半个月，那么热点肯定已经冻结了。 因此，尽快推出是明智之举，而此时广泛传播的关键就在于文案和设计。

另外，不要小看这种短期快速的沟通。 有时候比很多大投入的沟通更有效。 没有人能够完全掌握受众的兴趣点，因此大量的传播投入不一定会产生效果，但通过多个热点传播取得效果的概率在统计上更高。 如上所述，我们可以监控H5中的所有用户交互。 因此，如果短频、快速的通信能够配合有效的数据监测，就可以进行持续优化，减少不确定性。

2 交互式动画

之前趋势榜推荐过的可口可乐案例，就是利用H5绘图功能的典型例子。 当然，这里的交互比较简单，但是基本体现了交互动画的感觉。 当用户向上滑动页面时，整个可口可乐时间线就会被“绘制”出来。

其实除了这种叙事性的H5动画之外，我们能看到的大部分H5游戏也都属于这一类，比如神经猫、企鹅大战、2048等。还有一款最近很火的H5游戏叫《财经》包子铺”。 在这款游戏中，用户扮演包子铺创业老板的角色，在职业发展的不同阶段做出商业决策，最终走向人生巅峰。 虽然游戏中嵌入了赤裸裸的产品推广（知乎新书），但3天内仍然取得了超过300万的PV。

这些不同类型的H5应用本质上都是基于H5动画技术。 他们涉及的相关动画技术主要有H5/SVG，还有JS和CSS3。 目前大多数H5动画效果仍然使用JS实现。 实现的效果类似于PPT中的动画功能，只能实现元素的平移和旋转。 、若隐若现等。其实通过JS+/SVG+CSS3都可以实现非常复杂的交互动画。 最直观的就是H5游戏，比如，还有上面提到的3D版坦克大战。

那么，H5能够实现什么样的动画效果呢？ 我想这应该是大家在做H5的时候最头疼的问题，因为如果你不知道可以做什么，你就不知道从哪里开始。 那么我给大家介绍一个网站：在这个网站里，你几乎可以看到H5能实现的所有动画效果。 下次如果需要做H5，可以告诉开发者“你看，这就是效果”。

以下是该网站的一些示例的屏幕截图：

抓羊：你可以抓住它们并将其放在奔跑的羊中的任何地方。

种植一棵树：点击屏幕任意位置，相应位置就会种植一棵树。 你可以看到树的生长过程。

3D罐头：CSS3 3D完美展示，任意角度都可以看到三维罐头

照片处理：可以让你的照片变得艺术化。 下图是处理过程的截图。

★ 应用场景

交互动画类型的H5制作周期和成本较高，需要提前规划。 除了创意、文案、设计外，开发周期也较长。 一个高质量的H5大约需要两到四个星期，甚至可能更长。

这类H5需要找到可靠的供应商，因为复杂交互的效果在用户眼里只能算完美或者垃圾，所以要谨慎。 当然，如果你想花钱组建自己的团队，也不是不可能——产品经理、设计师、前端工程师、PHP工程师各一个（表单、登录、评论等元素需要时）参与）就足够了。

总结一下应用场景：

1、中小型活动/品牌活动的传播要求预算小、周期短。 这种情况一般是某些新品发布、企业招聘、公关活动、中型会议等的沟通，此时就需要权衡周期时间和成本的因素。

一般来说，一周之内不可能打造出高质量的H5。 这时候你可能要考虑简单的幻灯片式开发或者参考已有的作品，然后专注于设计和文案。 如果你有一到两周的时间，可以尝试做一些轻交互的H5。 除了常见的平移、缩放、淡入淡出动画之外，这里我推荐大家尝试CSS3 3D效果。 当然，这是一种趋势。 成本也会相应上升一个数量级。

2、大型活动/品牌活动的传播需要充足的预算、强有力的策划、周期长。 一般来说，大家看到的美观且极具感染力的H5基本都属于这一类，比如上面提到的可口可乐“分享幸福128年”，还有潘婷“来自1947年的明信片的电子邮件”。 像这样在美学、互动性、故事性上都出色的案例不是一两周就能制作出来的。 不计算创意、设计文案、开发调试的时间，就少了一个月。 。

所以，当你看到好的作品时，应该理性对待。 你不应该认为它很棒，或者仅仅因为你的老板说它很好就考虑制作一个。 事实上，像这样一个集交互和故事于一体的应用，如果时间不够的话只完成一半，整个H5基本就没啥用了。 意味着之前的所有投入都白费了。 这也是很多供应商无法在指定时间交货，可能从头开始做一项未完成任务的原因。

3 功能性H5

看看下面的两个例子。 首先是百度针对地铁涨价推出的H5。 可以计算每天乘坐地铁花费多少钱，并实时显示大家的评论； 第二个是STC的社交移动排名，很简单，就是高质量H5的展示：

这两款H5有一个特点。 除了向受众传播热门内容之外，它们非常像一个“供用户重复使用”的产品。 这就是所谓的功能性H5。 事实上，当你看到时，你可能会认为它只是一个简单的网页，但从它满足用户需求并产生重复“使用”行为的角度来看，它实际上是一个产品。 事实上，我们从一开始就把它作为一个产品。 当产品上线后，关注的朋友可能会感受到一些东西——每周更新、定期群发图文推荐H5、栏目更新通知等。

功能性H5的独特价值在于，除了它的传播性之外，它通过用户的重复使用行为，使H5的传播成为一个持续的过程，这是普通H5所不具备的。 《风云地》刚发布时，就获得了超过6万次转发。 目前月访问量在10万左右，不算很多，但是给我们带来的流量转化是准确的。 关注我们的大部分都是从事营销相关职业的朋友。

我个人认为Web应用绝对是未来发展的方向。 如上所述，未来的操作系统很有可能被浏览器取代，服务和应用将进入一个完整的云世界。 当然，这个假设还很遥远，但每个人都可以放心遵守的唯一原则就是关注用户需求。

我所说的功能性H5，就是专注于用户需求和沟通的H5轻应用。 也就是说，在设计H5的时候，除了考虑沟通的问题之外，还要思考如何把它变成一个持续运行的产品。 。 这其实是一个思维角度的问题，从“我要传播什么”到“我要用户传播什么”的转变。

★ 应用场景

轻交互、重功能的功能型H5制作周期短，成本也不高。 成功的关键不在于炫酷的交互，而在于对用户需求的把握以及后续的运营。

因此，这类H5需要高水平的产品经理，并辅以设计和开发。 目前功能性H5成熟的例子并不多，但我认为离线存储技术可能是功能性H5应用的重点。 你可以关注一下。

总结一下应用场景：

1.品牌账号粉丝管理。 由于功能性H5具有一定的产品特性，其最大的价值就是增加粉丝活跃度和忠诚度。 我们需要根据自身品牌的形象定位和受众特征来设计功能性H5，将品牌或产品的功能特征抽象到生活方式或精神追求的层面。

例如，洗手液销售商可以将其抽象为健康的生活方式，设计出改善生活和健康的功能性H5； 服装品牌可以将其抽象为追求时尚前沿，设计一款定期更新时尚潮流信息的功能性H5。 事实上，以粉丝需求为中心的功能性H5会潜移默化地提升品牌影响力，增强忠诚度，同时带来持续的口碑传播。

2、品牌传播与热点内容相结合。 这种类型的传播是最常见的，但往往结合热点话题的H5传播是一种一次性的娱乐消费，人们看过之后就忘记了。 事实上，如果我们能够从用户需求挖掘和产品运营的角度思考，很多热点H5通信还有很大的提升空间。

如何推广H5？

事实上，H5可以通过有限的渠道进行推广，不像App推广需要来自各个应用商店的流量。 这个问题就不多说了。 我只提出一些有针对性的建议：

1、从用户角度挖掘H5的价值点，写一篇软文。 通过海量发图文来推广H5无疑是最重要的方式，但如果只是简单的硬性推广，比如宣布今天我们推出了高端H5，然后让用户点击“阅读原文” ” 自己去读一下，显然这种新闻的报刊推广不会有很好的效果。

好的H5必须有打动用户的价值点。 从某个角度写一篇软文，无论是通过投稿还是大规模转发，都能给你带来意想不到的传播效果。 无论你投入多少，无论H5有多精彩，如果没有好的推广，你只能孤立地享受，所以即使你留出一些推广预算，也是值得的。

2、尽量利用一切可以推广H5的渠道。 目前比较常用的方式有：公众号群发文字推广、微信群推广、线下二维码推广，以及前面提到的KOL转发提交等。下面是一些关于微信群的建议。

首先，你需要列出所有你可以使用的资源，并动员内部人员转发。 当然，前提是H5做得好。 值得注意的是，每个微信群其实都有自己的定位——工作、生活或者聊天废话，所以为了提高打开率，可以针对不同的微信群适当定制转发文案，比如上面的STC趋势榜举例对于一个以工作和学习为主的群体来说，可以是“H5这个品牌真的很难做成这样！”； 如果是比较生活化的群体，可以是“史上最好玩的H5应用，根本停不下来”。 但如果H5的语气与微信群的定位不符，建议不要造成任何干扰。

3、充分利用“阅读原文”和定制菜单。 由于微信的限制，图文中唯一可以跳转的链接是“阅读原文”。 以下是如何利用好“阅读原文”的三个技巧：

不要浪费每个图像和文字的“阅读原文”。 如果可能的话，对每个图片和文字使用不同的文案来引导点击；

如果您的目的是推广H5，请勿在阅读原文提示后或阅读原文引导与正文之间插入公众号广告；

通过字体或颜色的视觉跳跃吸引读者的注意力，不要长期使用同一种格式，因为用户习惯了固定格式后会无意识地忽略这些内容。

另外，自定义菜单也是需要充分利用的功能。 一般来说，新粉丝会浏览公众号的菜单。 根据我们的数据监测，平均有20%的新粉丝会点击每个菜单项。 如果你的账户每天可以增加 500 名粉丝，那么就会有超过 100 人点击菜单中的某个项目。 因为这是一种持续的主动行为，所以它给H5带来的浏览量可能比图文的群发还要多。 要高。

( )

最喜欢的 最喜欢的{{ . }}喜欢喜欢{{ . }}