那些百万PV的H5都是怎么做的?精心打造的H5要如何推广?H5技术将如何发展?本文一一为你解答 >>>

　　作者微信号，欢迎关注：Social Talent

　　对于H5这个名词想必大家已经很熟悉了，就在2014年，一项本来还不太成熟的技术在微信的社交舞台下大放异彩，让我们见识了“移动+社交”爆发的巨大能量。

　　然而这不是偶然，而是趋势。在具体介绍H5营销之前，我想和大家分享一份eMarketer的数据，其中显示了2012年-2018年品牌在不同媒体渠道的预算比重：

　　相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势，品牌营销在数字和移动方面的投入在逐年上升。而且，在所有渠道预算中移动技术的投入增长最快，远远高于其他渠道的增长。当然，这样的结论你应该不会感到惊讶，因为我们早已习惯了24小时手机陪伴的生活，而品牌最关注的就是消费者“在哪”的问题。

　　据美国的调查数据显示，我们每天要查看手机150次，44%的人睡觉都把手机放在身边，9%的美国人承认他们在嘿咻时使用手机……毫无疑问，手机是有史以来最强大的媒介，从早上醒来到临睡前的一秒，这个几英寸的屏幕都在和我们“交流”。

　　显然，移动营销已是大势所趋，我们可以看到已经广泛应用的签到、二维码技术，正在兴起的iBeacon、微信的Wifi连接，还有就是本文将与大家分享的H5技术。文章有点长，可能需要费些时间阅读，全文包括：H5技术简介及其特性，怎么实现、有哪些应用场景，以及如何推广等内容。

　　什么是H5？

　　经常有朋友找我咨询H5的问题，但是在和他们沟通的过程中，我发现很多人对H5的理解都是停留在用户层面，邀请函、小游戏、品牌展示、抽奖等等。其实如果上升到营销层面的话，仅在用户层面去思考是远远不够的，因为任何传播都要考虑有效性的问题，如果100w pv带来的只是刷屏效果，而对品牌带不来任何有效转化，这样的传播显然是不成功的。

　　对于事物的理解，如果不能从多个角度去分析，我们很难跳出原有的思考框架去看问题。因此，这篇文章我想以更原始的角度，从H5这项技术本身为出发点去阐述;事实上互联网技术的发展本质上也是需求驱动的，程序语言其实是高于应用层面的产品。以下的内容希望不会太晦涩，也希望能对你有所启发。

　　简单来说，H5就是一种高级网页技术，我们平时看到那些邀请函、小游戏都是H5网页，确切来说叫HTML 5(国外目前没有H5的叫法)，它跟我们平时上网看到的那些网页本质上没有任何区别，只不过大家普遍接受的那个网页技术版本是HTML4，而这个版本是在1997年发布的。

　　什么是HTML，我这里简单解释一下——想象一下两个计算机在沟通的场景，A如果要把一个图文信息传给B的时候，交流过程中B肯定会产生这样的问题：你给了我那么多信息，哪些是网页标题、哪些是正文、哪些又是图片呢?于是，A和B商量了一个办法，用一些符号来标记不同类型的内容，而这些标记的一整套规范就是HTML。

　　比如当A要把图文的标题传给B的时候，最终给B的表达是这样的：

　　<title>品牌H5营销完全实战指南</titile>

　　如果设计HTML语言的人是中国人，那表达就会是这样的：

　　<标题> 始品牌H5营销完全实战指南<标题 终>

　　所以大家可以看到，HTML其实是一项非常人性化的发明。关于HTML技术的详解有兴趣的读者可以自行查阅，这里我主要跟大家介绍几个营销人应该关注的H5特性，它能让你对H5能做成什么样有个根本的认识。

　　No.1 绘图功能（Canvas、SVG）

　　这是H5一个非常重要的特性，你在很多H5中看到的动画效果就是用H5的绘图功能做的，比较典型的例子是STC风云榜分享的可口可乐的例子。

　　为了方便理解，你可以将H5的绘图功能类比为Flash，但是唯一的决定性区别是，Flash做出来的动画无法在移动端的浏览器中浏览，因为Adobe早已在2012年就停止了对移动端flash的开发。毫无疑问，未来的移动网页游戏和动画会是H5的天下。

　　从技术实现的角度，H5配合JS(一种程序语言)可以做出任何二维动画，并且因为是网页元素，所有元素均可以监测到用户点击的数据，也就是说你可以知道用户在H5动画网页中的所有交互行为。但是，具体到实际应用，我们就要考虑周期、成本，和用户体验的问题，复杂的动画相应的制作周期和成本会提高，同时也有可能影响加载速度等用户体验相关的问题。

　　以下这个网站是H5绘图功能的典型例子，非常强大。你可以选择不同型号的毛笔、笔触半径以及墨水的颜色，整个绘图过程非常顺畅，而且还有一个模拟手握毛笔的人性化设计。

　　Theshodo

　　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浏览器中打开，虽然麻烦一些，但绝对是值得的。(建议谷歌/火狐)

　　Alteredqualia

　　No.3 离线存储（HTML5 Web Storage）

　　H5的另一个重要特性就是离线存储，它能将用户的资源文件保存在本地，这样在页面加载的时候网页能使用本地资源，从而实现离线状态下访问网页应用。举个例子，通过离线存储，你可以在没有网络的情况下阅读公众号的文章(当然这只是技术上可行，微信目前没有此功能)。

　　当然离线存储能容纳的数据量是有限制，跟浏览器有关，目前Chrome支持5M。大家或多或少都知道Cookie这个东西，它也是记录用户浏览数据的，比如百度那些根据你的搜索习惯给你推荐的广告就是这种技术实现的，不过它的容量是4k。

　　技术细节大家可以忽略，但是关于离线存储这个功能，大家可以发挥想象——假设离线存储的容量是100个G甚至更多，浏览器就变成了一个超级应用入口，所有网页应用都具备离线存储和在线浏览的功能，这时候在线Office、在线记事本甚至在线PhotoShop都可以实现，我们的电脑只需要装一个程序——浏览器。在这个假设中，浏览器将干掉Windows，一切用户操作都在云端进行!稍微有点难理解，大家可以仔细体会。

　　以下是运用离线存储的一个例子，这个提供在线便签功能的网站无论有没有网络都可以访问，并且你记录的所有便签都会保存下来，很实用的网站，有兴趣可以试一下。

　　Webkit

　　科普先告一段落，虽然H5有很多特性，但因为篇幅有限，本文只能介绍跟营销有关的内容，其他的特性很多是程序猿的事，如果大家反馈还要了解更多，我可以再写一篇具体介绍。

　　Part 2 H5能怎么玩？

　　在了解完H5的一些基础知识后，相信大家最关心的还是应用层面的问题——H5能做什么，有哪些玩法?接下来我将列举一些典型的例子和大家探讨：

　　1. 幻灯片式玩法

　　以下这个特斯拉的例子相信很多人都看过，精美的图片设计+简单的翻页效果，在我的印象中大概3、4月份看到特斯拉这个H5的时候，大家还不知道原来微信营销可以这么玩，记得那时候我们看到之后就在一周内做了一个类似的H5，用于STC的品牌展示。当然，在这之后H5就千树万树梨花开了。

　　这是H5最早期也是最典型的玩法，因为简单、实用，所以至今还很流行。其效果就是简单的图片展示&翻页交互，最终整体的表现很像幻灯片展示。

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

　　★