H5技术的潮流----阿冬专栏

H5技术

　整个7 月下旬，微信朋友圈被一只表情很欠、身材妖娆的猫无情“刷屏” 了。“ 我用了11 步围住神经猫，击败89% 的人，你能超过我吗？” 游戏规则很简单，在一个异化版的围棋界面上，玩家需要做的只是点击圆点围住神经猫。但其默认分享的模板设置，让朋友们纷纷陷入“秀智商”模式，你追我赶地比拼最小步数，按游戏宣传语的话说，就是“根本停不下来”。

 

　　当然，神经猫的流行也只不过一个星期，然而作为移动互联网时常出现的现象级游戏，神经猫却让整个游戏产业见识到了HTML5（以下简称H5) 技术可能为游戏带来的巨大变数……

 

　　神经猫为什么成功？

 

　　《围住神经猫》、《看你有多色》、《打企鹅》、《捏泡泡》……今年以来，不少小游戏一个接一个地占据着微信朋友圈。这些游戏的规则极为简单，游戏时间也极短，一两分钟就可结束游戏。它们的生命周期也很短，一般几天之内，这些小游戏就会销声匿迹。

 

　　它们都有一个共同的特点：分享到移动端最为人气集中的微信朋友圈中，和小伙伴们比比高下。这一设定其实从去年年初火爆过的《疯狂猜图》游戏开始，成为了社交游戏的标准配置。

 

　　利用社交圈的攀比心理，是该类游戏成功的一大关键。游戏《看你有多色》的开发方就曾对媒体表示，他们基于社交圈的好友关系及信息分享链，重点挖掘了用户分享和攀比的模块，促使玩家获得了更好的成绩后忍不住一次次在朋友圈炫耀。同时，他们在用户使用朋友圈的高峰时段去推动，“让你的朋友也来试试吧”、“看看你的朋友玩得怎样”等吸引玩家分享游戏的话语，出现在每款游戏中，玩家只需要点击一个键就可以分享到朋友圈。

 

　　手机游戏渐成热门

 

　　进入2013 年，手机继续保持第一大上网终端，在移动互联网发展的推动下，手机游戏日渐成为中国游戏市场的热门。首先，各大厂商进军手机游戏市场，手机游戏市场潜力已经得到认可，而未来激烈的市场竞争也将促进行业良性发展，市场快速增长可期。其次，大量游戏开发者进入手机游戏市场，游戏玩法、画面风格以及游戏题材越来越丰富，产品数量呈现爆发性增长。最后，手机游戏社交性加强，手机随身性、实时性可以更好的维持社交关系，使用户的关系网从PC 端移至手机端，而社交元素的融入大大提升了用户对游戏的使用黏性。

 

　　数据表明，微信游戏平台的推出，为手机网络游戏用户起到了非常重要的“拉新”作用。微信庞大的用户基数和游戏中社交元素的嵌入，不断吸引新用户加入。

 

　　H5游戏“极简现身”

 

　　对于H5 能够为游戏提供多大实现可能这一问题，为《围住神经猫》提供游戏引擎支持的Egret 联合创始人马鉴认为： “在2D方面，H5 与原生游戏已没有太大差异，因为Web 游戏的3D 化形式和原生的3D 化形式就没有技术的划分线了。” 但事实上，时下的H5 游戏，只能是极简状态下的小游戏，而且暂时只能在移动端上引人注目。

 

　　对于研发者来说，H5 游戏有三大难关：其一是要想开发一款能在所有平台都能正常运行的HTML5 游戏无疑是一项挑战，设计者必须在海量支持H5 的设备上作测试；其二是游戏需要兼容各种不同的控制方式，用户可能通过鼠标、键盘、智能电视遥控器或者iPhone 来玩游戏；其三是H5 游戏音频的滞后是导致浏览器尤其是移动浏览器载入时间过长、游戏卡顿，浏览器崩溃的最直接原因。

 

