2016-10-26 资深UI设计者
从2008年开始，每年临近11月11日，全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外，天猫的小伙伴们居然连一封小小的邀请函都没放过。这支将最庞大的信息量用最简单的“手指刷一下”交互方式呈现的H5，相信已经刷爆了大家上周末的朋友圈。
数英网第一时间采访了天猫市场部数字营销团队负责人秀珣以及此次邀请函的创意与制作公司VML上海（以下简称“天猫”与“VML”），5个问题，全面了解这封“穿越宇宙”的“斩手之邀”。
数英网原创内容，请遵守文章底部转载规范
天猫双11《穿越宇宙的双11邀请函》H5 动图欣赏
天猫双11《穿越宇宙的双11邀请函》H5 截图欣赏
扫描二维码，立即体验！
（数英APP手机用户，需点击放大二维码后，长按识别）
完整案例欣赏：尽情尽兴！天猫穿越宇宙向你发来了一封双11邀请函
天猫：虽然这个H5称为“穿越宇宙的邀请函”，但它不只是一个邀请函，还是一个双11攻略。其实用户在淘宝和天猫的app中输入“穿越宇宙”四个字一样能够看到这封邀请函。而从10月22日至11月11日的传播周期也产生了一个时间轴，这个H5就用来展示这个时间轴。大家都想知道双11在不同阶段有什么内容，基于这样的长时间的需求，我们就想把这个攻略做得更加好玩，所以我们和代理商一起讨论出来这样一个酷炫的裸眼VR形式。
天猫：我们想要把这份攻略从内容和形式两方面进行创新。但是内容创新需要详细讲解双11活动的内容，消费者不会有耐心看，负荷也会太大。所以我们就选择从形式创新入手，比如现在比较酷的VR技术。另外，天猫双11的名字近几年也发生了一些变化：从“天猫双11网购狂欢节”到“购物狂欢节”再到现在的“全球狂欢节”，这可以理解为双11的范畴越来越大，更加全球化、国际化。现在的双11更像一个节日，所以我们在按照节日的概念去打造它。我们还联想到是否可以跨越地球的概念，直到宇宙？这样的场景和VR技术匹配也会很酷。同时，我们之后还会有一支延续宇宙狂欢概念的视频。
VML：首先，客户的brief是想要大家认识一个全球的天猫，而并非只是本土的天猫，所以我们干脆给出了“宇宙”这一（比全球）更大的空间。其次，VML团队一开始就想要尝试做一个炫一点的东西，给大家不一样的体验，把现在手机的最大效用发挥出来。所以，（这支H5）想要传达的核心是“全球的天猫”，现在发布的目的主要是预热，起到信息强化、告知活动的作用，也提醒大家做好准备。
天猫:我们主要考虑到两方面因素。一个是页面加载，我们以前做过很多复杂的H5，也掉过很多坑，所以首先想到的是画面一定要流畅，在这之前有一个很好的案例就是宝马M2发布的H5，这个H5让我们很震撼，它可以做到酷炫的同时画面也很流畅，所以我们会去研究它并且把它当作课题，我们知道观看流畅性非常能够影响到消费者的体验和口碑；第二个是消费者体验，在这之前这个H5是需要两只手操作来实现放大和缩小的，但经过盲测之后我们发现消费者在面对陌生的东西的时候会不知所措，并且这个H5没有很强的故事性，所以我们觉得要想更好地展现这个H5就要用最傻瓜、懒人的方式让消费者操作。
VML：VML团队在这方面是有长年基础和经验的，大家也有一定的默契，做过一些比较复杂的之后就体验到了什么才是最舒服的体验。现在WebGL技术很成熟，绝大多数人也都在使用智能手机，能够负荷得了（这支H5所需要的机能），在这样的情况下，我们就和客户达成了一致——用最简单的互动方式让大家浏览，但是其中的图形细节包括人物形和建筑形都是抠图或拍摄的，所以图形工作量比较大。另外，每一个空间的走动速度、负载大小等细节也都一直在测试，这个过程技术和创意一直在一起，所以等到上线我们已经知道大概运行的状况。这支H5其实是信息的告知者，我们将信息隐藏在画面在空间转换时的图标中，用户点击才会弹出相应文字本身去做这样一个比较复杂的空间也是为了更加便于隐藏更多的信息，这样不会显得突兀。
邀请函画面长图（点击可查看大图）
以下文字来自：《深度解析！双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以内，这简直是个奇迹！
H5的总大小和总请求数
这里面有2个点值得一提：
1. 巧妙的镜像设计：画面中很多素材是对称的，对于一个虚拟空间来说，这样的设计会增加内容的奇幻色彩。而实际上，镜像处理在丰富场景空间的前提下还能减少网站体量，你只需要一组素材就能达到2组素材的视觉效果，真是非常讨巧的设计。
从H5内部获得的分层素材图组
2．与《造物节邀请函》H5类似，整支H5大量采用base64格式的图片，而非JPG或者PNG，这样的图片体量虽然略大一些，但是可以减少服务器的请求数，也就是能增加加载速度，这是很多大素材H5项目需要借鉴的。也托开发者们的努力，整支H5的体量控制在了4.8MB，但是通过后台数据，我们发现作品的背景音乐实际还有压缩的空间，如果进一步优化，网站还可以更小，但这个大小已经可以确保大多数手机观看无压力了，相比那些动不动就十几二十兆的H5来说，这支作品在素材优化上真是下了大工夫了。
H5内所有图片数量与大小截图
VML：除了这支邀请函 H5，还有从10月24日晚上开始的“九牛与二虎”天猫平台直播，由李维嘉、林志颖领衔，即为“二虎”；加上另外九位网红，即为“九牛”，其实呈现形式更像一个综艺节目，由VML负责创意，有其他专门团队运营。
天猫：这次的直播有两个亮点：一是这一次的九宫格直播可以说是天猫出品的综艺类直播，采用2位明星+9位网红的形式播出5期，讲一些社会话题，同时在其中会推荐商家的货品。第二个是在11月3日晚上，有一个爆款清单的直播，这是消费者最关注的核心话题，之前在微信、微博端我们都会发布爆款清单，在看到往届的清单传播范围极大，已经有群众基础的情况下，我们今年会更加直观的去呈现它。
天猫“九牛与二虎”直播活动海报
附注：
1. VML上海表示，目前行业内流传有关天猫双11《穿越宇宙的双11邀请函》 H5 的制作价格皆为杜撰。
2. 天猫官方微信于23日发布文章《穿越宇宙的双11邀请函@了你》后，底部相关 H5 链接曾出现无法打开的现象，目前已经恢复。
转自：http://www.digitaling.com/articles/31442.html
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
