來(lái)源：iH5（ih5_cn）
作者：種子

前兩天微信被天貓年貨節(jié)H5刷屏了，和稍遠(yuǎn)的網(wǎng)易娛樂(lè)畫報(bào)H5一樣，也是因?yàn)榻换バ问匠霾省?/p>

鏤空書的設(shè)計(jì)、滑動(dòng)控制翻頁(yè)的巧思都可圈可點(diǎn)。一查，制作方居然是以交互創(chuàng)意聞名的VML上海？

是去年做出淘寶造物節(jié)全景H5的VML！

是為天貓策劃出一鏡到底H5的VML！

是一出手就引發(fā)行業(yè)潮流的VML！

然而，有人開始指責(zé)他們抄襲——

起因是天貓H5和16年初TGideas做的火影H5，視覺(jué)上很像：

（1）紙雕設(shè)計(jì)（傳聞源自日本）；

（2）走馬燈式的3D輪播。

對(duì)比如下：

“大贊的火影光影！”

點(diǎn)擊查看案例詳情：http://www.hygysj.cn/projects/16853.html

掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）

“VML又搞天貓！”

點(diǎn)擊查看案例詳情：http://www.hygysj.cn/projects/20299.html

掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）

所以，這次干脆為大家請(qǐng)來(lái)天貓年貨節(jié)H5的創(chuàng)意總監(jiān)鳥崔，聊聊臺(tái)前幕后的故事，以及這次爭(zhēng)議的始末！

當(dāng)然，鑒于前兩天我們快速學(xué)習(xí)了VML這次的神創(chuàng)意，做出一版走馬燈式的年終報(bào)告H5，后面還有非常詳細(xì)的制作教程！

一、天貓年貨節(jié)H5專訪

受訪者：鳥崔（天貓年貨節(jié)H5創(chuàng)意總監(jiān)）

訪談時(shí)間：17年1月12日

Q：天貓年貨節(jié)這個(gè)H5，反響怎么樣？

鳥崔：年貨節(jié)這個(gè)呈現(xiàn)形式鏤空書有很強(qiáng)的識(shí)別性，做出來(lái)后周圍反響還不錯(cuò)。PV的話，活動(dòng)還沒(méi)有結(jié)束，我已經(jīng)進(jìn)入下一個(gè)項(xiàng)目了，這幾天還真沒(méi)有關(guān)注。我們的客戶團(tuán)隊(duì)更清楚。

 Q：H5花了多長(zhǎng)時(shí)間完成？

鳥崔：這個(gè)項(xiàng)目brief進(jìn)的時(shí)候時(shí)間很緊，不到一個(gè)月就需要上線。

在之前應(yīng)該沒(méi)有人用純H5的適量圖形可交互的方式去做過(guò)，所以提的時(shí)候客戶滿擔(dān)憂的，中間我們也消耗掉不少時(shí)間做出一部分demo放進(jìn)程序內(nèi)演示給客戶看，這導(dǎo)致了我們最后的動(dòng)畫時(shí)間不足，也是我們故事講得不順的一個(gè)大問(wèn)題。

但是我已經(jīng)不能要求制作部門做到更多，那時(shí)候程序員連續(xù)通宵只睡了2個(gè)小時(shí)，所以非常無(wú)奈。作品出去了，大家看的時(shí)候是不會(huì)考慮實(shí)際的制作時(shí)間和難度，這也提醒我，時(shí)間估量的時(shí)候還是要留夠足夠的余量。

Q：前面消耗時(shí)間的主要原因是？

鳥崔：素材。

最開始我們的場(chǎng)景更多，畫了非常多的插圖，也安排了很多的動(dòng)畫在里面。最后提交的時(shí)候限制K數(shù)和故事長(zhǎng)度，拿掉了很多，動(dòng)畫內(nèi)容來(lái)不及做，年貨節(jié)就要開始了，這個(gè)時(shí)間是死的誰(shuí)也不能更改，于是……就上線了，哈哈。

Q：你們這次工作是多少人，怎么分工的？

鳥崔：制作團(tuán)隊(duì)這里程序比較新，需要研發(fā)，所以雖然投入兩個(gè)人，但是事實(shí)上大量的開發(fā)只有核心的一位可以搞定。這個(gè)最開始考慮過(guò)3D建模做視頻，后來(lái)Shrek說(shuō)他可以嘗試程序?qū)崿F(xiàn)，結(jié)果真就弄出來(lái)了。

創(chuàng)意組這里2-4位art和1位copy在進(jìn)行，最趕的時(shí)候有多投人力。但是和程序一樣的問(wèn)題，art投入太多的時(shí)候畫面風(fēng)格開始出現(xiàn)比較大的偏差，所以也是圍繞核心其他盡量接近的方式進(jìn)行。

