&被刷爆的「天猫双11邀请函」H5的惊艳效果是如何实现的？
被刷爆的「天猫双11邀请函」H5的惊艳效果是如何实现的？
日11时45分来源：
穿越宇宙向你发来的一封双11邀请函
在这个浩瀚的宇宙里
所有人只需要做一件事
【尽情尽兴】
这里不仅汇聚了
红包火山、购物券
还可以足不出户，逛遍全球，好货触手可及
10月22日晚，天猫发布了标题为《穿越宇宙的邀请函》这支H5，刷爆了大家的朋友圈。（没看过的可以扫码再看一遍）
扫描二维码，立即体验
是不是酷炫到没朋友？当这个H5放到朋友圈，效果是这样的：
把这个H5反复看了几遍，我觉得有三个东西值得好好品读：标题、形式、VR技术。
1标题：《穿越宇宙的邀请函》
结合今年天猫双11的定位“全球狂欢节”以及主题“尽情尽兴·尽在双11”，透露出两个含义：
1、全球化。从前两年开始，“双11”已经不止属于中国，而是全世界。2015年双11期间，英国《每日电讯报》就发文评论说：“忘掉小小的黑色星期五吧，双11才是这个世界上最大的线上购物节！”现在的天猫已经非常“全球化”，我们可以在天猫上买到全世界的商品，我们也可以把商品通过天猫卖到全世界。所以天猫干脆给出了“宇宙”这一（比全球）更大的空间。
2、娱乐化。天猫双11的名字近几年有一些变化：从“天猫双11网购狂欢节”到“购物狂欢节”再到现在的“全球狂欢节”，这可以理解为双11的范畴越来越大，更加全球化、国际化。更重要的是，天猫想把双11打造成一个真正的节日，节日的氛围就是：尽情尽兴，全球狂欢。H5中炫酷的场景以及VR技术的运用，更加增添了一些娱乐氛围。
2形式：“一镜到底”的360极简交互展现形式
在H5呈现形式方面，天猫主要考虑三方面因素：
1、页面加载。第一要务是画面一定要流畅，酷炫的同时画面也很流畅，因为观看流畅性非常能够影响到消费者的体验和口碑；
H5内所有图片数量与大小截图
2、用户体验。在这之前这个H5是需要两只手操作来实现放大和缩小的，但经过盲测之后天猫发现用户在面对陌生的东西的时候会不知所措，并且天猫双11的H5没有很强的故事性，所以要想更好地展现这个H5，就要做“减法”，让用户尽量少操作，就能看到全貌。
H5页面截图演示
3、信息传达。这支H5其实是信息的传达者，天猫双11有太多的内容，如果直接呈现给用户，很难看下来。所以，天猫将信息隐藏在画面在空间转换时的图标中，用户点击才会弹出相应文字本身去做这样一个比较复杂的空间也是为了更加便于隐藏更多的信息，这样不会显得突兀。
天猫官方宣传画面
这种给人极大感官刺激的H5是如何实现的呢？技术和设计两大要素的完美结合。
因为这个H5涉及素材内容太过于庞大，分层图片实在太多，即使是把自己的引擎开到爆表，也撑不起这么多内容，所以此次项目选用了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组素材的视觉效果，真是非常讨巧的设计。
2．素材优化到位：整支H5大量采用base64格式的图片，这样的图片体量更小，非常有利于网站体积的压缩。天猫团队通过努力，整支H5的体量控制在了4.8MB，可以确保大多数手机观看无压力，相比那些动不动就十几二十兆的H5来说，这支作品在素材优化上真是下了大工夫了。
附一个小视频，揭秘天猫双11 H5制作的过程。
3黑科技：VR技术在H5上的运用
为了配合“穿越宇宙”的概念，天猫首次把VR技术运用在H5上，戴上VR眼镜，让你瞬间到达双11狂欢主会场，身临其境的感觉让你high爆全场。
H5技术发展到今天，已经不再是“H5+图片”、“H5+视频”这种简单的形式，而是融入了各种有趣、互动的“黑科技”，VR技术就是其中一种。VR技术在H5中的运用，可以让观看者更加有一种“身临其境”的感觉。
从社交传播和品牌营销的角度来看，VR和H5的结合无疑是惺惺相惜之举，二者的结合势必将大大缩短虚拟现实这一技术明星的平民化路径。
《穿越宇宙的邀请函》这支H5，不仅拉开了2016天猫双11的序幕，而且还蕴含了天猫未来的战略方向：国际化、娱乐化和智能化。
天猫双11来了，你准备好了吗？在刚过去的儿童节，一支名为《这是成年人不敢打开的童年》的H5在朋友圈刷了屏。这支由网易新闻沸点工作室（网易内部专门做H5策划的团队）哒哒栏目出品的H5，集中展现了《灌篮高手》《名侦探柯南》《多啦A梦》《火影忍者》《美少女战士》五部经典动漫，形式上采用了难度很高的3D透视效果，通过不断上划“滑向童年”，击中不少富（shang）有（le）情（nian）怀（ji）的80、90后的情怀。以至于在发布当天深夜，一度因传播量过大被微信“屏蔽”曝光，在次日晨零点后才得以恢复。网易沸点工作室主编文处萄告诉榜妹，这支H5从5月31日晚上7点发布，至6月1日下午五点主动下线时，共获得了约1800万PV（页面浏览量）。外界对此H5的评论纷纷。不过更令榜妹好奇的是，制作一支刷屏级的H5到底要花多少钱？它们刷屏的秘密又是什么？为此，榜妹找到了近年在朋友圈引发霸屏效应的几款H5，试图一探究竟。1. 网易《这是成年人不敢打开的童年》关键词：中等成本+童年情怀+悬念设置从创意角度来看，《这是成年人不敢打开的童年》通过滑动交互，把大家童年最“燃”的记忆用最“炫”的方式呈现出来。从选择的动漫形象，到BGM（背景音乐），都很能戳中大朋友们的心。尤其在“六一”这个节点发布，更能引发在这些动漫陪伴下长大的年轻人的情感共鸣。而标题“这是成年人不敢打开的童年”显然也很吸睛。事实上，这个标题是网易沸点工作室哒哒栏目在发布H5的前一小时才决定使用的。团队内部甚至为了确定标题而争得焦头烂额，并发到各群进行了票选。最终，为了突出成年和童年之间的反差，以及增强悬念感，选用了这个标题。那么这支最终PV达1800万的H5花了多少钱呢？榜妹了解到，网易沸点工作室的H5策划没有外包，都是由网易内部完成。这次六一儿童节策划耗时一个月，如果从制作成本估算，至少在20万元左右，但这仅是制作成本。（网易为这次策划共投入了1名前端、2名插画、2名动画设计师、2名策划、还有统筹人员，至少是7个人力做了一个月。）“但创意价格是很难用钱去评估的。一个刷屏H5策划，制作成本可能不见得比创意成本高多少。”网易沸点工作室主编文处萄向榜妹表示。2. 天猫《穿越宇宙的邀请函》关键词：大成本+感官刺激+裸眼VR+流畅体验相比海报、地铁横幅等静态广告，H5具有强互动、可监测、跨平台、易传播等优势，已成为品牌为自己宣传推广的一大方式。去年10月，天猫为迎接双11推出的H5《尽情尽兴，尽在双11》（穿越宇宙的邀请函）就惊艳了社交网络。整支H5从天猫大厅开始，不断飞向宇宙深处，经过恢宏宫殿、红包火山，最后在猫头星云中终结星际穿越之旅。一镜到底的画面，震撼的感官刺激，在“穿越宇宙”的形式和双11的狂欢中建立起了很强的情感链接，让体验者大呼过瘾。此外，这支H5还加入了裸眼VR元素，用户摇晃屏幕就能达到身临其境的三维感。而浩瀚的层级和素材却并未让体验卡顿，其背后是镜像法 和base64 （可增加加载速度的一种图片格式）的使用，及各种技术的加持。关于此H5的造价，数位业内人士表示至少在百万级。该H5 的制作团队 VML 称，整个H5 内置了 225 张素材图，其中大多数图形细节包括人物形和建筑形都是抠图或拍摄的。整支网站素材制作耗时一个多月，带上开发周期，项目耗时近乎 2 个月。3. 腾讯《穿越故宫来看你》关键词：大成本+穿越+中国风混搭新奇脑洞去年7月，腾讯TGideas团队出品的《穿越故宫来看你》H5也炸裂了朋友圈。这支“穿越”H5实际上是配合Next Idea腾讯青年创意大赛做的一次推广，作品中还合理地运用到了腾讯的微信、QQ、电子邮箱等主营业务。只见明朝永乐皇帝朱棣从故宫的画中穿越到现代，戴上太阳镜、唱起Rap、跳着骑马舞、玩自拍、发起朋友圈……这位明朝皇帝可以说是走位风骚、Rap够嗨，完全颠覆了人们的认知，加之各种666的表情包和小游戏，一时间就在社交网络中被传疯了。而这样一场“伟大的创意”其实来源于“关在办公室里苦逼的讨论”。主创之一傅老师曾在博客透露了“穿越故宫来看你”的几大细节，其中有个细节很动人。“这里背景上有一句文案‘伟大的变革，来源于小小的创想，每个年轻人时刻迸发的灵感，都应该被珍视’。这句话其实是Next Idea腾讯创新大赛的主旨思想，Next Idea已经办了五年了，这是一个针对年轻人的大赛。我们平时微不足道的一个灵感，其实都是可以发挥很大作用的。享受灵感的乐趣。这个主旨思想是在H5之前我们关在办公室里想了好久去确定的。就直接放进H5里了。我们其实相信，‘伟大’的创意通常都来源于苦逼。”令人拍案叫绝的H5背后，是日复一日的坚持，和时时享受灵感的态度。此外，现象级H5《薛之谦两个月没写微博段子，结果憋了个大招……》也是由腾讯TGideas团队主要负责创意策划和执行。H5中，薛之谦身着古装在“拍摄现场”和二次元世界中自由穿梭。榜妹并未了解到这两支H5的造价。不过，一位H5资深供应商向榜妹表示，“如果只算策划创意和设计，10-20万左右都能做出来（用了3D、请明星拍摄视频的话另说）；而如果请了明星和KOL推广则是另外的费用，动辄百万以上。”（扫码体验）4. 辛里有束《你猜啥色儿》关键词：小成本+游戏机制+心理刺激而相比于上述几款大制作的H5，一些小成本投入的H5实际上也可以获得刷屏效果。如在去年圣诞节前夕，辛里有束发布的《你猜啥色儿》H5小游戏，在供应商方面的投入成本只在五位数内（创意设计由辛里由辛束负责），但最终PV高达1600万。这是辛里有束联合AFU开展的“救色主500色口红展”的预热H5小游戏。从线上一把点燃了口红色号这事儿，并持续烧到线下，为500支口红的展览聚集人气。这款游戏被称作“少女送分题，直男送命题”。H5设有15个关卡，每一关都会展示不同色号但看起来差别极小的口红，让玩家选出相同色号的两款产品。就是这么个小心机引发了网友们的疯狂猜色。辛里有束CEO胡辛束梳理了此H5讨喜的三个原因，“第一，建立了游戏机制；第二，照顾了用户的攀比心理，在竞争中刺激了大家参与游戏；第三，追随了时下热点，YSL星辰口红把大家对于色号和口红的热度挑起来了，我们一不小心就成了风口上的猪。”而《你猜啥色儿》引入的游戏机制也恰与H5行业趋势吻合。据iH5发布的《2016年度H5应用与发展行业报告》，小游戏在H5的内容分布中独领风骚，几乎每4个H5里，就有1个是游戏。凭借操作简单、有趣好玩的特点，游戏化营销战略越来越被品牌所重视。（扫码体验）当然，爆款H5也会遇到杀戮和意外。如在今年清明节前刷屏的《此处故意留白》，就由于涉及版权问题而下线并道歉。去年一上午涨粉百万的“柏拉图”性格测试小游戏，也因诱导分享等原因遭到微信的严厉封杀。正如很多业界人士所言，广告制作创作，也需要尊重知识产权，以及相关法律规范。而回到榜妹最起初好奇的那个问题，一支刷屏级的H5到底要花多少钱？纵观上述案例，一支H5是否能刷屏，其实和花多少钱并无必然联系，且这个行业也很难找到价格参考标准。但可以确定的是，每支刷屏级H5的背后，其实都是对创意内容和酷炫技术的无尽追求。正如一位爆款H5的幕后操刀手所言，“H5策划的创意是排第一位的，创意是否新颖直接决定一个H5策划的生死；设计是H5对外展示的脸，直接决定了H5策划的风格；前端技术则是解决交互呈现，及不同手机机型适配的问题。”而这些，恰是无价的！
本文仅代表作者观点，不代表百度立场。本文系作者授权百度百家发表，未经许可，不得转载。
分享到微信朋友圈
打开微信，点击 “ 发现 ”
使用 “ 扫一扫 ” 即可将网页分享至朋友圈。
扫一扫在手机阅读、分享本文
百家号作者平台APP
扫码下载安卓客户端
便捷管理文章信息
随时查看文章收益拒绝访问 | www.china-ef.com | 百度云加速
请打开cookies.
此网站 (www.china-ef.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(40e11a5e2359437c-ua98).
重新安装浏览器，或使用别的浏览器拒绝访问 | diyitui.com | 百度云加速
请打开cookies.
此网站 (diyitui.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(40e11a5f933e43f5-ua98).
重新安装浏览器，或使用别的浏览器}