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

相关推荐

  • 【涨姿势】Twitter安卓端体验的全面革新

    手机设计 第一步 我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航,这些功能是由客户所描述的,使用这些功能,我做出了App的基本用户使用流程。然而,在这个项目中上述行为都是不必要的,因为twitt…

    IxD案例 2015-08-27
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • [自译]Medium的Title,Subtitles&Headings的改进介绍

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

    2016-08-10
  • 产品设计师的自我重启

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

    2014-12-13
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

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

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

    2016-08-24
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • 面对未知的产品我们要如何去做?

    当我们遇到这种东西的时候,我们首先一定是要定位用户,要分析用户的场景,用户所遇到的一些情况等等很多问题,分析的方法可以是5W1H也可以其它的科学分析法的模型,什么都可以,这是一个思路,是从几个大的问题开始的。

    2016-02-25
  • 从「令人发指」的苹果来看所谓的细节设计

    什么是细节设计?在讨论这个问题前先来看个案例。如果你手里恰巧有 iPhone 4s / 5 / 5s,请随便打开一个可以调出虚拟键盘的应用「比如短信」。注意观察键盘的最后一行,相信看这篇文章的人都是中文用户,所以在你的…

    IxD案例 2014-10-10
  • 交互设计-网站页面视差效果(Axure RP 7.0 源码下载)

    很多(想)学习Axure的朋友,都是伸手党,这是一条不争的事实,直接拿过来省事又省时;
    能真正学会并驾驭这款软件的毕竟是少数(其他软件也一样,这似乎是一条无法打破的规律),不过金乌老师还是希望想使用这款工具帮你应付差事(实现梦想)的小伙伴儿们加油,自学是很辛苦的,只有经历了挫败、枯燥、郁闷的适应期才能真正适应并喜欢上自学这种方法,不积跬步无以至千里。

    IxD案例 2015-01-05