纵观HTML5的发展，也是一波三折，有用户的需求在推动，有技术开发者的需求在推动，更有巨大的商业利益在推动。过去这些年，HTML5颠覆了PC互联网的格局，微信朋友圈里的一个围住神经猫小游戏，打开了人们对移动互联网的各种幻想，优化了移动互联网的体验。虽然HTML5带来的颠覆让我们震撼，但是如何让你的HTML5应用真正的火起来，不被人们遗忘，才是我们现在目前最为关注的。接下来伍游网就带各位直击Google for Publishers活动现场，听听Google总监沈恺对H5的看法。

　　“大家好，我是沈恺，又和大家见面了，我在Google呆了11年，过去我在Google做了联盟所有的业务，从开始的内容广告，到搜索广告，再到后来的视频广告和移动APP广告，但目前来说，我们最大的也是我们增长最快的一个点就是我们的移动页面广告。百度财报最近显示，百度56%的收入来自于移动页面。我们如果把所有的流量分成传统的PC、APP和移动页面的话，那么移动页面无疑是增长最快的。我相信大家也用过几个公开的引擎，也有团队自己开发过相关的引擎，但是如何让你的HTML5应用火起来，达到像神经猫这样的水平，或者像其他一些比较火的应用的水平呢？其实让你的HTML5应用真正火起来是需要做很多事情的，这个不光是美工的事情，还有前端工程师包括你们整个后台的架构和产品的设计思路，所以今天我就抛砖引玉吧，先给大家讲一下2015年HTML5到底发生了些什么？”沈恺说道。

2015年HTML5发生了什么？

　　2015年初，Facebook宣布推出React Native开源框架，新版页面语言。

　　2015年初，腾讯微信推出了JS SDK。

　　2015年中，阿里巴巴公司的Judy Zhu入选W3C Advisory Board，这是中国人在W3C组织中话语权最高的位置。

　　2015年中，HTML5中国产业联盟举行扩大会议，引入十几家会员单位。

　　2015年中，Firefox副总宫力离职创业H5 OS并获得巨额融资。

　　腾讯QQ玩吧成为重要的HTML5手机游戏平台。

　　360手机助手与DCloud合作推出流应用（让JS调用操作系统的40万API），开启HTML5替代原生的序幕，可以离线运行，桌面启动，直接进入购买页面。

　　我们都说HTML5年年是元年，而且看到这些事件，相信现在的HTML5元年马上又要来了，我们也许又会见到流水很大的产品问世。现在一些巨头的加入，也让许多参与者获得了许多收益。年年是元年的情况，以后也会非常多，比如说我们现在所知道的VR，VR也是年年是元年，VR的活动也特别多，但要真正等VR产品落地，进入消费者的圈子，还有很长的路要走，所以我们现在需要的是脚踏实地，做自己能做的事情就好了。

　　HTML5页面要做的好，我们首先要明白这个到底有什么功能和目标是最重要的，接下来我就简单给大家举一些例子：

功能与目标：活动运营型

　　形式：游戏、邀请函、贺卡、测试题等。

　　案例：大众点评电影推广《狂怒》。

　　要点：更强的互动、更高质量、更具话题性。

　　注意：合理的引流路径。

功能与目标：品牌宣传型

　　形式：品牌微官网。

　　案例：保健品－首草。

　　要点：符合气质的视觉语言，传达精神态度，留下深刻印象。

　　注意：用户情感，品牌辨识标志。

功能与目标：产品介绍型

　　形式：产品功能介绍页。

　　案例：Lexus NX汽车。

　　要点：运用H5的互动技术尽情展示产品特性。

　　注意：手指合理的触碰、摩擦、滑动等互动形式带领用户探索。

功能与目标：总结报告型

　　形式：年终总结。

　　品牌：京东十大任性。

　　要点：不同页面间通过手指滑动实现流畅的视差滚动效果。

　　注意：扁平式插画效果好。

具体的表现形式也有很多种：

表现形式：普通图文

　　形式：照片、插画、GIF等。

　　案例：嘀嘀打车。

　　要点：通过翻页等简单交互操作，起到幻灯片的传播效果。

　　注意：高质量的内容和讲故事的能力。

表现形式：礼物／邀请函

　　形式：礼物、贺卡、邀请函。

　　品牌：AKQA水晶球。

　　要点：提升用户好感，潜移默化宣传品牌。

　　注意：重力感应、3D技术，文字与背景音乐。

表现形式：问答／测试

　　形式：问答、评分、测试。

　　品牌：大众点评电影推广《一步之遥》。

　　要点：清晰的线索，到达结果页合理不突兀。

　　注意：出彩的视觉和文案，弱化答题的枯燥感。

表现形式：游戏

　　形式：品牌植入式小游戏。

　　品牌：Same《圣诞老人拯救计划》。

　　要点：玩法和设计多下功夫，操作简单、竞技性强。

　　注意：避免创意缺乏和同质化现象，导致用户产生厌倦。

设计的时候一些可以加分的要点也需要注意一下：

设计加分要点：细节与统一

　　细节与整体统一：

　　视觉风格／字体

　　语气／文案

　　情感／动效

　　背景音乐／分享路径

设计加分要点：利用话题效应

　　根据热点，H5专题页第一时间上线，传播窗口三天。

　　天天P图推出媚娘妆，同时《全民COS武媚娘》H5互动页成功推广。

设计加分要点：讲个好故事

　　有价值的内容始终是第一位的，学会讲故事，引发情感共鸣。

　　LEVI’S新年优惠活动页引出“这个新年，把压力和束缚打包扔掉，用新鲜的眼光感受生活，一起活出趣”的品牌推广Slogan。

设计加分要点：流畅的互动体验

　　淘宝双12预售推广H5页，浏览过程中只使用一种向上滑动的手势，设计师营造出丰富的视差滚动效果，单个图形元素的遮罩、旋转与整体页面的动势配合默契。

　　“这些大公司做的东西其实都挺好的，都利用了一些巧劲，有些时候一些大公司反而不愿意把东西做的太复杂，毕竟产品的稳定性才是第一的。”谷歌商业合作部总监沈恺如是说道。

　　了解更多游戏相关资讯，敬请关注伍游网（tongji.5you.cc）。