Q：網(wǎng)上有人說(shuō)天貓年貨節(jié)抄襲騰訊火影H5，你怎么看？

鳥崔：一些廣告門戶上發(fā)布以后好多人說(shuō)抄襲，我去看了下（那個(gè)作品），形式確實(shí)都是一樣，而且那個(gè)項(xiàng)目是用實(shí)物拍攝的方式制作的，也相當(dāng)好。

但是很多留言都在說(shuō)抄襲的時(shí)候，我覺(jué)得有必要澄清一下。畢竟一個(gè)形式就是形式，這個(gè)做法先有國(guó)外一個(gè)化妝品類的video做過(guò)，也有日本設(shè)計(jì)師做過(guò)實(shí)物。我們把這項(xiàng)目實(shí)現(xiàn)成一個(gè)H5虛擬3D的，卻被認(rèn)為是抄襲同行的作品，這個(gè)結(jié)論非常的武斷。

雖然非常遺憾，但是我覺(jué)得有質(zhì)疑是好事，提醒我們下次走得更遠(yuǎn)做得更好，也同時(shí)去關(guān)注同行里更多的好作品，才不會(huì)出現(xiàn)這樣的事情。

Q：其實(shí)在H5廣告的創(chuàng)作上，交互、內(nèi)容上形式的相似是很常見的，你們行內(nèi)有沒(méi)有默認(rèn)的真正談得上抄襲的界限？

鳥崔：應(yīng)該沒(méi)有一個(gè)默認(rèn)的，就像你看到的樣子，大家會(huì)就一個(gè)相似的形式說(shuō)抄襲。即使故事內(nèi)容和idea本身，也有容易撞車的時(shí)候。但是真撞了就一定是抄襲嗎，這個(gè)只能說(shuō)創(chuàng)意走得不夠遠(yuǎn)，需要繼續(xù)努力，比如我。哈哈。

大家很容易就一個(gè)形式而去質(zhì)疑一件作品抄襲，這很吊詭。

比如網(wǎng)易那個(gè)無(wú)限放大也被認(rèn)為抄襲，但是那個(gè)形式其實(shí)很早前有一個(gè)雞頭無(wú)限放大到宇宙的圖也是一樣的形式，Nike和本田當(dāng)年也有網(wǎng)站做成這樣的形式。被說(shuō)成抄襲我估計(jì)創(chuàng)作者是有點(diǎn)委屈的，但是這也提醒我們，不要太倚重形式，或者說(shuō)形式大過(guò)內(nèi)容。

Q：和很多講究?jī)?nèi)容創(chuàng)新的互動(dòng)團(tuán)隊(duì)不一樣，VML在交互上做了很多創(chuàng)新，為行業(yè)立起很多標(biāo)桿。你們是以交互創(chuàng)新為創(chuàng)作方向？

鳥崔：制作團(tuán)隊(duì)確實(shí)實(shí)力非常棒。

我們?cè)谙氚缸拥臅r(shí)候，也是盡量讓技術(shù)的探索也往前走。有時(shí)候發(fā)散idea的時(shí)候，我們會(huì)和技術(shù)團(tuán)隊(duì)時(shí)不時(shí)一起碰撞一下，看有沒(méi)有更好的方式之類?，F(xiàn)在信息這么龐雜的狀況下，總是需要抓住一切機(jī)會(huì)讓案子能夠讓人眼前一亮。

Q：能透露你們下一步的創(chuàng)作目標(biāo)和計(jì)劃嗎？

鳥崔：短期我們有一個(gè)不錯(cuò)的案子在進(jìn)行，也是屬于那種讓大家一腔熱血投入的案子。就稍長(zhǎng)遠(yuǎn)點(diǎn)，以后可能會(huì)結(jié)合更多的視頻內(nèi)容和技術(shù)手段。

這個(gè)應(yīng)該很容易想到，網(wǎng)站走過(guò)這樣的一個(gè)周期，移動(dòng)端也一樣，技術(shù)平臺(tái)和流量在加大，大家的碎片化時(shí)間需要更高效的溝通，形式就會(huì)被藏在下一層，故事或者說(shuō)內(nèi)容會(huì)更高效的到達(dá)用戶。這個(gè)應(yīng)該不會(huì)很久吧，大家現(xiàn)在移動(dòng)端隨便訂個(gè)1、2G的流量都很常見。

其他的，我覺(jué)得平臺(tái)和講故事的地方可能會(huì)有變化，但是用戶用時(shí)間消費(fèi)好內(nèi)容的需求不會(huì)變。

