來(lái)源：站酷
本文作者：Seedheart

“假如你除了能聽(tīng)聽(tīng)音樂(lè)——”
“還能和它玩玩？”

戛納國(guó)際創(chuàng)意節(jié)，可謂是廣告界的奧斯卡，每年評(píng)獎(jiǎng)就相當(dāng)于把全球最具創(chuàng)造力的市場(chǎng)營(yíng)銷(xiāo)方法廣而告之——借不借鑒就是我們自己的事了。

今年它照樣沒(méi)讓世人失望，當(dāng)大家還在靜靜地聽(tīng)MP3、看MV的時(shí)候，一個(gè)在線交互體驗(yàn)網(wǎng)站《Because Recollection》一舉擊敗獲得金獎(jiǎng)的谷歌實(shí)驗(yàn)室等項(xiàng)目，奪下史上首個(gè)數(shù)字工藝類(lèi)全場(chǎng)大獎(jiǎng)（因?yàn)檫@個(gè)獎(jiǎng)就是2016年才設(shè)立的）。

《Because Recollection》的交互界面

制作團(tuán)隊(duì)的腦洞不要開(kāi)得太大，你看看上面傲嬌開(kāi)唱的機(jī)械玩偶、非常有節(jié)操的裸體雕像，都是在一塊塊專(zhuān)輯封面的基礎(chǔ)上設(shè)計(jì)出的創(chuàng)意。這是一個(gè)基于HTML5建立的數(shù)字網(wǎng)站，創(chuàng)意、交互一流，用戶體驗(yàn)更是沒(méi)得說(shuō)，可謂用網(wǎng)絡(luò)互動(dòng)體驗(yàn)打開(kāi)市場(chǎng)的代表作。

網(wǎng)站體驗(yàn)：http://www.because-recollection.com

1、神一樣的交互體驗(yàn)！

網(wǎng)站為紀(jì)念Because Music建立十周年

這是我一首首歌體驗(yàn)后，剪輯出來(lái)的精華版視頻，你可以看到它的視覺(jué)效果實(shí)在太驚艷了！

《Because Recollection》是業(yè)界響當(dāng)當(dāng)?shù)姆▏?guó)廣告公司84.Paris為音樂(lè)廠牌Because Music（以下稱BM）制作的互動(dòng)網(wǎng)站，作為后者成立十周年的優(yōu)秀作品回顧。究竟是什么樣的作品，廣受業(yè)界好評(píng)，還能讓谷歌的Chrome Music Lab屈居戛納數(shù)字工藝類(lèi)金獎(jiǎng)？

網(wǎng)站發(fā)布后一周內(nèi)，Because Music漲了30%的粉！來(lái)自129個(gè)國(guó)家的用戶，平均每人玩了5分鐘——我則在網(wǎng)站上泡了大概有10小時(shí)。試想人家開(kāi)了十年的網(wǎng)站，突然一夜間名聲大噪的狂喜。

然后它就開(kāi)掛了，不僅獲得各大媒體的報(bào)道，更斬獲各種國(guó)際大獎(jiǎng)，金鉛筆、FWA、戛納，也算實(shí)至名歸。

2、如何做出這么驚艷的創(chuàng)意視覺(jué)？

其實(shí)每首歌互動(dòng)體驗(yàn)的步驟都差不多：

（1）長(zhǎng)按空格鍵緩沖-->
（2）按照提示進(jìn)行互動(dòng)-->
（3）播放音樂(lè)場(chǎng)景-->
（4）進(jìn)入專(zhuān)輯介紹。

互動(dòng)場(chǎng)景與原專(zhuān)輯封面的對(duì)比

它特意為每首歌設(shè)計(jì)出與專(zhuān)輯封面極其吻合的場(chǎng)景，這種超前的視覺(jué)創(chuàng)意讓人好奇，所以很快就有人在知乎詢問(wèn)它的技術(shù)實(shí)現(xiàn)，問(wèn)題如下：

知乎上有人詢問(wèn)如何實(shí)現(xiàn)

有一個(gè)回答，指出它應(yīng)用的都是視頻——還好回答的人匿名，否則我要直接找他理論！以第一首歌《By Your Side》為例，為了實(shí)現(xiàn)點(diǎn)擊后進(jìn)行動(dòng)態(tài)換裝的效果，加載出來(lái)的素材是這樣的：

