计育韬：HTML5的基本技术实现与营销投放策略

昨晚，微互动第61期群讲座邀请到JZ新媒体解决方案创始人、交互设计师计育韬，为大家讲解HTML5的基本技术实现与广告投放策略。

（文字仅为精华版整理， 案例及完整版语音直播请查看☞ 原文 ☜ ）

没能参加讲座的童鞋可以来看看嘉宾分享了哪些案例和操作思路，参加过的也可以再来详细看看文字版整理。

讲座内容：

H5是HTML5的缩写，这个用法虽不规范，但因为大家普遍称H5，所以腾讯也这么用了。

HTML5定义：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

一、HTML5、HTML4与XHTML的关系

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

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

对比一下，随便抽取一个不太正规的武警医院的首页，这是它的页面源代码：

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

 二、HTML5的应用

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

三、H5可以实现的效果

HTML5 + CSS3 + JavaScript

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

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

HTML5 + CSS3 + 适当的png

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

1、GIF

2、移动端逐帧动画

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

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

案例二：陌陌不孤独饭局

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

3、PC端逐帧动画

案例一：

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

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

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

检查元素

position跳动中

抓取图片结果

案例二：

这个也是去年经典的案例，有比较强悍的力量感效果。比如其中的反转是基于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，因号因人而异。今天主要谈谈广点通这个途径。它的位置在微信中文章下面的“豆腐块”，还有微信朋友圈信息流，或者朋友圈的瀑布流。

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

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

微信名：微互动

微信ID：wihudong

❶ 本篇内容由微互动原创文章，请勿抄袭

❷ 转载请在微信后台回复【授权】

本文由iPaiban.com编辑排版