深度解析!天猫双11宇宙 H5 的惊艳效果是如何实现的?

1477371462-9975-20161025

来源:H5广告资讯站
作者:小呆
原创文章,转载请联系本人!

记得在上个月小站推荐万达的第一支一镜到底H5作品时,就有用户曾放下狠话:“你就等着我们的一镜到底吧!” 因为留言的人是圈内的技术大神,自然也就引起了我们平台的高度重视。而时隔半月,当我在22号晚上真的看到这支让我等着的移动端广告时,那感觉就是,这牛逼不是吹的,我全家都服了!大神,快快快!赶紧给我再签个名吧!

1477371462-2500-20161025

扫描二维码,立即体验
(数英网 App 用户需点击放大二维码后,长按识别)
1477371463-3637-20161025

当天晚上我就把作品分享了出去,然后壮观的场景就出现了,下方为小呆的朋友圈截图,因为实在是太多了,所以就列举了一部分分享:

1477371463-3090-20161025
小呆的朋友圈截图

这么NB的H5谁做的?

从作品风格来看,虽然内容方向偏差极大,但很多人会猜测此次的《穿越宇宙的邀请函》与3个月前火爆一时的《淘宝造物节邀请函》是同家供应商出品,而通过域名信息和小站的多方调查,小呆可以确切的证实这个猜测,他们同时出品于上海VML的同支团队,操盘手是《淘宝造物节邀请函》的原班人马。

1477371462-1936-20161025
供应商的其它作品截图

那么,这么惊艳的效果是如何实现的?

不夸张的说,大多数人都被这支宇宙级的双11广告给吓傻了,自认为见多识广的我也同样如此。

1477371462-9554-20161025
动态GIF截图

而当我们沉下心细致分析,你会发现作品真正勾起人们感官刺激的痛点就是空间推移的“一镜到底”,那么它究竟是怎么实现的?

技术概述:

实际主创团队之前多次在项目中采用过类似技术解决方案,就像是之前的作品《绝不跟随》,采用了非常类似的原理,你会发现作品的结构与双11的H5非常类似。

1477371463-7910-20161025

扫描二维码,立即体验
(数英网 App 用户需点击放大二维码后,长按识别)
1477371463-3941-20161025

而且VML技术小组拥有自己的CSS3引擎,特别是在呈现“虚拟3D”(假3D效果)领域,可谓炉火纯青,但因为此次项目涉及素材内容太过于庞大,分层图片实在太多,即使是把自己的引擎开到爆表,也撑不起这么多内容,所以此次项目选用了threejs + webGL的组合。而具体的实现原理我们在文章里就不详细讲解了,你可以通过下方的截图来理解平面素材是如何在H5内被编辑成3D空间的。

1477371463-9617-20161025
H5内元素空间呈现示意图

作为web领域也就是H5的主流3D开元引擎,它一直是3D场景类网站的首选,而在H5内想实现空间变换和推拉的效果,面对这么多素材的大型场景,灵巧的CSS3空间变换就显得十分吃力了,为了更好的效率和流畅的体验,所以此次选用了webGL来绘制3D场景。

1477371464-3281-20161025

当然,这里还有一个要权衡的利弊,虽然擅长表现3D的webGL极为强大,但对性能的损耗实在太高,这使得低端机在观看网页时很有可能会卡到爆!

但因为操作系统的普遍提升和年初微信对内置浏览器的进一步升级,使得这些担忧变的不再致命。从大环境来说,是设备和平台的升级,使得我们可以流畅的看到这样的H5案例,要是只从技术分析,这样的效果好几年前就能做了,但根本无法普及到大众。

设计概述:

在这支H5,技术与设计同等重要,但投入却完全不同,整个H5内置了225张素材图,他们通过修片、拍摄、合成、素材、3D渲染等多种方式获得,最后再以2D图片的方式导入H5,但网站的总体量却控制在了5MB以内,这简直是个奇迹!

1477371464-3167-20161025
H5的总大小和总请求数

这里面有2个点值得一提:

1. 巧妙的镜像设计:画面中很多素材是对称的,对于一个虚拟空间来说,这样的设计会增加内容的奇幻色彩。而实际上,镜像处理在丰富场景空间的前提下还能减少网站体量,你只需要一组素材就能达到2组素材的视觉效果,真是非常讨巧的设计。

1477371464-3824-20161025
从H5内部获得的分层素材图组

2.与《造物节邀请函》H5类似,整支H5大量采用base64格式的图片,而非JPG或者PNG,这样的图片体量虽然略大一些,但是可以减少服务器的请求数,也就是能增加加载速度,这是很多大素材H5项目需要借鉴的。也托开发者们的努力,整支H5的体量控制在了4.8MB,但是通过后台数据,我们发现作品的背景音乐实际还有压缩的空间,如果进一步优化,网站还可以更小,但这个大小已经可以确保大多数手机观看无压力了,相比那些动不动就十几二十兆的H5来说,这支作品在素材优化上真是下了大工夫了。

1477371464-9291-20161025
H5内所有图片数量与大小截图

体验痛点:

为什么说人们会觉得造物节H5与双11的H5外貌相差那么大,但给人的感觉却很类似呐?因为创作套路惊人的一致,从《绝不跟随》到《造物节H5》再到《穿越宇宙的邀请函》,他们实际都是不同方式的“一镜到底”,这有点像是电影的视听蒙太奇,长镜头永远比碎镜头抓人,持续一致的感官体验永远比剪切过的内容能给人更身临其境的愉悦感,而这个原则对于30秒以内的视听体验来说更是如此,再长的话,人类的感官就会开始疲惫。

1477371465-5457-20161025
淘宝官方宣传画面

