收藏本站 关于我们

深度揭秘上百种H5动效(不看可能会后悔篇)(原创文章)

发布时间:2016-12-25 11:40:32   来源:PS教程   人气:0

前言:以数位在职的资深H5设计师的动效使用情况为参考,整理出以下揭秘资源。  恐怕很多接触过H5制作的童鞋都会纳闷 N种动效摆在自己面前 用起来时

以数位在职的资深H5设计师的动效使用情况为参考,整理出以下揭秘资源。


恐怕很多接触过H5制作的童鞋都会纳闷

N种动效摆在自己面前

用起来时却十分别扭

画面被自己搞得鸡飞狗跳似的

那么,H5动效的选取有迹可循吗?

有!

我根据目前广大H5设计师的动效使用情况

总结了一份H5动效使用手册,希望你能从中受益并拟出自己的套路。


\


动效对H5的作用体现在两个方面:


●功能性。引导用户点击和翻页,吸引用户做长时间的视觉停留。

●趣味性。加强用户体验的舒适度,提高愉悦感。


它的制作手法有很多,比如《H5动效的常见制作手法》曾经归纳如下:


\

▲效果图摘取自UI中国_Vision


时间轴动效的原理和原生的动效组件类似,都是通过改变元素的位置、大小、透明度等促成动效效果。


因为时间轴存在单位时间,因此可把玩法大致分为两种:单位时间内控制单一属性、控制多个属性。演示工具iH5.cn,不完全举例如下——


1.单位时间内控制单一属性:


\


(1)easeIn缓进(先慢后快)——在场景切换上用得比较少,主要用在元素的运动上,比如重物的掉落(可使用二次进,控制加速度不变)、磁铁的吸引(可使用三、四、五次进,加速度会逐渐变大)上。


\


(2)easeOut缓出(先快后缓)——在场景切换上用得比较多,比如界面的展开、收起、出现、移动等,触发它的对象与它作用的对象往往是同一个。设计时,减速和加速动效往往是成对出现的,比如元素飞入时减速,飞出时加速。


\


在设计H5时,除了翻页效果,还能够加入上述所讲的各种各样的动效,不仅提高用户体验,也大大增加了趣味性。

然而,如果为了追求动效的酷炫,一味叠加太多动效也是不可取的。因为太多的动效会导致耗时太长,进入太慢,减缓了用户体验流程。

适度的、和谐的动效才能让你的H5大放异彩!



以上,即为全方位的H5动效使用解析,希望对你有帮助啦!


如今年尾将近,在这里给大家拜个早年,大家来年工作顺利啊!!


(现在就拜年是不是有点早啊喂!)


好啦,咱们下期再见~拜



参考资料:

《H5动效的常见制作手法》
《缓动函数速查表》
《动效设计基础(一):运动曲线与缓动》

本文来自PS教程网www.46PS.com,转载请注明!关键词:设计观点设计观点教程酷友观点经验


PS教程