換裝場(chǎng)景的部分原始素材

這能是視頻？

當(dāng)然，有的網(wǎng)站頁(yè)面的確用到了視頻，但這只是這些交互場(chǎng)景的一小部分。當(dāng)場(chǎng)景的變換越講究精細(xì)化，就越需要素材能分離出來(lái)變化、能獨(dú)立進(jìn)行交互。視頻和HTML5中畫(huà)布（Canvas）的概念很像，相當(dāng)于按幀加載，沒(méi)辦法和單個(gè)對(duì)象進(jìn)行交互，而且會(huì)損耗較多空間。

那么應(yīng)該怎么制作這樣的H5？在H5頁(yè)面的開(kāi)發(fā)上，84.Paris采用WebGL進(jìn)行渲染，一種3D繪圖標(biāo)準(zhǔn)，不好掌握。這么復(fù)雜的代碼我也不懂，所以具體實(shí)現(xiàn)上，我用的方法和他們不一樣，但視覺(jué)效果差不了多少。

3、怎么讓這些場(chǎng)景動(dòng)起來(lái)？

圖文并茂的操作提示

首先，觸發(fā)交互的方法很簡(jiǎn)單，這個(gè)項(xiàng)目大概主要用6種：點(diǎn)擊、按下、離開(kāi)、鍵盤(pán)按鍵、滑動(dòng)、拖拽。

這些觸發(fā)在iH5里實(shí)現(xiàn)大部分非常簡(jiǎn)單：新建一個(gè)透明按鈕，在它下面加一個(gè)事件就會(huì)看到很多種觸發(fā)條件，點(diǎn)擊、鼠標(biāo)移上或移出、手指按下或離開(kāi)等等。鍵盤(pán)按鍵的設(shè)計(jì)、鼠標(biāo)滾動(dòng)等的控制，就需要在舞臺(tái)下添加事件，填上按什么鍵等參數(shù)。那拖拽呢？其實(shí)就是把圖片的一個(gè)屬性設(shè)為允許拖動(dòng)。

透明按鈕對(duì)象下觸發(fā)條件的示例

你可能納悶，為什么這些動(dòng)作都這么容易？點(diǎn)一點(diǎn)、按一按、滑一滑？因?yàn)橛脩敉娴氖且魳?lè)，而不是游戲啊。你也可以設(shè)計(jì)一個(gè)圍住神經(jīng)貓，規(guī)定挑戰(zhàn)×步成功才能聽(tīng)到這些歌，但過(guò)于復(fù)雜化也會(huì)弱化欣賞歌曲的過(guò)程，也喪失了網(wǎng)站存在的意義——讓用戶享受和音樂(lè)融為一體的感覺(jué)。

4、教你如法炮制一樣的視覺(jué)場(chǎng)景！

歌曲《Complètement fou》的場(chǎng)景運(yùn)動(dòng)

這次揭秘的是《Complètement fou》中，鼠標(biāo)滾動(dòng)向上時(shí)那張俏美的人臉會(huì)從藍(lán)色花瓣中浮上來(lái)、一松開(kāi)鼠標(biāo)就下降的場(chǎng)景，準(zhǔn)備素材是下面三張圖片。只需三步：

三張需要準(zhǔn)備好的素材

（1）在iH5新建一個(gè)時(shí)間軸1，按頂后層順序把三張圖片放里面，為它們分別添加軌跡和關(guān)鍵幀——為了讓人臉一邊逼近一邊浮上來(lái)，軌跡既要控制運(yùn)動(dòng)層往上移動(dòng)，還要保證三層圖片都在放大。

iH5的操作界面

（2）在舞臺(tái)下添加一個(gè)事件，設(shè)置滾動(dòng)向上時(shí)，時(shí)間軸1播放指定時(shí)長(zhǎng)，如1S——這個(gè)時(shí)間長(zhǎng)度的設(shè)置是體驗(yàn)的關(guān)鍵，越短意味著你需要越多的時(shí)間才能讓人臉向上浮出。

