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