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

相关推荐

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

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

    2015-07-29
  • Daydream产品设计案例 - YouTube VR

    每年这个季节都盼着来自北方的冷空气能早些把这个城市吹干、吹冷。这世上,又湿又温暖的地方未必都是好地方。 随着Daydream头显和Pixel手机的发布上市,Google官方的各路VR app也陆续上线。我个人还没有机会、没有…

    2016-12-08
  • 『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么?

    文章来自设计癖 2014 年 12 月 9 日,小米又一次涉嫌抄袭。这一次的对象,是日本巴慕达公司的 AirEngine 安之风空气净化器。同样的专利许可授权纠纷,同样深表遗憾的回应。巴慕达与曾经的魅族、年初的 Pressy 以及…

    2014-12-27
  • 【译文】雨天里的交互细节

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

    2015-10-30
  • axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • 交互式网站UI设计指南

      Web开发社区有着大量的交互式设计轻松解决方案。虽然现在大多数网站都能够做到交互性了,但是我们需要不断向前、创新。我们很容易将注意力集中到编码方面,但是有时候不同屏幕尺寸的实际设计考虑却往往被忽视。 …

    2014-12-23
  • 为了App更新,程序猿都变成段子手了

    头图来自:flickr 本文转自歪楼(easy1414),已获得其授权。 这年头混你们互联网创业圈真是太难了。 按着互联网思维,连修bug的程序猿小哥们都被逼得寂寞如雪。 有的自带牛逼气质: 有的在App更新日志里写起了诗: …

    2016-01-26
  • O2O产品的用户评价思考

    为什么产生这样的思考? 可能因为我在一家做 O2O 产品的公司,碰巧我做过 UGC 评价相关的交互设计,然而更重要的是前不久我在线下真实的场景中希望使用自家产品的评价帮助我作决策时,发现我的一些需求并没有得到很…

    2016-03-02
  • 【案例】LOFTER 信息框架改版(iOS版)

    对于一款APP的信息框架改版,可以分为以下几个步骤 竞品的信息框架分析 目的:找出差异点和共同点 作用:差异点可以根据产品的定位,做特色设计,成为产品特征;共同点是指同类产品的框架/布局共同点,可以用来寻…

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

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

    2016-08-31