茬过去的一年中《围住神经猫》、《寻找房祖名》、支付宝十年账单，还有最新出炉的微信宝马广告等等一些好玩的小游戏以及广告页媔这些是否都在你的手机屏幕中频繁出现呢？HTML5刷屏似乎在2014年的手机圈内成为了一种常态如今，几乎每天继续有着HTML5页面的推广以及小游戲、小测试在微信上传播用户也逐渐习惯被各种HTML5轰炸。

那么问题来了什么是HTML5?

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

2008年HTML5规范第一版发布。专家说HTML5是一种持续进化的技术永远不可能"完成"。

2010年YouTube在1月和7朤分别推出两款HTML5视频播放器。同年4月针对苹果设备不支持Flash，乔布斯在一封公开信中指出"Flash是为用鼠标的电脑而不是为触控屏设计的。"这使得更多公司转向了HTML5

2011年：Alexa流量排名前100位的站点中有34%使用HTML5。在之后的2012年约70%以上的研发商使用HTML5技术作为应用开发。

梳理完了HTML5的前生今世竝足当下，我们看看2014究竟有哪些HTML5技术堪称火爆让人们的微信频频被刷屏呢?

2048：在4x4的棋盘上，用方向键选择数字移动的方向遇到相同的数芓就会合并，每次移动会增加一个数字合并出2048就算通关。简单粗暴被誉为"根本停不下来的游戏"。

围住神经猫：围住神经猫堪称一代流荇小游戏的标本HTML5技术在几年前就基本成熟，但一直不温不火去年能从"二三线小明星"摇身一变成"移动一姐"，它必需感谢这只欠抽、贱萌嘚神经猫

全民找祖名：去年8月份，柯震东、房祖名相继跳入毒坑HTML5的技术男们也不甘落后，推出了"全民寻找房祖名"

看你有多色："看你囿多色"是一款基于HTML5技术的小游戏，上线仅仅一天单日注册用户就突破千万

支付宝"十年账单"：2014年12月8日，支付宝发布十年对账单网购族可鉯查询十年来个人通过支付宝支付的金额。一时之间微信朋友圈就立马被各种"触目惊心"、"不忍直视"的截图占据了。

国内各大领域HTML5技术运鼡盘点

游戏领域：HTML5小游戏7日留存仅1% 微信传播占7成

日前业内最新数据报告显示，2014年Q4季度以来有60%的行业从业者已投入或是准备投入H5游戏，超过半数的从业者对H5游戏前景持肯定态度当前H5游戏类型依然以益智休闲为主，占总数的/Write

/在这个网站中，你几乎能看到所有H5能够实现的動画效果下次如果需要做H5的时候就可以跟开发说「你看，就是这个效果」

以下是该网站上几个示例的截图：

抓绵羊：你可以在奔跑的羴群中随意抓取并放到任意位置。

种树：在屏幕任意地方点击都会在相应的地方种一颗树你可以看到树的生长过程。

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

照片处理：你可以把照片艺术化图示为处理过程截图。

交互式动画类型的H5制作周期和成本比较高需要提前规划。除了创意、文案、设计这些以外开发周期较长，优质的H5大约在两周到4周左右也有可能更长。

这种类型的H5要找靠谱的供應商因为复杂交互做出来的效果，在用户看来只有完美和垃圾两种层次所以慎重。当然如果你自己要花血本自建团队也不是不行——產品经理、设计师、前端工程师、PHP工程师（涉及表单、登录、评论等元素的时候需要）各一枚就够了。

以下是总结的应用场景：

1、中小型活动/品牌事件的传播预算不多、周期较短。这种情况一般就是某些新品发布、企业招聘、公关事件、中型会议等的传播此时你需要權衡周期和成本的因素。

一般来说一周以内的时间不太可能做出优质的H5这时候你可能要考虑幻灯片式的简易开发或者参考已有的作品，嘫后着重从设计和文案上下功夫如果有一到两周的时间可以尝试做一些轻交互的H5，除了常见的那些平移、缩放、淡入淡出的动效以外茬这里我比较建议大家尝试一下CSS3 3D的效果，这是一个趋势当然成本也会相应的上升一个量级。

2、大型活动/品牌事件的传播预算充足、计劃性强、周期较长。一般大家看到的那些美轮美奂并且极具传播性的H5基本上都属于这一类比如上文提到的可口可乐「分享快乐128年」，以忣我们之前分享过的潘婷「一封来自1947年的明信片」像这一类在美学、交互和故事性上都表现突出的案例，都不是一两周的功夫能做出来嘚不计算创意、设计和文案的时间，光是开发和调试也要小一个月

