摘要：天猫双11宇宙 H5 的惊艳效果是如何实现的？这么NB的H5到底是谁做的？
当你看到天猫双11这支
H5广告时，你是不是惊呆了？那么这么NB的H5谁做的？
从作品风格来看，虽然内容方向偏差极大，但很多人会猜测此次的《穿越宇宙的邀请函》与3个月前火爆一时的《淘宝造物节邀请函》是同家供应商出品，而通过域名信息和多方调查，可以确切的证实这个猜测，他们同时出品于上海VML的同支团队，操盘手是《淘宝造物节邀请函》的原班人马。
供应商的其它作品截图
那么，这么惊艳的效果是如何实现的？
不夸张的说，大多数人都被这支宇宙级的双11广告给吓傻了。
动态GIF截图
而当我们沉下心细致分析，你会发现作品真正勾起人们感官刺激的痛点就是空间推移的“一镜到底”，那么它究竟是怎么实现的？
技术概述：
实际主创团队之前多次在项目中采用过类似技术解决方案，就像是之前的作品《绝不跟随》，采用了非常类似的原理，你会发现作品的结构与双11的H5非常类似。
而且VML技术小组拥有自己的CSS3引擎，特别是在呈现“虚拟3D”（假3D效果）领域，可谓炉火纯青，但因为此次项目涉及素材内容太过于庞大，分层图片实在太多，即使是把自己的引擎开到爆表，也撑不起这么多内容，所以此次项目选用了threejs + webGL的组合。而具体的实现原理我们在这里就不详细讲解了，你也可以通过下方的截图来理解平面素材是如何在H5内被编辑成3D空间的。
H5内元素空间呈现示意图
作为web领域也就是H5的主流3D开元引擎，它一直是3D场景类网站的首选，而在H5内想实现空间变换和推拉的效果，面对这么多素材的大型场景，灵巧的CSS3空间变换就显得十分吃力了，为了更好的效率和流畅的体验，所以此次选用了webGL来绘制3D场景。
当然，这里还有一个要权衡的利弊，虽然擅长表现3D的webGL极为强大，但对性能的损耗实在太高，这使得低端机在观看网页时很有可能会卡到爆！
但因为操作系统的普遍提升和年初微信对内置浏览器的进一步升级，使得这些担忧变的不再致命。从大环境来说，是设备和平台的升级，使得我们可以流畅的看到这样的H5案例，要是只从技术分析，这样的效果好几年前就能做了，但根本无法普及到大众。
设计概述：
在这支H5，技术与设计同等重要，但投入却完全不同，整个H5内置了225张素材图，他们通过修片、拍摄、合成、素材、3D渲染等多种方式获得，最后再以2D图片的方式导入H5，但网站的总体量却控制在了5MB以内，这简直是个奇迹！
H5的总大小和总请求数
这里面有2个点值得一提：
天猫双11宇宙 H5 的惊艳效果是如何实现的？
1. 巧妙的镜像设计：画面中很多素材是对称的，对于一个虚拟空间来说，这样的设计会增加内容的奇幻色彩。而实际上，镜像处理在丰富场景空间的前提下还能减少网站体量，你只需要一组素材就能达到2组素材的视觉效果，真是非常讨巧的设计。
从H5内部获得的分层素材图组
2．与《造物节邀请函》H5类似，整支H5大量采用base64格式的图片，而非JPG或者PNG，这样的图片体量虽然略大一些，但是可以减少服务器的请求数，也就是能增加加载速度，这是很多大素材H5项目需要借鉴的。也托开发者们的努力，整支H5的体量控制在了4.8MB，但是通过后台数据，我们发现作品的背景音乐实际还有压缩的空间，如果进一步优化，网站还可以更小，但这个大小已经可以确保大多数手机观看无压力了，相比那些动不动就十几二十兆的H5来说，这支作品在素材优化上真是下了大工夫了。
H5内所有图片数量与大小截图
体验痛点：
为什么说人们会觉得造物节H5与双11的H5外貌相差那么大，但给人的感觉却很类似呐？因为创作套路惊人的一致，从《绝不跟随》到《造物节H5》再到《穿越宇宙的邀请函》，他们实际都是不同方式的“一镜到底”，这有点像是电影的视听蒙太奇，长镜头永远比碎镜头抓人，持续一致的感官体验永远比剪切过的内容能给人更身临其境的愉悦感，而这个原则对于30秒以内的视听体验来说更是如此，再长的话，人类的感官就会开始疲惫。
淘宝官方宣传画面
通过VML以往的作品，你会发现，他们就是把玩“长镜头”的老司机，很早就抓住了这个用户体验的痛点。他们在自己的“套路”上，小心翼翼的尝试新的内容和方法，而新作品给人带来的惊奇虽然意料之外，但却在情理之中。所有让人惊艳的视觉内容和形式都是早就玩过的老更，只不过这次用的场景更大胆，素材更多样，层级更复杂而已。或者换句话说，这就是量变后带来的质变，是开发者们长期积累的结果。
那么，这支作品的创意我们应该如何看待？
这确实又是一支刷新人们感官体验的H5， 可以说是近3个月来又一支现象级神作! 据该主创团队透露，整支网站素材制作耗时一个多月，带上开发周期，项目耗时近乎2个月，可以说是不惜血本，当然效果也非常显著。但是它给我带来了两点内容点的反思：
H5页面截图演示
1. 在此发现制约移动端网站发展和创新的最大障碍实际是网站环境本身，如果用户的设备不够好、如果微信不升级内置的浏览器，再顶级的团队面对这样的环境也只能仰天长叹，就像是《穿越宇宙的邀请函》，因为软硬件的进一步升级，才使得更为强眼的感官形式得以呈现。
2. 我们常常会误解很多H5的“创意”初衷，有些作品会在内容上做出突破，而有些H5的贡献却会落脚到形式上，《穿越宇宙的邀请函》就是后者，形式的刺激是直接而明显的，但往往它也最难以留存。所以说，这支作品虽然当下聚集了各种耀眼的光环，但随着技术的发展和迭代，3D场景的层级会越来越丰富，导入的素材会从图片变为模型，甚至还有很多更为新鲜的事物，而作品对形式的开荒起到的是承上启下的过度作用，真心希望后面我们再看到的“一镜到底”和双11是不一样的，但是这太难了。
最后，给大家扫盲几个关于作品的误解
1. 这支H5技术比设计难：实际上这支H5的技术并不算难，整个网站的工作量全耗费在了美术素材上，有点人海战术的意思，依靠大量元素的视觉轰炸来达到惊艳的视觉体验。
2. 这是支VR H5作品：作品确实设置了VR模式，而且借助穿戴设备能进行体验，但这只能说是一种尝试罢了，VR的虚拟现实基本无法实现，穿戴设备充其量就是个放大镜，想在移动设备上用上真的VR，觉得还是再等几年吧！
3. 这支H5的单价是150W！：很多人都问这支H5是不是150W，坦率的说，像是这种规模的全案项目，H5只不过是其中的一环，整个项目的报价包括H5的单价只有参与报价的项目组和专项人员才可能知道，挺纳闷这150是怎么来的？虽然成本较高，但项目单价究竟多少钱，你是不可能知道正确答案的。
热荐课程
本文为编辑转载整合文章，若需转载，并请附上出处(翼狐网)及本页链接。
欢迎设计行业从业者或设计爱好者投稿原创作品和文章，投稿请联系翼狐编辑：（QQ）2717929347。
