ofo × 小黃人絕配最萌CP，探秘賤萌研發(fā)經(jīng)過

 

 

我們意類最近接了個很黃很黃的brief。

喂，不是你想的那樣，是前陣子，ofo找到了我們，

他們打算趁著《神偷奶爸3》即將上映，找來國際賤萌大使——小黃人合作。

小黃人+小黃車，這可能是史上最黃的CP了吧。

 

 

超長地鐵廣告展示設(shè)計圖

 

接到brief后，我們就開始思考小黃人和小黃車的關(guān)系，為了解決這個問題，我們嚴(yán)(ha)肅(ha)認(rèn)(ha)真(ha)的研究了小黃人的所有系列電影后，決定賦予小黃人一個特殊的身份：ofo小黃車的工人。對！IDEA的發(fā)生并沒有什么邏輯關(guān)系。

于是我們先在新聞和報紙上刊登了這起驚人的事件。

 

《小黃人頭條報》

 

新聞傳開后，有好事者冒死通過H5潛入小黃人車間，ofo的商業(yè)秘密也被曝光，看看小黃人是怎么造車的。

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

 

 

掃描二維碼，立即體驗(yàn)！

 

 

據(jù)悉，生產(chǎn)出來的小黃人定制車已投放到各城市街頭，我們來看看它長什么樣子。

設(shè)計圖 vs 真車 

 

才藝展示完，到了藝術(shù)人生的環(huán)節(jié)，音響師就位，燈光師請把燈往這邊打，請把話筒交給負(fù)責(zé)本次新聞和報紙的Roger和Larry。

Roger：“小黃人 x ofo想要生動的、毫無PS痕跡的融合在一起，還要能讓你們笑，最大的難點(diǎn)就是沒有合適的素材！我和老Larry游走街頭，擺好一輛ofo就是一頓猛拍，各種姿勢角度，全然不在乎遛狗大爺質(zhì)疑鄙視的目光……

 

 

接下來就是找小黃人合適的形態(tài)，我們下載了所有關(guān)于神偷奶爸的電影，每一個和小黃人IP合作的廣告，然后一頓生搬硬套的七拼八湊，還好不負(fù)眾望的贏得了客戶的贊賞！

接下去執(zhí)行階段就是要把所有小黃人換成有版權(quán)的素材，有了扎實(shí)的畫面，再讓小黃人動起來就簡單多了（呵呵），畢竟我們可以做(lai)彼(ya )此(hu)的(xiang)模(shang)特(hai)呀！能不寫實(shí)嘛！”

 

粉嫩的老Larry vs 小黃人 

 

 

來，請把話筒交到我這里，咳咳，我是王雨楊，對，就是那個之前改了50稿設(shè)計稿的Art。

這次我負(fù)責(zé)的是《ofo小黃車研發(fā)車間》H5，這次的經(jīng)歷也是老扎心了，H5從創(chuàng)意落地到項(xiàng)目上線只有不到一個月時間，要構(gòu)思車間的結(jié)構(gòu)，做三維的動畫，以及開發(fā)交互，時間的壓力可想而知。

 

車間設(shè)計草圖

 

 

 甲乙丙丁方為了多一天時間，爭得頭破血流，常常是約定下午兩三點(diǎn)發(fā)出的東西，硬是被電腦渲染搞了個通宵，第二天才能發(fā)出，以至于我們唯一的account 同學(xué)Kelvin每天協(xié)調(diào)各方的時間而焦頭爛額。

為此我采訪了Kelvin同學(xué)，Kelvin表示希望金主爸爸可以把為了騙他剪視頻而答應(yīng)的小黃車送到意類來！

 

 

客戶真的把車送到了意類樓下 

工作群里偶爾會跳出好笑的段子，大家或調(diào)侃，或附和，似乎緊張的工作得到了一些放松。

然而Kelvin總會在這時候冷不丁來一句：志高（三維負(fù)責(zé)人），動畫什么時候可以出來？

未完的話題戛然而止，波瀾的群立即恢復(fù)了平靜。

似乎可以透過手機(jī)，看見志高凝重的表情，緊皺的眉頭，和煙灰缸里自燃到盡頭的香煙。

再有消息，已是第二天了。

 

 

生不如死的三維設(shè)計師們（志高，戴彬 from Pafassion Lab）

 

 

為了準(zhǔn)確的brief，意類的小伙伴們有時還需要親自上陣出演。

 

 

雖然時間緊張，但過程還算順利，這得得益于客戶的爽快和信任。每當(dāng)一張圖發(fā)進(jìn)客戶群，都會引起客戶的一陣肯定，甚至是飆臟話的歡呼。這樣的熱情讓我們的設(shè)計師有點(diǎn)懷疑人生……

 

 

那這個h5是怎么做出來的呢？

一開始的想法是做一整條視頻播放，但客戶需要加入一些和用戶的交互，和開發(fā)溝通后，采用了分段序列幀的形式。

關(guān)于劇情的序列幀會正常播放，而需要用戶交互的段落就做成循環(huán)序列幀，用戶需要點(diǎn)擊或搖晃手機(jī)來觸發(fā)播放下一段視頻。

 

H5流程圖 

 

 

說了那么多，你就沒點(diǎn)心動？快來一起探秘小黃人的秘密車間！

 

文章來源：http://www.digitaling.com/projects/22247.html