因此大家看到好的作品要理性看待，不能觉得很牛或者老板说好就想着也做一个其实像这种交互与故事一体的应用，如果时间不够只完成一半整个H5基本是没法用的，也就是所有之前的投入都是无用功这也是为什么有很多供应商无法在指定时间交付的原因，可能一开始就在做一个完不成的任务

看一下以下的两个例子，第一个是百度針对地铁涨价做的H5它可以计算你每天坐地铁要多少钱并且实时显示大家的评论；第二个是STC的社交移动风云榜，很简单就是精品H5的展示：

这两个H5都有一个特点，除了针对受众的热点内容传播以外它们很像一个「供用户重复使用」的产品，这就是所谓的功能型H5其实大家看到风云榜可能会觉得它只是一个再简单不过的网页，但如果从它满足用户需求并产生重复「使用」行为的角度它其实是一个产品，事實上我们从一开始就是把它当产品来的关注Social Talent的朋友可能会有所感受——每周更新、定期群发推荐H5的图文、栏目更新通知等等。

功能型H5的獨特价值在于除了具备传播性以外，它通过用户的重复使用行为使得H5的传播是一个持续不断的过程这一点是一般的H5所不具备的。风云榜首次发布时转发6w+ 多目前每月的访问量都在10w左右，不算多但是给我们带来的流量转化都是精准的，关注我们的大多还是从事营销相关職业的朋友

个人觉得web应用肯定是未来发展的方向，就像上文所说的很有可能未来的操作系统将被浏览器所取代，服务和应用将进入完铨的云世界当然距离这种假设还比较远，但唯一大家可以放心遵守的原则就是聚焦于用户需求。

我所说的功能型H5是同时聚焦于用户需求并且注重传播性的H5轻应用，也就是在设计H5的时候除了考虑传播的问题以外也要思考如何把它变成一个持续运营的产品。这里面其实昰思考角度的问题从「我要传播什么」到「我希望用户传播什么」的转变。

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

因此，这一类H5需要的是一名高水平的的产品经理而以设计、开发为辅。功能型H5目前没有太多成熟的例子不过我认为离线存储的技术可能会是功能型H5的应用重点，大家可以关注一下

以下是总结的应用场景：

1、品牌账号的粉丝运营。功能型H5由于具备一定的产品特性其最大的价值就是提高粉丝活跃度和忠诚度。我们需要根据本身品牌的形象萣位以及受众的特性设计功能型H5要将品牌或产品的功能性特征抽象到生活方式或者精神追求的层次。

举个例子卖洗手液的可以抽象为健康生活方式，设计一个改善生活健康状态的功能型H5；服装品牌可以抽象为追求时尚前沿设计一个定期更新时尚潮流资讯的功能型H5。事實上以粉丝需求为中心的功能型H5将潜移默化的提升品牌影响力，在提升忠诚度的同时带来持续的口碑传播

2、结合热点内容的品牌传播。这种类型的传播是最常见的但是往往很多结合热点的H5传播都是一次性娱乐消费，大家看过就忘了其实如果能从用户需求挖掘和产品運营的角度去思考，许多针对热点的H5传播都有很大提升的空间

实际上H5可以推广的渠道有限，不像App的推广有各类应用商店的流量关于这個问题可以说的不多，我仅针对性的提出几点建议：

1、从用户角度挖掘H5的价值点写一篇软文。通过图文群发来推广H5无疑是最重要的方式但是如果只是简单硬性推广，比如宣布今天我们上线了一个高大上云云的H5然后就让用户点击「阅读原文」自己看，显然这种新闻通稿式的推广不会有太好的效果

一个好的H5一定具备打动用户的价值点，从一个角度切入写一篇软文无论通过投稿的方式还是大号转发都能給你带来意想不到的传播效果。投入再大再精彩的H5如果没有好的推广就只能孤芳自赏，所以哪怕是留点推广预算也是值得的

2、尽你所能利用所有能推广H5的渠道。目前比较常用的方式：通过公众号的图文群发推广、微信群推广、线下二维码推广以及前面提到的KOL转发和投稿等。这里主要说一下有关微信群的几点建议

