深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

原创2016-07-06举报35125

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

扫描,分享朋友圈

就在6月的最后1天,朋友圈再次上演了现象级H5的刷爆狂潮!和月初就已惨遭封杀的三个关键词这支H5作品不同,这次的现象级刷频仅仅是事件风暴的前奏,而推广的活动主题却是横空出世的淘宝造物节

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

究竟这么碉堡的H5是谁做的?这牛逼的效果是怎么实现的?这么好的创意又是怎么产出的?本期就让小呆带你来细致的分支下这支H5的前台与幕后吧~

来源:H5广告资讯站
作者:小呆
数英网DIGITALING 用户原创文章,如需转载请联系作者本人。

淘宝网:淘宝造物节邀请函H5

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

造物节,造造造造造!扫描下方二维码~
(数英网 App 用户需点击放大二维码后,长按识别)

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

不管是专业人士的设计师、运营,还是普通的群众,看完这支作品都大大的受到了震撼,并且用分享刷翻了自己的朋友圈!就像是小呆的朋友圈:

小呆的朋友圈截图

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

帅呆了!酷毙了!屌飞了!技术太强了!淘宝的设计运营都太牛逼了!我全家都服了!好吧,真的是你们这么想的么?咱们就从幕后团队开始讲起。


造物节邀请函设计方是谁?

大家都知道像是淘宝这样体量的甲方,每年会有大量推广产出,而自己的设计部是承载不了这么多任务的,这时品牌会找各种代理商来做推广执行,像是我们之前专访过的LxU就是阿里的代理商之一,而这支H5的主创也同样出品于代理商团队,这支团队就是VML 上海

VML早期H5作品截图

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

这支互动营销团队刚刚更名不久,而且在圈内极为低调,就之前的H5作品产出来看,产量极低但作品质量普遍极高,有点像是H5营销领域的“劳斯莱斯”。夸张点讲,只要作品贴了VML的标,就水不了!


那么,这么牛逼的技术是怎么实现的?

群众们真是在分享时发挥着各种想象力,什么3D H5又来了,VR H5又爆了,好像这支H5又用到了某些新的尖端技术,事实究竟是怎样?

小呆的聊天记录

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

相信大多数人都是被这部分内容给震撼到的,一个可以交互并且带有重力感应的插画全景世界,真的太美妙了!

H5全景进入画面

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

从原理上来说,开发者实际只是用了一个非常常规的展示技术,就是CSS3的空间变换命令,而这个所谓的3D场景是一个不折不扣的伪3D。实际用户们早就见过这种玩法了,只不过以前都是用在真实场景图片上,而这次是首次用在插画上,所以会给人完全不同的新鲜感。而且这支H5并不算是虚拟现实,也不能算作VR H5,真是十分糟糕的技术混淆!

全景图演示图,该H5与之原理相似

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

这支H5的全景图

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

我们通过画面的缓慢播放发现,原来背景图是一条条的,被切割了!

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

尤其是当你进入场景内,把画面放大时,会发现一条条接缝,这就让我们更确信了一个判断,而当通过后台把元素罗列出来时,就一目了然了!

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

不仅仅是主背景,就连其它画面元素也都被切割成了类似样式,这又是为什么呐?

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

其实这就是CSS位置变换命令的一个巧妙用法,开发者将所有的图等距离大小切割成了一条条,并把它们围成一个圆形,这样在体验上就创造了一个空间。利用一些算法和简单技术就创造了比较丰富的视觉表现,这真是非常聪明的用法!

H5空间原理的示意图

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

但问题又来了!一般情况下,想要在H5上实现真实3D展示,需要借助webGL这种编辑方式,而想绕过这个技术壁垒的话,常规有以下三种方式:(视频、div+css、canvas)

视频、div+css、canvas

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

视频做成3D糊下群众,这个很好理解。但我们通常又会认为canvas相比div+css是更好的解决办法,并且效率更高。可以处理数量更大的素材,并且不耗费请求数量,那么为什么开发者会选择div+css呐?

通过分析小呆认为,主要原因可能有两个:

1.就该案例而言,它的图片数量并不大,本身对性能的耗损就不高,而且对于一些低端机来说,CSS的门槛更低,也是个可以考虑的方向。

2.这个可能是主要原因,小呆观察VML已经近乎1年多了,他们的H5作品我们有过大量研究,我们惊奇的发现他们的技术团队对于CSS3的位置变化使用的频率很高,并且已经达到了炉火纯青的地步,其内部应该已经形成了成套的解决方案,所以选择div+css是一个经验判断!

最后在技术方面,还有一个非常有趣的细节可以和大家分享,就是本案例的图片格式采用的是base64格式,而不是常规的PNG或者JPG,这种格式是代码级的数字图片,有着更小的体积,对于H5来说意义重大。

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

点击图片查看大图

实际在前端领域,base64也是一种常用格式,往往也是通过程序员来完成转码和压缩的,而唯一的缺点就是图片如果过多,浏览器的解码压力会比较大,用在这支案例上应该说刚刚好,脱它的福,H5整体体量控制在了2.3MB,非常小巧实用!

这支H5的技术深度只能用位来形容,并没有去特意炫技,也许这才是H5老司机的正确姿态,把技术用得恰到好处。


关于这支H5的创意表现,小呆你怎么看?

如果你把这支H5丢给创意人,说它创意非常赞!他大概会非常不屑的告诉你,这只不过是一个小聪明,谈何创意?如果你把这支H5拿给程序员,说这个H5技术有多好,他则会很不理解的反问你,这么简单的东西,好在哪里?最后你又拿它给设计师看,说H5设计做的好,他更会郁闷到,这哪里有设计,不就是一组很炫酷的插画么?

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

当我们抛开这些所谓专业人士的所谓专业观点之后,你会惊奇的发现,绝大多数用户会认为这是一支创意、技术、设计都很赞的作品!

在这里,你会发现专业领域的工作者和受众存在一个认知断层。而当你从营销这个点来切入时,真正能产生购买欲或者说分享欲的H5,往往都是一个看上去非常刺激的小花招,一切的技术、创意、设计都在为它做各种妥协,以往的创作经验将会全部失效,而这样做确更容易打中用户的痛点,造成大量传播,创造现象级的作品。

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

点击图片查看大图

之前的吴亦凡H5、BMW H5,和这支淘宝邀请函H5,无一例外都走的是同样的套路,它们的所谓创意就是一个过猛的形式、一个炫酷的外表而已,不会携带任何内涵和所谓的情怀。这样做,真的非常贴合微信端大多数的用户喜好,也非常有助于短时期内获得大量传播,但这样真的利于这个行业长久发展么?在这个问题上,我们就只能心存疑惑了。

所以说,当我们从创意层面去分析这支作品时,就短期时效来看,它是成功的,但就长期发展来看,谁又知道怎么去评价呐?

关于淘宝造物节邀请函H5的分析实际还有很多点可以挖,但是文章已经很长了,以后有机会小呆还会写更深入的分析给大家。为了发这篇帖子,我们延缓了月总的上线时间,也希望它能够解开你心中对于这支作品的诸多疑惑。


公众号:H5广告资讯站
来源code.jpg

 深度解剖:为什么淘宝造物节的 H5 能炸了我的朋友圈?

扫描,分享朋友圈