UX 设计：设计师正确使用动效的终极指南

文章插图
【UX 设计：设计师正确使用动效的终极指南】

在探索有关动效的文章时，我发现几乎所有文章都只描述了有关动效的特定用例或一般事实，但我还没有遇到任何文章都清楚且实际地描述了有关界面动效的所有规则。在这篇文章中我不会写任何新内容，我只是想将所有主要原则和规则收集到一个地方，以便其他想要开始动效界面的设计人员不必搜索其他信息。

动效的持续时间和速度当元素改变它们的状态或位置时，动效的持续时间应该足够慢，让用户有可能注意到变化，但同时足够快，不要引起用户等待的时间。
在动效中使用适当的持续时间，不要让它太快，也不要让用户有足够的时间打哈欠
多项研究已经发现界面动效的最佳速度在200到500毫秒之间 。任何短于100毫秒的动效都是即时的，根本不会被识别。而超过1秒的动画会传达一种延迟感，因此对用户来说很无聊。
最好在界面中拥有效的持续时间
在移动设备上，我建议将动效的持续时间限制在200-300毫秒。至于平板电脑，持续时间应该长30%——大约400-450毫秒。原因很简单：屏幕的尺寸更大，所以物体在改变位置时会克服更长的路径。在可穿戴设备上，持续时间应该相应地缩短30%——大约150-200毫秒，因为在较小的屏幕上移动的距离更短。
移动设备的大小影响动效的持续时间
网络动效的处理方式不同，由于我们习惯于在浏览器中，即时打开网页，因此我们希望也能在不同状态之间快速转换。因此，网络转换的持续时间应该比移动设备短约2倍——在150-200毫秒之间。在其他情况下，用户不可避免地认为计算机死机或互联网连接出现问题。
如果要在网站上创建装饰性动效或试图将用户的注意力吸引到某些元素上，请忘记这些规则。在这些情况下，动效可以更长。
需要记住，无论平台如何，动效的持续时间不仅取决于行进距离，还取决于对象的大小。较小的元素或变化较小的动效应该移动得更快。因此，具有大而复杂元素的动效在持续时间稍长时看起来会更好。
在相同大小的移动物体中，第一个停下的是经过最短距离的物体。
与大物体相比，小物体移动得更慢，因为它们产生了更大的偏移。
动效的持续时间因对象的大小和行进距离而异
当物体发生碰撞时，碰撞的能量必须按照物理定律均匀分布在它们之间。所以，最好排除反弹效应。只有在有意义的特殊情况下才使用它。
避免使用弹跳效果，因为它会分散注意力
对象的运动应该清晰锐利，所以不要使用运动模糊。即使在移动设备上也很难重现这种效果，而且它根本不在界面动效中使用。
不要在动效中使用模糊效果
列表项（新闻卡片、信息列表等）在出现之间应该有很短的延迟，新元素的每次出现应持续20到25毫秒。元素出现较慢可能会惹恼用户。
列表项的动效应该持续20-25毫秒
1.缓动缓动有助于使对象的运动更自然，它的一个重要的动画原理。
为了让动效看起来不机械化和人工化，对象应该以一定的加速度或减速度移动——就像物理世界中的所有活动对象一样。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：