H5案例解析 小黄车和小黄人在一起了，设计师你该怎么看？

最近网上比较火的广告，ofo小黄车和小黄人这对“宇宙最黄CP”可谓魅力四射，热点频频。不单是网上，还有线下比如：地铁、报纸、视频、各种展等等等。

在宣传造势上ofo还是花了大本钱的，看来是要有更大的举动了！具体就不得而知了，我们主要聊聊H5的事。据官方称：有好事者冒死通过H5潜入小黄人车间，ofo的商业秘密也被曝光，看看小黄人是怎么造车的。哈哈哈！

扫描二维码，立即体验！ （点击放大二维码后，长按识别）

案例：ofo小黄车研发车间 出品：ofo 创意代理：GOODZILLA 意类广告 上海

策划：图文类案例，一共五个场景展示“ofo小黄车研发车间”

开启页面

首屏展示案例主题，点击“视察车间”展开案例进入研发中心车间。

场景1 研发车间

随后点击小黄人，启动工厂设备，给出文案“据工程师透露腿短也可以研发出符合人体工程学的好车”，小黄人对车辆驱动及人体工学进行检测；

场景2组装车间

向左滑动进行车辆组装车间，摇一摇手机，纠正图纸方向；

场景3染色车间

再次向左滑动进入染色车间，向下滑动屏幕，下拉将车辆进入小黄人澡池进行染色；

场景4测试车间

继续左滑进入测试车间，点击黄豆喂给小黄人，放个屁就可催动车辆，并一发不可收拾

场景5发布现场

随后摇一摇为发布会揭幕，大boss与小黄人代表接受采访，表示小黄人车间拳头产品-小黄车荣耀上市。

设计上，案例整体以3D模型展示。C4D动画建模，输出序列帧。空间感十足，小细节满满，十分精致。颜色方面以小黄人与ofo共有黄色为主色调，增强产品辨识度，并延续了小黄人的轻松搞笑气氛。体验上，多种方式的交互方式（点击/滑动/摇一摇），全程播放轻松愉悦的音乐，渲染气氛！

《ofo小黄车研发车间》H5从创意落地到项目上线只有不到一个月时间，要构思车间的结构，做三维的动画，以及开发交互，时间的压力可想而知。

车间创意草图

那这个h5是怎么做出来的呢？

关于剧情的序列帧会正常播放，而需要用户交互的段落就做成循环序列帧，用户需要点击或摇晃手机来触发播放下一段视频。这里所说的视频并不是视频格式文件，而是一张一张的序列图片播放而成。这样加载速度会快一些。

H5流程图

说到这你对H5是不是有了一个新的认识？

H5页面设计已经不仅限于微信广告，其实H5现在替代的是整个移动端用户前端交互的“界面”和载体，除了广告，可能还有各种minisite，活动落地页，内容轻博客，游戏等等，某种程度上替代了原生App的部分功能和应用。