震惊营销圈的天猫H5是如何炼成的?

H5真的要死了吗?

大家会看到一个现象,一边有很多人看衰H5,一边又有大量的优秀的H5被制作和传播出来。

为什么呢?

下面想先邀请大家做道选择题,如果现在你们做营销,会选择下面的哪个选项:

iH5创始人GMIC演讲:H5要死了吗?
很显然,不出意外都会选右边的选项。

所以死的不是H5,而是被过度透支的简单形式。

14年一些翻页的H5出现之后,涌现了大量的简易模板工具,虽然在一定程度上加快了H5的生产,但也仅限于单一的形式,导致现在大家对H5的认知有些偏差。其实,H5能做的事情可能远超出你的想象。

H5是HTML4的下一代产品,可以说是下一代的互联网,整个下一代的互联网能用Web承载的东西都可以称之为H5,它即包括前台的展示,也包括后台的数据应用,还有多屏技术、物理引擎游戏、电商等等,你能够想得到的用Web来承载的内容都是H5。

移动互联网时代,内容日益趋向碎片化——信息靠分享传播,内容取胜。所以解决碎片化最好的方式其实还是在于内容和自传播,H5营销想要获得优秀的传播效果,就必须get到用户的high点,把握“内容”和“创意”这两大痛点。

比如下面这篇H5:天猫双十一:穿越宇宙的邀请函

1477285473795044
1477285473924680
这篇近期刷爆朋友圈的H5,成功的秘诀就在于创意和内容。

内容方面,“双11”是一个非常强大的IP。

表明上看,这篇H5核心内容就是“预告天猫双十一要来了”,除此之外它包含着许多双11干货讯息,所以它还是一个很好的双11攻略,内容本身就足够吸引人。

在仔细分析后不难发现,这篇H5传达的潜在内容是“天猫穿越星际,向全宇宙进发的”!

从“天猫双11网购狂欢节”到“购物狂欢节”再到现在的“全球狂欢节”,双11的范畴越来越大,更加全球化、国际化。现在的双11更像一个节日,跨越国界和地域的节日,传播着“尽情尽兴,尽在双11”的天猫文化。

这篇H5就是这种文化的具体表现,将娱乐性和商业性融合在一起,能引起受众的共鸣和自主传播。

创意方面,据天猫团队说,一开始他们就想要尝试做一个炫一点的东西,给大家不一样的体验,把现在手机的最大效用发挥出来,希望在内容和形式两方面都有所创新。所以在内容层面每个场景都巧妙融入了双11的攻略内容,画面上则选择了现在比较酷的VR技术。

VR眼镜孔
VR技术是互联网的下一个风口,沉浸式的视觉效果能到带来更好的用户体验,这篇H5依靠VR技术拥有了极其震撼的画面感,这是微信朋友圈内是非常罕见的。

独特的创意和画面新鲜感也同样吸引大量的关注和自主转发。

除开内容和创意之外,创作团队的毅力和决心也相当重要。天猫团队在制作过程中经历了无数着鲜为人知的艰辛:

这一篇率先采用了VR技术的H5,加载运行流畅毫无卡帧,这是很出人意料的,如此巨大场景的H5想要不卡,在技术上的努力和反复调试的困难,会让大部分团队望而却步。

\
从上面这张调试图可以看到,天猫团队应该是制作了很多base64格式的图片,而非JPG或者PNG,这样的图片体量虽然略大一些,但是可以减少服务器的请求数,也就是能增加加载速度。

26-3
然后将图片叠加起来,使用算法层层加载,通过大小缩放,营造3D感;再对应的层级嵌入可以操作的代码实现简单互动,当然也用到了3D陀螺仪进行不同距离的图片同移动距离的纵深感。

天猫团队前几天在朋友圈骄傲地发了一张全景海报,从中可以窥探出天猫这篇H5巨大的人物量:

长图
这篇H5内置了225张素材图,通过修片、拍摄、合成、素材、3D渲染等多种方式获得,最后再以2D图片的方式导入H5。

\
在制作这个“巨型”H5的过程中,天猫团队还遇到了很多其他问题,也攻破了不少技术难点。

将平面素材在H5内被编辑成3D空间。作为web领域也就是H5的主流3D开元引擎,它一直是3D场景类网站的首选在H5内想实现空间变换和推拉的效果,面对这么多素材的大型场景,灵巧的CSS3空间变换就显得十分吃力了。

\
为了更好的效率和流畅的体验,所以此次他们选用了webGL来绘制3D场景。虽然擅长表现3D的webGL极为强大,但对性能的损耗实在太高,这使得低端机在观看网页时很有可能会卡到爆!

依托天猫团队的不懈努力,在人物、场景、素材数量巨大的情况下,整支H5的体量最后被控制在了4.8MB,这简直是个奇迹。相比那些动不动就十几二十兆的H5来说,这个大小已经可以确保大多数手机观看无压力了。

据了解,天猫整支H5素材制作耗时一个多月,带上开发周期,项目耗时近乎2个月,可谓是下了血本。

有创意、有内容、有执行力,不得不佩服天猫这几年在广告上的理念与执着。

而H5营销日益同质化的大坏境下。天猫用事实向我们证明:只要是用心的诚意之作,必将赢得无数的掌声。