深度解剖：为什么淘宝造物节的 H5 能炸了我的朋友圈？
就在6月的最后1天，朋友圈再次上演了现象级H5的刷爆狂潮！和月初就已惨遭封杀的三个关键词这支H5作品不同，这次的现象级刷频仅仅是事件风暴的前奏，而推广的活动主题却是横空出世的淘宝造物节。
究竟这么碉堡的H5是谁做的？这牛逼的效果是怎么实现的？这么好的创意又是怎么产出的？本期就让小呆带你来细致的分支下这支H5的前台与幕后吧~
来源：H5广告资讯站
作者：小呆
数英网DIGITALING 用户原创文章，如需转载请联系作者本人。
淘宝网：淘宝造物节邀请函H5
造物节，造造造造造！扫描下方二维码~
（数英网 App 用户需点击放大二维码后，长按识别）
不管是专业人士的设计师、运营，还是普通的群众，看完这支作品都大大的受到了震撼，并且用分享刷翻了自己的朋友圈！就像是小呆的朋友圈：
小呆的朋友圈截图
帅呆了！酷毙了！屌飞了！技术太强了！淘宝的设计运营都太牛逼了！我全家都服了！好吧，真的是你们这么想的么？咱们就从幕后团队开始讲起。
造物节邀请函设计方是谁？
大家都知道像是淘宝这样体量的甲方，每年会有大量推广产出，而自己的设计部是承载不了这么多任务的，这时品牌会找各种代理商来做推广执行，像是我们之前专访过的LxU就是阿里的代理商之一，而这支H5的主创也同样出品于代理商团队，这支团队就是VML 上海 。
VML早期H5作品截图
这支互动营销团队刚刚更名不久，而且在圈内极为低调，就之前的H5作品产出来看，产量极低但作品质量普遍极高，有点像是H5营销领域的“劳斯莱斯”。夸张点讲，只要作品贴了VML的标，就水不了!
那么，这么牛逼的技术是怎么实现的？
群众们真是在分享时发挥着各种想象力，什么3D H5又来了，VR H5又爆了，好像这支H5又用到了某些新的尖端技术，事实究竟是怎样？
小呆的聊天记录
相信大多数人都是被这部分内容给震撼到的，一个可以交互并且带有重力感应的插画全景世界，真的太美妙了!
H5全景进入画面
从原理上来说，开发者实际只是用了一个非常常规的展示技术，就是CSS3的空间变换命令，而这个所谓的3D场景是一个不折不扣的伪3D。实际用户们早就见过这种玩法了，只不过以前都是用在真实场景图片上，而这次是首次用在插画上，所以会给人完全不同的新鲜感。而且这支H5并不算是虚拟现实，也不能算作VR H5，真是十分糟糕的技术混淆！
全景图演示图，该H5与之原理相似
这支H5的全景图
我们通过画面的缓慢播放发现，原来背景图是一条条的，被切割了！
尤其是当你进入场景内，把画面放大时，会发现一条条接缝，这就让我们更确信了一个判断，而当通过后台把元素罗列出来时，就一目了然了！
不仅仅是主背景，就连其它画面元素也都被切割成了类似样式，这又是为什么呐？
其实这就是CSS位置变换命令的一个巧妙用法，开发者将所有的图等距离大小切割成了一条条，并把它们围成一个圆形，这样在体验上就创造了一个空间。利用一些算法和简单技术就创造了比较丰富的视觉表现，这真是非常聪明的用法！
H5空间原理的示意图
但问题又来了！一般情况下，想要在H5上实现真实3D展示，需要借助webGL这种编辑方式，而想绕过这个技术壁垒的话，常规有以下三种方式：（视频、div+css、canvas)
视频、div+css、canvas
视频做成3D糊下群众，这个很好理解。但我们通常又会认为canvas相比div+css是更好的解决办法，并且效率更高。可以处理数量更大的素材，并且不耗费请求数量，那么为什么开发者会选择div+css呐？
通过分析小呆认为，主要原因可能有两个：
1.就该案例而言，它的图片数量并不大，本身对性能的耗损就不高，而且对于一些低端机来说，CSS的门槛更低，也是个可以考虑的方向。
2.这个可能是主要原因，小呆观察VML已经近乎1年多了，他们的H5作品我们有过大量研究，我们惊奇的发现他们的技术团队对于CSS3的位置变化使用的频率很高，并且已经达到了炉火纯青的地步，其内部应该已经形成了成套的解决方案，所以选择div+css是一个经验判断！
最后在技术方面，还有一个非常有趣的细节可以和大家分享，就是本案例的图片格式采用的是base64格式，而不是常规的PNG或者JPG，这种格式是代码级的数字图片，有着更小的体积，对于H5来说意义重大。
点击图片查看大图
实际在前端领域，base64也是一种常用格式，往往也是通过程序员来完成转码和压缩的，而唯一的缺点就是图片如果过多，浏览器的解码压力会比较大，用在这支案例上应该说刚刚好，脱它的福，H5整体体量控制在了2.3MB，非常小巧实用！
这支H5的技术深度只能用位来形容，并没有去特意炫技，也许这才是H5老司机的正确姿态，把技术用得恰到好处。
关于这支H5的创意表现，小呆你怎么看？
如果你把这支H5丢给创意人，说它创意非常赞！他大概会非常不屑的告诉你，这只不过是一个小聪明，谈何创意？如果你把这支H5拿给程序员，说这个H5技术有多好，他则会很不理解的反问你，这么简单的东西，好在哪里？最后你又拿它给设计师看，说H5设计做的好，他更会郁闷到，这哪里有设计，不就是一组很炫酷的插画么？
当我们抛开这些所谓专业人士的所谓专业观点之后，你会惊奇的发现，绝大多数用户会认为这是一支创意、技术、设计都很赞的作品！
在这里，你会发现专业领域的工作者和受众存在一个认知断层。而当你从营销这个点来切入时，真正能产生购买欲或者说分享欲的H5，往往都是一个看上去非常刺激的小花招，一切的技术、创意、设计都在为它做各种妥协，以往的创作经验将会全部失效，而这样做确更容易打中用户的痛点，造成大量传播，创造现象级的作品。
点击图片查看大图
之前的吴亦凡H5、BMW H5，和这支淘宝邀请函H5，无一例外都走的是同样的套路，它们的所谓创意就是一个过猛的形式、一个炫酷的外表而已，不会携带任何内涵和所谓的情怀。这样做，真的非常贴合微信端大多数的用户喜好，也非常有助于短时期内获得大量传播，但这样真的利于这个行业长久发展么？在这个问题上，我们就只能心存疑惑了。
所以说，当我们从创意层面去分析这支作品时，就短期时效来看，它是成功的，但就长期发展来看，谁又知道怎么去评价呐？
关于淘宝造物节邀请函H5的分析实际还有很多点可以挖，但是文章已经很长了，以后有机会小呆还会写更深入的分析给大家。为了发这篇帖子，我们延缓了月总的上线时间，也希望它能够解开你心中对于这支作品的诸多疑惑。
公众号：H5广告资讯站
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
![[下载] H5手机移动项目，6月份截屏下载 ——设计资源 54](https://file.digitaling.com/eImg/cover/20160704/20160704152445_22732.jpg)
评论
评论
推荐评论
全部评论（3条）