首页 > 新闻动态 > 计育韬:HTML5的基本技术实现与营销投放策略
计育韬:HTML5的基本技术实现与营销投放策略 2016-05-16

今天要讲的,是从HTML5基础技术角度切入的。来听课的大家即使不是程序员,也可以达到两个目的。一个方面运营人员可以尝试去做前端设计,另一个目的是利于营销运营岗和外包公司沟通。很多时候产品经理很容易和程序员吵架,是因为产品经理不了解技术范畴内容,而技术有时候也没法完全将产品经理的诉求体现到位。因此了解这些技术,对整个运营的顺利进行都非常有帮助。

营销策划  营销策划公司  营销咨询  营销咨询公司  品牌策划  品牌策划公司 

H5是HTML5的缩写,这个用法虽不规范,但因为大家普遍称H5,所以腾讯也这么用了。HTML5定义:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

一、HTML5、HTML4与XHTML的关系

举个例子,最近舆情上热度持续较久的一个重大事件,魏则西死亡的一系列相关事件,背后牵扯到莆田系医院还有正规三甲医院的区分和比较。在网上我看到很多段子,比如关于页面设计风格、界面交互等两者会有很大的差别。其实通过HTML语言也可以看到。

图片中是上海比较好的三甲医院,它首页的代码是这个效果。可以看到页面中使用了清楚的换行,明确的注释,总之看上去很清爽。

对比一下,随便抽取一个不太正规的武警医院的首页,页面不换行,虽然有的地方会出现换行,但是总有些内容是挤在一起的。这里并不是说写代码到底是换行还是不换行好。而是之所以不换行,是因为程序员最早是用.NET写的代码,三甲级医院一般是能看到PHP、JSP的痕迹。而上面说到的这种武警医院用到的,多是使用打包的.NET第三方工具,所以上传后会把换行符去掉。

这两者的差别是什么导致的呢?其实也不是说好医院就必须要用新的技术,不正规的医院就用不好的工具。归根结底都是做营销,都是有预算成本的。大医院做个官网有足够的预算,但小医院没有这么多预算,也没必要去找好的程序员,花较高成本去搭建站点,优秀的程序员也不愿意接这种活。因此小医院的网站就会有很多.NET的代码撰写方式。

其实武警医院一般在官网首页上会有声明是XHTML1.0。其实HTML4这个语言刚刚诞生的时候,大家觉得非常好用。但是可能存在习惯用XML写代码的程序员,写完XML会在HTML4就会出现很多有问题代码的留在页面里。可以说到现在,98%的HTML4的页面中都存在一些问题。然后现在一般用XHTML去做语法的补充,也可以兼容可以提高页面的容错率。本身很多武警医院的网站,因为代码书写不规范所以会使用.NET去写,XHTML去补充,这样就能提高各部分的兼容性,让主要功能被调用出来。

营销策划  营销策划公司  营销咨询  营销咨询公司  品牌策划  品牌策划公司 

那么HTML5和HTML4有什么区别?明确出现质的飞跃,是HTML4到5出现了Audio和Video,音频和视频的标签,以及画布,有助于做同时交互。以前比较好看的网站页面都是用的Flash,它几乎无所不能,小游戏、视频等都可以用Flash去实现。后来第一个抛弃Flash的大厂商就是苹果,当时乔布斯说Flash已经没有用了,现在应该用HTML5。

很多人当时非常难以理解,但是事实证明轻量级HTML5对视频和音频的承载效果非常好,比如我们可以在微信上看到很多网页,这个浏览器应该是腾讯自己的,或是搜狗嵌入的浏览器,虽然我们看不到痕迹。这一点可以从图文都是H5、可嵌入视频,所有的图文消息H5都可以生效看出来。除了音频,是嵌入的Java的控件。

二、HTML5的应用

大家现在熟悉的HTML5,大家主要是在微信朋友圈看到,用于微信营销。有种说法认为是朋友圈导致H5的火爆,现在很多讲师也这样说。但其实H5早就在Facebook上运作起来了,Facebook上有很多H5营销的案例,也是非常有意思的。

而且H5的应用不仅仅是在移动端、PC端可以展现,很多APP的开发者也会用到。举个例子有个公司找到我的team,希望策划一个商业运作的策略,但是需要先推广一个App。App还没上到App Store里,然后会丢给我一个包裹,里面全是HTML的分装,通过电脑本地的HTML就可以独立运行App。78%开发者都遇到过这种情况,2014 年就有21亿的移动端支持HTML5。

三、H5可以实现的效果

HTML5 + CSS3 + Java

图文内对于H5中动效的支持主要是基于两种,GIF和Video。第三种可能是较少使用的是SVG。像这篇文章,里面很多动效的实现和图片都没有关系,并且只消耗91KB的流量。

像SVG的应用大家可能都有经历,比如i排版中的弹幕效果、旋转、闪烁、沿路径滑动等等都是基于SVG。这里画布中动效主体是text文本,另外也可以实现用paste来做动效,只要paste强度够大,甚至可以用图文做出视频。理论上是可以,但会相当繁琐,算是图文能在动效上可以发挥的极限。

上面这两个图文案例,这些主要是展示H5能有哪些比较特殊的视觉样式呈现。接下来说说朋友圈比较常见的这种完全脱离微信图文的H5移动端的营销设计。来看看有哪些技术方式可以实现。

HTML5 + CSS3 + 适当的png

四、实现H5动效的技术手段

1、GIF

