H5已經(jīng)落寞了？天貓雙11邀請(qǐng)函告訴你刷屏級(jí)H5是怎樣煉成的
H5從亮相朋友圈，到成為品牌新媒體推廣的標(biāo)配，再到如今時(shí)常出現(xiàn)“H5爛大街了”、“H5轉(zhuǎn)化率低”、“H5將死”的言論，不過(guò)經(jīng)歷了兩三年的時(shí)間……H5已經(jīng)落寞了嗎？
看完最近刷屏朋友圈的天貓雙11邀請(qǐng)函H5案例詳解，或許我們可以得出一些答案。
天貓《穿越宇宙的雙11邀請(qǐng)函》H5 截圖欣賞
掃描二維碼，立即體驗(yàn)！
（數(shù)英APP手機(jī)用戶，需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
一、“穿越宇宙”概念發(fā)想
每個(gè)刷屏的H5背后，都有一個(gè)策略級(jí)的創(chuàng)意概念。
在整個(gè)天貓雙11的前期宣傳中，天貓跨界40多個(gè)國(guó)際品牌，制作了49張精美的貓頭海報(bào)、譜寫(xiě)了一首高燃的品牌詩(shī)。整個(gè)campaign的調(diào)性比往屆雙11更加時(shí)尚、娛樂(lè)和國(guó)際化。以促銷(xiāo)為主題的購(gòu)物節(jié)，搖身一變成為了品牌和消費(fèi)者狂歡的舞臺(tái)，而天貓雙11的主題擲地有聲——盡情盡興，盡在雙11。
作為這場(chǎng)盛宴的入場(chǎng)指南，“穿越宇宙”這個(gè)概念緊密承接#盡情盡興，盡在雙11#的傳播主題，進(jìn)一步強(qiáng)化雙11全球狂歡的節(jié)日氣氛——
1、以“宇宙”作為承載品牌主題的場(chǎng)景
從2009年首屆“天貓雙11網(wǎng)購(gòu)狂歡節(jié)”再到今年的“全球狂歡節(jié)”，從名稱變化來(lái)看，天貓雙11已經(jīng)不僅是一個(gè)打折促銷(xiāo)的節(jié)日了。不管是從地域空間范疇還是品牌概念范疇，天貓雙11一直在探索更遠(yuǎn)更大的舞臺(tái)，提供更優(yōu)質(zhì)更品質(zhì)的平臺(tái)。而“宇宙”這個(gè)概念很好地承接了天貓雙11全球狂歡節(jié)的野心。
2、以“穿越”作為搭建信息傳達(dá)的路徑
作為天貓雙11的邀請(qǐng)函，擔(dān)負(fù)著信息傳達(dá)和攻略展示的任務(wù)。怎么將天貓雙11眾多的活動(dòng)信息和攻略技巧裝置到H5里清晰地傳達(dá)給用戶呢？天貓選擇了“穿越”這個(gè)概念，以天貓雙11的傳播活動(dòng)時(shí)間軸搭建整個(gè)信息傳達(dá)的路徑。在吸引眼球的炫酷畫(huà)面里，同時(shí)保證了活動(dòng)信息有序有效地傳遞。
天貓雙11邀請(qǐng)函 攻略信息GIF展示
二、“穿越宇宙”創(chuàng)意執(zhí)行
一個(gè)兼顧視覺(jué)和交互極佳用戶體驗(yàn)的H5，技術(shù)和設(shè)計(jì)兩個(gè)層面需要互相融合、缺一不可。
這支H5在天貓雙11前期宣傳環(huán)節(jié)上起著信息強(qiáng)化、告知活動(dòng)的作用，為了將天貓雙11眾多的活動(dòng)內(nèi)容裝載到H5里面，同時(shí)保證用戶在查看時(shí)清晰流暢獲取信息，技術(shù)和設(shè)計(jì)融合得相當(dāng)完美。
1、技術(shù)
在呈現(xiàn)方式上，天貓選擇了時(shí)下最流行的VR技術(shù)，打造身臨其境的酷炫體驗(yàn)效果。另外，因?yàn)檫@支H5中包含了頗為龐大的素材信息，天貓為了保證最大多數(shù)的用戶能夠快速打開(kāi)，并且體驗(yàn)絲般順滑，進(jìn)行了很多技術(shù)上的嘗試。
-
考慮到大量素材的調(diào)用速度和體驗(yàn)效果，拋棄了常規(guī)的虛擬3D開(kāi)發(fā)引擎CSS3，采用threejs + webGL的組合來(lái)繪制3D場(chǎng)景；利用3D陀螺儀，達(dá)到畫(huà)面元素層層遞進(jìn)的縱深感，并在對(duì)應(yīng)的層級(jí)嵌入代碼，實(shí)現(xiàn)手指上下滑動(dòng)的簡(jiǎn)單易操作交互模式；
-
整支H5使用了大量鏡像圖片的對(duì)稱設(shè)計(jì)，這是在減少整站大小上非常聰明的一點(diǎn)。首先對(duì)稱設(shè)計(jì)無(wú)處不在，設(shè)計(jì)得當(dāng)消費(fèi)者只會(huì)覺(jué)得畫(huà)面更加華麗。而達(dá)成一組互為鏡像圖片的視覺(jué)效果只需要一組圖片的像素，極大地壓縮了圖片素材的總大??；
-
圖片素材大量使用base64格式，而非傳統(tǒng)的PNG，有效減少服務(wù)器請(qǐng)求數(shù)，相應(yīng)增加了H5本身的加載速度；
2、設(shè)計(jì)
隨著手指上下滑動(dòng)的簡(jiǎn)單交互，在絢麗的宇宙場(chǎng)景里，出現(xiàn)了巴洛特風(fēng)格的建筑，房子里有騎士、公主，以及禮盒等節(jié)日氛圍的元素，以時(shí)間軸向我們展示了天貓雙11活動(dòng)信息以及詳細(xì)攻略。為了達(dá)到這種層層遞進(jìn)的場(chǎng)景縱深效果，技術(shù)上要求圖片資源一層一層拆分開(kāi)來(lái)，最后疊加構(gòu)成一個(gè)完整的場(chǎng)景。
這在設(shè)計(jì)上就要求非常多的圖形量以保證視覺(jué)畫(huà)面的絢麗效果和信息展示的全面。這個(gè)H5一共包含了225張素材圖，而這些圖片資源都是設(shè)計(jì)師們花費(fèi)大量時(shí)間拍攝、摳圖、渲染……最后內(nèi)置到H5框架中的。在一個(gè)多月的有限時(shí)間內(nèi)一邊和技術(shù)溝通呈現(xiàn)效果，一邊制作執(zhí)行，幕后設(shè)計(jì)人員強(qiáng)大的執(zhí)行力保證了“穿越宇宙”H5的最終完美呈現(xiàn)。
天貓雙11邀請(qǐng)函 幕后制作視頻
最后，回答文章開(kāi)頭提到的問(wèn)題——H5已經(jīng)落寞了嗎？
從刷屏的天貓雙11邀請(qǐng)函H5案例來(lái)看——H5并沒(méi)有落寞，只是發(fā)展到成熟期，用戶普遍具備了識(shí)別優(yōu)劣作品的能力。優(yōu)質(zhì)的H5依舊可以引起刷屏級(jí)的效應(yīng)，數(shù)據(jù)轉(zhuǎn)化效果也不會(huì)差；相反，粗制濫造的H5才會(huì)死在朋友圈。
天貓雙11邀請(qǐng)函根據(jù)品牌傳播需求從策略、創(chuàng)意、技術(shù)到設(shè)計(jì)各個(gè)方面都苛求做到最好，給予用戶最佳的視聽(tīng)體驗(yàn)，再次證明好的H5一定會(huì)閃閃發(fā)光。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（4條）