H5技术简介：怎么实现、有哪些应用场景，以及如何推广？

TOP导读：H5那么多娇，吸引了无数品牌的竞折腰。大家一定都很熟悉H5这个词。就在2014年，一项不成熟的技术在微信社交舞台下大放异彩，让我们看到了“移动” 社交网络爆发的巨大能量。然而，这不是偶然的，而是趋势。在介绍H5营销之前，我想和大家分享一个emarketer的数据，显示了2012-2018年品牌在不同媒体渠道的预算比例:与电视、杂志、户外广告等传统媒体相比，品牌营销在数字和移动方面的投入逐年增加。此外，移动技术在所有渠道预算中的投资增长最快，远高于其他渠道。当然，你不应该对这个结论感到惊讶，因为我们已经习惯了24小时手机的生活，品牌最关心的是消费者的“在哪里”。根据美国的调查数据，我们每天检查手机150次。44%的人睡觉时把手机放在身边。9%的美国人承认他们在做爱时使用手机。。。毫无疑问，手机是历史上最强大的媒介。从早上醒来到睡觉前一秒钟，这几英寸的屏幕正在与我们“交流”。显然，移动营销已经成为大势所趋。我们可以看到，登录和二维码技术已经得到了广泛的应用，iBeacon正在崛起、本文将与大家分享的微信WiFi连接和H5技术。这篇文章有点长，可能需要一些时间来阅读。全文包括：H5技术介绍及其特点、如何实现、应用场景和如何推广。什么是H5？朋友们经常问我关于H5的问题，但在与他们沟通的过程中，我发现很多人对H5的理解都停留在用户层面，如邀请函、小游戏、品牌展示、彩票等。事实上，如果上升到营销层面，仅仅在用户层面上思考是远远不够的，因为任何沟通都应该考虑有效性。如果100wpv只带来刷屏效果，不能给品牌带来任何有效的转型，这种沟通显然是不成功的。如果我们不能从多个角度分析对事物的理解，我们就很难跳出原来的思维框架来看待问题。因此，我想从H5技术本身的角度更原始地阐述这篇文章；事实上，互联网技术的发展本质上是由需求驱动的，程序语言实际上是高于应用水平的产品。希望以下内容不要太晦涩，也希望能启发你。简言之，H5是一种先进的网页技术。我们通常看到那些邀请函和小游戏是H5网页。确切地说，它们被称为HTML5（目前国外没有H5的名称）。它与我们通常在互联网上看到的网页没有本质区别，但我们普遍接受的网页技术版本是HTML4，该版本于1997年发布。HTML是什么？让我在这里简要解释一下——想象一下两台计算机在交流中的场景。如果A想向B发送图形信息，B在交流过程中肯定会出现这样的问题：你给了我这么多信息，哪些是网页标题，哪些是文本，哪些是图片？因此，A和B讨论了一种用一些符号标记不同类型内容的方法，而这些标记的一套完整规范是HTML。例如，当A想将图形标题传递给B时，B的最终表达是这样的：如果设计HTML语言的品牌H5营销是中国人，表达将是这样的：品牌H5营销是一个完整的实际战斗指南，所以你可以看到HTML实际上是一个非常人性化的发明。对HTML技术的详细解释感兴趣的读者可以自己查阅。在这里，我主要介绍一些营销人员应该关注的H5特性，它可以让你对H5能做什么有一个基本的了解。No.1绘图功能（Canvas、SVG）这是H5的一个非常重要的特点。你在许多H5中看到的动画效果是由H5的绘图功能制成的。典型的例子是STC风云榜共享的可口可乐的例子。如果你感兴趣，你可以点击最后的“阅读原文”。为了便于理解，您可以将H5的绘图功能与Flash进行比较，但唯一的决定性区别是Flash制作的动画不能在移动浏览器中浏览，因为Adobe早在2012年就停止了移动flash的开发。毫无疑问，未来的移动网页游戏和动画将是H5的世界。从技术实现的角度来看，H5可以用JS（一种程序语言）制作任何二维动画，因为它是一个网页元素，所有元素都可以监控用户点击的数据，也就是说，你可以知道H5动画网页中用户的所有交互行为。然而，在实际应用中，我们应该考虑周期、成本和用户体验。与复杂动画相对应的制作周期和成本将增加，也可能影响用户体验相关的问题，如加载速度。以下网站是H5绘图功能的典型例子，非常强大。您可以选择不同类型的刷子、笔触半径和墨水颜色。整个绘图过程非常顺利，还有一个人性化的设计，模拟手持刷子。No.23D效果(CSS33D)H5的华丽效果离不开一种叫CSS的技术。形象来说，如果把HTML5比作漫画素描，CSS就是上色的，相当于word界面上方的格式工具栏。没有CSS，我们看到的H5网页只能用“素颜”看人。如果你熟悉互联网技术的命名规则，你应该知道CSS3是CSS的升级版本。三维渲染是CSS3中一个很酷的功能，也就是说H5中可以制作3D动画甚至3D游戏。目前，CSS33D在H5中的应用较少，这可能是下一个营销H5应用的热点。建议您继续关注它。以下两个网页游戏使用H5 CSS33D，第一个是俄罗斯方块的3D版本，想象在3D空间中玩俄罗斯方块的感觉，喜欢挑战空间想象力的朋友可以尝试；第二个游戏是3D坦克战争，非常精致和有趣的游戏，一个评价是“不能停止”。PS：所有这些网站都需要在PC浏览器中打开，虽然有些麻烦，但绝对值得。No.3离线存储(HTML5)WebStorage）H5的另一个重要特点是离线存储，它可以在本地保存用户的资源文件，使网页可以在页面加载时使用本地资源，从而在离线状态下访问网页应用程序。例如，通过离线存储，您可以在没有网络的情况下阅读微信官方账号的文章（当然，这只是技术上的可行性，微信目前没有此功能）。当然，离线存储能容纳的数据量是有限的，这与浏览器有关。目前，Chrome支持5m。大家或多或少都知道cookie，它还记录用户浏览数据。比如百度根据你的搜索习惯推荐给你的广告，就是这个技术实现的，但是它的容量是4k。技术细节可以忽略，但关于离线存储功能，你可以想象——假设离线存储容量是100G或更多，浏览器成为一个超级应用入口，所有网页应用程序都有离线存储和在线浏览功能，此时在线office、在线记事本甚至在线PhotoShop都可以实现，我们的计算机只需要安装一个程序浏览器。在这个假设中，浏览器将杀死Windows，所有用户操作都将在云中进行！有点难理解，大家可以仔细理解。以下是一个使用离线存储的例子。这个提供在线笔记功能的网站可以访问，无论是否有网络，您记录的所有笔记都将被保存下来。这是一个非常实用的网站。如果你感兴趣，你可以试试。在科普的第一段，H5虽然有很多特点，但由于篇幅有限，本文只能介绍与营销相关的内容，其他很多特点都是程序猿。如果你需要了解更多的反馈，我可以写另一个具体的介绍。H5怎么玩？了解了H5的一些基础知识后，相信大家最关心的是应用层面的问题——H5能做什么，有什么玩法？接下来，我将列出一些典型的例子与您讨论：1幻灯片玩法以下特斯拉的例子，我相信很多人都看过，精致的图片设计 在我的印象中，简单的翻页效果大约是3、当我们在4月份看到特斯拉H5时，我们不知道微信营销可以这样玩。我记得当时，我们在一周内做了一个类似的H5来展示STC的品牌。当然，H5之后，千树万树梨花开了。这是H5最早也是最典型的玩法，因为简单实用，所以还是很流行的。它的效果就是简单的图片显示&翻页交互，最终整体表现非常像幻灯片展示。事实上，幻灯片H5现在有很多在线生产软件供每个人使用，所以生产成本似乎几乎等于零，在这样一个应用程序的开发可能需要近10000（再次见证了互联网思维的破坏性）。当然，这对品牌所有者来说是一件好事，因为很多时候，这种简单的展示可以满足需求，不需要花不必要的钱。★由于制作简单，应用场景周期短，这种H5显示形式适用于频繁、小型的需求。如果使用在线编辑器，不需要任何开发，只需要配备设计和文案即可。幻灯片H5可能有以下应用场景：1、定期发布的内容几乎为零预算。这些内容比较传统，但有时候微信图文达不到理想的效果，H5的形式会更容易传播，当然前提是设计好。如数据报告、新产品或功能频繁上线、小型线下活动邀请、活动相册等。2、结合热点营销，周期很短。在这种情况下，及时性非常重要。如果开发H5需要半个月的时间，热点肯定会结冰。因此，以最快的速度推出是明智的选择，此时广泛传播的关键在于文案和设计。另外，不要轻视这种短频快速传播，有时候比很多大投入的传播更有效。没有人能完全掌握观众的兴趣点，所以大投资的传播可能不会产生效果，但从统计学的角度来看，多个热点传播效果的概率也更高。如上所述，我们可以监控H5中用户的所有交互行为。因此，如果短频快速传输能够与有效的数据监控相匹配，就可以不断优化，减少不确定性。在之前的风云榜上推荐了交互式动画可口可乐的案例，这是使用H5绘图功能的典型例子。这里的互动当然还是比较简单的，只是它基本上反映了互动动画的感觉。随着用户向上滑动页面，画出了可口可乐的整个时间轴。其实除了这种叙事性的H5动画，我们能看到的H5游戏大部分都属于这一类，比如神经猫、企鹅、2048等等。最近，还有一款流行的H5游戏叫做“金融馒头店”。在这个游戏中，用户扮演馒头店的创业老板，在职业发展的不同阶段做出商业决策，最终达到人生的巅峰。虽然游戏中植入了赤裸裸的产品推广(知乎的一本新书)，但最终还是取得了3天破300万PV的成绩。本质上，这些不同类型的H5应用都是基于H5的动画技术。主要涉及H5Canvas//SVG，以及JS、CSS3，目前大部分H5的动画效果都是JS实现的，类似于PPT中的动画功能，只能实现元素的平移、旋转、隐藏等。实际上通过JS Canvas/SVG CSS3可以实现非常复杂的交互式动画，最直观的是H5游戏，如神经猫和上面提到的3D坦克战争。那H5究竟能达到什么样的动画效果呢？我认为这应该是每个人做H5时最头疼的问题，因为你不知道该做什么，你也不知道从哪里开始。所以下面我给大家介绍一个网站:http://fff.cmiscm.com/，在这个网站上，你几乎可以看到H5能达到的所有动画效果。下次需要做H5的时候，可以对开发说“你看，就是这个效果”。以下是本网站上几个示例的截图：抓羊：你可以在跑羊中随意抓住，在任何地方种树：点击屏幕上的任何地方，在相应的地方种树，你可以看到树的生长过程。3D罐头：CSS33D的完美展示，您可以从任何角度看到3D罐头的照片处理：您可以将照片艺术化，图为处理过程的截图★H5制作周期和应用场景交互式动画类型的成本相对较高，需要提前规划。除了创意、文案、设计，开发周期长，优质H5大概两到四周，也可能更长。这种类型的H5需要找到可靠的供应商，因为复杂交互的效果在用户眼中只有两个层次:完美和垃圾，所以要小心。当然，如果你想花钱建立自己的团队，也不是不可能——产品经理、设计师、前端工程师、PHP工程师(需要表格、登录、评论等元素)，一个就够了。以下是应用场景的总结：1、传播中小型活动/品牌事件，预算少，周期短。这种情况通常是一些新产品发布、企业招聘、公关事件、中型会议等的传播。此时，您需要权衡周期和成本因素。一般来说，高质量的H5不太可能在一周内制作。此时，您可能需要考虑幻灯片的简单开发或参考现有作品，然后专注于设计和文案。如果你有一到两周的时间尝试做一些轻交互H5，除了常见的平移、缩放和淡化的动态效果，我建议你尝试CSS33D的效果。这是一种趋势。当然，成本会相应上升到一个数量级。2、传播大型活动/品牌事件，预算充足，计划性强，周期长。一般来说，你看到的美丽而传播的H5基本上属于这一类，比如上面提到的可口可乐“分享快乐128年”和我们之前分享的潘婷“1947年的明信”