來源：站酷
本文作者：Seedheart
“假如你除了能聽聽音樂——”
“還能和它玩玩？”
戛納國際創(chuàng)意節(jié)，可謂是廣告界的奧斯卡，每年評獎就相當(dāng)于把全球最具創(chuàng)造力的市場營銷方法廣而告之——借不借鑒就是我們自己的事了。
今年它照樣沒讓世人失望，當(dāng)大家還在靜靜地聽MP3、看MV的時候，一個在線交互體驗網(wǎng)站《Because Recollection》一舉擊敗獲得金獎的谷歌實驗室等項目，奪下史上首個數(shù)字工藝類全場大獎（因為這個獎就是2016年才設(shè)立的）。
《Because Recollection》的交互界面
制作團隊的腦洞不要開得太大，你看看上面傲嬌開唱的機械玩偶、非常有節(jié)操的裸體雕像，都是在一塊塊專輯封面的基礎(chǔ)上設(shè)計出的創(chuàng)意。這是一個基于HTML5建立的數(shù)字網(wǎng)站，創(chuàng)意、交互一流，用戶體驗更是沒得說，可謂用網(wǎng)絡(luò)互動體驗打開市場的代表作。
網(wǎng)站體驗：http://www.because-recollection.com
1、神一樣的交互體驗！
網(wǎng)站為紀(jì)念Because Music建立十周年
這是我一首首歌體驗后，剪輯出來的精華版視頻，你可以看到它的視覺效果實在太驚艷了！
《Because Recollection》是業(yè)界響當(dāng)當(dāng)?shù)姆▏鴱V告公司84.Paris為音樂廠牌Because Music（以下稱BM）制作的互動網(wǎng)站，作為后者成立十周年的優(yōu)秀作品回顧。究竟是什么樣的作品，廣受業(yè)界好評，還能讓谷歌的Chrome Music Lab屈居戛納數(shù)字工藝類金獎？
網(wǎng)站發(fā)布后一周內(nèi)，Because Music漲了30%的粉！來自129個國家的用戶，平均每人玩了5分鐘——我則在網(wǎng)站上泡了大概有10小時。試想人家開了十年的網(wǎng)站，突然一夜間名聲大噪的狂喜。
然后它就開掛了，不僅獲得各大媒體的報道，更斬獲各種國際大獎，金鉛筆、FWA、戛納，也算實至名歸。
2、如何做出這么驚艷的創(chuàng)意視覺？
其實每首歌互動體驗的步驟都差不多：
（1）長按空格鍵緩沖-->
（2）按照提示進行互動-->
（3）播放音樂場景-->
（4）進入專輯介紹。
互動場景與原專輯封面的對比
它特意為每首歌設(shè)計出與專輯封面極其吻合的場景，這種超前的視覺創(chuàng)意讓人好奇，所以很快就有人在知乎詢問它的技術(shù)實現(xiàn)，問題如下：
知乎上有人詢問如何實現(xiàn)
有一個回答，指出它應(yīng)用的都是視頻——還好回答的人匿名，否則我要直接找他理論！以第一首歌《By Your Side》為例，為了實現(xiàn)點擊后進行動態(tài)換裝的效果，加載出來的素材是這樣的：
換裝場景的部分原始素材
這能是視頻？
當(dāng)然，有的網(wǎng)站頁面的確用到了視頻，但這只是這些交互場景的一小部分。當(dāng)場景的變換越講究精細(xì)化，就越需要素材能分離出來變化、能獨立進行交互。視頻和HTML5中畫布（Canvas）的概念很像，相當(dāng)于按幀加載，沒辦法和單個對象進行交互，而且會損耗較多空間。
那么應(yīng)該怎么制作這樣的H5？在H5頁面的開發(fā)上，84.Paris采用WebGL進行渲染，一種3D繪圖標(biāo)準(zhǔn)，不好掌握。這么復(fù)雜的代碼我也不懂，所以具體實現(xiàn)上，我用的方法和他們不一樣，但視覺效果差不了多少。
3、怎么讓這些場景動起來？
圖文并茂的操作提示
首先，觸發(fā)交互的方法很簡單，這個項目大概主要用6種：點擊、按下、離開、鍵盤按鍵、滑動、拖拽。
這些觸發(fā)在iH5里實現(xiàn)大部分非常簡單：新建一個透明按鈕，在它下面加一個事件就會看到很多種觸發(fā)條件，點擊、鼠標(biāo)移上或移出、手指按下或離開等等。鍵盤按鍵的設(shè)計、鼠標(biāo)滾動等的控制，就需要在舞臺下添加事件，填上按什么鍵等參數(shù)。那拖拽呢？其實就是把圖片的一個屬性設(shè)為允許拖動。
透明按鈕對象下觸發(fā)條件的示例
你可能納悶，為什么這些動作都這么容易？點一點、按一按、滑一滑？因為用戶玩的是音樂，而不是游戲啊。你也可以設(shè)計一個圍住神經(jīng)貓，規(guī)定挑戰(zhàn)×步成功才能聽到這些歌，但過于復(fù)雜化也會弱化欣賞歌曲的過程，也喪失了網(wǎng)站存在的意義——讓用戶享受和音樂融為一體的感覺。
4、教你如法炮制一樣的視覺場景！
歌曲《Complètement fou》的場景運動
這次揭秘的是《Complètement fou》中，鼠標(biāo)滾動向上時那張俏美的人臉會從藍(lán)色花瓣中浮上來、一松開鼠標(biāo)就下降的場景，準(zhǔn)備素材是下面三張圖片。只需三步：
三張需要準(zhǔn)備好的素材
（1）在iH5新建一個時間軸1，按頂后層順序把三張圖片放里面，為它們分別添加軌跡和關(guān)鍵幀——為了讓人臉一邊逼近一邊浮上來，軌跡既要控制運動層往上移動，還要保證三層圖片都在放大。
iH5的操作界面
（2）在舞臺下添加一個事件，設(shè)置滾動向上時，時間軸1播放指定時長，如1S——這個時間長度的設(shè)置是體驗的關(guān)鍵，越短意味著你需要越多的時間才能讓人臉向上浮出。
（3）添加一個1S的時間軸2，設(shè)置結(jié)束時，時間軸1播放指定時長，比如-0.5S（負(fù)值代表反向播放）——這個時間長度不得高于正向播放的時長，否則這張人臉一輩子都別想浮上來——因為讓它下滑的速率更高啊！
最后做出的滾動特效
設(shè)計的效果效果如上——前景層我對得不是很準(zhǔn)，看著有點抽離望見諒。另外，實際播放上還得考慮音頻的控制等問題。
用圖片序列控制拉鏈變換
基礎(chǔ)的制作萬變不離其宗，很多都可以用時間軸實現(xiàn)，但在特效設(shè)計上，可能會涉及畫布的遮罩、幻燈片/圖片序列等功能。比如有一個是滑動拉開拉鏈的情景，實際上就是拉鏈逐漸拉開的圖片的輪播罷了——多學(xué)點套路！
5、怎么感覺起來這么真實？
上一部分可以看到，在H5頁面制作工具的幫助下，這些交互場景的創(chuàng)建并沒有那么高深。但人家把東西做得這么好看、吸引這么多用戶、如此迅速地打開市場，其實在設(shè)計上下了太多功夫，主要是視覺和聽覺上的：
（1）讓界面元素貼合物體規(guī)律
失重的汽車
其中一張專輯封面是翻轉(zhuǎn)的車輛在行駛，當(dāng)你用外力改變它運行軌跡時，它會模擬出垂直向上的重力讓它回到軌道。漂亮！
道理很淺顯，如果你想讓場景看起來更逼真，必須多制造類似視差滾動、模擬重力、模擬慣性、碎片化運動、重力感應(yīng)這種符合物體規(guī)律的反饋。
（2）善于利用貼合主題的音效
每個情景都需要很多音頻的配合
這個網(wǎng)站，其實每個獨立的場景背后都有很多音頻在支持，上面這張圖右側(cè)密密麻麻media格式的文件都是音頻！H5廣告的初級或中級學(xué)者，一般就是一首BGM走天下，但那些具有國際設(shè)計視野、對作品要求比較高的設(shè)計師，一個頁面都能設(shè)計出很多音效。
比如我認(rèn)識的一個設(shè)計師，他把很多好萊塢大片的電影海報下載下來，居然就能在H5中設(shè)計出一張張動態(tài)海報，效果如下——
H5《Hey，我們在未來等你》
每張海報都會專門設(shè)計很多符合場景動效的音效，比如槍聲、爆炸聲等等，通過控制不同音效出現(xiàn)的時間、整體長度，產(chǎn)生錯落有致的效果。
6、這種用戶體驗，完美！
實際上，戛納的數(shù)字工藝類是今年剛剛設(shè)立的，它的評判標(biāo)準(zhǔn)并非純粹的創(chuàng)意，而會更重視作品整體的設(shè)計感和用戶體驗——這也是設(shè)計師必須一直謹(jǐn)記于心的問題，怎么才能在不犧牲美感的前提下提升體驗？
屈居金獎的谷歌音樂實驗室
比如獲得數(shù)字類金獎的有5個，其中谷歌的Chrome Music Lab（Chrome音樂實驗室），能通過視覺和聽覺結(jié)合來學(xué)習(xí)音律——也很好玩，建議愛好音樂的去體驗一下。
的確，除了驚艷的視覺效果外，《Because Recollection》的交互細(xì)節(jié)非常考究，一仔細(xì)分析會發(fā)現(xiàn)有太多東西可以學(xué)了。
啟動頁面前必須等待10秒左右
首先，內(nèi)容能不能順利播放可決定著用戶在互動過程中的心情，要不然看一會兒咯噔一下誰都會“躁”起來吧？為了保證內(nèi)容的混然天成不卡頓，在設(shè)計上主要有以下五大原則：
（1）預(yù)加載：比如這個項目里長按空格鍵進入頁面，一方面是利用等待來加強期待值，另一方面就是趁機加載資源來提高后面的流暢度；
（2）圖片：能復(fù)用的就復(fù)用，比如不動的背景層可以獨立出來，會變換的前景使用PNG類型的圖片；
（3）視頻：能短即短、能分段就分段；
（4）音樂：經(jīng)常重復(fù)播放、增色類型的輔助音效，可以獨立成片段而不是都加在一首歌里；
（5）壓縮：所有素材準(zhǔn)備得當(dāng)后，一定得壓縮它們的大小。
除此之外，網(wǎng)站在自適應(yīng)上也做得極為出色，主要體現(xiàn)在以下兩點：
PC版用長按空格鍵控制跳轉(zhuǎn)
移動版靠按住“next”來跳轉(zhuǎn)
（1）設(shè)備自適應(yīng)：PC設(shè)備、移動端設(shè)備的界面有所區(qū)別，比如電腦上是按空格鍵緩沖、手機上就是手指長按；電腦上是鼠標(biāo)懸停就能打開“幫助”界面，手機上需要點擊。
（2）行為的感應(yīng)：會監(jiān)測用戶的行為，比如當(dāng)用戶跳轉(zhuǎn)到其他窗口時，音樂會自動停止播放。
戛納國際創(chuàng)意節(jié)，每年都會帶給人們異常無與倫比的創(chuàng)意沖擊和視覺盛宴。為什么它會新增數(shù)字工藝類獎？
本來它已經(jīng)有計算機網(wǎng)絡(luò)類（Cyber Lions）和移動類（Mobile Lions）兩座大獎，但能橫跨多種終端的HTML5卻很難定義為其中任意一類。
比如國內(nèi)時興的H5，算是移動互聯(lián)網(wǎng)的產(chǎn)物吧？推動了各種微信病毒營銷的產(chǎn)生。但這次獲獎的其實也是H5，PC端能看、移動端能玩、智能電視也耍得起來，又應(yīng)該怎么定義？
今年新設(shè)數(shù)字工藝類大獎，有很多獲獎的都是基于HTML5的網(wǎng)站，這也可以看出H5在全球范圍內(nèi)的發(fā)展已經(jīng)越來越受到重視了，因此無論是市場營銷人員還是設(shè)計師，都不可輕視這一大力量。
擁抱H5，你準(zhǔn)備好了嗎？
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（7條）