很顯然,不出意外都會(huì)選右邊的選項(xiàng)。

所以死的不是H5,而是被過度透支的簡單形式。

14年一些翻頁的H5出現(xiàn)之后,涌現(xiàn)了大量的簡易模板工具,雖然在一定程度上加快了H5的生產(chǎn),但也僅限于單一的形式,導(dǎo)致現(xiàn)在大家對(duì)H5的認(rèn)知有些偏差。其實(shí),H5能做的事情可能遠(yuǎn)超出你的想象。

H5是HTML4的下一代產(chǎn)品,可以說是下一代的互聯(lián)網(wǎng),整個(gè)下一代的互聯(lián)網(wǎng)能用Web承載的東西都可以稱之為H5,它即包括前臺(tái)的展示,也包括后臺(tái)的數(shù)據(jù)應(yīng)用,還有多屏技術(shù)、物理引擎游戲、電商等等,你能夠想得到的用Web來承載的內(nèi)容都是H5。

移動(dòng)互聯(lián)網(wǎng)時(shí)代,內(nèi)容日益趨向碎片化——信息靠分享傳播,內(nèi)容取勝。所以解決碎片化最好的方式其實(shí)還是在于內(nèi)容和自傳播,H5營銷想要獲得優(yōu)秀的傳播效果,就必須get到用戶的high點(diǎn),把握“內(nèi)容”和“創(chuàng)意”這兩大痛點(diǎn)。

比如下面這篇H5:天貓雙十一:穿越宇宙的邀請(qǐng)函

1477285473795044
1477285473924680
這篇近期刷爆朋友圈的H5,成功的秘訣就在于創(chuàng)意和內(nèi)容。

內(nèi)容方面,“雙11”是一個(gè)非常強(qiáng)大的IP。

表明上看,這篇H5核心內(nèi)容就是“預(yù)告天貓雙十一要來了”,除此之外它包含著許多雙11干貨訊息,所以它還是一個(gè)很好的雙11攻略,內(nèi)容本身就足夠吸引人。

在仔細(xì)分析后不難發(fā)現(xiàn),這篇H5傳達(dá)的潛在內(nèi)容是“天貓穿越星際,向全宇宙進(jìn)發(fā)的”!

從“天貓雙11網(wǎng)購狂歡節(jié)”到“購物狂歡節(jié)”再到現(xiàn)在的“全球狂歡節(jié)”,雙11的范疇越來越大,更加全球化、國際化?,F(xiàn)在的雙11更像一個(gè)節(jié)日,跨越國界和地域的節(jié)日,傳播著“盡情盡興,盡在雙11”的天貓文化。

這篇H5就是這種文化的具體表現(xiàn),將娛樂性和商業(yè)性融合在一起,能引起受眾的共鳴和自主傳播。

創(chuàng)意方面,據(jù)天貓團(tuán)隊(duì)說,一開始他們就想要嘗試做一個(gè)炫一點(diǎn)的東西,給大家不一樣的體驗(yàn),把現(xiàn)在手機(jī)的最大效用發(fā)揮出來,希望在內(nèi)容和形式兩方面都有所創(chuàng)新。所以在內(nèi)容層面每個(gè)場景都巧妙融入了雙11的攻略內(nèi)容,畫面上則選擇了現(xiàn)在比較酷的VR技術(shù)。

VR眼鏡孔
VR技術(shù)是互聯(lián)網(wǎng)的下一個(gè)風(fēng)口,沉浸式的視覺效果能到帶來更好的用戶體驗(yàn),這篇H5依靠VR技術(shù)擁有了極其震撼的畫面感,這是微信朋友圈內(nèi)是非常罕見的。

獨(dú)特的創(chuàng)意和畫面新鮮感也同樣吸引大量的關(guān)注和自主轉(zhuǎn)發(fā)。

除開內(nèi)容和創(chuàng)意之外,創(chuàng)作團(tuán)隊(duì)的毅力和決心也相當(dāng)重要。天貓團(tuán)隊(duì)在制作過程中經(jīng)歷了無數(shù)著鮮為人知的艱辛:

這一篇率先采用了VR技術(shù)的H5,加載運(yùn)行流暢毫無卡幀,這是很出人意料的,如此巨大場景的H5想要不卡,在技術(shù)上的努力和反復(fù)調(diào)試的困難,會(huì)讓大部分團(tuán)隊(duì)望而卻步。

\
從上面這張調(diào)試圖可以看到,天貓團(tuán)隊(duì)?wèi)?yīng)該是制作了很多base64格式的圖片,而非JPG或者PNG,這樣的圖片體量雖然略大一些,但是可以減少服務(wù)器的請(qǐng)求數(shù),也就是能增加加載速度。

26-3
然后將圖片疊加起來,使用算法層層加載,通過大小縮放,營造3D感;再對(duì)應(yīng)的層級(jí)嵌入可以操作的代碼實(shí)現(xiàn)簡單互動(dòng),當(dāng)然也用到了3D陀螺儀進(jìn)行不同距離的圖片同移動(dòng)距離的縱深感。

天貓團(tuán)隊(duì)前幾天在朋友圈驕傲地發(fā)了一張全景海報(bào),從中可以窺探出天貓這篇H5巨大的人物量:

長圖
這篇H5內(nèi)置了225張素材圖,通過修片、拍攝、合成、素材、3D渲染等多種方式獲得,最后再以2D圖片的方式導(dǎo)入H5。

\
在制作這個(gè)“巨型”H5的過程中,天貓團(tuán)隊(duì)還遇到了很多其他問題,也攻破了不少技術(shù)難點(diǎn)。

將平面素材在H5內(nèi)被編輯成3D空間。作為web領(lǐng)域也就是H5的主流3D開元引擎,它一直是3D場景類網(wǎng)站的首選在H5內(nèi)想實(shí)現(xiàn)空間變換和推拉的效果,面對(duì)這么多素材的大型場景,靈巧的CSS3空間變換就顯得十分吃力了。

\
為了更好的效率和流暢的體驗(yàn),所以此次他們選用了webGL來繪制3D場景。雖然擅長表現(xiàn)3D的webGL極為強(qiáng)大,但對(duì)性能的損耗實(shí)在太高,這使得低端機(jī)在觀看網(wǎng)頁時(shí)很有可能會(huì)卡到爆!

依托天貓團(tuán)隊(duì)的不懈努力,在人物、場景、素材數(shù)量巨大的情況下,整支H5的體量最后被控制在了4.8MB,這簡直是個(gè)奇跡。相比那些動(dòng)不動(dòng)就十幾二十兆的H5來說,這個(gè)大小已經(jīng)可以確保大多數(shù)手機(jī)觀看無壓力了。

據(jù)了解,天貓整支H5素材制作耗時(shí)一個(gè)多月,帶上開發(fā)周期,項(xiàng)目耗時(shí)近乎2個(gè)月,可謂是下了血本。

有創(chuàng)意、有內(nèi)容、有執(zhí)行力,不得不佩服天貓這幾年在廣告上的理念與執(zhí)著。

而H5營銷日益同質(zhì)化的大壞境下。天貓用事實(shí)向我們證明:只要是用心的誠意之作,必將贏得無數(shù)的掌聲。

分享到

songjy

相關(guān)推薦