详细解析UI动效的基本规则全面总结

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:摄影社区   作者:Taras Skytskyi

关键词

动效设计有没有规则?如何做好动效设计?

有了这篇文章,你就不用在其他地方学习基本的动效设计规则了。
动效的持续时长和速度
元素的位置和状态发生改变的时候,动效的速度应该足够慢,维持足够长的时间,让用户能够注意到变化,但是同时,又不能慢到需要用户去等待。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


大量的研究表明,动效的最佳持续时长是200毫秒到500毫秒之间,这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言,几乎都是瞬间,很难被识别出来,而超过1秒的动效会让人有迟滞感。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


在手机这样的移动端设备上,按照 Material Design 的建议,动效时长应该控制在200~300毫秒之间。在平板电脑上,这个时长应该延长大概30%,也就是说,时长应该在400~450毫秒之间。
原因很简单,屏幕尺寸越大,元素在发生位移的时候,跨越的距离越长,速度一定的情况下,时长自然越长。相应的,在可穿戴设备的小屏幕上,这个时长应该缩短30%,在150~200毫秒之间。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


网页动效的处理方式也不一样,由于我们习惯在浏览器中直接打开网页,考虑到浏览器性能和大家的使用习惯,用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度,网页中的速度会快上一倍,换句话说,就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长,用户会忍不住觉得网页卡住了。
不过,如果你的网页中所用的动效并非功能性的,而是装饰用的,或者用来吸引用户的注意力,那么请忘记这个规则,,在这种情况下,动效可以更长。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


更大的屏幕=更慢的动效?绝不是如此!
请务必记住,无论是在什么平台上,动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离,还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化,相应的动效应该更快一点。因此,大而复杂的元素动效持续时间更长,看起来也更舒服一点。
大小相同的元素,在移动的时候,移动距离最短的元素,是最先停止下来的。
与较大的元素相比,较小的元素运动速度应该更慢,因为相同的移动距离,对于小元素而言,位移距离和自身大小比例倍数更大,相对偏移更远。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


动效的运动规律要符合物理规律,当元素运动到边界,发生碰撞的时候,碰撞的「能量」最终是要均匀分摊下来的,而弹跳的特效在多数情况下是不适合的,仅在特殊情况下适合使用。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网


元素的运动过程应该是清晰的,尽量不要在运动中使用模糊的效果(是的,说的就是 AE 的模糊动效爱好者们),模糊的动效不适合在 UI界面中使用。

详细解析UI动效基本规则全面总结,PS教程,思缘教程网

 收藏