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

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

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

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

时长和距离相同，但心情不同
4.缓出或减速曲线它与缓入曲线相反，因此对象快速覆盖长距离然后缓慢降低速度直到最终停止。

当元素出现在界面上时应该使用这种类型的曲线——它在界面上全速飞行，逐渐减速直到完全停止。这也可以应用于从界面外部出现的不同卡片或对象。
良好显示的减速曲线
5.缓入或标准曲线这条曲线使物体在开始时获得速度，然后慢慢地将其降回零。这种类型的移动是界面动效中最常用的。每当思考在动画中使用哪种类型的运动时，就可以使用标准曲线。
最好使用不对称曲线，以使运动看起来更自然和逼真。曲线的终点必须比起点更强调，使加速的持续时间短于减速的持续时间。在这种情况下，用户更加关注元素的最终移动，从而关注其新状态。
对称和非对称标准曲线的区别
当对象从界面的一部分移动到另一部分时，使用渐进渐出。在这种情况下，动效避免了引人注目和戏剧性的效果。
卡片在界面上的移动和对应的不对称曲线
当元素从界面上消失时应使用相同的移动类型，但用户可以随时将其返回到之前的位置，它涉及导航抽屉等。
导航抽屉用标准曲线从界面上隐藏起来
从这些例子来看，许多初学者忽略了一个基本规则——开始动效不等于结束动效。与导航抽屉的情况一样，它以减速曲线出现并与标准曲线一起消失。此外，物体出现的时间应该更长，以吸引更多的注意力。
侧边菜单的出现和消失对应于减速和标准曲线
函数cubic-bezier()用于描述曲线，它被称为三次方，因为它基于四个点。第一个带坐标的点0;0（左下）和最后一个带坐标的点1;1（右上）已在图形上定义。
在此基础上，我们需要描述只有两个在图上，这是由函数的四个参数给出点cubic-bezier()：前两个是坐标x和y第一点，第二两个是坐标x和y第二点的。
函数cubic-bezier()的不同类型曲线及其参数（AE表达式可用）
界面动效编排主要思想是在从一种状态过渡到另一种状态的过程中，将用户的注意力引导到一个流畅的方向上。
1.平等互动平等交互意味着所有对象的外观都遵循一个特定的规则
在这种情况下，所有卡片的外观都被视为一个流程，将用户的注意力引导到一个方向，即从上到下。如果我们不按照顺序来，用户的注意力就会分散。所有元素同时出现也会看起来很糟糕。
用户的注意力应该被引导到一个流体方向
至于表格视图，它有点复杂。这里用户的注意力应该是对角的，所以一个一个地显示元素是一个坏主意。将每个元素一一展现，会使动效过长，用户的注意力会呈锯齿状，这是错误的。
卡片表格视图的对角线外观
2.下属互动从属交互意味着我们有一个中心对象吸引所有用户的注意力，所有其他元素都从属于它。这种类型的动效给人一种秩序感，更能吸引主要内容。
在其他情况下，用户很难知道要跟随哪个对象，从而分散注意力。因此，如果您要为多个元素设置动效，则需要明确定义它们的运动顺序，并同时为尽可能少的对象设置动效。
为一个中心对象设置动效，而其他所有对象都受它影响。否则，用户不知道要跟随什么对象
当移动的物体不成比例地改变它们的大小时，它们应该沿着弧线而不是直线移动。它有助于使运动更自然。“不成比例”是指物体的高度和宽度通过增加/减少的变化是不对称地进行的，即以不同的速度（例如，正方形卡片变成矩形）。
不成比例地改变其大小的物体的运动应沿弧线排列
当对象按比例改变其大小时，将使用沿线的移动。由于这种运动的实现要容易得多，不成比例的弧形运动规则往往被忽略。
尺寸的比例变化以直线实现
曲线上的运动可以通过两种方式实现：第一种称为垂直出——对象开始水平运动，以垂直运动结束；第二个水平向外对象开始垂直移动并以水平运动结束。
对象沿曲线移动的路径必须与滚动界面的主轴重合。例如，在下一张图片上，我们可以上下滚动界面，相应地卡片以垂直向外的方式展开——首先向右然后向下。反向移动以相反的方式完成，即卡片首先垂直上升并最终水平移动。
卡片展开/折叠方向应与界面轴线重合
如果移动物体的路径彼此相交，则它们不能相互穿过。物体应该通过减慢或加速自己的速度为另一个物体的运动留出足够的空间。
在运动过程中，物体不应相互穿过，而是为另一个物体的运动留出空间
在另一种情况下，移动物体可以高于其他物体。但同样没有通过其他物体溶解或移动。为什么？因为我相信界面元素的行为符合物理定律，现实世界中没有任何实体能够做到这一点。
物体可以升到其他物体之上然后移动
结论所以，如果我总结上述所有规则和原则，界面中的动画应该反映我们从物理世界中知道的运动——摩擦、加速度等。从现实世界中模仿物体的行为我们可以创建一个序列，使用户能够了解对界面的期望。
如果动效制作正确，那么它就不会引人注目，也不会分散用户的注意力。如果是这样，要么需要软化它，要么完全移除它。这意味着动效不应该减慢用户的速度或阻止执行任务。
但是不要忘记动效更像是一门艺术而不是科学，所以最好在用户身上试验和测试你的决定。
这里是猫老师，下周再见

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

「爱刨根生活网」www.aipaogen.com小编还为您精选了以下内容，希望对您有所帮助：