解读H5作品:天猫双11“穿越宇宙的邀请函”

发表于 讨论求助 2022-05-16 14:39:10


快点APP


最新鲜有趣的H5哪里找?快点一下!博看文思战略伙伴BlueMP推出快点APP——国内首款H5类聚合产品:内容包括企业H5、游戏H5、个人H5(微站/社区),产品涵盖汽车、创意广告、金融、互联网等数十类行业领域。点击文末“阅读原文”了解详情!

再新鲜的东西,只要出现在互联网上就会过气的非常快,网红如此,网络流行语如此,看起来很有技术含量的H5更是如此——经历了诞生初期的病毒式疯狂传播之后,人们对H5已经不再好奇,甚至有些腻歪。

不过还真有明知山有虎,偏向虎山行的勇者,而且他们这次的表现还挺不错……

热衷于唱衰H5这种传播形式的移动营销业界人士,最近的脸似乎都有点疼。

原因无他。只是天猫近期发布的双11“穿越宇宙的邀请函”,这款H5作品一时刷爆朋友圈的盛况,导致“H5将死”的言论不攻自破。

当然,关于H5这事,内行人想看门道,外行人还是先瞧热闹。

热闹,首先是开启这款天猫双11邀请函H5的第一感受。

从初始场景的巴洛克式宫殿开始,,天猫的形象,在绚丽无匹的光源和装饰性立柱拱顶下,如歌剧主角般亮相,气氛华丽隆重,节奏刚劲有力,天猫的身畔,则是盛装舞者、礼帽卫兵、助兴骑手和宴席鼓号手们,整座宫殿里洋溢着兴致勃勃的欢乐感。

然而仔细看,穿插在舞者卫兵骑手鼓号手们之间的符号,却是颇具代表性的现代消费元素——礼袋、购物车、KFC的汉堡和薯条,Beats的新款耳机,NIKE的经典鞋款,还有天猫超市的快递箱子——都毫无违和地、热热闹闹地融入在画面里,正契合巴洛克式风格不拘泥形式的兼容理念,又同时能够强烈地传达了此次天猫双11狂欢嘉年华热闹不设限的情绪。

这样暗示着想象力无穷尽的艺术表达手法,贯穿于这件H5作品的全程。

从宫殿出来,画面纵深无缝衔接到更多更热闹的魔幻现实主义场景,威尼斯摆渡人的扁舟上载着盛礼,德式蒸汽火车和行进的仪仗车辆在高架桥上畅通无阻,从欧洲商业街的街角到纽约第七大道购物广场,而浮游在天空的,除了气球、飞艇和梦境岛屿,还有英国的四面钟。事实上,从最初天猫双11做“网购狂欢节”到“购物狂欢节”再到今次的“全球狂欢节”,天猫双11能够触达和跨越的范围,确实更加国际化、更加全球化。因此这些视觉符号,既完美地契合了天猫打造双11的品牌心智,在观看的意义上也可以强化此次传播受众的认知和期待。

一副VR眼镜的切换,场景切到了大气层外,便是真的开始穿越宇宙,表现天猫的征途,理应是星辰大海。

于是遇见各种或真或幻的意象,星球,星系,航天卫星,红包火山,直到最后定格在天猫形状的星云上,首尾呼应,主SLOGAN浮现“尽情尽兴,尽在双11”字样。至此,也确然令人尽情尽兴地体验了一场由天猫奉献的H5视觉艺术盛宴。

尽情尽兴,是此次天猫双11全球狂欢“穿越宇宙”毋庸置疑的绝对母题,全球所有参与此次狂欢活动的合作品牌,其诉求都将围绕“尽情”展开,如尽情SK-II等等,而同时这份H5所切换的每个场景也都巧妙融入了天猫双11的主活动版块内容,方便观众尽情尽兴完成狂欢攻略。

而这份双11邀请函H5作品的亮点,关键就在于能够淋漓尽致地表现这种尽情尽兴,从而引发观众沉浸于场景体验,并基于强烈共鸣情感,自发传播。

其中的门道,就不只是外行人看热闹了。

天猫团队的初衷,显然是希望做一个足够酷炫、足够颠覆大众对H5传播效果刻板印象的视觉作品,而不是简易模板的生硬套用或者贫乏图文的无趣拼贴。所以,除了新鲜优质的内容外,真正富有独特创意、能够做出震撼效果的实现形式,也是确保这件H5作品获得关注的法宝。

因此,天猫团队选择采用VR技术进行呈现。

尽管VR是当下时兴的技术,但若将之应用于H5宏大主题场景的制作和传播,保证加载顺利运行流畅画面不卡帧,且不干扰受众正常体验,这仍然是一桩高难度的挑战任务。为此,天猫团队显然进行了寻常难以想象的努力,在许多技术难点上取得了突破。

比如,从天猫团队内部放出的这张素材图片,可见天猫团队在素材制作上大量使用了很多base64格式的图片,而非常见的JPG或者PNG,并将图片叠加,使用算法依次加载。虽然这种格式的图片储存体量略大,但如此操作,在运行过程中则可以有效减少对服务器的请求数,提升整个H5的加载速度。这是许多大素材H5项目制作时可资借鉴的处理方案。

尔后,利用大小缩放和3D陀螺仪等功能,营造各画面元素间的立体纵深感和相对移动距离,并在对应层级嵌入代码,实现简单互动。据说,这份H5作品素材制作耗时超过1个多月,内置多达225张素材图片,通过拍摄、合成、镜像、3D渲染等多种方式获得并以2D图片的方式导入。

天猫团队前些日曾发布了一张H5全景的海报,可以一窥素材绘制的工作量。

同样,因为这份H5的素材内容库太过庞大,分层图片太多,所以考虑到实际的调用效率和流畅体验度,常用的虚拟3D开发引擎CSS3此次也被团队放弃,而选用了threejs + webGL的组合来绘制3D场景。当然,webGL确实更加擅长表现3D场域,但它对内存的占用曾经一度无法支持低端机流畅观看通过webGL制作的网页,好在现下由于移动操作系统的普遍升级和今年微信对内置浏览器的进一步优化,大大消弭了这一隐忧,令我们得以欣赏天猫双11这样的H5精品案例。

不错,尽管有着海量的人物场景素材,但最终,在天猫团队将近两个月项目费尽心思的优化调试下,整件H5作品的体量被奇迹般地控制在了5MB以内,市面上绝大多数的手机及其他移动终端可以毫无压力地流畅观看,相较于某些动辄10MB以上的大型H5来说,几乎称得上业内良心。

回到开头来讲H5这种传播形式。必须指出的是,正如天猫双11这份“穿越宇宙的邀请函”一样,好的内容,好的创意,好的艺术内涵呈现,好的视觉表现手法,加之主题妥帖完美契合,体验周到无微不至,将种种维度做到极致之后,H5在移动营销领域相较于传统传播媒介的传播力优势,无疑也将得到极致加成,又谈何H5将死?

让H5这种传播形式一度陷入无门无路境地的,或许,是许多移动营销从业者们,对于传播内容的制作,对于传播形式的设计,乃至对于传播受众的体验,都没有那么多体贴的想法而已。

而如今,我们惊喜地发现,天猫团队,带着双11“穿越宇宙的邀请函”这份有诚意有信念的H5作品,正在为H5这种传播形式、为移动营销领域,带来全新的可能,和全新的生机。

长按扫描二维码,让我们再一次回顾一下天猫双11这份良心之作。


更多精彩内容尽在博看文思公众号





点击“阅读原文”下载快点APP,了解更多新鲜H5案例!



发表
26906人 签到看排名