　　很显然， 在当前状态下，H5 游戏还只能暂时以小游戏的方式出现在移动端上，特别是音视频的嵌入还不足以在网页条件下得到充分显示的当下。因为，太过复杂的呈现方式，就算网页能够正常加载， 但用户手机的移动互联网速受不了，流量费用也受不了。

 

　　亟待破局的赢利难题

 

　　而在PC 端或电视端，较之移动端，对游戏的品质要求更高，如果想要实现跨屏，迁就移动端的H5 游戏暂时难有市场。

 

　　一位玩家说，H5 游戏比不上大型游戏设计精美、情节复杂，但自己不需要坐在电脑前一动不动地盯着电脑屏幕，不需要投入金钱购买装备，不需要绞尽脑汁获得胜利。虽然谈不上爱它，但自己不介意用它来打发时间。

 

　　这其中，却折射出另一个问题，碎片化时间里的点滴空闲时间太过短暂，游戏的流行时间也十分短暂，这样的游戏很难象APP 游戏那样靠买装备来获得收益。对此，游戏公司也十分无奈。成功推出了现象级小游戏《打企鹅》的广州百田就将其开发H5 游戏的主要目的定位为孵化和积累，目前并没有找到赢利点，仅仅是积累用户的阶段。

 

　　通过植入广告赚快钱，或许是当前唯一的选择。有报道称，《围住神经猫》就接入了腾讯的广点通广告。据搜狐IT 报道， “神经猫”在巅峰时期的收入最高可达每日百万元。同时也有业内人士表示，即使是专注山寨H5 小游戏也能赚钱，只要保证产品能有百万访问量，几天下来赚个十几万元是没问题的。

 

　　但要获得百万访问量，从越来越多的H5 小游戏中脱颖而出也非易事。9G 游戏创始人黄加阳就认为，时下每100 款游戏， 才能出现1 款现象级游戏。而业内人士则指出，随着H5 游戏的海量爆发，爆发率将会更低，而且仅仅靠爆发那几天时间里的广告收益，也不是长久之计。

 

　　H5 技术不断发展

 

　　不过，目前的“ 瓶颈” 不能挡住H5 技术的“光芒”。对比两组数据不难发现，2013 年，在微信朋友圈中蹿红的H5 小游戏除了腾讯自身几款外，就只有《疯狂猜图》，在火爆的那一周，日增用户最高峰值也只是30 万；而在2014 年，仅7、8 月间，《全民寻找房祖名》2 天内被玩了6000 万次。《看你有多色》上线2 日用户数达3000 万，《围住神经猫》更创造了3 天500 万用户和1 亿访问量的奇迹。

 

　　前者需要你另外下载APP 才能玩，这个过程中会流失许多用户；而后者，你只要点开朋友圈的分享，就能通过浏览器在网页上玩。在网页上直接玩，其实恰恰是神经猫们成功的关键。这些都是基于H5 技术的网页小游戏。

 

　　H5 是用于取代1999 年制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些H5 技术。H5 有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。简单来说，它能在移动端做出Flash 做不出的动画效果，即H5 就是移动端的Web 页面。但如果仅仅将H5 看作是替代Flash 的一个技术，就过于低估了其真正的能力。

 

　　乔布斯2010 年在加利福尼亚州库比蒂诺总部的公司会议上说，“没有人愿意使用Flash，全球已经开始步入H5 时代。”

 

　　那对于开发者来说，H5 与Native APP 相比有如下7 大优点：开发成本低，仅为APP 的1/5 甚至1/10；免适配、跨平台；维护方便、不用升级；互动性强，便于产品的快速迭代；无安装门槛，推广成本低；便于积累经验和数据；可将轻应用放置在手机桌面，有效提高活跃度。

 

　　轻应用无限可能

 

　　在业内，对于H5 游戏的未来，观点已经趋于一致。而同时，另一种赢利形态也在悄然出现。只是不属于游戏公司，而是企业级的网络营销。

 

　　比如，健康元药业就将测年龄测美貌的APP 游戏《神奇魔镜》优化成H5 游戏，并通过自己的微信公众号，号召粉丝进行游戏，从而形成品牌传播，而诸如《疯狂猜图》这样的游戏，亦可依样画葫芦，为企业的移动社交口碑营造创造无形的口碑效应。

 

