[ 2016-07-15 ] 位置触发和视频播放触发上线,H5交互更轻更有趣

从近期的观察看,H5交互有越来越轻的趋势,繁琐的操作容易吓跑用户,如果创意设计出挑,再配合简单的交互,反而更容易引起用户的兴趣和传播。这次的功能更新,契合了这样的诉求:新增锚点组件:可以设置位置触发 ...

 

从近期的观察看,H5交互有越来越轻的趋势,繁琐的操作容易吓跑用户,如果创意设计出挑,再配合简单的交互,反而更容易引起用户的兴趣和传播。
 
这次的功能更新,契合了这样的诉求:
  • 新增锚点组件:可以设置位置触发
  • 视频支持开始/结束触发器
  • 图片/视频组件支持尺寸自适应
 
锚点组件
 
有了锚点组件,可以在滑动到指定位置时、触发各种交互效果。
 
看个案例了解一下吧 -->> 来了就是深圳人
 

案例:来了就是深圳人 by dodo设计
 
设置方式也很简单:
 

 

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

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

 
要做好一个视频类H5,需要把控几个要点:
 
  • 使用封面图过度,视频开始播放后去除封面图,避免黑屏等待;
  • 视频开始和结束的触发控制,以便对接交互及最终落地转化;
  • 针对不同手机屏幕尺寸做好视频尺寸的适配
  • 安卓版微信中视频播放的兼容性处理
 
这次Epub360针对视频类H5的需求,专门做了一些优化调整,包括:
  • 增加视频播放开始 / 结束触发器控制
  • 视频尺寸的自适应设置,以适配各种手机屏幕

话不多说,借用《腾讯NextIdea:穿过故宫来看你》这个案例素材,展示一下优化调整的效果吧:
 
 
尺寸自适应
 
手机屏幕尺寸型号如此繁多,如何确保一致的用户体验,尺寸控制是一个关键因素。这次针对视频和图片组件,特别增加了尺寸自适应功能,来确保这一点。
 

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

10