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

函数cubic-bezier()的不同类型曲线及其参数（AE表达式可用）
界面动效编排主要思想是在从一种状态过渡到另一种状态的过程中，将用户的注意力引导到一个流畅的方向上。
1.平等互动平等交互意味着所有对象的外观都遵循一个特定的规则
在这种情况下，所有卡片的外观都被视为一个流程，将用户的注意力引导到一个方向，即从上到下。如果我们不按照顺序来，用户的注意力就会分散。所有元素同时出现也会看起来很糟糕。
用户的注意力应该被引导到一个流体方向
至于表格视图，它有点复杂。这里用户的注意力应该是对角的，所以一个一个地显示元素是一个坏主意。将每个元素一一展现，会使动效过长，用户的注意力会呈锯齿状，这是错误的。
卡片表格视图的对角线外观
2.下属互动从属交互意味着我们有一个中心对象吸引所有用户的注意力，所有其他元素都从属于它。这种类型的动效给人一种秩序感，更能吸引主要内容。
在其他情况下，用户很难知道要跟随哪个对象，从而分散注意力。因此，如果您要为多个元素设置动效，则需要明确定义它们的运动顺序，并同时为尽可能少的对象设置动效。
为一个中心对象设置动效，而其他所有对象都受它影响。否则，用户不知道要跟随什么对象
当移动的物体不成比例地改变它们的大小时，它们应该沿着弧线而不是直线移动。它有助于使运动更自然。“不成比例”是指物体的高度和宽度通过增加/减少的变化是不对称地进行的，即以不同的速度（例如，正方形卡片变成矩形）。
不成比例地改变其大小的物体的运动应沿弧线排列
当对象按比例改变其大小时，将使用沿线的移动。由于这种运动的实现要容易得多，不成比例的弧形运动规则往往被忽略。
尺寸的比例变化以直线实现
曲线上的运动可以通过两种方式实现：第一种称为垂直出——对象开始水平运动，以垂直运动结束；第二个水平向外对象开始垂直移动并以水平运动结束。
对象沿曲线移动的路径必须与滚动界面的主轴重合。例如，在下一张图片上，我们可以上下滚动界面，相应地卡片以垂直向外的方式展开——首先向右然后向下。反向移动以相反的方式完成，即卡片首先垂直上升并最终水平移动。
卡片展开/折叠方向应与界面轴线重合
如果移动物体的路径彼此相交，则它们不能相互穿过。物体应该通过减慢或加速自己的速度为另一个物体的运动留出足够的空间。
在运动过程中，物体不应相互穿过，而是为另一个物体的运动留出空间
在另一种情况下，移动物体可以高于其他物体。但同样没有通过其他物体溶解或移动。为什么？因为我相信界面元素的行为符合物理定律，现实世界中没有任何实体能够做到这一点。
物体可以升到其他物体之上然后移动
结论所以，如果我总结上述所有规则和原则，界面中的动画应该反映我们从物理世界中知道的运动——摩擦、加速度等。从现实世界中模仿物体的行为我们可以创建一个序列，使用户能够了解对界面的期望。
如果动效制作正确，那么它就不会引人注目，也不会分散用户的注意力。如果是这样，要么需要软化它，要么完全移除它。这意味着动效不应该减慢用户的速度或阻止执行任务。

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

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