　　再如，但从现在的发展看来，新闻门户的“H5”化是毫无悬念的。这一次，搜狐跑在了四大门户的最前面。按搜狐官方的说法，这是“为高端手机用户提供更好的产品体验”。事实上，手机腾讯网和百度WAP 端已经实现了部分H5 化，但都没有像搜狐一样彻底推出H5 的全站新版。

 

　　又如，以音乐产业为例，大众通过智能手机终端收听音乐已成为主流趋势。中国移动咪咕音乐也于近期率先推出了基于H5 技术进行改版的触屏版手机门户网站。自5 月初上线以来，新触屏版日均访问用户数达50 万，访问页面数较改版前提升74.6%，用户使用度显著提升。咪咕音乐相关负责人表示，WebApp不仅弥补了传统APP 的缺陷，并且自身优势明显。

 

　　随着下一代协议标准HTML5 的推出与普及，基于浏览器的WebApp有望在未来与客户端APP 形成新的竞争局面，成为移动互联网主流的应用模式

   

     现在市场上做H5的主要有以下几种类型的公司：

1、公关公司——这类公司离客户最近，他们承接客户的活动比较多，一般是受客户要求或主动向客户推荐H5的方式来做，但是公关公司基本没有技术人才，所以大部分都选择外包。我们的一些客户就是公关公司推荐过来的。

2、广告公司——H5是移动端一种比较好的广告展示方式，有的广告公司在一些项目上也会把H5外包出来做。这种都是广告公司提供创意，然后技术和设计的部分外包给第三方做。

3、互联网公司——有些互联网公司也会自己开发h5，做一些传播性的东西或者把自己的产品H5化。

4、微信开发外包公司——以前的建站公司或者微信菜单开发工作室，看到H5比较火爆，也开始做这块业务，但是还没有形成规模。

5、个人开发者——接公关广告公司外包项目的H5开发者，据我们了解,一些个人开发者的月收入已经达到10万左右了，这主要还是得益于客户旺盛的需求和公关广告公司这方面人才的匮乏。

6、H5模板网站——这是比较专注做h5的公司，在2014年还比较火，也挣了不少钱，但是到2015年被定制化业务冲击的，许多公司已经开始逐渐实施免费服务了。

7、H5生成工具——这跟模板类公司差不多，但是活的不如模板公司，而且盈利情况也不理想，不过最大的好处就是这种类型的公司可以走融资路线，这也是一种挣钱的模式。

8、游戏开发公司——目前许多H5游戏开发公司并不挣钱，很多公司只能在游戏还没火之前，接一些H5的外包业务。但这毕竟不是长久之计，人才流动比较大。我们团队就接收了不少开发者。

9、H5平台公司——这种类型公司走的路线跟模板类差不多，就是平台化概念，实际上大部分都在亏损，不过幸亏融资情况都很不错，所以这种类型的公司在融资之前也会做些外包的业务。

10、精品定制化——未来应用一开始的定位就是这个方向，我们希望能成为这个行业的定价方向标，大家以后定价都能根据我们来参照，比我们做的好的定价更高，比我们做的差的定价更低。未来应用甚至考虑做一个价格公示，让这个行业有个透明公正的价格体系。

估计这个行业里应该有上千家的第三方提供制作H5服务的公司，我们主要是以定制化精品H5为主，其他公司大部分都是提供模板化服务的。几个月前模板公司还是挺挣钱的，收费都挺高。定制化的产品逐渐多起来时，客户的胃口就变刁了，更多的定制化的需求正在苏醒过来。现在许多做模板的公司都实行免费，我想这应该是主要原因吧。再不免费的话，就留不住客户了。

我们可以很清楚的看到，这个市场在逐渐火爆的同时，也越来越混乱，越来越不规范。无论是第三方开发公司，还是广告主，在面对H5营销时都会遇到这样那样的问题，或者说有这样或那样的误区，现在让我们看看这里面的坑究竟在哪？

1、幻想凭一款H5能一夜成名

