H5神临摹NO.3丨5分钟学会万科的画小人H5套路

原创文章 分类: 教程 版权:
5539 40 34 5
2016-09-28
39.7
编辑推荐

画图功能在H5设计上最巧妙的地方在于用户参与度的营造。

Image title


万科上周连续发布俩个以画图功能为主的H5。画图功能最大的卖点在于一步步蚕食用户的好奇心,并参与其中甚至掉入设计者的大坑中。



下面我总结了H5画图功能的两大套路,希望能教会大家如何把这些套路现卖现用,制作人生第一个带有画图功能的H5。


Image title


套路一:你画的东西只不过是个幌子


Image title

画图功能的吸引之处就在于加强用户的参与度,《画出属于你的夏日座驾》就是一个好的例子,虽然用户画出来的小人会被替换掉,但是用户就是想去画。


Image title


原理有三:



①先设置能给用户画图的窗口,并提示用户去动手画小人

②通过一定的动画、过渡素材进行触发

③让用户画出来的小人带着动效消失



下面是我在iH5后台上效仿的一个小作品(运用的功能有画图、按钮、事件、动效):

Image title

画图功能还支持预设。意思就是说我可以事先画好一部分东西,然后再让用户来画。

比如我在刚效仿的作品基础上,自己画了一只狗,再让用户画个人来牵住它:

Image title


套路二:你画的东西绝对是主角!!



先来看看下面这俩案例:


Image title

Image title


神笔马良下笔成真,你画的小人就是贯穿整个故事的主角。就拿361°的H5来说,画出小人,模拟给小人穿上鞋子,小人奔跑起来跨过障碍,打败怪兽...不按套路出牌的剧情更是防不胜防。


Image title


Image title


在上面这个开发者案例中,人物的指向性奔跑、箭的抛物线飞向靶心,这些交互效果背后也只是时间轴动画。


Image title


实现步骤如下:

  • 首先得设置好时间轴下的画图轨迹,分为5个时间节点调整其坐标属性。
  • 时间轴属性:自动播放 no ;循环播放 no。
  • 当画图完成点击触发的按钮时,事件触发时间轴的播放。

Image title


在操作上十分简单明了,在设置各帧属性的时候千万别忘了先点击选中关键帧再改变属性,不然是白费的。


当然你也可以做更为复杂的时间轴动画,只要你有耐心和很好的线性规划,尝试延长时间轴时间,设置多点相关的关键帧,把整个时间轴动画丰富起来。


三、我该如何玩转画图功能


在画图的应用上除了画笔,还有与之相呼应的橡皮擦功能——擦拭。


大致设想的逻辑是用户得用橡皮擦擦拭掉某样东西,才算是完成了交互。

比如我可以这样做:提示用户图案擦拭干净,借此触发控制GIF素材的播放。


先来看看我简单做出来的效果:


Image title


这涉及两个层面——GIF的暂停和播放、擦拭面积触发交互。

Image title



制作过程讲解:


1.准备好GIF素材:


把GIF用图片序列导入到编辑器,在画图功能上加载需要擦拭的背景图案。


Image title


2.在画图功能下用事件组来控制相应的逻辑:


Image title


用事件组的优势在于其能优化案例后台的运行速度,相对地形成系统化的事件管理。但也有一定的局限,毕竟事件组的设置只能针对同一触发条件的事件。



现在有很多设计师在H5中做页面过渡也会用到这种手法,模拟iPhone向右滑动解锁?模拟安卓绘手势解锁?简直无压力。

Image title

打开脑洞想想呗,画图+擦拭,这俩玩意相信还能玩出更多新花样。



尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者,定期安利H5交互教程

984粉丝/7关注

春节创作指南:这里有五个魔性的H5玩法!2016年度H5最全报告:原来这行水这么深(含数据分析)

尼姑拉丝赵四

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者,定期安利H5交互教程

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by © 2008-2017 UI.CN