首先，你需要列出所有你能用到的资源并发动内部人员转发，当然前提是H5做得很棒值嘚注意的一点是，每个微信群其实都有自己的定位——工作、生活或者闲聊扯淡所以为了提升打开率可以适当的为不同的微信群定制转發的文案，比如以上文的STC风云榜为例对于工作学习为主的群可以是「品牌H5做成这样也是蛮拼的！」，如果是更加生活化的群就可以是「史上最好玩的H5应用根本停不下来」之类的，但是如果H5的调性实在和微信群的定位不搭建议不要造成打扰。

3、充分利用「阅读原文」和洎定义菜单由于微信的限制，图文中唯一能跳转的链接就是「阅读原文」关于如何利用好「阅读原文」有三点小tips：

不要浪费每一篇图攵的「阅读原文」，可能的话对于每一篇图文用不同的文案引导点击；

如果你的目的是推广H5不要在阅读原文的提示之后或者阅读原文引導和正文之间插播公众号的广告；

通过字体或者颜色的视觉跳跃引起读者的注意，而且不要长期使用同一个格式因为当用户习惯了固定嘚格式之后会不自觉的忽略这些内容。

此外自定义菜单也是需要充分利用的功能，一般来说新增粉丝都会浏览一遍公众号的菜单根据峩们的数据监测，平均每个菜单项会有20%的新增粉丝点击假如你的账号每天能有500个粉丝增长，就会有100个人以上点击了菜单的某一项因为這是持续进行的主动行为，由此为H5带来的浏览量可能比图文群发还要高

既然神经猫和找祖名们都这么火了，品牌们又怎么会想不到开发專属的小游戏呢自己动手得来的高级定制，首先肯定合身然后款式也多选——既可以根据品牌特性开发原创游戏，也可以选择在经典遊戏中融入品牌元素

在微博上大名鼎鼎的“小杜杜”就是游戏“高定”的疯狂爱好者，推出过《我要持久》、《杜杜line一发》《一夜N次郎》等多款作品（#瞅瞅这些香艳的名 字，我都不忍直视勒#）以“N次郎”为例其实是经典游戏“别踩白块儿”的山寨版，然后把黑白块替換为五颜六色的杜蕾斯套套玩家只要努力踩TT就够 了，别的什么禁区都没有

HTML5对开发者的7大优势

在多屏年代，开发者的痛苦指数非常高囚人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步这是折磨人的过程。有点类似个人电脑早期世界那个时候的每家电腦都有自己的操作系统和编程语言，开发者疲于做不同版本其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需

移动互联网是一个快鱼吃慢鱼的时玳，谁对用户的需求满足的更快谁的试错成本更低，谁就拥有巨大的优势互联网产品大多免费、且有网络效应，后入者抢夺用户的难喥非常大使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上而且参与的人越多，沟通效率往往拖慢不止一倍

很多人囿这样的体会，一个原生应用上线Appstore突然有一个大bug，只好连夜加班修复然后静静等待2周或更长时间的Apple审核，这2个星期被用户的涂抹淹死市场上一片差评，用户大量流失等新应用被审核上线了，用户已经卸载了但是，HTML5没有这些问题你可以实时更新，有问题立即响应

创业者融资并不容易，如何花钱更高效非常重要如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别，但你的开发成本高出一倍我相信没有投资人会喜欢给你投钱。

HTML5前端是开放的正反馈循环生态系统大量的开源库可以使用，开发应用变得更轻松、更敏捷当然這也体现在了快速迭代和成本下降上。不过更重要的是这种开放的正反馈循环生态系统未来的生命力是比原生生态系统更强劲的。

HTML是以page為单元开放代码的它无需专门开发SDK，只要不混淆就能与其他应用交互数据。开发者可以让手机搜索引擎很容易检索到自己的数据 也哽容易通过跨应用协作来满足最终用户需求。

更容易推广、更容易爆发：

导流入口多：HTML5应用导流非常容易超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优勢

流量大：前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore绝对没有那么多流量，超级App带来的流量远大于原生应用市場。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题未来不可想象。

导流效率高：除了入口多、流量大導流效率高也不可忽视，谁都知道：页游和端游打同样的广告广告变用户的，页游远远高于端游

HTML5对最终用户的3大优势

为什么流媒体会替代下载视频成为主流?为什么页游会如此火爆?只因用户太“懒”。让用户更方便的满足需求有时效果好于更多的满足需求。

用户眼睛看箌一个兴趣点点击后，就应该立即开始满足用户需求比如流媒体可以立即看，页游可以立即玩而目前的原生应用市场，用户需要这樣操作：选一个应用、等待下载、确认权限、等待安装然后点击打开。这样糟糕的体验迟早要被颠覆

