深度解析!天猫双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

相关推荐

  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • 交互设计案例-闲鱼产品分析

    闲鱼·产品分析 Completion Date    Completer    闲鱼Versions       Phone Type March 11,2015     niu hang      V_2.1.3_Android     MEIZU MX4 Pro 1.战略层 用户需求:闲置物品的买卖(包括且不限制于二手物…

    2015-05-07
  • [自译]企业UX案例研究:在紧张期限内提高可用性

    在四个月的时间里,LiquidPlanner塑造了一个新的dashboard模板功能,这让用户印象深刻,并且有很高的使用率和很好的商业效益。

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

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

    2016-08-10
  • 交互设计与用户体验分析实例——外卖产品

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2016-10-26
  • 【译文】雨天里的交互细节

    最近出现了很多智能手机用的天气应用。但是在以前,这些应用其实都不是很必要的,我们只要知道早上出门带不带雨伞就好了,所以如果天气应用可以直观地告诉我们这一点就好了。就像妈妈一样,在你早上出门的时候帮你…

    2015-10-30
  • 产品设计师的自我重启

    有几个月没喝威士忌了,半年都有了,今天又捡起来了。这两周因为喵的事焦虑万分了,恢复的不太稳定,几乎每天都有不同的状况,让人揪心。揪到后面自己也不好了,各种代表焦虑的梦算是梦了个一溜够。那么让自己放松…

    2014-12-13
  • 交互设计师从业时间长度与对应状态

    不同的经历决定了你的认知,而我们中的很多人往往以自己的认知去度量别人的工作和成果,每每于此,长不自拔而废咦! 从业0-2年: 这个阶段往往是浑浑噩噩进入这个行业,读了几本书,分析过几个案例,感觉自己掌握了…

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

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

    2016-10-24