2018年,H5该如何发展?(附完整刷屏技巧)

已经走过三年时间的H5,尽管一直在被质疑何时会死,但就目前形势来看,日趋成熟的H5在未来仍有很大的发展空间

自 15 年起爆火,到17年底的现在, H5 已经走过三年时间了,尽管每一年都有人在质疑 H5 何时会死,但就目前形势来看,日趋成熟的 H5 在未来仍有很大的发展空间 .

特别是在 Flash 被 Adobe 官方宣布将于2020年停止支持宣布弃用之后,我们可以看到,Html5 已经成长为能够代替 Flash 的技术,同时它也为当下的 H5 营销创意广告提供了有力支持 .

 

今天,我们就来回顾总结整个 2017 年的 H5 发展形式,或许可以一探 2018年的 H5 营销趋势 .

 

1、交互视频 H5 的探索将持续

 

自 2016 年《穿越故宫来看你》 H5 出世之后,H5 越来越趋向于视频化发展了,这一形式既能满足到用户的观赏需求,又避免了许多技术实现的问题,但彼时的 H5 仅仅作为一个传播的载体,将视频嵌套后进行传播宣传 .

 

而回顾 2017 年,我们可以惊喜的发现,随着与创意商们持续不断的探索,视频在 H5 中的应用不再是从头到尾零交互的 TVC 创意广告,而是转变为沉浸式、带交互的视频 H5 形式 . 这样既能解决纯视频 H5 交互性较差、单向传播的尴尬,好的内容创意又能增加用户打开页面的时长,更有利于接受品牌信息 .

 


2017部分品牌交互视频案例

 

这也必须要感谢第一支探索交互视频的 H5——《活口》,相信未来的交互视频 H5 形式将会持续进行探索,也会有更多优秀案例出现在我们的视线中 .

 

2、重形式与走心的 H5 内容并存

 

在过去的一年间,我们数次总结出许多典型的 H5 创意内容形式,也为大家提供了许多可供参考使用的特色 H5 模版,比如模拟微信、快闪、长页面、一镜到底、3D全景、视差效果、图片生成等 .

 

 

随着年底的临近,可能是为了在这个冷风吹的冬季给我们带来些许温暖,走心的创意广告开始发力,虽然看似和 H5 没有什么联系,但在创意广告的共通上,让我们也看到比如《寻找梦想的旅程》《若不是为了理想,谁又愿意背井离乡》这类走心的优秀 H5 案例 .

 

3、节日热点依旧是 H5 传播重心

 

今年传播量最大的 H5 案例,大家一定不会陌生了,为建军 90 周年节日而策划的 H5《穿上军装》 就是典型的节日热点 . 当然,这支 H5 所引发的现象级刷屏虽然还有许多其他的外在因素,这里就不多作讨论了 . 但总体来看,节日热点对于 H5 来说,依然是传播的重点 . 

现象级刷屏H5《穿上军装》

 

而在节日热点的把握上,多次造就爆款 H5 的刷屏大户网易,凭借其对用户心理的敏锐洞察力,可以说是佼佼者了 . 像之前黑五刷屏的《入职第一天,网易爸爸教我学做人》,其实并不是网易第一次用的套路了,早在去年 12 月网易游戏就出品过《我在网易实习的第一天就搞了个大事情》,就把初入职场的新手们办公室心酸历程描述出来 .


《我在网易实习的第一天就搞了个大事情》

 

4、人工智能时代的新机遇 or 新挑战

 

去年互联网行业最瞩目的科技,无疑是人工智能了,从阿尔法狗大战柯洁开始,人工智能已经慢慢渗透进各个领域中 . 2017 年在设计界掀起巨大波澜的人工智能——阿里爸爸家的 AI 设计师鲁班,据说它能一分钟作出8000个 banner 图(详见《双11“鬼故事”》),更是在今年双十一承包了过亿的 banner 量,这对于一般只会拼凑没有创意能力的设计师来说,无疑是个噩耗 .


鲁班的logo

 

而在 H5 设计中,人工智能的应用刚刚开始初露端倪,比如 face++ 的人脸识别功能,就能针对上传的人物图片进行检测、追踪等多种功能,目前意派 Epub360 的人脸识别组件正是用到上述技术,可在线生成证件照、大头照、脸部照片等多种 H5 显示效果 .


无论怎样,相信只要创意不死,H5 依然会继续发展 . 下面我们就来总结下2017年各种 H5 刷屏技巧,从形式上来说,基本涵盖了各种刷屏案例,赶在2017的车尾学习一下,说不定明年的升职加薪,就全靠它了!

 

刷屏技巧一:装逼神器

 

大家可以看到,今年 PV 量最大的刷屏 H5 《穿上军装》,以及上周圣诞节意外爆火的小程序《圣诞头像》,从本质上来说,它们都是一款装逼神器 . 之所以能在短时间之内刷屏朋友圈,除了恰到好处的运用了 “ 节日热点 ” 这个核心因素外,洞察用户的心理也是创意来源的关键 .

 