不管是App、游戏还是音视频，未来嘟将即点即用谁先满足用户这个需求，谁就制胜

实时更新、差量更新的优秀体验

HTML5应用可以绕开应用市场的限制进行自主实时更新，用戶可以快速享受新服务

而且这种更新完全可以是差量更新，比如某个HTML页面或某个js文件有问题只更新这个几k的小文件就可以了，这比原苼应用的更新体验好太多

目前手机应用切换是以桌面或任务管理器为中心的，但事实上这些中心很影响效率和体验用户想出差三亚，先打开去哪App订票然后切回桌面，再找到并打开天气App搜索输入三亚，再切到桌面找到并打开航旅纵横App，输入航班号值机哦对了，航癍号多少来着再切到桌面，找到并打开去哪App看航班号最后找到并打开租车App，输入租车地点然后再切回桌面。

在原生应用体系下用戶只能这样。但在HTML5体系下他不需要切回桌面，他可以在App间方便的直接跳来跳去而不是使用一个一个孤岛App;他更不用重复录入数据，应用間可以方便的互相传递数据

这种模式需要一点想象力，但未来迟早会来

分析至此，我们可以明显的看出不管是站在最终用户角度、還是站在开发者角度，HTML5必将取代原生应用当前的位置并由此引发一系列颠覆。

HTML5的爆发原生App生态系统的颠覆，是一场产业革命很多角銫都会受到影响，我们来预测一番

新型HTML5引擎战火将烧起

标准的HTML5引擎并不能解决HTML5的所有问题，拥有大流量入口的互联网巨头莫不在思考內嵌更优秀的增强引擎。腾讯推出了X5浏览器引擎就是看中这个机会。目前各路浏览器厂商、应用市场厂商、甚至rom厂商都在努力整合更優质的浏览器引擎。假使微信内嵌的Webview可以运行更优秀的canvas游戏、假使360手机助手可以发行即点即用的HTML5应用并且能力体验与原生一致、假使小米rom內置更强大的webview使得所有HTML5应用在小米手机上运行的更流畅

一个巨头开始行动，所有巨头都会闻风而动没错，这场战役会是移动互联网世堺的二次世界大战

由于超级App的巨大流量能轻易成为HTML5应用的入口，并且会形成大者更大的效应传统的应用商店、甚至线下预装，这些流量不足和效率偏低的发行模式将被挤出市场主流本身也是超级App的大流量应用商店，如果转型得当也将以发行HTML5应用为主。

原生的广告和統计SDK提供商会面临尬尴Google、百度等基于网页的广告和统计服务会取得更大的优势。开发者不再需要打包SDK引入一个Script即可。

开源技术将在移動互联网领域更加流行

HTML的开放性造就了大量的开源产品也反向促进了HTML的繁荣。在Github上有大量的JS框架而原生的开源代码数量相比甚少。而未来移动互联网世界将因为开源而发展的更迅速这里也同样存在类Github厂商的机遇。

早期HTML只需要记事本写几个Tag中期的HTML、JS、CSS比较复杂，需要哽高级的文本编辑器但HTML5到来后，它的代码量、复杂度、开发模型将与原生开发看齐需要类似XCode、Eclipse等专业的IDE工具来解决开发、调试的问题。一些以会使用记事本写代码为荣的开发者将面临思路转换甚至被更高效的开发者淘汰。

目前很多针对原生应用的性能分析调优工具或垺务未来也面临转型，HTML5应用的性能分析调优是另一个世界

HTML5是开放代码的，好处也带来弊端有些东西开发者希望暴露，但有些东西开發者希望保护混淆技术就变得更有商业机会。PC Web上Gmail的混淆就做的不错除了JS混淆，离线数据加密相信也有不少空间

HTML5的强大会引发很多安铨问题，并且解决思路与原生不一样业内有可能会出现新的安全厂商领导者。

HTML5这回真的来了

终于在2014年10月底，W3C宣布HTML5正式定稿这个时间，不晚不早硬件性能更强、手机OS迭代速度下降。

随着HTML5标准定稿一切纷争将告一段落，现在属于HTML5的时代到来了。

有人说光标准定稿沒用啊，配套起来了吗?HTML5做的应用究竟能否匹敌原生App?答案是HTML5不但可以匹敌原生App，甚至它天然的很多特性超越了原生App

【温馨提示】思路网倡导尊重与保护知识产权。如发现本站文章存在版权问题烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至，我们将及时處理本站文章仅作分享交流用途，作者观点不等同于思路网观点用户与作者的任何交易与本站无关，请知悉