ofo：ofo小黄车研发车间

2017-07-04 H5案例分享 H5案例分享

案例：ofo小黄车研发车间

出品：ofo

亮点：

1. 策划上，图文类案例，一共五个场景展示“ofo小黄车研发车间”。第一个场景，首屏展示案例主题，点击“视察车间”展开案例进入研发中心车间。随后点击小黄人，启动工厂设备，给出文案“据工程师透露腿短也可以研发出符合人体工程学的好车”，小黄人对车辆驱动系统进行检测；第二个场景，向左滑动进行车辆组装车间，摇一摇手机，纠正图纸方向；第三个场景，再次向左滑动进入染色车间，向下滑动屏幕，下拉将车辆进入小黄人澡池进行染色；第四个场景，继续左滑进入测试车间，点击黄豆喂给小黄人，两个屁就可催动车辆。将小黄车各个优势以这种形式讲述出来。第五个场景，随后摇一摇为发布会揭幕，大boss与小黄人代表接受采访，表示小黄人车间拳头产品-小黄车荣耀上市。
2. 设计上，案例整体以3D模型展示，空间感十足，小细节满满，十分精致。颜色方面以小黄人与ofo共有黄色为主色调，增强产品辨识度。
3. 体验上，多种方式的交互方式（点击/摇一摇），配合有趣的背景音乐与音效。
4. 技术上，每个场景中的动画，看着像是视频，其实是图片的序列帧依次播放，形式视频的效果。

技术实现： Canvas + JavaScript

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

ofo小黄车研发车间-查阅二维码

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签