二、好形式，參考參考？

騰訊火影那個(gè)H5，是TGideas歷時(shí)三天實(shí)拍完成，光影實(shí)效非常精致，但因?yàn)槭且曨l，沒(méi)有什么交互上的設(shè)計(jì)（這也是TGideas出品的純動(dòng)畫H5曾被詬病的原因）。

VML上海這個(gè)H5，自主設(shè)計(jì)了很多交互細(xì)節(jié)，包括左右滑動(dòng)對(duì)輪播往前往后的控制、滑動(dòng)幅度對(duì)輪播速度的影響等，這些也是H5刷屏的重要原因。

兩個(gè)團(tuán)隊(duì)實(shí)際上創(chuàng)意的著重點(diǎn)不同。不過(guò)對(duì)于我們來(lái)說(shuō)，VML又開創(chuàng)了一種新的互動(dòng)形式??！ 

剛好這陣子iH5要籌備年終報(bào)告，小伙伴排出60多頁(yè)AI靜態(tài)源素材，得做成一版H5。如果為素材一頁(yè)頁(yè)分組、導(dǎo)出成分層圖、導(dǎo)入iH5、加動(dòng)效，做起來(lái)得哭死……

還好天貓這個(gè)刷屏H5出現(xiàn)了！好看、熱門、而且實(shí)用（自動(dòng)翻書的設(shè)計(jì)，能承載很多信息容量），所以幾乎在天貓刷屏的第二天我們就趁熱打鐵做出以下致敬版。

“曬曬iH5年終報(bào)告”

掃描二維碼，立即體驗(yàn)！
（數(shù)英網(wǎng) App 用戶需點(diǎn)擊放大二維碼后，長(zhǎng)按識(shí)別）

接下來(lái)進(jìn)入劇透時(shí)間！

三、《原來(lái)H5這行水這么深！》制作攻略

（一）、弄幾張圖，透明的！

1、用于展示的鏤空?qǐng)D（PNG）

圖片要鏤空！其實(shí)就是去背景，比如上面是我們報(bào)告的原圖，背景的留白都是透明的，因此才能在H5中看到前后播放的其他圖片，制造出立體空間。

2、用于銜接的鏤空?qǐng)D（PNG）

銜接的圖片，需要在中心處完全鏤空，才不會(huì)遮擋住前后的展示圖層，比如從上面天貓的案例后臺(tái)可以看到，采取的是中心全透明的形式。

注意：導(dǎo)出為Web所用格式時(shí)，需要設(shè)為640×1040像素（剛好是手機(jī)上微信顯示頁(yè)面的標(biāo)準(zhǔn)尺寸），并建議采用PNG-8格式（更節(jié)省體積）、雜邊“無(wú)”。

（二）來(lái)個(gè)走馬燈特效！

走馬燈背后涉及兩種旋轉(zhuǎn)，一種是需要控制圖片平面上沿頁(yè)面邊緣進(jìn)行y軸旋轉(zhuǎn)，一種是立體上給人帶來(lái)沿頁(yè)面邊緣進(jìn)行y軸旋轉(zhuǎn)的感覺(jué)，涉及視距變換。

需注意在蘋果設(shè)備上，圖片如果有重疊會(huì)導(dǎo)致閃屏，所以需要對(duì)圖層進(jìn)行旋轉(zhuǎn)角度的區(qū)分。

 1、新建時(shí)間軸

注：為了方便編輯，報(bào)告H5每個(gè)軌跡的間隔設(shè)為1秒，但播放起來(lái)有點(diǎn)快，最后播放速度設(shè)為0.7倍。

2、新建容器——新建容器——新建透明按鈕——新建軌跡

簡(jiǎn)單地說(shuō)，連續(xù)兩次點(diǎn)擊“容器”組件那個(gè)按鈕，建立2層容器，用于旋轉(zhuǎn)角度的區(qū)分。

然后新建一個(gè)透明按鈕1，用于確保圖片沿y軸旋轉(zhuǎn)時(shí)，y軸以透明按鈕1的中點(diǎn)為準(zhǔn)。因此要控制透明按鈕1的“x坐標(biāo)”（比如630）、“寬”（比如20），剛好能讓它的中點(diǎn)處于H5的右邊緣。

透明按鈕1視距設(shè)為300，并為它新建軌跡，用于確保圖片具備3D變換效果。

注意：視距指以父對(duì)象的中心為旋轉(zhuǎn)中心時(shí)，子對(duì)象3D翻轉(zhuǎn)時(shí)的變形距離，必須在3D旋轉(zhuǎn)的父對(duì)象上設(shè)置。視距設(shè)置越大，3D透視效果越小。

