H5到底是个什么玩意?!
技术人员理解:
前一段时间很火的 吴亦凡入伍的广告
你看静态新闻的时候,是在加载后面两个视频,加载完成之后,吴亦凡就蹦出来了
所以你们看到吴亦凡从画面里面出来的时候脑海里的台词是:
卧槽,这是怎么做到的!
而我的内心台词是:
卧槽,我知道是怎么做到的,你把流量还给我好么!
================================
更新一张之前和甲方之间的聊天记录,在整个minisite已经交付上线以后,甲方突然问了这么一句,大家感受一下。
这就是为什么我很反感别人跟我说H5,我特么知道你到底什么意思。。。
===================================================
先科普一下,HTML5并不是一项技术,而是一个标准。
标准的意思就是:学生准则手册。你可以按照准则做,甚至可以超出准则更加严格的要求自己,也可以不按照准则来,但是会被老师训斥小伙伴讨厌,别人都不找你玩,就像IE6一样。
那HTML5这些标准浏览器厂商到底姿持不姿持呢?这要看他们各自的尿性了。像chrome这种不仅在很多标准上支持的非常好,还积极上进很多地方超出了标准,支持一些标准中还是草案的部分。
所以其实要么我们是作为理论派讨论HTML5标准,要么是作为实践派讨论HTML5标准在某浏览器的应用。但是实际上我们在说到H5的时候,并不是指标准,也不是指标准的应用,而是一个硬生生造出来的奇怪概念合集,所以我是旗帜鲜明的反对这个称呼的。
最近一年的时间,我主要靠这个东西养家(并没有家)糊口。所以我是懂得甲方打电话过来询问,“你是不是会做H5开发?”的时候,我知道他们要的是那种可以在朋友圈分享的,看起来很酷炫的小页面,他们实际要的东西拆开来看大概包括以下技术点;
1. 页面素材预加载技术,可以使用createJS之中的preloadJS。我没有看preloadJS的源码,不过预加载并不是HTML5标准中更新的方法。
2. 音乐加载播放技术,createJS中同样有soundJS可以实现,而且这部分说起来确实是HTML5标准支持的内容,在上个时代并没有audio这样的标签。
3.可以滑动的页面,大多数是用了swiper.js这个Jquery插件,也有一些是手写的swipe,比较拙劣的手写版页面是不会跟手滑动的,其中touchstart等四个touch系列的事件是HTML5标准中的事件
4.可以涂抹擦除,多半是canvas叠加层,canvas是HTML5标准里面的标签,是代表了先进生产力的标签。
5.有动态的文字和图片,常见的是使用了css3或者直接使用js动画。很多时候提到HTML5多半还会带上CSS3,而CSS的分级又是另外的一个问题了,在不同的项目标准上,CSS会独立定级,以后应该不会有CSS4这个东西,所以大家也不用担心在H5以后又冒出来了C4(不过真是想用C4炸死那些每天把H5挂在嘴上的人)
6.可以填表报名,这是最基本的表单,是有网页以来就有的东西。
7.可以支持分享自定义的文案和图片,这个是用到了微信的jssdk,和HTML标准半毛钱关系都没有。
8.还有其他我想起来再补充的。
所以我们在谈论H5的时候,实际上是一个解决方案,一个看起来酷炫的移动端onepage网站的解决方案。而这个解决方案不仅包含了HTML5新增的audio标签,canvas,拖拽特性,本地存储,websocket通信,同时也包括了盒模型,包括绝对定位,包括一切前端的基本知识。
有学弟来问我说,学长我想学H5,应该从哪里开始?
我说HTML5新增特性在W3C上都可以查得到的。
学弟说,不,我想学的是H5,想做H5的页面。
于是我猜测他所指的就是上面论述的这种酷炫小页面,我就说,那你要先学习HTML,包括HTML5的新标准和之前的全部标准,然后学CSS以及CSS3,了解它们在浏览器的实现情况,原生JS了解一点就可以,大多的操作可以用Jquery,了解常用的几个Jquery插件的用法,应该就差不多了。如果想要做更酷炫的的,学一下egret或者cocos2d更好。如果要优化加载速度,还要学一下grunt一类的自动化工具。微信的sdk有很多坑,至少nodejs或者php一类的后端语言要会一点。
学弟说,那这不就是前端了么?我只是想学H5啊。
所以你看,当我们对一个概念的内涵无法统一的时候,我们根本不知道彼此之间在谈论的是什么。
”H5“本应是一个技术合集,却被意会成了一项技术,变成可以在质上而不是量上描述的概念。
对于营销来说,我们只要讲我们可以做H5或者不能做,这种定性的描述就够了。但是对于技术上,这是定量的事情,只能在具体某个技术项上是否,无法对这个本不存在的概念说是否。
就比如我遇到过有甲方说,我们之前找了一个人做H5,做的还不错,但是这个case他又说做不了,我也搞不懂H5和H5之间也有那么大差别吗?我只能笑笑和他说,世界这么大,各种各样的H5都是有的。
这就是为什么我反对H5,因为这个名词和它表示的内涵是严重不符的,这让我们难以沟通,让营销人和技术人之间产生误解,让浑水摸鱼的培训师们赚的盆满钵满,让技术新人不踏踏实实的学习技术。
每当有人问我,”你是不是做H5的?“
我的内心都很想咆哮一句,”你才是做H5的,你全家都是做H5的“
营销人员理解:
虽然现在互联网圈开口闭口就谈H5,前段时间去了一个昆明本地的一个读书沙龙,和大家聊天的时候很自然的就和大家谈到了H5? 然后就有人问我H5到底是什么?
我一下子也懵了,不知道该怎么向他们解释。
说是HTML第五代标准么?这种解释太性冷淡了吧!而且和我要说的内容也不符合。
然后我想“微场景”这个词会不会准确一些呢?这样的词说出来其他人就更不知所云了。
我当时只能给他们解释,你们还记得在朋友圈里那些打开后的动态页面吧?那就用H5技术实现的,所以简称H5了。
我就想了一下,我们平时在工作中微信里跳转的链接大概分为两类:一种我们会叫它web页面,虽然也是用H5写的;另一种我们才会把它叫做H5。实在是水平不够,没找到合适的文字进行描述,所以直接上图大家感受一下吧!
我也给不了大家对于H5的明确定义,既然定义下不了,那么就用举例法来搞定这个事情吧!
也算是给大家科普和整理下现有的H5形式啦!
初阶:
幻灯片玩法
实现难度:★
开发周期:1-2天
用户参与指数:★
分享指数:★
所需资源:一枚活动策划,一枚设计师,第三方H5制作工具(易企秀、MAKA等等等)
H5的初阶形式就是幻灯片,基本上就是把PPT移到了手机上来。有很多的第三方制作工具都能够完成这个工作,百度一下全都有。PPT移到手机屏幕上会发生什么呢?和PPT行业一样的,全靠制作者的设计感。
高逼格性冷淡的有,无所畏惧弹弹弹的也有,满屏文字不考虑用户体验的也有。不管怎样,H5行业点亮了“视觉设计”的技能树。
对于企业来说,利用这种H5去迎合热点。因为制作成本低,能够做到快速反应。如果有清晰的策划,熟练的设计师从设计到制作完成,差不多一天时间就能搞定。但是因为只是像PPT一样去简单叙事,用户的参与感极低,带来的转发量和转化率也相对较低。
进阶:
交互式H5
实现难度:★★
开发周期:2-3day
用户参与指数:★★
分享指数:★★
所需资源:一枚H5策划;一枚视觉设计师;一枚交互设计师;一枚前端工程师;一台服务器
进阶第一级,在大家对H5的不断尝试过程中,一些公司率先将丰富的交互效果加入到了H5页面中,点亮了“交互设计”的技能树。H5页面不再是呆板的一页一页切换了,不再需要你去等待一个个特效加载完。
用户体验开始进入H5页面的设计过程中。
因为对用户体验的挖掘和交互效果的实现,H5从体验上开始让用户有了参与感,因为参与感的提升,用户的分享指数也带来了进一步提升。最典型的一个例子就是神州专车的“史上最长加班夜!”
http://mktm.10101111.com/html5/2015/overtime/index.html
(二维码自动识别)
测试/答题类,提交表单H5
实现难度:★★
开发周期:2-3天
用户参与指数:★★
用户分析指数:★★
所需资源:一枚H5策划;一枚视觉设计师;一枚前端工程师;一枚后端工程师;服务器
进阶第一级,除了交互设计方向,有人想到了是不是该点亮“数据库”技能树了。所以我们愉快的添加了一枚后端工程师,开始搭建测试类和答题类的H5。可能有人会疑惑小测试什么的不是前端工程师就能搞定了么?
原因是这样的,从企业对获取用户数据的欲望是与生俱来的,你以为你做测试的时候真的只是做测试么?当你填下你的选择之后,你提交的数据开始输入企业的数据处理中心,分析你的喜好、分析你的需求、分析你的消费水平、分析你的消费态度,确定你是不是目标受众。
所以点亮“数据库”技能树之后,你会发现H5变得更聪明了,当然企业也能收集到用户的更多数据了。而且这个时候,我们就可以实现报名等等表单收集的功能了,有种连上世界的感觉了呢!
http://mobi.durex.com.cn/915wifeday/
(二维码自动识别)
动态小游戏
开发难度:★★★★
开发周期:1-2个周
用户参与指数:★★★★
用户分享指数:★★★★
所需资源:一枚H5策划;一枚视觉设计师;一枚交互设计师;一枚游戏开发工程师;一枚后端工程师;一颗游戏引擎;服务器
在点亮“交互设计”和“数据库”的技能树之后,H5得到了快速的发展,这时候黑科技“游戏引擎”被点亮了。
标志性事件就是火到没有朋友的“围住神经猫 ”。一个简单的小游戏带来的传播效果实在是惊人,也让大家看到了H5游戏的火热前景,很多公司前赴后继投入了H5游戏的开发。
但是由于H5游戏的开发成本较高,很多小公司可望而不可及,这个时候一些微信营销工具开始进入这个市场。在很多的微信营销工具上也出现了很多可以修改的游戏模板,但是这些游戏重复率太高,仅仅是简单的修改了一个UI,最后导致用户视觉疲劳,已经激发不起用户的参与感了。
动态小游戏要激起用户的热情已经没有那么简单了;需要策划、创意、设计、游戏制作以及激励手段的紧密配合。
http://m.muzhibuluo.com/single_dog/startup?cc=mzblcd
(二维码自动识别)
功能型H5
开发难度:★★★
开发周期: 1-2周
用户参与指数: ★★★★
用户分享指数: ★★★
所需资源: 一枚H5策划;一枚视觉设计师;一枚交互设计师;一枚前端工程师;一枚后端工程师;一台服务器;
在还有一个从H5诞生就被赋予极大想象空间的技能树,“H5轻应用”的技能树也开始被点亮。在微信还没有撑起H5这个市场的时候,“轻应用”这个概念就被广泛提及,百度还有一些浏览器厂商都想建立起来相关的生态链,但是都不算成功。
对于用户来说:功能性的H5能提供一些使用频次较高的功能,免除下载App的麻烦,比如查快递、房间预订等功能。
对于企业来说,需要将功能型的H5当作一个产品来对待,不断的迭代,满足用户需求。
上面提到的只是常见的一些H5的形式,在H5这个大树上,还有更多的技能等待被点亮;在做H5的时候可以根据不同的需求选择不同的技能叠加,会给你的H5带来意想象不到的buff加持。