來源：iH5（ih5_cn）
作者：種子
前兩天微信被天貓年貨節H5刷屏了，和稍遠的網易娛樂畫報H5一樣，也是因為交互形式出彩。
鏤空書的設計、滑動控制翻頁的巧思都可圈可點。一查，制作方居然是以交互創意聞名的VML上海？
是去年做出淘寶造物節全景H5的VML！
是為天貓策劃出一鏡到底H5的VML！
是一出手就引發行業潮流的VML！
然而，有人開始指責他們抄襲——
起因是天貓H5和16年初TGideas做的火影H5，視覺上很像：
（1）紙雕設計（傳聞源自日本）；
（2）走馬燈式的3D輪播。
對比如下：
“大贊的火影光影！”
點擊查看案例詳情：http://www.sh-jinniu.com/projects/16853.html
掃描二維碼，立即體驗！
（數英網 App 用戶需點擊放大二維碼后，長按識別）
“VML又搞天貓！”
點擊查看案例詳情：http://www.sh-jinniu.com/projects/20299.html
掃描二維碼，立即體驗！
（數英網 App 用戶需點擊放大二維碼后，長按識別）
所以，這次干脆為大家請來天貓年貨節H5的創意總監鳥崔，聊聊臺前幕后的故事，以及這次爭議的始末！
當然，鑒于前兩天我們快速學習了VML這次的神創意，做出一版走馬燈式的年終報告H5，后面還有非常詳細的制作教程！
一、天貓年貨節H5專訪
受訪者：鳥崔（天貓年貨節H5創意總監）
訪談時間：17年1月12日
Q：天貓年貨節這個H5，反響怎么樣？
鳥崔：年貨節這個呈現形式鏤空書有很強的識別性，做出來后周圍反響還不錯。PV的話，活動還沒有結束，我已經進入下一個項目了，這幾天還真沒有關注。我們的客戶團隊更清楚。
Q：H5花了多長時間完成？
鳥崔：這個項目brief進的時候時間很緊，不到一個月就需要上線。
在之前應該沒有人用純H5的適量圖形可交互的方式去做過，所以提的時候客戶滿擔憂的，中間我們也消耗掉不少時間做出一部分demo放進程序內演示給客戶看，這導致了我們最后的動畫時間不足，也是我們故事講得不順的一個大問題。
但是我已經不能要求制作部門做到更多，那時候程序員連續通宵只睡了2個小時，所以非常無奈。作品出去了，大家看的時候是不會考慮實際的制作時間和難度，這也提醒我，時間估量的時候還是要留夠足夠的余量。
Q：前面消耗時間的主要原因是？
鳥崔：素材。
最開始我們的場景更多，畫了非常多的插圖，也安排了很多的動畫在里面。最后提交的時候限制K數和故事長度，拿掉了很多，動畫內容來不及做，年貨節就要開始了，這個時間是死的誰也不能更改，于是……就上線了，哈哈。
Q：你們這次工作是多少人，怎么分工的？
鳥崔：制作團隊這里程序比較新，需要研發，所以雖然投入兩個人，但是事實上大量的開發只有核心的一位可以搞定。這個最開始考慮過3D建模做視頻，后來Shrek說他可以嘗試程序實現，結果真就弄出來了。
創意組這里2-4位art和1位copy在進行，最趕的時候有多投人力。但是和程序一樣的問題，art投入太多的時候畫面風格開始出現比較大的偏差，所以也是圍繞核心其他盡量接近的方式進行。
Q：網上有人說天貓年貨節抄襲騰訊火影H5，你怎么看？
鳥崔：一些廣告門戶上發布以后好多人說抄襲，我去看了下（那個作品），形式確實都是一樣，而且那個項目是用實物拍攝的方式制作的，也相當好。
但是很多留言都在說抄襲的時候，我覺得有必要澄清一下。畢竟一個形式就是形式，這個做法先有國外一個化妝品類的video做過，也有日本設計師做過實物。我們把這項目實現成一個H5虛擬3D的，卻被認為是抄襲同行的作品，這個結論非常的武斷。
雖然非常遺憾，但是我覺得有質疑是好事，提醒我們下次走得更遠做得更好，也同時去關注同行里更多的好作品，才不會出現這樣的事情。
Q：其實在H5廣告的創作上，交互、內容上形式的相似是很常見的，你們行內有沒有默認的真正談得上抄襲的界限？
鳥崔：應該沒有一個默認的，就像你看到的樣子，大家會就一個相似的形式說抄襲。即使故事內容和idea本身，也有容易撞車的時候。但是真撞了就一定是抄襲嗎，這個只能說創意走得不夠遠，需要繼續努力，比如我。哈哈。
大家很容易就一個形式而去質疑一件作品抄襲，這很吊詭。
比如網易那個無限放大也被認為抄襲，但是那個形式其實很早前有一個雞頭無限放大到宇宙的圖也是一樣的形式，Nike和本田當年也有網站做成這樣的形式。被說成抄襲我估計創作者是有點委屈的，但是這也提醒我們，不要太倚重形式，或者說形式大過內容。
Q：和很多講究內容創新的互動團隊不一樣，VML在交互上做了很多創新，為行業立起很多標桿。你們是以交互創新為創作方向？
鳥崔：制作團隊確實實力非常棒。
我們在想案子的時候，也是盡量讓技術的探索也往前走。有時候發散idea的時候，我們會和技術團隊時不時一起碰撞一下，看有沒有更好的方式之類?，F在信息這么龐雜的狀況下，總是需要抓住一切機會讓案子能夠讓人眼前一亮。
Q：能透露你們下一步的創作目標和計劃嗎？
鳥崔：短期我們有一個不錯的案子在進行，也是屬于那種讓大家一腔熱血投入的案子。就稍長遠點，以后可能會結合更多的視頻內容和技術手段。
這個應該很容易想到，網站走過這樣的一個周期，移動端也一樣，技術平臺和流量在加大，大家的碎片化時間需要更高效的溝通，形式就會被藏在下一層，故事或者說內容會更高效的到達用戶。這個應該不會很久吧，大家現在移動端隨便訂個1、2G的流量都很常見。
其他的，我覺得平臺和講故事的地方可能會有變化，但是用戶用時間消費好內容的需求不會變。
二、好形式，參考參考？
騰訊火影那個H5，是TGideas歷時三天實拍完成，光影實效非常精致，但因為是視頻，沒有什么交互上的設計（這也是TGideas出品的純動畫H5曾被詬病的原因）。
VML上海這個H5，自主設計了很多交互細節，包括左右滑動對輪播往前往后的控制、滑動幅度對輪播速度的影響等，這些也是H5刷屏的重要原因。
兩個團隊實際上創意的著重點不同。不過對于我們來說，VML又開創了一種新的互動形式??！
剛好這陣子iH5要籌備年終報告，小伙伴排出60多頁AI靜態源素材，得做成一版H5。如果為素材一頁頁分組、導出成分層圖、導入iH5、加動效，做起來得哭死……
還好天貓這個刷屏H5出現了！好看、熱門、而且實用（自動翻書的設計，能承載很多信息容量），所以幾乎在天貓刷屏的第二天我們就趁熱打鐵做出以下致敬版。
“曬曬iH5年終報告”
掃描二維碼，立即體驗！
（數英網 App 用戶需點擊放大二維碼后，長按識別）
接下來進入劇透時間！
三、《原來H5這行水這么深！》制作攻略
（一）、弄幾張圖，透明的！
1、用于展示的鏤空圖（PNG）
圖片要鏤空！其實就是去背景，比如上面是我們報告的原圖，背景的留白都是透明的，因此才能在H5中看到前后播放的其他圖片，制造出立體空間。
2、用于銜接的鏤空圖（PNG）
銜接的圖片，需要在中心處完全鏤空，才不會遮擋住前后的展示圖層，比如從上面天貓的案例后臺可以看到，采取的是中心全透明的形式。
注意：導出為Web所用格式時，需要設為640×1040像素（剛好是手機上微信顯示頁面的標準尺寸），并建議采用PNG-8格式（更節省體積）、雜邊“無”。
（二）來個走馬燈特效！
走馬燈背后涉及兩種旋轉，一種是需要控制圖片平面上沿頁面邊緣進行y軸旋轉，一種是立體上給人帶來沿頁面邊緣進行y軸旋轉的感覺，涉及視距變換。
需注意在蘋果設備上，圖片如果有重疊會導致閃屏，所以需要對圖層進行旋轉角度的區分。
1、新建時間軸
注：為了方便編輯，報告H5每個軌跡的間隔設為1秒，但播放起來有點快，最后播放速度設為0.7倍。
2、新建容器——新建容器——新建透明按鈕——新建軌跡
簡單地說，連續兩次點擊“容器”組件那個按鈕，建立2層容器，用于旋轉角度的區分。
然后新建一個透明按鈕1，用于確保圖片沿y軸旋轉時，y軸以透明按鈕1的中點為準。因此要控制透明按鈕1的“x坐標”（比如630）、“寬”（比如20），剛好能讓它的中點處于H5的右邊緣。
透明按鈕1視距設為300，并為它新建軌跡，用于確保圖片具備3D變換效果。
注意：視距指以父對象的中心為旋轉中心時，子對象3D翻轉時的變形距離，必須在3D旋轉的父對象上設置。視距設置越大，3D透視效果越小。
3、新建透明按鈕——新建軌跡——拖入圖片
再新建一個透明按鈕2，也是用于確保圖片沿y軸旋轉、立體變換時，y軸以透明按鈕2的中點為準。由于透明按鈕1是透明按鈕2的父對象，因此要控制透明按鈕2的“x坐標”為前者的負值（比如-630）、“寬”與前者一致（比如20），讓它的中點與透明按鈕1重合。
為透明按鈕2新建軌跡，拖一張圖片到透明按鈕下面。這樣一來，讓透明按鈕2沿y軸旋轉，其實就是讓圖片沿右側邊緣旋轉了。
注意：沿y軸旋轉，指以對象的垂直中心軸為旋轉軸，進行3D透視旋轉。上面的軌跡建議采用“貝塞爾曲線”選項，變換時會遵循快-慢-快的原則。
4、為軌跡設置關鍵幀
分別選中透明按鈕1、透明按鈕2軌跡，為它們各添加以上3個參數的關鍵幀，并保持兩個按鈕3個關鍵幀的位置一致。
如果同組內關鍵幀的間隔設為1秒，后面添加新的關鍵幀比較節省時間（只需選中關鍵幀，在幀位置的輸入框內填寫1、2、3類似的值就行）。
組與組之間間隔可設為0.5秒（即展示組和銜接組的時間間隔）。
5、多組圖片的變化
以此類推，比如要做6個展示頁面，就需要11個組（包括5個銜接的圖片組）。
這時需要回到開頭，復制第2個容器，粘貼在第1個容器上，就會有11個包含各種內容的二層容器。然后逐一為各層容器設置關鍵幀，替換圖片就行。
6、避免各組之間的層疊
最后，把所有展示組的頂層容器（相當于二層容器），“y軸旋轉”這個參數設為1。
注意：這樣一來，所有銜接組的“y軸旋轉”仍為0，就不會導致間隔的兩組同時旋轉時，兩組之間重疊后產生閃屏。
（三）滑動要智能！
左右滑動的速度需要實時記錄，并反映為播放速度，交互上的體驗才會更真實。
此外，為避免一次性進行播放的圖片太多，導致卡頓，最好進行分頁播放，而不是一個頁面播到底。
1、新建變量
需要2個變量，一個輸出向左滑動的速度（v1），一個輸出向右滑動的速度（v2）。
2、新建透明按鈕——添加事件
透明按鈕的x、y坐標為0，寬、高和設備一致，確保蓋住整個屏幕，然后需要的事件如下：
上面的播放速度，$v1*0.0001+0.5，0.5表示的是最低的播放速度，可以根據實際滑動情況靈活設置。
“*0.0001”，是因為比較快的速度可以高達4位數，這樣賦值可以確保它不會一下子超過原定的播放速度（0.7）。
最后，請大家自動忽略本文的標題黨。其實昨天我還在TGideas粉絲群做了個小調查，發現大家和我一樣也認為“抄襲”二字有點過了，而且VML主創事先并沒有注意到那個作品。
另外，給認真看完教程的人一個重磅消息——
這份H5報告已開放使用，有需要的人可以到iH5官網的模板中心下載，直接替換掉圖片素材就能用了！
-END-
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
全部評論（16條）