從2008年開始，每年臨近11月11日，全國——現(xiàn)在可能是全球——的剁手黨們都在等著看馬云爸爸和天貓又能玩出什么新花樣。今年除了史無前例的整整49張品牌海報(bào)以及4個(gè)版本的“主題大片”之外，天貓的小伙伴們居然連一封小小的邀請(qǐng)函都沒放過。這支將最龐大的信息量用最簡(jiǎn)單的“手指刷一下”交互方式呈現(xiàn)的H5，相信已經(jīng)刷爆了大家上周末的朋友圈。
數(shù)英網(wǎng)第一時(shí)間采訪了天貓市場(chǎng)部數(shù)字營銷團(tuán)隊(duì)以及此次邀請(qǐng)函的創(chuàng)意與制作公司VML上海（以下簡(jiǎn)稱“天貓”與“VML”），5個(gè)問題，全面了解這封“穿越宇宙”的“斬手之邀”。
數(shù)英網(wǎng)原創(chuàng)內(nèi)容，請(qǐng)遵守文章底部轉(zhuǎn)載規(guī)范
天貓雙11《穿越宇宙的雙11邀請(qǐng)函》H5 動(dòng)圖欣賞
天貓雙11《穿越宇宙的雙11邀請(qǐng)函》H5 截圖欣賞
掃描二維碼，立即體驗(yàn)！
（數(shù)英APP手機(jī)用戶，需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
完整案例欣賞：盡情盡興！天貓穿越宇宙向你發(fā)來了一封雙11邀請(qǐng)函
問題一：為什么想到要做一封 H5 邀請(qǐng)函？
天貓：雖然這個(gè)H5稱為“穿越宇宙的邀請(qǐng)函”，但它不只是一個(gè)邀請(qǐng)函，還是一個(gè)雙11攻略。其實(shí)用戶在淘寶和天貓的app中輸入“穿越宇宙”四個(gè)字一樣能夠看到這封邀請(qǐng)函。而從10月22日至11月11日的傳播周期也產(chǎn)生了一個(gè)時(shí)間軸，這個(gè)H5就用來展示這個(gè)時(shí)間軸。大家都想知道雙11在不同階段有什么內(nèi)容，基于這樣的長(zhǎng)時(shí)間的需求，我們就想把這個(gè)攻略做得更加好玩，所以我們和代理商一起討論出來這樣一個(gè)酷炫的裸眼VR形式。
問題二：2016天貓雙11 H5 邀請(qǐng)函的創(chuàng)意主題“穿越宇宙”想表達(dá)哪些信息？
天貓：這份邀請(qǐng)函我們希望在內(nèi)容和形式兩方面都有所創(chuàng)新。所以在內(nèi)容層面每個(gè)場(chǎng)景都巧妙融入了雙11的攻略內(nèi)容，形式上則選擇了現(xiàn)在比較酷的VR技術(shù)。如果大家留意，會(huì)發(fā)現(xiàn)天貓雙11的名字近幾年發(fā)生了一些細(xì)微的變化：從“天貓雙11網(wǎng)購狂歡節(jié)”到“購物狂歡節(jié)”再到現(xiàn)在的“全球狂歡節(jié)”，這可以明顯看到雙11的范疇越來越大，更加全球化、國際化。現(xiàn)在的雙11更像一個(gè)節(jié)日，所以我們是按照節(jié)日的概念去打造它。雙11是跨越國界、地域的，甚至直到宇宙，這樣的場(chǎng)景設(shè)置和VR技術(shù)匹配也會(huì)很酷。之后，天貓還會(huì)有一支延續(xù)宇宙狂歡概念的視頻推出。
VML：首先，客戶的brief是想要大家認(rèn)識(shí)一個(gè)全球的天貓，而并非只是本土的天貓，所以我們干脆給出了“宇宙”這一（比全球）更大的空間。其次，VML團(tuán)隊(duì)一開始就想要嘗試做一個(gè)炫一點(diǎn)的東西，給大家不一樣的體驗(yàn)，把現(xiàn)在手機(jī)的最大效用發(fā)揮出來。所以，（這支H5）想要傳達(dá)的核心是“全球的天貓”，現(xiàn)在發(fā)布的目的主要是預(yù)熱，起到信息強(qiáng)化、告知活動(dòng)的作用，也提醒大家做好準(zhǔn)備。
問題三：“邀請(qǐng)函”為何采用了“手指上下刷動(dòng)”的極簡(jiǎn)交互方式去呈現(xiàn)極其龐大的畫面信息？
天貓：主要考慮兩方面因素。一個(gè)是頁面加載，以前看過也做過很多復(fù)雜的H5，掉過很多坑，所以首先想到的是畫面一定要流暢，在這之前有一個(gè)很好的案例就是寶馬M2發(fā)布的H5，這個(gè)H5當(dāng)時(shí)讓很多人震撼，它可以做到酷炫的同時(shí)畫面也很流暢，所以觀看的流暢性會(huì)極大影響消費(fèi)者的體驗(yàn)和口碑；第二個(gè)是消費(fèi)者互動(dòng)，最早這個(gè)H5是需要兩只手指操作來實(shí)現(xiàn)放大和縮小的，但經(jīng)過盲測(cè)之后發(fā)現(xiàn)消費(fèi)者在面對(duì)陌生的東西的時(shí)候會(huì)不知所措，所以后來優(yōu)化為單只手指上線滑動(dòng)或者單擊都可以流暢展現(xiàn)的方式，用最傻瓜、最懶人的方式讓消費(fèi)者順暢操作，保證最好體驗(yàn)。
VML：VML團(tuán)隊(duì)在這方面是有長(zhǎng)年基礎(chǔ)和經(jīng)驗(yàn)的，大家也有一定的默契，做過一些比較復(fù)雜的之后就體驗(yàn)到了什么才是最舒服的體驗(yàn)。現(xiàn)在WebGL技術(shù)很成熟，絕大多數(shù)人也都在使用智能手機(jī)，能夠負(fù)荷得了（這支H5所需要的機(jī)能），在這樣的情況下，我們就和客戶達(dá)成了一致——用最簡(jiǎn)單的互動(dòng)方式讓大家瀏覽，但是其中的圖形細(xì)節(jié)包括人物形和建筑形都是摳圖或拍攝的，所以圖形工作量比較大。另外，每一個(gè)空間的走動(dòng)速度、負(fù)載大小等細(xì)節(jié)也都一直在測(cè)試，這個(gè)過程技術(shù)和創(chuàng)意一直在一起，所以等到上線我們已經(jīng)知道大概運(yùn)行的狀況。這支H5其實(shí)是信息的告知者，我們將信息隱藏在畫面在空間轉(zhuǎn)換時(shí)的圖標(biāo)中，用戶點(diǎn)擊才會(huì)彈出相應(yīng)文字本身去做這樣一個(gè)比較復(fù)雜的空間也是為了更加便于隱藏更多的信息，這樣不會(huì)顯得突兀。
邀請(qǐng)函畫面長(zhǎng)圖（點(diǎn)擊可查看大圖）
問題四：這個(gè)看上去非常“吃資源”的 H5 如何做到了加載快、各類配置的手機(jī)都能流暢運(yùn)行？
天貓雙11邀請(qǐng)函的內(nèi)部制作視頻曝光
以下文字節(jié)選自：《深度解析！雙11宇宙H5為什么能掀翻我的朋友圈！》由VML上海推薦。作者：小呆
技術(shù)概述：
實(shí)際主創(chuàng)團(tuán)隊(duì)之前多次在項(xiàng)目中采用過類似技術(shù)解決方案，就像是之前的作品《絕不跟隨》，采用了非常類似的原理，你會(huì)發(fā)現(xiàn)作品的結(jié)構(gòu)與雙11的H5非常類似。
而且VML技術(shù)小組擁有自己的CSS3引擎，特別是在呈現(xiàn)“虛擬3D”（假3D效果）領(lǐng)域，可謂爐火純青，但因?yàn)榇舜雾?xiàng)目涉及素材內(nèi)容太過于龐大，分層圖片實(shí)在太多，即使是把自己的引擎開到爆表，也撐不起這么多內(nèi)容，所以此次項(xiàng)目選用了threejs + webGL的組合。而具體的實(shí)現(xiàn)原理我們?cè)谖恼吕锞筒辉敿?xì)講解了，你可以通過下方的截圖來理解平面素材是如何在H5內(nèi)被編輯成3D空間的。
H5內(nèi)元素空間呈現(xiàn)示意圖
作為web領(lǐng)域也就是H5的主流3D開元引擎，它一直是3D場(chǎng)景類網(wǎng)站的首選，而在H5內(nèi)想實(shí)現(xiàn)空間變換和推拉的效果，面對(duì)這么多素材的大型場(chǎng)景，靈巧的CSS3空間變換就顯得十分吃力了，為了更好的效率和流暢的體驗(yàn)，所以此次選用了webGL來繪制3D場(chǎng)景。
當(dāng)然，這里還有一個(gè)要權(quán)衡的利弊，雖然擅長(zhǎng)表現(xiàn)3D的webGL極為強(qiáng)大，但對(duì)性能的損耗實(shí)在太高，這使得低端機(jī)在觀看網(wǎng)頁時(shí)很有可能會(huì)卡到爆！
但因?yàn)椴僮飨到y(tǒng)的普遍提升和年初微信對(duì)內(nèi)置瀏覽器的進(jìn)一步升級(jí)，使得這些擔(dān)憂變的不再致命。從大環(huán)境來說，是設(shè)備和平臺(tái)的升級(jí)，使得我們可以流暢的看到這樣的H5案例，要是只從技術(shù)分析，這樣的效果好幾年前就能做了，但根本無法普及到大眾。
設(shè)計(jì)概述：
在這支H5，技術(shù)與設(shè)計(jì)同等重要，但投入?yún)s完全不同，整個(gè)H5內(nèi)置了225張素材圖，他們通過修片、拍攝、合成、素材、3D渲染等多種方式獲得，最后再以2D圖片的方式導(dǎo)入H5，但網(wǎng)站的總體量卻控制在了5MB以內(nèi)，這簡(jiǎn)直是個(gè)奇跡！
這里面有2個(gè)點(diǎn)值得一提：
1. 巧妙的鏡像設(shè)計(jì)：畫面中很多素材是對(duì)稱的，對(duì)于一個(gè)虛擬空間來說，這樣的設(shè)計(jì)會(huì)增加內(nèi)容的奇幻色彩。而實(shí)際上，鏡像處理在豐富場(chǎng)景空間的前提下還能減少網(wǎng)站體量，你只需要一組素材就能達(dá)到2組素材的視覺效果，真是非常討巧的設(shè)計(jì)。
從H5內(nèi)部獲得的分層素材圖組
2．與《造物節(jié)邀請(qǐng)函》H5類似，整支H5大量采用base64格式的圖片，而非JPG或者PNG，這樣的圖片體量雖然略大一些，但是可以減少服務(wù)器的請(qǐng)求數(shù)，也就是能增加加載速度，這是很多大素材H5項(xiàng)目需要借鑒的。
問題五：邀請(qǐng)函H5發(fā)布之后，還有什么有趣的內(nèi)容？
天貓：天貓雙11直播間有非常多的亮點(diǎn)，其中有兩個(gè)節(jié)目大家可以關(guān)注，一是天貓、阿里魚和VML一起打造的《九牛與二虎》，首次網(wǎng)綜類直播，采用2位明星+9位網(wǎng)紅的創(chuàng)意形式，第一期是由李維嘉、林志穎領(lǐng)先。另一個(gè)直播是在11月3日晚上，雙11爆款清單全球發(fā)布，所有雙11最值得買的尖貨和好貨，都在這里了，而且現(xiàn)場(chǎng)還會(huì)有神秘明星助陣，所以大家一定要關(guān)注。
天貓“九牛與二虎”直播活動(dòng)海報(bào)
天貓官方爆款清單主視覺畫面
附注：
1. VML上海表示，目前行業(yè)內(nèi)流傳有關(guān)天貓雙11《穿越宇宙的雙11邀請(qǐng)函》 H5 的制作價(jià)格皆為杜撰。
2. 天貓官方微信于23日發(fā)布文章《穿越宇宙的雙11邀請(qǐng)函@了你》后，底部相關(guān) H5 鏈接曾出現(xiàn)無法打開的現(xiàn)象，目前已經(jīng)恢復(fù)。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(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)論（10條）