如今移动营销已是大势所趋，我们可以看到已经广泛应用的签到、二维码技术，正在兴起的iBeacon、微信的Wifi连接，还有就是本文要说的H5技术，对于H5这个名词想必大家已经很熟悉了，就在2014年，一项本来还不太成熟的技术在微信的社交舞台下大放异彩，让我们见识了“移动+社交”爆发的巨大能量。 下面就H5技术简介及其特性，怎么实现、有哪些应用场景，以及如何推广等内容做个详细的介绍。 什么是H5？
很多人对H5的理解都是停留在用户层面，邀请函、小游戏、品牌展示、抽奖等等。其实如果上升到营销层面的话，仅在用户层面去思考是远远不够的，因为任何传播都要考虑有效性的问题，如果100w pv带来的只是刷屏效果，而对品牌带不来任何有效转化，这样的传播显然是不成功的。
对于事物的理解，如果不能从多个角度去分析，我们很难跳出原有的思考框架去看问题。
简单来说，H5就是一种高级网页技术，我们平时看到那些邀请函、小游戏都是H5网页，确切来说叫HTML 5（国外目前没有H5的叫法），它跟我们平时上网看到的那些网页本质上没有任何区别，只不过大家普遍接受的那个网页技术版本是HTML4，而这个版本是在1997年发布的。 No.1 绘图功能（Canvas、SVG）
这是H5一个非常重要的特性，你在很多H5中看到的动画效果就是用H5的绘图功能做的。
为了方便理解，你可以将H5的绘图功能类比为Flash，但是唯一的决定性区别是，Flash做出来的动画无法在移动端的浏览器中浏览，因为Adobe早已在2012年就停止了对移动端flash的开发。毫无疑问，未来的移动网页游戏和动画会是H5的天下。
从技术实现的角度，H5配合JS（一种程序语言）可以做出任何二维动画，并且因为是网页元素，所有元素均可以监测到用户点击的数据，也就是说你可以知道用户在H5动画网页中的所有交互行为。但是，具体到实际应用，我们就要考虑周期、成本，和用户体验的问题，复杂的动画相应的制作周期和成本会提高，同
极欧学院
时也有可能影响加载速度等用户体验相关的问题。 No.2 三维效果（CSS3 3D）
H5的华丽效果离不开一种叫CSS的技术，形象的说，如果把HTML5比作漫画的素描稿，CSS就是上色用的，相当于word界面上方的格式工具栏，如果没有CSS我们看到的H5网页就只能以“素颜”见人了。如果你熟悉互联网技术的命名规则你应该能知道CSS3就是CSS的升级版本。
在CSS3中有个非常酷的功能是三维渲染，也就说H5中能做出3D动画甚至3D游戏。目前我们看到的H5中CSS3 3D的应用较少，这个也许会是下一个营销类H5应用的热点，建议大家持续关注。 No.3 离线存储（HTML5 Web Storage）
H5的另一个重要特性就是离线存储，它能将用户的资源文件保存在本地，这样在页面加载的时候网页能使用本地资源，从而实现离线状态下访问网页应用。举个例子，通过离线存储，你可以在没有网络的情况下阅读公众号的文章（当然这只是技术上可行，微信目前没有此功能）。
当然离线存储能容纳的数据量是有限制，跟浏览器有关，目前Chrome支持5M。大家或多或少都知道cookie这个东西，它也是记录用户浏览数据的，比如百度那些根据你的搜索习惯给你推荐的广告就是这种技术实现的，不过它的容量是4k。
技术细节大家可以忽略，但是关于离线存储这个功能，大家可以发挥想象——假设离线存储的容量是100个G甚至更多，浏览器就变成了一个超级应用入口，所有网页应用都具备离线存储和在线浏览的功能，这时候在线Office、在线记事本甚至在线PhotoShop都可以实现，我们的电脑只需要装一个程序——浏览器。在这个假设中，浏览器将干掉Windows，一切用户操作都在云端进行！稍微有点难理解，大家可以仔细体会。 H5能怎么玩？
在了解完H5的一些基础知识后，相信大家最关心的还是应用层面的问题——H5能做什么，有哪些玩法？接下来我将列举一些典型的例子和大家探讨： 1 幻灯片式玩法
以下这个特斯拉的例子相信很多人都看过，精美的图片设计+简单的翻页效果，
极欧学院
在我的印象中大概3、4月份看到特斯拉这个H5的时候，大家还不知道原来微信营销可以这么玩，记得那时候我们看到之后就在一周内做了一个类似的H5，用于STC的品牌展示。当然，在这之后H5就千树万树梨花开了。
这是H5最早期也是最典型的玩法，因为简单、实用，所以至今还很流行。其效果就是简单的图片展示&翻页交互，最终整体的表现很像幻灯片展示。 其实幻灯片式的H5现在已经出现了很多在线制作软件供大家使用，所以制作成本在现在看来几乎是等于零的，而在之前这样一个应用的开发可能要将近一万（再一次见证了互联网思维的破坏力）。当然啦，这对于品牌主来说是一个好事，因为很多时候这种简单的展示已经能满足需求了，不需要花不必要的钱。 ★ 应用场景
由于制作简单，周期短，这种H5展现形式适用于频繁、小型的需求。用在线编辑器的话，不需要任何开发，你只需要要配备一名设计和文案。（老规矩，需要在线H5编辑器推荐的，可以在后台留言） 总结得不全，幻灯片式H5可能有以下的应用场景：
1、定期发布的内容，几乎零预算。这些内容相对而言比较常规，但是有时微信图文又无法达到理想的效果，通过H5的形式会更易于传播，当然前提是要有好的设计。比如数据报告、频繁上线的新产品或功能、小型线下活动邀请、活动相册等等。
2、结合热点的营销，周期极短。这种情况下，时效性是非常重要的，如果开发一个H5用了半个月，热点想必也结冰了。所以，应该以最快的速度推出才是明智的选择，而这时候引起广泛传播的关键就在于文案和设计。
此外，大家不要轻视这种短频快的传播，有时候它要比很多大投入的传播来得有效。没有人能完全掌握受众的兴趣点，所以一次大投入的传播不一定就能出效果，但是多次热点传播出效果的概率从统计学的角度也要高一些。如上文所述，我们可以实现用户在H5中所有交互行为的监测，因此，如果短频快的传播能配合有效的数据监测，便可以进行持续优化，降低不确定性。 2 交互式动画
可口可乐这个案例在之前的风云榜中推荐过，是运用H5绘图功能的典型例子。当然这里面的交互还是比较简单的，只不过它基本体现了交互式动画的感觉。整
极欧学院
个可口可乐的时间轴是随着用户向上滑动页面“绘制”出来的。
其实除了这种叙事型的H5动画，我们能看到的大多数H5游戏也都都属于这一类，比如神经猫、打企鹅、2048等等。最近也有一个比较火的H5游戏叫“财务包子铺”，在这个游戏中用户扮演包子铺的创业老板，在事业发展的不同阶段做出经营决策，最终登上人生巅峰。虽然游戏中植入了赤裸裸的产品推广（知乎的一本新书），但最后还是取得了3天破300万PV的成绩。
这些类型各异的H5应用，本质上都是基于H5的动画技术做的。它们所涉及的相关动画技术主要有H5的Canvas/SVG，以及JS、CSS3，目前大部分H5的动画效果还是用JS实现的，实现的效果类似PPT中的动画功能，只能实现元素的平移、旋转、隐现等等。事实上通过JS+Canvas/SVG+CSS3可以实现非常复杂的交互式动画，最直观的就是H5游戏，比如神经猫，还有上文提到的3D版坦克大战。
那么，H5到底能实现什么样的动画效果呢？我想这应该是大家在做H5时最头疼的问题，因为不知道能做成什么样，你也就不知道从何下手。所以下面我给大家介绍一个网站：http://fff.cmiscm.com/，在这个网站中，你几乎能看到所有H5能够实现的动画效果，下次如果需要做H5的时候就可以跟开发说“你看，就是这个效果”。 ★ 应用场景
交互式动画类型的H5制作周期和成本比较高，需要提前规划。除了创意、文案、设计这些以外，开发周期较长，优质的H5大约在两周到4周左右，也有可能更长。
这种类型的H5要找靠谱的供应商，因为复杂交互做出来的效果，在用户看来只有完美和垃圾两种层次，所以慎重。当然如果你自己要花血本自建团队也不是不行——产品经理、设计师、前端工程师、PHP工程师（涉及表单、登录、评论等元素的时候需要），各一枚就够了。 以下是总结的应用场景：
1、中小型活动/品牌事件的传播，预算不多、周期较短。这种情况一般就是某些新品发布、企业招聘、公关事件、中型会议等的传播。此时你需要权衡周期和成本的因素。
极欧学院
一般来说一周以内的时间不太可能做出优质的H5，这时候你可能要考虑幻灯片式的简易开发或者参考已有的作品，然后着重从设计和文案上下功夫。如果有一到两周的时间可以尝试做一些轻交互的H5，除了常见的那些平移、缩放、淡入淡出的动效以外，在这里我比较建议大家尝试一下CSS3 3D的效果，这是一个趋势，当然成本也会相应的上升一个量级。
2、大型活动/品牌事件的传播，预算充足、计划性强、周期较长。一般大家看到的那些美轮美奂并且极具传播性的H5基本上都属于这一类，比如上文提到的可口可乐“分享快乐128年”，以及我们之前分享过的潘婷“一封来自1947年的明信片”。像这一类在美学、交互和故事性上都表现突出的案例，都不是一两周的功夫能做出来的，不计算创意、设计和文案的时间，光是开发和调试也要小一个月。
因此大家看到好的作品要理性看待，不能觉得很牛或者老板说好就想着也做一个，其实像这种交互与故事一体的应用，如果时间不够只完成一半，整个H5基本是没法用的，也就是所有之前的投入都是无用功。这也是为什么有很多供应商无法在指定时间交付的原因，可能一开始就在做一个完不成的任务。 3 功能型H5
功能型H5的独特价值在于，除了具备传播性以外，它通过用户的重复使用行为使得H5的传播是一个持续不断的过程，这一点是一般的H5所不具备的。风云榜首次发布时转发6w+多，目前每月的访问量都在10w左右，不算多，但是给我们带来的流量转化都是精准的，关注我们的大多还是从事营销相关职业的朋友。
个人觉得web应用肯定是未来发展的方向，就像上文所说的，很有可能未来的操作系统将被浏览器所取代，服务和应用将进入完全的云世界。当然距离这种假设还比较远，但唯一大家可以放心遵守的原则，就是聚焦于用户需求。 我所说的功能型H5，是同时聚焦于用户需求并且注重传播性的H5轻应用，也就是在设计H5的时候除了考虑传播的问题以外，也要思考如何把它变成一个持续运营的产品。这里面其实是思考角度的问题，从“我要传播什么”到“我希望用户传播什么”的转变。 ★ 应用场景
极欧学院
微营销：品牌H5营销完全实战指南