（3）添加一個(gè)1S的時(shí)間軸2，設(shè)置結(jié)束時(shí)，時(shí)間軸1播放指定時(shí)長(zhǎng)，比如-0.5S（負(fù)值代表反向播放）——這個(gè)時(shí)間長(zhǎng)度不得高于正向播放的時(shí)長(zhǎng)，否則這張人臉一輩子都別想浮上來(lái)——因?yàn)樽屗禄乃俾矢甙。?/p>

最后做出的滾動(dòng)特效

設(shè)計(jì)的效果效果如上——前景層我對(duì)得不是很準(zhǔn)，看著有點(diǎn)抽離望見(jiàn)諒。另外，實(shí)際播放上還得考慮音頻的控制等問(wèn)題。

用圖片序列控制拉鏈變換

基礎(chǔ)的制作萬(wàn)變不離其宗，很多都可以用時(shí)間軸實(shí)現(xiàn)，但在特效設(shè)計(jì)上，可能會(huì)涉及畫(huà)布的遮罩、幻燈片/圖片序列等功能。比如有一個(gè)是滑動(dòng)拉開(kāi)拉鏈的情景，實(shí)際上就是拉鏈逐漸拉開(kāi)的圖片的輪播罷了——多學(xué)點(diǎn)套路！

5、怎么感覺(jué)起來(lái)這么真實(shí)？

上一部分可以看到，在H5頁(yè)面制作工具的幫助下，這些交互場(chǎng)景的創(chuàng)建并沒(méi)有那么高深。但人家把東西做得這么好看、吸引這么多用戶、如此迅速地打開(kāi)市場(chǎng)，其實(shí)在設(shè)計(jì)上下了太多功夫，主要是視覺(jué)和聽(tīng)覺(jué)上的：

（1）讓界面元素貼合物體規(guī)律

失重的汽車(chē)

其中一張專(zhuān)輯封面是翻轉(zhuǎn)的車(chē)輛在行駛，當(dāng)你用外力改變它運(yùn)行軌跡時(shí)，它會(huì)模擬出垂直向上的重力讓它回到軌道。漂亮！

道理很淺顯，如果你想讓場(chǎng)景看起來(lái)更逼真，必須多制造類(lèi)似視差滾動(dòng)、模擬重力、模擬慣性、碎片化運(yùn)動(dòng)、重力感應(yīng)這種符合物體規(guī)律的反饋。

（2）善于利用貼合主題的音效

每個(gè)情景都需要很多音頻的配合

這個(gè)網(wǎng)站，其實(shí)每個(gè)獨(dú)立的場(chǎng)景背后都有很多音頻在支持，上面這張圖右側(cè)密密麻麻media格式的文件都是音頻！H5廣告的初級(jí)或中級(jí)學(xué)者，一般就是一首BGM走天下，但那些具有國(guó)際設(shè)計(jì)視野、對(duì)作品要求比較高的設(shè)計(jì)師，一個(gè)頁(yè)面都能設(shè)計(jì)出很多音效。

比如我認(rèn)識(shí)的一個(gè)設(shè)計(jì)師，他把很多好萊塢大片的電影海報(bào)下載下來(lái)，居然就能在H5中設(shè)計(jì)出一張張動(dòng)態(tài)海報(bào)，效果如下——

H5《Hey，我們?cè)谖磥?lái)等你》

每張海報(bào)都會(huì)專(zhuān)門(mén)設(shè)計(jì)很多符合場(chǎng)景動(dòng)效的音效，比如槍聲、爆炸聲等等，通過(guò)控制不同音效出現(xiàn)的時(shí)間、整體長(zhǎng)度，產(chǎn)生錯(cuò)落有致的效果。

6、這種用戶體驗(yàn)，完美！

實(shí)際上，戛納的數(shù)字工藝類(lèi)是今年剛剛設(shè)立的，它的評(píng)判標(biāo)準(zhǔn)并非純粹的創(chuàng)意，而會(huì)更重視作品整體的設(shè)計(jì)感和用戶體驗(yàn)——這也是設(shè)計(jì)師必須一直謹(jǐn)記于心的問(wèn)題，怎么才能在不犧牲美感的前提下提升體驗(yàn)？

屈居金獎(jiǎng)的谷歌音樂(lè)實(shí)驗(yàn)室