3、新建透明按鈕——新建軌跡——拖入圖片

再新建一個(gè)透明按鈕2，也是用于確保圖片沿y軸旋轉(zhuǎn)、立體變換時(shí)，y軸以透明按鈕2的中點(diǎn)為準(zhǔn)。由于透明按鈕1是透明按鈕2的父對(duì)象，因此要控制透明按鈕2的“x坐標(biāo)”為前者的負(fù)值（比如-630）、“寬”與前者一致（比如20），讓它的中點(diǎn)與透明按鈕1重合。

為透明按鈕2新建軌跡，拖一張圖片到透明按鈕下面。這樣一來(lái)，讓透明按鈕2沿y軸旋轉(zhuǎn)，其實(shí)就是讓圖片沿右側(cè)邊緣旋轉(zhuǎn)了。

注意：沿y軸旋轉(zhuǎn)，指以對(duì)象的垂直中心軸為旋轉(zhuǎn)軸，進(jìn)行3D透視旋轉(zhuǎn)。上面的軌跡建議采用“貝塞爾曲線”選項(xiàng)，變換時(shí)會(huì)遵循快-慢-快的原則。

4、為軌跡設(shè)置關(guān)鍵幀

分別選中透明按鈕1、透明按鈕2軌跡，為它們各添加以上3個(gè)參數(shù)的關(guān)鍵幀，并保持兩個(gè)按鈕3個(gè)關(guān)鍵幀的位置一致。

如果同組內(nèi)關(guān)鍵幀的間隔設(shè)為1秒，后面添加新的關(guān)鍵幀比較節(jié)省時(shí)間（只需選中關(guān)鍵幀，在幀位置的輸入框內(nèi)填寫1、2、3類似的值就行）。

組與組之間間隔可設(shè)為0.5秒（即展示組和銜接組的時(shí)間間隔）。

5、多組圖片的變化

以此類推，比如要做6個(gè)展示頁(yè)面，就需要11個(gè)組（包括5個(gè)銜接的圖片組）。

這時(shí)需要回到開頭，復(fù)制第2個(gè)容器，粘貼在第1個(gè)容器上，就會(huì)有11個(gè)包含各種內(nèi)容的二層容器。然后逐一為各層容器設(shè)置關(guān)鍵幀，替換圖片就行。

6、避免各組之間的層疊

最后，把所有展示組的頂層容器（相當(dāng)于二層容器），“y軸旋轉(zhuǎn)”這個(gè)參數(shù)設(shè)為1。

注意：這樣一來(lái)，所有銜接組的“y軸旋轉(zhuǎn)”仍為0，就不會(huì)導(dǎo)致間隔的兩組同時(shí)旋轉(zhuǎn)時(shí)，兩組之間重疊后產(chǎn)生閃屏。

（三）滑動(dòng)要智能！

左右滑動(dòng)的速度需要實(shí)時(shí)記錄，并反映為播放速度，交互上的體驗(yàn)才會(huì)更真實(shí)。

此外，為避免一次性進(jìn)行播放的圖片太多，導(dǎo)致卡頓，最好進(jìn)行分頁(yè)播放，而不是一個(gè)頁(yè)面播到底。

1、新建變量

需要2個(gè)變量，一個(gè)輸出向左滑動(dòng)的速度（v1），一個(gè)輸出向右滑動(dòng)的速度（v2）。

2、新建透明按鈕——添加事件

透明按鈕的x、y坐標(biāo)為0，寬、高和設(shè)備一致，確保蓋住整個(gè)屏幕，然后需要的事件如下：

上面的播放速度，$v1*0.0001+0.5，0.5表示的是最低的播放速度，可以根據(jù)實(shí)際滑動(dòng)情況靈活設(shè)置。

“*0.0001”，是因?yàn)楸容^快的速度可以高達(dá)4位數(shù)，這樣賦值可以確保它不會(huì)一下子超過(guò)原定的播放速度（0.7）。

最后，請(qǐng)大家自動(dòng)忽略本文的標(biāo)題黨。其實(shí)昨天我還在TGideas粉絲群做了個(gè)小調(diào)查，發(fā)現(xiàn)大家和我一樣也認(rèn)為“抄襲”二字有點(diǎn)過(guò)了，而且VML主創(chuàng)事先并沒(méi)有注意到那個(gè)作品。

另外，給認(rèn)真看完教程的人一個(gè)重磅消息——

這份H5報(bào)告已開放使用，有需要的人可以到iH5官網(wǎng)的模板中心下載，直接替換掉圖片素材就能用了！

-END-