期望高、投入少，许多市场营销人员，特别是老板，都希望靠一款没有任何推广投入的H5一夜成名，但现在这种情况在微信朋友圈里已经不可能出现了。

H5页面的推广方式乏善可陈，无外乎朋友圈分享和微信公众号推广，但目前的H5营销无论是在表现形式还是内容创意上，依旧面临着很大的挑战，同时微信朋友圈的用户对日渐增多的泡沫信息感到疲劳，产生了某种程度上的抵抗力；而微信公众号的暴增则让打开率和阅读量持续走低，想让一款H5一夜爆红的可能性不是没有，但的确是越来越小了。在整个H5的产出中所占的比例也会低到令营销人员所难以忍受的地步。

2、营销推广只索取的态度无法长久

未来应用经常建议客户投放微信广点通广告，我们觉得在微信里传播就要遵守微信的游戏规则，不应该只想从微信里摄取东西，而应该转变思维，想想我们给微信贡献了什么？我们给用户带来了什么？你给微信贡献的越多你的回报也会越大。如果有一款H5之所以能在微信朋友圈里成功，主要还是创意和制作人要始终站在为微信用户思考的角度来制定H5策略的，我们要做让用户喜爱的“广告”，用户才会分享转发，而不是靠强制性的要求和诱导，这种结果最终会被用户投诉，甚至被封。

3、H5本身还存在技术问题

作为一项本来还不太成熟的技术，H5是在微信的社交舞台下才大放异彩的。目前看，H5的问题依旧比较多，技术上还有很多不足需要改进，比如页面切换白屏、下拉菜单不流畅、多个音频播放不流畅、移动设备件的接口API少等，无法扫描二维码、无法用语音输入、无法一键分享到朋友圈。这些对营销人员来说，都是一个个掩藏在脚下的深坑，一不留神就掉进去了。

4、易抄袭且缺乏知识产权保护

如果你运气，通过千辛万苦做一款好的H5应用，例如像神经猫那样，那么比你更开心的一定是其他抄袭者，他们可以轻易的把你的H5抄下来，换成他们的域名挂上去，然后再把广告联系方式改成他们自己的。神经猫、2048等就衍生出许多版本，大部分人可能都没有访问过原版（因为抄袭和模仿者太多），抄袭的轻者换域名，更厉害的是把你的创意拿去然后在短时间内做一个比你更好的游戏或者应用，让你的泪儿哭干。

5、作品同质化现象严重

很多人对H5的理解都是停留在用户层面，邀请函、小游戏、品牌展示、抽奖等等，但大多数作品的同质化现象很严重，无论是形式上，还是内容创意上。这对营销人员和制作人员的要求逐渐在提高，挑战也越来越大，想随随便便做一款能够引起注意的作品并不容易。

6、寄人篱下不确定性大

H5之所以能一下子爆火，微信的功劳最大，但是微信正把H5最优质的入口收紧——朋友圈分享红利正在逐渐消失。这里作品的特点是受平台政策影响较大，未来具有不确定性。微信在近期出台了针对朋友圈分享的政策限制，诱导关注与分享，初犯将会面临封号30天、拦截链接、删除诱导增加的粉丝和关闭流量主的处罚，二次违规将直接永久封号。而且转发量超过一定数量后微信就会屏蔽朋友圈，意味着未来微信里再也不易出现花费很少的钱获得流量破千万的H5。

目前需要注意的是：1）、分享的图片和自定义接口已变更，请注意修改；2）、请勿在标题中涉及分享赢大礼、100%中奖等恶意诱导的关键词；3）、分享页面需部署在拥有ICP备案的域名上。

7、机型成千上万适配难度大

刚刚开始做H5的企业面临的第一个问题就是，机型适配，由于手机的型号繁多，系统、屏幕都不一样，所以在显示和一些功能性的接口开发时都会耗费一些时间，如果你是刚刚入手希望能做个热门的h5应用，那么初期机型的适配会让你吃一番苦头，不过幸亏这个还是可以解决的，比其他前面的那些坑，这简直是小巫见大巫。