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

相关推荐

  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02
  • 移动端搜索功能研究

    搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些对应的设计方法。 搜索能够帮助用户快速精确找到想要的结果,其中两个重要目标是提高搜索结果…

    2016-10-28
  • 超越触控的手势交互

    手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

    2016-07-18
  • 【IxD案例】国际第一时尚品牌VGUE-iPad端案例

    今天给大家分享一个原型,这是第一个分享原型制作的源文件,还请大家多多见谅,源文件有点小复杂。

    附件内的源文件为高保真的原型,模拟了很多的效果,下面我给大家说一下

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

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

    2014-12-27
  • 教你读懂UI设计的心理学!

    来源:阿里妈妈MUX 作者:阿里妈妈MUX编译   作为UI设计师,对待用户就像对待婴儿,知道如何通过界面设计诱导用户非常重要,这就需要了解心理学方面的知识了。今天分享一篇日本设计师的好文,结合心理学与设计,…

    2014-09-27
  • 阿里巴巴技术架构首次曝光 | 站在双11的肩膀上看阿里云企业级互联网架构

    2015天猫双11全球狂欢节以912.17亿元的答卷完美收官。 双11当天14万笔/秒的交易创建峰值和8.6万笔/秒的支付峰值双双刷新了世界纪录,相比首届双11,订单创建峰值增长了350倍,支付峰值增长了430倍。 天量数字的背后…

    2015-11-18
  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14
  • 我手机里的应用设计体验

    最近养成了一个习惯,看到手机应用的一些设计点,自己觉得好或者不好的时候就会截图下来,翻了一下手机已经存了一堆图片了,就干脆发出来吧。 应用更新通知弹窗 应用更新弹窗是几乎每个应用都会有的一个模块,但是…

    2016-06-27
  • 如何编辑交互设计说明书

    当你搜索并查阅了很多网上资料后,仍可能不会编辑交互设计说明书。那么究竟该怎么编辑交互设计说明书呢?在编辑的过程中又有哪些要点和注意事项呢?

    2016-08-05