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