深度解剖：為什么淘寶造物節(jié)的 H5 能炸了我的朋友圈？
就在6月的最后1天，朋友圈再次上演了現(xiàn)象級(jí)H5的刷爆狂潮！和月初就已慘遭封殺的三個(gè)關(guān)鍵詞這支H5作品不同，這次的現(xiàn)象級(jí)刷頻僅僅是事件風(fēng)暴的前奏，而推廣的活動(dòng)主題卻是橫空出世的淘寶造物節(jié)。
究竟這么碉堡的H5是誰(shuí)做的？這牛逼的效果是怎么實(shí)現(xiàn)的？這么好的創(chuàng)意又是怎么產(chǎn)出的？本期就讓小呆帶你來(lái)細(xì)致的分支下這支H5的前臺(tái)與幕后吧~
來(lái)源：H5廣告資訊站
作者：小呆
數(shù)英網(wǎng)DIGITALING 用戶原創(chuàng)文章，如需轉(zhuǎn)載請(qǐng)聯(lián)系作者本人。
淘寶網(wǎng)：淘寶造物節(jié)邀請(qǐng)函H5
造物節(jié)，造造造造造！掃描下方二維碼~
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）
不管是專業(yè)人士的設(shè)計(jì)師、運(yùn)營(yíng)，還是普通的群眾，看完這支作品都大大的受到了震撼，并且用分享刷翻了自己的朋友圈！就像是小呆的朋友圈：
小呆的朋友圈截圖
帥呆了！酷斃了！屌飛了！技術(shù)太強(qiáng)了！淘寶的設(shè)計(jì)運(yùn)營(yíng)都太牛逼了！我全家都服了！好吧，真的是你們這么想的么？咱們就從幕后團(tuán)隊(duì)開(kāi)始講起。
造物節(jié)邀請(qǐng)函設(shè)計(jì)方是誰(shuí)？
大家都知道像是淘寶這樣體量的甲方，每年會(huì)有大量推廣產(chǎn)出，而自己的設(shè)計(jì)部是承載不了這么多任務(wù)的，這時(shí)品牌會(huì)找各種代理商來(lái)做推廣執(zhí)行，像是我們之前專訪過(guò)的LxU就是阿里的代理商之一，而這支H5的主創(chuàng)也同樣出品于代理商團(tuán)隊(duì)，這支團(tuán)隊(duì)就是VML 上海 。
VML早期H5作品截圖
這支互動(dòng)營(yíng)銷(xiāo)團(tuán)隊(duì)剛剛更名不久，而且在圈內(nèi)極為低調(diào)，就之前的H5作品產(chǎn)出來(lái)看，產(chǎn)量極低但作品質(zhì)量普遍極高，有點(diǎn)像是H5營(yíng)銷(xiāo)領(lǐng)域的“勞斯萊斯”?？鋸堻c(diǎn)講，只要作品貼了VML的標(biāo)，就水不了!
那么，這么牛逼的技術(shù)是怎么實(shí)現(xiàn)的？
群眾們真是在分享時(shí)發(fā)揮著各種想象力，什么3D H5又來(lái)了，VR H5又爆了，好像這支H5又用到了某些新的尖端技術(shù)，事實(shí)究竟是怎樣？
小呆的聊天記錄
相信大多數(shù)人都是被這部分內(nèi)容給震撼到的，一個(gè)可以交互并且?guī)в兄亓Ω袘?yīng)的插畫(huà)全景世界，真的太美妙了!
H5全景進(jìn)入畫(huà)面
從原理上來(lái)說(shuō)，開(kāi)發(fā)者實(shí)際只是用了一個(gè)非常常規(guī)的展示技術(shù)，就是CSS3的空間變換命令，而這個(gè)所謂的3D場(chǎng)景是一個(gè)不折不扣的偽3D。實(shí)際用戶們?cè)缇鸵?jiàn)過(guò)這種玩法了，只不過(guò)以前都是用在真實(shí)場(chǎng)景圖片上，而這次是首次用在插畫(huà)上，所以會(huì)給人完全不同的新鮮感。而且這支H5并不算是虛擬現(xiàn)實(shí)，也不能算作VR H5，真是十分糟糕的技術(shù)混淆！
全景圖演示圖，該H5與之原理相似
這支H5的全景圖
我們通過(guò)畫(huà)面的緩慢播放發(fā)現(xiàn)，原來(lái)背景圖是一條條的，被切割了！
尤其是當(dāng)你進(jìn)入場(chǎng)景內(nèi)，把畫(huà)面放大時(shí)，會(huì)發(fā)現(xiàn)一條條接縫，這就讓我們更確信了一個(gè)判斷，而當(dāng)通過(guò)后臺(tái)把元素羅列出來(lái)時(shí)，就一目了然了！
不僅僅是主背景，就連其它畫(huà)面元素也都被切割成了類(lèi)似樣式，這又是為什么吶？
其實(shí)這就是CSS位置變換命令的一個(gè)巧妙用法，開(kāi)發(fā)者將所有的圖等距離大小切割成了一條條，并把它們圍成一個(gè)圓形，這樣在體驗(yàn)上就創(chuàng)造了一個(gè)空間。利用一些算法和簡(jiǎn)單技術(shù)就創(chuàng)造了比較豐富的視覺(jué)表現(xiàn)，這真是非常聰明的用法！
H5空間原理的示意圖
但問(wèn)題又來(lái)了！一般情況下，想要在H5上實(shí)現(xiàn)真實(shí)3D展示，需要借助webGL這種編輯方式，而想繞過(guò)這個(gè)技術(shù)壁壘的話，常規(guī)有以下三種方式：（視頻、div+css、canvas)
視頻、div+css、canvas
視頻做成3D糊下群眾，這個(gè)很好理解。但我們通常又會(huì)認(rèn)為canvas相比div+css是更好的解決辦法，并且效率更高?？梢蕴幚頂?shù)量更大的素材，并且不耗費(fèi)請(qǐng)求數(shù)量，那么為什么開(kāi)發(fā)者會(huì)選擇div+css吶？
通過(guò)分析小呆認(rèn)為，主要原因可能有兩個(gè)：
1.就該案例而言，它的圖片數(shù)量并不大，本身對(duì)性能的耗損就不高，而且對(duì)于一些低端機(jī)來(lái)說(shuō)，CSS的門(mén)檻更低，也是個(gè)可以考慮的方向。
2.這個(gè)可能是主要原因，小呆觀察VML已經(jīng)近乎1年多了，他們的H5作品我們有過(guò)大量研究，我們驚奇的發(fā)現(xiàn)他們的技術(shù)團(tuán)隊(duì)對(duì)于CSS3的位置變化使用的頻率很高，并且已經(jīng)達(dá)到了爐火純青的地步，其內(nèi)部應(yīng)該已經(jīng)形成了成套的解決方案，所以選擇div+css是一個(gè)經(jīng)驗(yàn)判斷！
最后在技術(shù)方面，還有一個(gè)非常有趣的細(xì)節(jié)可以和大家分享，就是本案例的圖片格式采用的是base64格式，而不是常規(guī)的PNG或者JPG，這種格式是代碼級(jí)的數(shù)字圖片，有著更小的體積，對(duì)于H5來(lái)說(shuō)意義重大。
點(diǎn)擊圖片查看大圖
實(shí)際在前端領(lǐng)域，base64也是一種常用格式，往往也是通過(guò)程序員來(lái)完成轉(zhuǎn)碼和壓縮的，而唯一的缺點(diǎn)就是圖片如果過(guò)多，瀏覽器的解碼壓力會(huì)比較大，用在這支案例上應(yīng)該說(shuō)剛剛好，脫它的福，H5整體體量控制在了2.3MB，非常小巧實(shí)用！
這支H5的技術(shù)深度只能用位來(lái)形容，并沒(méi)有去特意炫技，也許這才是H5老司機(jī)的正確姿態(tài)，把技術(shù)用得恰到好處。
關(guān)于這支H5的創(chuàng)意表現(xiàn)，小呆你怎么看？
如果你把這支H5丟給創(chuàng)意人，說(shuō)它創(chuàng)意非常贊！他大概會(huì)非常不屑的告訴你，這只不過(guò)是一個(gè)小聰明，談何創(chuàng)意？如果你把這支H5拿給程序員，說(shuō)這個(gè)H5技術(shù)有多好，他則會(huì)很不理解的反問(wèn)你，這么簡(jiǎn)單的東西，好在哪里？最后你又拿它給設(shè)計(jì)師看，說(shuō)H5設(shè)計(jì)做的好，他更會(huì)郁悶到，這哪里有設(shè)計(jì)，不就是一組很炫酷的插畫(huà)么？
當(dāng)我們拋開(kāi)這些所謂專業(yè)人士的所謂專業(yè)觀點(diǎn)之后，你會(huì)驚奇的發(fā)現(xiàn)，絕大多數(shù)用戶會(huì)認(rèn)為這是一支創(chuàng)意、技術(shù)、設(shè)計(jì)都很贊的作品！
在這里，你會(huì)發(fā)現(xiàn)專業(yè)領(lǐng)域的工作者和受眾存在一個(gè)認(rèn)知斷層。而當(dāng)你從營(yíng)銷(xiāo)這個(gè)點(diǎn)來(lái)切入時(shí)，真正能產(chǎn)生購(gòu)買(mǎi)欲或者說(shuō)分享欲的H5，往往都是一個(gè)看上去非常刺激的小花招，一切的技術(shù)、創(chuàng)意、設(shè)計(jì)都在為它做各種妥協(xié)，以往的創(chuàng)作經(jīng)驗(yàn)將會(huì)全部失效，而這樣做確更容易打中用戶的痛點(diǎn)，造成大量傳播，創(chuàng)造現(xiàn)象級(jí)的作品。
點(diǎn)擊圖片查看大圖
之前的吳亦凡H5、BMW H5，和這支淘寶邀請(qǐng)函H5，無(wú)一例外都走的是同樣的套路，它們的所謂創(chuàng)意就是一個(gè)過(guò)猛的形式、一個(gè)炫酷的外表而已，不會(huì)攜帶任何內(nèi)涵和所謂的情懷。這樣做，真的非常貼合微信端大多數(shù)的用戶喜好，也非常有助于短時(shí)期內(nèi)獲得大量傳播，但這樣真的利于這個(gè)行業(yè)長(zhǎng)久發(fā)展么？在這個(gè)問(wèn)題上，我們就只能心存疑惑了。
所以說(shuō)，當(dāng)我們從創(chuàng)意層面去分析這支作品時(shí)，就短期時(shí)效來(lái)看，它是成功的，但就長(zhǎng)期發(fā)展來(lái)看，誰(shuí)又知道怎么去評(píng)價(jià)吶？
關(guān)于淘寶造物節(jié)邀請(qǐng)函H5的分析實(shí)際還有很多點(diǎn)可以挖，但是文章已經(jīng)很長(zhǎng)了，以后有機(jī)會(huì)小呆還會(huì)寫(xiě)更深入的分析給大家。為了發(fā)這篇帖子，我們延緩了月總的上線時(shí)間，也希望它能夠解開(kāi)你心中對(duì)于這支作品的諸多疑惑。
公眾號(hào)：H5廣告資訊站
轉(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)必究。
相關(guān)推薦
![[下載] H5手機(jī)移動(dòng)項(xiàng)目，6月份截屏下載 ——設(shè)計(jì)資源 54](https://file.digitaling.com/eImg/cover/20160704/20160704152445_22732.jpg)
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（3條）