ofo × 小黄人绝配最萌CP，探秘贱萌研发经过
- 来源：
- Hipop Dueng
- 时间：
- 2017-07-05 23:37:50
- 阅读：
- 5027
我们意类最近接了个很黄很黄的brief。
喂，不是你想的那样，是前阵子，ofo找到了我们，
他们打算趁着《神偷奶爸3》即将上映，找来国际贱萌大使——小黄人合作。
小黄人+小黄车，这可能是史上最黄的CP了吧。
超长地铁广告展示设计图
接到brief后，我们就开始思考小黄人和小黄车的关系，为了解决这个问题，我们严(ha)肃(ha)认(ha)真(ha)的研究了小黄人的所有系列电影后，决定赋予小黄人一个特殊的身份：ofo小黄车的工人。对！IDEA的发生并没有什么逻辑关系。
于是我们先在新闻和报纸上刊登了这起惊人的事件。
《小黄人头条报》
新闻传开后，有好事者冒死通过H5潜入小黄人车间，ofo的商业秘密也被曝光，看看小黄人是怎么造车的。
扫描二维码，立即体验！
（数英网APP用户需点击放大二维码后，长按识别）
扫描二维码，立即体验！
据悉，生产出来的小黄人定制车已投放到各城市街头，我们来看看它长什么样子。
设计图 vs 真车
才艺展示完，到了艺术人生的环节，音响师就位，灯光师请把灯往这边打，请把话筒交给负责本次新闻和报纸的Roger和Larry。
Roger：“小黄人 x ofo想要生动的、毫无PS痕迹的融合在一起，还要能让你们笑，最大的难点就是没有合适的素材！我和老Larry游走街头，摆好一辆ofo就是一顿猛拍，各种姿势角度，全然不在乎遛狗大爷质疑鄙视的目光……
接下来就是找小黄人合适的形态，我们下载了所有关于神偷奶爸的电影，每一个和小黄人IP合作的广告，然后一顿生搬硬套的七拼八凑，还好不负众望的赢得了客户的赞赏！
接下去执行阶段就是要把所有小黄人换成有版权的素材，有了扎实的画面，再让小黄人动起来就简单多了（呵呵），毕竟我们可以做(lai)彼(ya )此(hu)的(xiang)模(shang)特(hai)呀！能不写实嘛！”
粉嫩的老Larry vs 小黄人
来，请把话筒交到我这里，咳咳，我是王雨杨，对，就是那个之前改了50稿设计稿的Art。
这次我负责的是《ofo小黄车研发车间》H5，这次的经历也是老扎心了，H5从创意落地到项目上线只有不到一个月时间，要构思车间的结构，做三维的动画，以及开发交互，时间的压力可想而知。
车间设计草图
甲乙丙丁方为了多一天时间，争得头破血流，常常是约定下午两三点发出的东西，硬是被电脑渲染搞了个通宵，第二天才能发出，以至于我们唯一的account 同学Kelvin每天协调各方的时间而焦头烂额。
为此我采访了Kelvin同学，Kelvin表示希望金主爸爸可以把为了骗他剪视频而答应的小黄车送到意类来！
客户真的把车送到了意类楼下
工作群里偶尔会跳出好笑的段子，大家或调侃，或附和，似乎紧张的工作得到了一些放松。
然而Kelvin总会在这时候冷不丁来一句：志高（三维负责人），动画什么时候可以出来？
未完的话题戛然而止，波澜的群立即恢复了平静。
似乎可以透过手机，看见志高凝重的表情，紧皱的眉头，和烟灰缸里自燃到尽头的香烟。
再有消息，已是第二天了。
生不如死的三维设计师们（志高，戴彬 from Pafassion Lab）
为了准确的brief，意类的小伙伴们有时还需要亲自上阵出演。
虽然时间紧张，但过程还算顺利，这得得益于客户的爽快和信任。每当一张图发进客户群，都会引起客户的一阵肯定，甚至是飙脏话的欢呼。这样的热情让我们的设计师有点怀疑人生……
那这个h5是怎么做出来的呢？
一开始的想法是做一整条视频播放，但客户需要加入一些和用户的交互，和开发沟通后，采用了分段序列帧的形式。
关于剧情的序列帧会正常播放，而需要用户交互的段落就做成循环序列帧，用户需要点击或摇晃手机来触发播放下一段视频。
H5流程图
说了那么多，你就没点心动？快来一起探秘小黄人的秘密车间！
文章来源：http://www.digitaling.com/projects/22247.html