比如獲得數(shù)字類(lèi)金獎(jiǎng)的有5個(gè)，其中谷歌的Chrome Music Lab（Chrome音樂(lè)實(shí)驗(yàn)室），能通過(guò)視覺(jué)和聽(tīng)覺(jué)結(jié)合來(lái)學(xué)習(xí)音律——也很好玩，建議愛(ài)好音樂(lè)的去體驗(yàn)一下。

的確，除了驚艷的視覺(jué)效果外，《Because Recollection》的交互細(xì)節(jié)非常考究，一仔細(xì)分析會(huì)發(fā)現(xiàn)有太多東西可以學(xué)了。

啟動(dòng)頁(yè)面前必須等待10秒左右

首先，內(nèi)容能不能順利播放可決定著用戶在互動(dòng)過(guò)程中的心情，要不然看一會(huì)兒咯噔一下誰(shuí)都會(huì)“躁”起來(lái)吧？為了保證內(nèi)容的混然天成不卡頓，在設(shè)計(jì)上主要有以下五大原則：

（1）預(yù)加載：比如這個(gè)項(xiàng)目里長(zhǎng)按空格鍵進(jìn)入頁(yè)面，一方面是利用等待來(lái)加強(qiáng)期待值，另一方面就是趁機(jī)加載資源來(lái)提高后面的流暢度；
（2）圖片：能復(fù)用的就復(fù)用，比如不動(dòng)的背景層可以獨(dú)立出來(lái)，會(huì)變換的前景使用PNG類(lèi)型的圖片；
（3）視頻：能短即短、能分段就分段；
（4）音樂(lè)：經(jīng)常重復(fù)播放、增色類(lèi)型的輔助音效，可以獨(dú)立成片段而不是都加在一首歌里；
（5）壓縮：所有素材準(zhǔn)備得當(dāng)后，一定得壓縮它們的大小。

除此之外，網(wǎng)站在自適應(yīng)上也做得極為出色，主要體現(xiàn)在以下兩點(diǎn)：

PC版用長(zhǎng)按空格鍵控制跳轉(zhuǎn)

移動(dòng)版靠按住“next”來(lái)跳轉(zhuǎn)

（1）設(shè)備自適應(yīng)：PC設(shè)備、移動(dòng)端設(shè)備的界面有所區(qū)別，比如電腦上是按空格鍵緩沖、手機(jī)上就是手指長(zhǎng)按；電腦上是鼠標(biāo)懸停就能打開(kāi)“幫助”界面，手機(jī)上需要點(diǎn)擊。
（2）行為的感應(yīng)：會(huì)監(jiān)測(cè)用戶的行為，比如當(dāng)用戶跳轉(zhuǎn)到其他窗口時(shí)，音樂(lè)會(huì)自動(dòng)停止播放。

戛納國(guó)際創(chuàng)意節(jié)，每年都會(huì)帶給人們異常無(wú)與倫比的創(chuàng)意沖擊和視覺(jué)盛宴。為什么它會(huì)新增數(shù)字工藝類(lèi)獎(jiǎng)？

本來(lái)它已經(jīng)有計(jì)算機(jī)網(wǎng)絡(luò)類(lèi)（Cyber Lions）和移動(dòng)類(lèi)（Mobile Lions）兩座大獎(jiǎng)，但能橫跨多種終端的HTML5卻很難定義為其中任意一類(lèi)。

比如國(guó)內(nèi)時(shí)興的H5，算是移動(dòng)互聯(lián)網(wǎng)的產(chǎn)物吧？推動(dòng)了各種微信病毒營(yíng)銷(xiāo)的產(chǎn)生。但這次獲獎(jiǎng)的其實(shí)也是H5，PC端能看、移動(dòng)端能玩、智能電視也耍得起來(lái)，又應(yīng)該怎么定義？

今年新設(shè)數(shù)字工藝類(lèi)大獎(jiǎng)，有很多獲獎(jiǎng)的都是基于HTML5的網(wǎng)站，這也可以看出H5在全球范圍內(nèi)的發(fā)展已經(jīng)越來(lái)越受到重視了，因此無(wú)論是市場(chǎng)營(yíng)銷(xiāo)人員還是設(shè)計(jì)師，都不可輕視這一大力量。

擁抱H5，你準(zhǔn)備好了嗎？