从2008年开始，每年临近11月11日，全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外，天猫的小伙伴们居然连一封小小的邀请函都没放过。这支将最庞大的信息量用最简单的“手指刷一下”交互方式呈现的H5，相信已经刷爆了大家上周末的朋友圈。
数英网第一时间采访了天猫市场部数字营销团队以及此次邀请函的创意与制作公司VML上海（以下简称“天猫”与“VML”），5个问题，全面了解这封“穿越宇宙”的“斩手之邀”。
数英网原创内容，请遵守文章底部转载规范
天猫双11《穿越宇宙的双11邀请函》H5 动图欣赏
天猫双11《穿越宇宙的双11邀请函》H5 截图欣赏
扫描二维码，立即体验！
（数英APP手机用户，需点击放大二维码后，长按识别）
完整案例欣赏：尽情尽兴！天猫穿越宇宙向你发来了一封双11邀请函
问题一：为什么想到要做一封 H5 邀请函？
天猫：虽然这个H5称为“穿越宇宙的邀请函”，但它不只是一个邀请函，还是一个双11攻略。其实用户在淘宝和天猫的app中输入“穿越宇宙”四个字一样能够看到这封邀请函。而从10月22日至11月11日的传播周期也产生了一个时间轴，这个H5就用来展示这个时间轴。大家都想知道双11在不同阶段有什么内容，基于这样的长时间的需求，我们就想把这个攻略做得更加好玩，所以我们和代理商一起讨论出来这样一个酷炫的裸眼VR形式。
问题二：2016天猫双11 H5 邀请函的创意主题“穿越宇宙”想表达哪些信息？
天猫：这份邀请函我们希望在内容和形式两方面都有所创新。所以在内容层面每个场景都巧妙融入了双11的攻略内容，形式上则选择了现在比较酷的VR技术。如果大家留意，会发现天猫双11的名字近几年发生了一些细微的变化：从“天猫双11网购狂欢节”到“购物狂欢节”再到现在的“全球狂欢节”，这可以明显看到双11的范畴越来越大，更加全球化、国际化。现在的双11更像一个节日，所以我们是按照节日的概念去打造它。双11是跨越国界、地域的，甚至直到宇宙，这样的场景设置和VR技术匹配也会很酷。之后，天猫还会有一支延续宇宙狂欢概念的视频推出。
VML：首先，客户的brief是想要大家认识一个全球的天猫，而并非只是本土的天猫，所以我们干脆给出了“宇宙”这一（比全球）更大的空间。其次，VML团队一开始就想要尝试做一个炫一点的东西，给大家不一样的体验，把现在手机的最大效用发挥出来。所以，（这支H5）想要传达的核心是“全球的天猫”，现在发布的目的主要是预热，起到信息强化、告知活动的作用，也提醒大家做好准备。
问题三：“邀请函”为何采用了“手指上下刷动”的极简交互方式去呈现极其庞大的画面信息？
天猫：主要考虑两方面因素。一个是页面加载，以前看过也做过很多复杂的H5，掉过很多坑，所以首先想到的是画面一定要流畅，在这之前有一个很好的案例就是宝马M2发布的H5，这个H5当时让很多人震撼，它可以做到酷炫的同时画面也很流畅，所以观看的流畅性会极大影响消费者的体验和口碑；第二个是消费者互动，最早这个H5是需要两只手指操作来实现放大和缩小的，但经过盲测之后发现消费者在面对陌生的东西的时候会不知所措，所以后来优化为单只手指上线滑动或者单击都可以流畅展现的方式，用最傻瓜、最懒人的方式让消费者顺畅操作，保证最好体验。
VML：VML团队在这方面是有长年基础和经验的，大家也有一定的默契，做过一些比较复杂的之后就体验到了什么才是最舒服的体验。现在WebGL技术很成熟，绝大多数人也都在使用智能手机，能够负荷得了（这支H5所需要的机能），在这样的情况下，我们就和客户达成了一致——用最简单的互动方式让大家浏览，但是其中的图形细节包括人物形和建筑形都是抠图或拍摄的，所以图形工作量比较大。另外，每一个空间的走动速度、负载大小等细节也都一直在测试，这个过程技术和创意一直在一起，所以等到上线我们已经知道大概运行的状况。这支H5其实是信息的告知者，我们将信息隐藏在画面在空间转换时的图标中，用户点击才会弹出相应文字本身去做这样一个比较复杂的空间也是为了更加便于隐藏更多的信息，这样不会显得突兀。
邀请函画面长图（点击可查看大图）
问题四：这个看上去非常“吃资源”的 H5 如何做到了加载快、各类配置的手机都能流畅运行？
天猫双11邀请函的内部制作视频曝光
以下文字节选自：《深度解析！双11宇宙H5为什么能掀翻我的朋友圈！》由VML上海推荐。作者：小呆
技术概述：
实际主创团队之前多次在项目中采用过类似技术解决方案，就像是之前的作品《绝不跟随》，采用了非常类似的原理，你会发现作品的结构与双11的H5非常类似。
而且VML技术小组拥有自己的CSS3引擎，特别是在呈现“虚拟3D”（假3D效果）领域，可谓炉火纯青，但因为此次项目涉及素材内容太过于庞大，分层图片实在太多，即使是把自己的引擎开到爆表，也撑不起这么多内容，所以此次项目选用了threejs + webGL的组合。而具体的实现原理我们在文章里就不详细讲解了，你可以通过下方的截图来理解平面素材是如何在H5内被编辑成3D空间的。
H5内元素空间呈现示意图
作为web领域也就是H5的主流3D开元引擎，它一直是3D场景类网站的首选，而在H5内想实现空间变换和推拉的效果，面对这么多素材的大型场景，灵巧的CSS3空间变换就显得十分吃力了，为了更好的效率和流畅的体验，所以此次选用了webGL来绘制3D场景。
当然，这里还有一个要权衡的利弊，虽然擅长表现3D的webGL极为强大，但对性能的损耗实在太高，这使得低端机在观看网页时很有可能会卡到爆！
但因为操作系统的普遍提升和年初微信对内置浏览器的进一步升级，使得这些担忧变的不再致命。从大环境来说，是设备和平台的升级，使得我们可以流畅的看到这样的H5案例，要是只从技术分析，这样的效果好几年前就能做了，但根本无法普及到大众。
设计概述：
在这支H5，技术与设计同等重要，但投入却完全不同，整个H5内置了225张素材图，他们通过修片、拍摄、合成、素材、3D渲染等多种方式获得，最后再以2D图片的方式导入H5，但网站的总体量却控制在了5MB以内，这简直是个奇迹！
这里面有2个点值得一提：
1. 巧妙的镜像设计：画面中很多素材是对称的，对于一个虚拟空间来说，这样的设计会增加内容的奇幻色彩。而实际上，镜像处理在丰富场景空间的前提下还能减少网站体量，你只需要一组素材就能达到2组素材的视觉效果，真是非常讨巧的设计。
从H5内部获得的分层素材图组
2．与《造物节邀请函》H5类似，整支H5大量采用base64格式的图片，而非JPG或者PNG，这样的图片体量虽然略大一些，但是可以减少服务器的请求数，也就是能增加加载速度，这是很多大素材H5项目需要借鉴的。
问题五：邀请函H5发布之后，还有什么有趣的内容？
天猫：天猫双11直播间有非常多的亮点，其中有两个节目大家可以关注，一是天猫、阿里鱼和VML一起打造的《九牛与二虎》，首次网综类直播，采用2位明星+9位网红的创意形式，第一期是由李维嘉、林志颖领先。另一个直播是在11月3日晚上，双11爆款清单全球发布，所有双11最值得买的尖货和好货，都在这里了，而且现场还会有神秘明星助阵，所以大家一定要关注。
天猫“九牛与二虎”直播活动海报
天猫官方爆款清单主视觉画面
附注：
1. VML上海表示，目前行业内流传有关天猫双11《穿越宇宙的双11邀请函》 H5 的制作价格皆为杜撰。
2. 天猫官方微信于23日发布文章《穿越宇宙的双11邀请函@了你》后，底部相关 H5 链接曾出现无法打开的现象，目前已经恢复。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
全部评论（10条）