凡普金科 X 大爱无国界：益起来画桥

2017-11-02 H5案例分享 H5案例分享

案例：益起来画桥

出品：凡普金科 X 大爱无国界

亮点：

策划上，视频+公益绘画。Loading完毕，点击开始会播放一段16秒的视频，视频讲述几个孩子或想当作家或想念妈妈，“我”拿出马良同款神笔一挥，帮他们实现了愿望。视频完毕，开始讲述现在有很多孩子想上学，却没有桥来跨越河流，需要“我”用画笔画一座桥，让画中桥出现在孩子们的生活里，帮他们抵达梦想。此时滑动屏幕可切换场景，选择了想画的场景，便可点击画笔，进入绘画环节并开始创作。画笔可以选择粗细及颜色，在绘画过程中，可以随时选择撤销上一步或清空画面，画完点击完成，并给自己的桥起个名字，就能参与最佳作品评选啦。在结尾页，长按图片可以将作品保存到本地相册，点击按钮“看看别人画的桥”，会有弹出层来展示别人的作品，用户可以投票给心仪的作品。点击“将笔传给有缘人”提示分享到朋友圈。

设计上，清新可爱的手绘风格，背景音乐空灵而暖心。绘画部分提示的设计简单明了，让不知道该怎么画的人有了方向感。画笔的3×3自定义样式的设定，让本身就很DIY的绘画部分有了更多选择性。作品展示部分的设计，投票、查看作品等操作都在弹层内进行，丝毫没有破坏案例的整体感。

体验上，开头的视频为案例整体带来了很不错的动画效果，之后的绘画交互也让用户与案例有了很好的互动。案例的选题与自身的画面、音乐以及交互，结合得很好，勾起用户创作欲的同时，又能让用户感觉自己的爱心得以传达，还在最后作品展示中满足了用户的表现欲。

技术实现： jQuery + Swiper + Canvas

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

识别图中二维码

益起来画桥-查阅二维码

完整欣赏此案例大约需要1分钟

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

标签