ui动效设计怎么做,高效攻略助您轻松学会

动效的持续时间和速度
 

当元素的位置和状态发生变化时，动效的速度应该足够慢，以保持足够长的时间让用户注意到变化，但同时，不应该慢到需要用户等待。
 

大量研究表明，动效的*持续时间在200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化的速度。任何小于100毫秒的动效对于人眼来说几乎是瞬间的，难以识别。然而，超过一秒钟的动效又会让人感觉迟钝。
 

在移动设备(如手机)上，动效持续时间应控制在200至300毫秒之间，而在平板电脑上，持续时间应延长约30%，即持续时间应在400至450毫秒之间。网页的处理方式也不同。因为我们习惯于直接在浏览器中打开网页，考虑到浏览器的性能和大家的使用习惯，用户对浏览器动效变化速率的预期仍然相对较快。
 

与移动终端中的动效速度相比，网页中的速度会快上一倍，换句话说，动效的持续时间应该在150到200毫秒之间。如果持续时间太长，用户会觉得网页卡住了。
 

大屏幕=较慢的动效
 

事实**不是这样。
 

请记住，动效的持续时间不仅仅取决于屏幕大小和运动距离，还取决于平台特性、元素大小、功能设置等。不管是什么平台，元素越小或变化越小，相应的动效应该越快。因此，大而复杂的元素动效持续时间更长，看起来更舒适一点。
 

动效的运动规律应符合物理规律，当元素移动到边界并发生碰撞时，碰撞的“能量”将最终均匀分布。然而，弹跳的特效在大多数情况下并不适用，仅适用于特殊情况。
 

元素的运动过程应该是清晰的，尽量不要在运动中使用模糊效果，模糊效果不适合ui界面。
 

列表项使用的动效在实际的移动过程中，项与项之间应有轻微的延迟，元素之间的延迟应控制在20 ~ 25毫秒之间。如果持续时间较长，可能会给人一种迟滞的观感。