查看原文
其他

Epub360位置触发和视频播放触发上线,H5交互更轻更有趣

2016-07-14 老赵 epub360



从近期的观察看,H5交互有越来越轻的趋势,繁琐的操作容易吓跑用户,如果创意设计出挑,再配合简单的交互,反而更容易引起用户的兴趣和传播。


这次的功能更新,契合了这样的诉求:


  • 新增锚点组件:可以设置位置触发

  • 视频支持开始/结束触发器

  • 图片/视频组件支持尺寸自适应


锚点组件


有了锚点组件,可以在滑动到指定位置时、触发各种交互效果。


看个案例了解一下吧 -->> 来了就是深圳人



案例:来了就是深圳人 by dodo设计


设置方式也很简单:




按下图的设置,可以在滑动长页面时,当锚点到达微信窗口上沿,就触发执行图片的飞入动画。




视频开始/结束触发器


最近视频类H5大行其道,从之前的《宝马H5》、到最近的《腾讯:穿过故宫来看你》,因其创意出彩、交互简单,都刷爆了朋友圈。





要做好一个视频类H5,需要把控几个要点:


  • 使用封面图过度,视频开始播放后去除封面图,避免黑屏等待;

  • 视频开始和结束的触发控制,以便对接交互及最终落地转化;

  • 针对不同手机屏幕尺寸做好视频尺寸的适配

  • 安卓版微信中视频播放的兼容性处理


这次Epub360针对视频类H5的需求,专门做了一些优化调整,包括:


  • 增加视频播放开始 / 结束触发器控制

  • 视频尺寸的自适应设置,以适配各种手机屏幕




话不多说,借用《腾讯NextIdea:穿过故宫来看你》这个案例素材,展示一下优化调整的效果吧:


点击查看 ->>  案例学习:穿过故宫来看你


尺寸自适应


手机屏幕尺寸型号如此繁多,如何确保一致的用户体验,尺寸控制是一个关键因素。这次针对视频和图片组件,特别增加了尺寸自适应功能,来确保这一点。




在前面的案例里,已经采用了这个功能,大家可以用不同手机、对照观察一下,看看效果如何。


相关阅读:H5里的小心机之长按视频





Epub360-专业级H5交互设计工具

Coolsite360-全自由度响应式网站设计工具


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存