详细解析UI动效基本规则全面总结(4)

均等交互
均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。
在这个实例当中，所有的卡片都遵循着一个方向来引导用户的注意力，自上到下地次第加载。相反，没有按照这样清晰的规则来加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。

至于表格式的布局，它相对就复杂一点。在这里，用户的视线流向应该是清晰的对角线方向，因此，逐个区块次第出现是一个糟糕的设计。这样的逐个显示，一方面耗时太长，另一方面会让用户觉得元素的加载方式是锯齿状的，这种方式并不合理。
从属交互
从属交互指的是使用一个中心对象作为主体，来吸引用户的注意力，而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感，让主要的内容更容易引起用户的注意。
在其他的设计当中，用户很难搞清楚哪个才是主要的，因为注意力被分散了。因此，如果要设置多个动画元素，应该定义清楚谁为主，谁是中心，并且尽量按照从属关系来次第呈现不同的子元素。

如果只有一个中心对象，那么其他的对象的运动方式都要受它制约，否则用户分不清楚主次。
根据 Material Design 的规定，当元素不成比例地变幻尺寸的时候，它应该沿着弧线运动，而不是直线运动，这样有助于让它看起来更加自然。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的，换句话来说，变化的速度也不一样。（比如：方形变成矩形）

相反，如果元素是按照比例改变大小的时候，应该沿着直线移动，这样不仅操作更加方便，而且更符合均匀变化的特征。看一下真实的案例，你会发现直线的运动轨迹会更加合理。

当元素不成比例放大的时候，运动轨迹是弧线，而这种弧线运动轨迹有两种不同的呈现一种，一种轨迹是初始方向为垂直方向而运动结束时瞬间运动方向是水平的（Horizontal out），另外一种初始方向是水平方向而运动结束时瞬间运动方向是垂直的（Vertical out）。
那么怎么选取这个方向呢？
很简单，元素运动曲线的方向，应该是要向界面的主要运动方向的主轴靠拢重合。举个例子，在下面的动效当中，整个界面的滚动方向是上下滚动，主轴是纵向的。因此，当卡片点击之后被展开的时候，会先向右水平移动，并最终以垂直运动结束，运动的最终方向，切线是垂直的，也就和垂直方向的主轴重合了。

如果几个不同的元素的运动轨迹相交，那么他们不能彼此穿越。如果每个元素都必须通过某个交点，抵达另外一个位置，那么应该次第减速，依次通过这个点，给彼此留出足够的空间。另外一种选择，是元素不相交，而是像实体一样在靠近的时候，彼此推开。
为什么？
因为我们通常假定界面中所有的元素都位于同一个平面当中。

在运动过程中，元素不应彼此穿越，而应该互相留出空间。
但是这一点也不是一成不变的。在比较拥挤的界面当中，某个元素可以「越过」其他的元素，它同样没有穿过其他的元素消失，而是单纯的移动。这一点从某种意义上也是延续自我们日常的物理规律，只不过我们会默认界面中的元素在这个情况下拥有了高度这样的属性。

结语
我们总结了这么多动效运动的规则和原则，从某种意义上还是延续自我们对于物理世界的认知，摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现实世界的界面让我们对于界面的秩序有更清晰的认知，允许我们更轻松的了解和访问界面的内容。
如果动效按照正确的方式来设计，它应该是不显著，且不会分散用户注意力的。如果不是这样，那么你需要让动效更微妙一点，实在不行甚至需要将它移除。动效不应该成为影响用户操控界面的障碍，或者转移注意力的存在。
当然，即使是遵循这么多规律，动效的设计依然是一门艺术，而非单纯的科学，多做测试多摸索总是有必要的。