各种证照生成器 H5

 

当然,《圣诞头像》这个装逼神器是用小程序来制作的,涵盖了设计、开发、后台等多个流程,技术门槛较高 . 为此我们特意设计了 H5 版《圣诞头像生成器》,省去了这些复杂的的技术限制,只需要一位设计狮即可搞定,在实现难度上比起小程序小了很多 .

 

from:意派科技《圣诞头像生成器》

 

不过,这类短时间刷屏的装逼神器们,由于流量剧增的 “ 异常现象 ”,如果没有官方的技术加持,很容易就会被微信注意和封杀掉,如何避免此类问题,前两天搜狗出品的 H5 倒是指了一个方向:用多种不同的标题进行转发,分散流量注意 .

 

至于到底哪些算是微信的违规操作,详见《注意这5点,再也不怕H5被封了》

 


刷屏技巧二:交互视频


这两年,交互视频在 H5 中的运用变得越来越频繁,创意搭配也更加得当 . 究其原因,恐怕还是 “ 技术问题 ” . 倒不是说原生的 HTML 动画亦或是序列帧等实现效果不佳,更多的考虑在于,视频这种形式原本就是许多创意人、广告人所擅长的,即能满足创意的完美呈现,又不用为实现技术而烦恼 .

 

总体来说,目前交互视频 H5 主要有 “ 明星 / IP + 跌宕的故事剧情 ”、“ 自由选择触发多条故事线 ”、” 互动游戏 “、” VR / AR 交互 “ 这四种形式 .

关于上述四种内容形式的解析,详见《抢着吃鸡手游的腾讯、网易,竟然连H5都不放过...》

 

而在制作视频 H5 的时候,到底采用什么样的视频尺寸、以及如何进行手机适配,这些一直是许多派友所头疼的问题 . 下面就明确一下这些问题,供各位参考:

 

① 关于视频尺寸:官方建议为 750*1200

 

 


② 关于手机适配:填充模式为缩放以填充模式,同时勾选视频启用尺寸自适应,再点击固定四边

③ 关于视频播放:由于安卓端的微信限制,目前最稳妥的方式就是采取手势触发播放的形式(如点击) .


刷屏技巧三:微信模拟

 

可能是由于无数千篇一律的微信模拟 H5 ,已使用户产生审美疲劳,所以今年许多案例开始寻求转变 . 鉴于有道翻译官的戏精 H5 的创意,到小姐姐入职网易第一天 H5 的延伸,微信模拟有了不一样的新的玩法 .

 


from:有道翻译官《深夜,男同事问我睡了吗...》

 

原先采用聊天对话框递进弹出、最后引入主题或者品牌植入的内容,形式上过于呆板,也不够活泼(套路用多了也是会腻的). 而现在是通过模拟一个真实的微信账号,利用这种戏精式的表现手法,使观看用户成为旁观的第三方,隐隐有种八卦窥屏的刺激感受 .

 


关于微信这部分的制作方法,仅需要一个录屏工具就能搞定,详见《实用技术贴 | 如何快速搞定微信群聊H5》

 

同时,也有许多其他类似的 H5,不再选择忠实于原生的微信界面,而是趋向于以手绘风格进行呈现 . 这在视觉上不仅显得更加有趣,也更令人有耳目一新的感觉 .

from:意派科技《双11你敢挑战老婆的购物车?》

途家《老板在群聊中@了你》

  

刷屏技巧四:一镜到底

 

自奶奶级国牌百雀羚广告刷屏之后,这种长页面的创意形式就一发不可收拾 . 最常见的一镜到底,就是上下左右交互的长页面 H5 .

 


from:春颜秋色《万科滨水大宅新作 全球首发》

天猫《外星人入侵地球竟是为了…》

处理长页面 H5 时,有几个需要注意的制作要点:

 

  

① 如长页面中有需要触发的动画,可使用锚点进行动画效果的触发,动画较多时可进行分组处理

 

② 如图片的长度过长,可能会影响到作品在移动端的显示效果,因此可先切割成几个较小的长图,后续再进行拼接处理

 

关于具体的长页面制作过程,详见《如何制作横屏H5》

 

上述这类长页面 H5,还是属于二维平面形式的范畴,而在一镜到底 H5 中,最有代表性、也较为复杂的,就是连续不间断的镜头拉伸效果,这样的场景在体验上会有一种穿梭空间的感觉 .

 


from:意派科技《回望过去 探索未来》

 

如何实现这种特殊效果呢?简单来说,就是结合特定的 “ 一镜到底 ” 功能,通过设置一层层的 layer 页面之间的距离与出现时长,来实现此效果 .

 

详见《打造酷炫的“一镜到底”效果,3步就够了...》

 

今年的刷屏技巧就总结到这里啦,希望能给各位派友带来不错的灵感哦,最后祝大家跨年&元旦都能准时不加班,来年再见咯

 

 


关注更多H5设计、案例、资讯

 

10