用GIF实现动效的工具很多,比如Adobe系列,PS、Premiere、AE、Flash。也有一些PC端的软件比如暴风影音,或者一些截屏工具,也能进行自定义时长进行视频录取。移动端的GIF快手、美图GIF确实也带有GIF制作。GIF是现在比较常见的动效实现方式,并且是H5移动页面支持的。GIF的工作原理就是静态的帧排列到一个图中按次序播放。按这个思路,还有一个重要的动态手段是逐帧动画,很多经典的案例都有用到。

2、移动端逐帧动画

案例一:我们之间就一个字

这是大众点评做的,点击第一下“金”会出现,再点会退出去,这就是通过“金”字每个瞬间的图片按逐帧的方式播放去呈现的。

案例二:陌陌不孤独饭局

这个案例同样是逐帧,效果更加明显。画面中有很多卡顿效果,这种逐帧动画相对于GIF来说对动画顺序的控制有很大帮助。使用者可以在任何地方停止,相对于视频播放来说我们可以在逐帧动画中设计触发按钮,因此在用户体验上更加自由,交互设计的环节也更多。

3、PC端逐帧动画

案例一:

这是Facebook上的例子,和朋友说话时可以发很多动态表情。比如上图右下角的小青蛙是动的,通常大家看到好玩的GIF便会右键另存为,但这时候另存为显示的青蛙是HTML格式,说明此处不是GIF。

按照以下步骤,我们可以来看到这个小青蛙实际上是摆了很多小青蛙瞬间的帧,通过CSS的Step语句逐步的瞬间框住这些小青蛙,去实现看上去是GIF的动态效果,但后台是铺开的画面。

这种逐帧动画的优势体现在让一些用户无法快速直接的右键保存或并成一个GIF,起一个保护作用。

案例二:

这个也是去年经典的案例,有比较强悍的力量感效果。比如其中的反转是基于CSS3的transform。还有很多有力量感的结尾效果,是通过CSS设定的transition即缓动函数去实现的,以及CSS的animation对背景background进行色彩操控。

SVG

然后我举个SVG的例子,是我们给浙江电视台一个子号定制的VI,注意其中的“点点点爱心点点点”的分割线是SVG实现的,顶部的奶瓶也是。

Canvas/Flash?Canvas

Video

案例一:吴亦凡即将入伍?!

这个案例的亮点是吴亦凡从屏幕中跳出来,以打微信电话的方式通话,这会让很多女性朋友特别激动。其实它是采用了一种特别稳妥的营销战术——拟态设计,比如模仿腾讯新闻,接电话等等这些人们熟悉的场景。

拟态设计的好处:早期的H5,下面都有箭头,起到引导用户如何继续阅读的作用,但是这事一个大家不熟悉的新场景,用户需要学习的过程,耗时耗力,用户在阅读一半时很容易跳出。通过拟态设计,模拟生活中常见的场景,可以让用户的操作顺利,交互体验更好,减少跳出。

案例二:人工智能读心术

注意顶部的“对方正在输入”这个亮点,感觉是很亲切就和真的对话一样。但H5的营销其实都是套路,这个H5本身有严重的问题,比如输入比较生僻的词汇,会卡顿、有反应速度的问题,但是因为有了上方正在输入的提示,会让用户有耐心的等下去。

案例三:全新BMW M2即将上市

对比之下,吴亦凡案例的第一屏是Text,而BMW是图片。因此吴亦凡的页面看上去更加细致,比如和腾讯新闻页面一模一样,文字还可以选中,下面下载应用的按钮等结构都有,不止是一张图贴上去。

而宝马的第一屏是JPG图片,所以看上去比较糊且页面加载时间特别长。其实BMW的这个案例亮点就在于汽车视频效果非常炫,H5的技术比较少。相比之下吴亦凡这个案例在H5投入的精力和技术上更胜一筹。

五、PC端的回流策略

我们现在比较关注的还有PV端的回流策略,H5可以识别PC和移动端播放的。下面是海外版滴滴的一个案例,都有比较好的效果。

吴亦凡的H5案例两边都有像在PC页面上显示的内容效果,跳出后会出现吴亦凡邀请你扫二维码的结果,宝马就比较偷懒,只挂一个二维码。所以在H5设计上还要考虑回流策略的问题,吴亦凡的案例是针对PC端用户专门录了一段视频的。

六、营销投放策略

一般Video视频是最贵的,通常特效的费用是每秒80~200元不等。像吴亦凡这种抠绿幕的,30秒费用在5W~10W之间。其他普通厂商的H5价格在3K~20K之间,大品牌一般根据投放规模和产品调性另外定价。

那么H5的投放方式有很多,可以找大号去谈,也可以找朋友圈个人好友5000的那种大V,因号因人而异。今天主要谈谈广点通这个途径。它的位置在微信中文章下面的“豆腐块”,还有微信朋友圈信息流,或者朋友圈的瀑布流。

先说图文底部的,由流量主开启,广告主投放。投放标准:广告主确定流量主的类别,比如快消、汽车、奢侈品的账号。但是投放效果和质量普遍不高,因为很多流量主本身质量就不高。出钱少,官方一般会选择投在没什么流量的文章上,出钱多的情况官方会投到10万+的文章下,但这里文章的用户群体并不一定和自身匹配,所以不是很靠谱。

全案策划  上海营销策划公司  品牌营销咨询公司    上海品牌策划公司

朋友圈瀑布流的广告也有出价规则,一般在5W~500W,以文字加详情的形式。按曝光转化,每一个评价收费。腾讯一般都想控制住H5的品质。

另外很多人找一些大号,下面阅读高,转化却很低。原因是现在的软文太长了。很多用户不看完就分享,看不到广告。主要还是要考虑你的H5有没有传播能力。