通过VML以往的作品,你会发现,他们就是把玩“长镜头”的老司机,很早就抓住了这个用户体验的痛点。他们在自己的“套路”上,小心翼翼的尝试新的内容和方法,而新作品给人带来的惊奇虽然意料之外,但却在情理之中。所有让人惊艳的视觉内容和形式都是早就玩过的老更,只不过这次用的场景更大胆,素材更多样,层级更复杂而已。或者换句话说,这就是量变后带来的质变,是开发者们长期积累的结果。

那么,这支作品的创意我们应该如何看待?

这确实又是一支刷新人们感官体验的H5, 可以说是近3个月来又一支现象级神作! 小呆也从主创团队得知,整支网站素材制作耗时一个多月,带上开发周期,项目耗时近乎2个月,可以说是不惜血本,当然效果也非常显著。但是它给我带来了两点内容点的反思:

1477371465-4866-20161025
H5页面截图演示

1. 我发现制约移动端网站发展和创新的最大障碍实际是网站环境本身,如果用户的设备不够好、如果微信不升级内置的浏览器,再顶级的团队面对这样的环境也只能仰天长叹,就像是《穿越宇宙的邀请函》,因为软硬件的进一步升级,才使得更为强眼的感官形式得以呈现。

2. 我们常常会误解很多H5的“创意”初衷,有些作品会在内容上做出突破,而有些H5的贡献却会落脚到形式上,《穿越宇宙的邀请函》就是后者,形式的刺激是直接而明显的,但往往它也最难以留存。所以说,这支作品虽然当下聚集了各种耀眼的光环,但随着技术的发展和迭代,3D场景的层级会越来越丰富,导入的素材会从图片变为模型,甚至还有很多更为新鲜的事物,而作品对形式的开荒起到的是承上启下的过度作用,真心希望后面我们再看到的“一镜到底”和双11是不一样的,但是这太难了...

最后,给大家扫盲几个关于作品的误解

1. 这支H5技术比设计难:实际上这支H5的技术并不算难,整个网站的工作量全耗费在了美术素材上,有点人海战术的意思,依靠大量元素的视觉轰炸来达到惊艳的视觉体验。

2. 这是支VR H5作品:作品确实设置了VR模式,而且借助穿戴设备能进行体验,但这只能说是一种尝试罢了,VR的虚拟现实基本无法实现,穿戴设备充其量就是个放大镜,想在移动设备上用上真的VR,同志们再等几年吧!

3. 这支H5的单价是150W!: 很多人后台问我这支H5是不是150W,坦率的说,像是这种规模的全案项目,H5只不过是其中的一环,整个项目的报价包括H5的单价只有参与报价的项目组和专项人员才可能知道,挺纳闷这150是怎么来的?虽然成本较高,但项目单价究竟多少钱,你是不可能知道正确答案的,就请热心的网友别跟风乱刷了,真是唯恐天下不乱!

啊!一不留神就又写了一大堆,昨天晚上拉着VML的小伙伴聊到了很晚,也是为了能出一篇有价值的分析,好高兴能够看到《穿越宇宙的邀请函》的刷屏,也期待下个月能有更多的好作品出现。好了!咱们本期的分析就到这里了,谢谢你们的关注,我是小呆,咱们下期见了!

希望本期专访能给你带来不一样的收获,好了!我们本期的分享也就到这里了。
更多H5相关内容请关注下方二维码,微信公众号:H5广告资讯站
深度解析!天猫双11宇宙 H5 的惊艳效果是如何实现的?

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/18306/

(0)
iouedioued
上一篇 2016-10-25
下一篇 2016-10-25

相关推荐

  • 朋友圈被天猫双11邀请函刷屏了?我们和它的创作者们聊了聊

    从2008年开始,每年临近11月11日,全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外,天猫的小伙伴们居然连一封小小…

    2016-10-25
  • 体验方法论:以目标为导向的设计

    产品名称:金融圈APP 设计团队:金融圈UED设计中心 项目介绍:本项目为首页改版方案,与产品经理,交互,运营,视觉四方共同讨论得出的一期改版方向 设计目的:以体验设计方法论体系结合商业目标对APP首屏进行改版 …

    2016-08-31
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。

    动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。

    2016-10-24
  • 如何改版一个3亿用户的神奇网站

     #交互学堂#十年后的今天,随着58的业务越来越壮大以及一些创新产品的加入,单纯的形式越来越难以承载业务含义,统一的样式也越来越难很好地满足用户的需求。  为什么要改版 58同城自2005年创立以来在APP、M、PC主…

    2016-11-03
  • [自译]Medium的Title,Subtitles&Headings的改进介绍

    我们的目标是创造一个能够提供最佳写作体验的空间,让故事的讲述者能够触及到他们的听众。现在,我们很高兴地展示我们在标题方面的提升,这个改变微小而又重要,我们认为你每次在发布文章后,都会会欣赏它。

    2016-08-10
  • [译]UX设计之复选框和开关按钮

    当设计表单时,交互设计师常常不得不面对一个问题,就是要选择出一个合适的界面元素好标示出从多个选项中做出特定选择这种交互。当然,我们都有可能遵循某种既定的规则。无论如何,在做出这个选择时我们都应该牢记…

    2016-06-30
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • JDC丨京东设计中心 - 电商大促攻略页设计指南

    通常我们看到的旅游攻略,游戏攻略等都是以文章资讯的形式呈现,只可阅读不可交互。而电商大促活动中的攻略页,可不仅仅是一篇资讯文章那么简单,除了要向用户传达促销信息,往往承载着引流,预约,发券,传播等营…

    2018-03-27
  • 『旧时好文』别再吐槽12306了,有本事你来写架构

    在平时,12306也就是个正常的电商网站。但一到黄金周,12306就是一个全站所有商品都秒杀,所有SKU都是动态库存的变态。

    IxD案例 2016-08-29