终极指南！超全面的UI动效基本规则总结

动画效果如今已深入到 UI界面的每角落。屏与屏之间的切换因动效显得加连贯，交互的下文逻辑也因动效的加持加清晰。动效对于产品用户言，都一不可多得的重组部分。但当我浏览相关的文章的时候，发绝多数的动效关的文章，都仅仅只针对特的动效设计案例来进行分析和描述，有章真正系统地阐述效应该遵循怎样的规则，符合么样的特征。这篇章当中，我会讲述么颖的技巧或者前的趋势，但是我会将效设计的要原则和标准都汇集到一起，总结来。

有了这篇章，你就在他地方习基本的效设计规则了。

动效的持续时长和速度

当元素的位置和状态发生改变的时候，效的速应该足够慢，维持足够长的时间，户够注意到变，但是同时，又慢到需要户等待。

大量的研究表明，效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消速得来的。任何低于100毫秒的效对于人的眼睛而言，几乎都是瞬间，很难被识别来。而超过1秒的效会人有迟滞感。

△ 界面中效持续时长

手机这样的移动端设备，按照 Material Design 的建议，动效时应该控制200~300毫秒之间，平板电脑，这时应该延概30%，也就，时应该400~450毫秒之间。原因很简单，屏幕尺寸越，元素发移的时候，跨越的距离越，速度一的况下，时自然越。相应的，可穿戴设备的小屏幕，这时应该缩短30%，150~200毫秒之间。

△ 移动端设备的屏幕尺寸影响动画的持续时

网页动效处理也不样。由于我们习惯在浏览接打开网页，考虑到浏览性能和大家使用习惯，用户于浏览动效变化速率预期是比较快。相比于移动端动效速度，网页速度会快上倍，换句话说，是动效持续时长应该在150~200毫秒。如持续时太长，用户会忍不住觉网页卡住了。

不过，如果你的网页中所用的动效并非功能性的，而是装饰用的，或者用来吸引用户的注力，那请忘记这个规则，在这种情况下，动效可以更长。

更大的屏幕=更慢的动效？绝不是如此！

请务必住，无论是在什么平台上，动效的持续时长绝不是单纯取决屏幕尺寸和运动距离，还取决平台特征、元素大小、功能设定等等。小的元素或者小的变化，相应的动效应该更快一点。因此，大而复的元素动效持续时间更长，看来也更舒服一点。

大小相同的元素，在移的时候，移距离最短的元素，是最先停止来的。

与较的元素相比，较小的元素运动速度应该慢，因相同的移动距离，对于小元素言，移距离自身小比例倍数，相对偏移远。

△ 动效的持续时还元素小、运动距离关

动效运动规律要符合物理规律，元素运动到边界，发生碰撞时候，碰撞「能量」最终是要均匀分摊下来，而弹跳特效在多数情况下是不适合，仅在特殊情况下适合使用。

△ 避免使用弹跳特效，它会分散用户注意力

素的运动过程应该是清晰的，尽量不要在运动中使用模糊的效果（是的，说的就是 AE 的模糊动效爱好者），模糊的动效不适在 UI界面中使用。

△ 不要在动效中使用模糊效果

列表项（新闻列表、邮件列表等）所使用的动效，在际运动的程中，项和项之间应该有轻微的延迟，元素之间的延迟应该控在20~25毫秒之间，果持续时间长，能给人一种迟滞的观感。

△ 列表项之间的延迟应该在20~25毫秒

缓动

缓动指的是物在物理规则下，渐进加速或减速的现象。在动效中加缓动的效果能够让运动显得更加自，是运动的基原则之一。对缓动，迪士尼的两位关键的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著《The Illusion of Life: Disney Animation》中有非常详尽的描述。

为了效看起来机械或者人工痕迹太明显，元素的应该有渐进速和渐进减速的特征，就像物世界当中他的物体这样。

匀速直运动

不受任何物理力量的影响，匀速直运动看来是非常不自的，尤其是对人眼而言。

有来设计画的应都会使坐标轴和曲线来阐述效的特征，我将尝试阐述它们的含义，及如何使。坐标轴的 X轴是实现，而 Y轴则表示的唯一，换句话来说，如同我们在初中物中到的，坐标轴上的线条描述的是速和速的特征。面示的直线，表示速是均匀的，就是匀速直线，物体在相同时间的距离是变的。

△ 匀速直线的座标图

均匀的变化通常只会用色彩的改变或者透明的改变，一般，我们也可以让背景元素均匀运动，景元素保持不变，呈它的状态，就图一样。

缓动加速曲线

通过曲线我们可以看到，体始时候的初速度比较低，运动缓慢，随后速度逐渐增加，这意体加速运动。

△ 加速曲线

物体加速飞出屏幕时候，可以使用这加速曲线，比如界被用户使用滑动手势甩出去卡片。是请记住，有运动象需要完全离开界时候才会这么使用，如它需要再回来话，则不。

△ 以加速运动将卡片扔出屏幕

动画曲线有助于正确传达讯息，甚至表达情绪和觉。在下面的案例当中，可以每个素的运动位移是完全一的，所消耗的总长也是一的，但是运动的速率变化是不同的，这一点也体现在曲线上，所表现出来的情绪也不同。当然，通过调整曲线，你能够让物体的运动轨迹尽可能近现实界。

缓动减速曲线

元素从屏幕运动到屏幕内时候，动效应该遵循这类曲线运动特征。从全速进入屏幕开始，速度降低，到完全止。

△ 减速曲线

减速曲线可以适用于多种不同的 UI控件和素，包括从屏幕外进入屏幕内的的卡片、条目等。

△ 减速曲线案例

缓动标准曲线

在这种曲线之下，物体从静止开始加速，达速度最高点之后开始减速直静止。这种类型的素在 UI界面中最为常见，每当你不知道要在动效中使用哪种运动方式的候，可以标准曲线。

△ 标准曲线

根据 Material Design 的规范，最使用不么对称的增速和减速的程，让动效看来更加。同时大家更加在意运动的结果，曲的末端，也就是运动结束的程最进行适当的强，换句说就是减速程持续的时长最超开始加速的时长，用户将更加清楚地观察到运动的最终结果，从而更地明白运动的终止状态。

△ 对称和非对称运动的差异

当元素从屏幕的一个位置移到另外一个位置的时候，最好使这种标准的缓曲线，这个过程中，尽量要画效果引人注意，要使戏剧的效果。

△ 卡片元素从屏幕上的时候，对称的缓曲线

当元素从屏幕消失的时候，采用了相同的不对称缓动曲线，用户同样可以通过滑动回到之的置。这环节使用了抽屉式导航控件。

△ 抽屉式导航随缓动曲线从屏幕隐藏

从这些案例，可以看出许多动效初学者于运动规则了解不足。比如下这个动效，元素随着减速曲线出现，然后使用标准缓动曲线消失。根据 Material Design 标准，新出现元素持续时应该更长，为需要吸引更多注意力。

△ 导航菜单出现和消失

贝赛尔曲线函数 cubic-bezier（）是用来描述曲线的，它的名字前面之所以带有 Cubic 是因为每个贝赛尔曲线的描述都是基于四个不同的参数来确定的。曲线的起点（0，0）和终点（1，1）在坐标轴上的位置是已经事先确定的。

为简化你对贝赛尔曲的理，我们推荐两个网站，分别是 easings.net 和 cubic-bezier.com ，前者包含最常见的曲的列表，你以将他们复到你的原型工具中，二个网站为你提供不同曲的参数，你以直接在其中查看各种对象的移动方式。

△ 不同类型的 cubic-bezier（）的曲和参数

界面动效的编排

就像芭蕾舞的舞蹈编排一样，动画效果也是需要编排的，它的主要目的是让元素从一个状态切换到下一个状态，自渡，让用户的注意力自地被引导去。

编有两种同的方式，一种是均等交互，另一种是从属交互。

均等交互

均等交互意味着有的元素和对象都遵循一个特定的编的规则。

这实例当中，所的卡片都遵循一方向引导用户的注意力，自到下次第加载。相反，按照这样清晰的规则加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。

△ 用户的注意力应该沿一流向引导

至于表格布局，它相复杂。在这里，用户视线流应该是晰线，此，逐个区块第出现是个糟糕设计。这样逐个显示，耗时太长，另会让用户觉元素加载是锯齿状，这并不合理。

△ 沿着线加载

从属交互

从属交互指是使用个心象作为主体，来吸引用户注意力，而其他元素从属于它来逐步呈现。这样动画设计能够创造更强秩序感，让主要内容更容易引起用户注意。

在其的计当中，用户难搞清楚哪个才是主要的，因为注力被散了。因此，如果要置多个动画素，应该定义清楚谁为主，谁是中心，并且尽量按照从属关系来次第呈现不同的素。

如果只有一个中心对象，那其的对象的运动方式都要受它制约，否则用户不清楚主次。

根据 Material Design 的规定，当元素不成比例地变幻尺寸的时，它应该沿着弧运动，而不是直运动，样有助让它看来更加自。所谓「不成比例」地变化指的是元素的长和宽的变化并不是按照相同比例来缩放或者变化的，换句来说，变化的速度也不一样。（比，方形变成矩形）

△ 不成比例地改变对象外观的时，运动轨迹应该是弧的

相反，如果元素是按照例改变大小的时候，应该着直线移，这样仅操作更方，而且更符合均匀变的特征。看一真实的案例，你会发现直线的轨迹会更合。

△ 成例变大小的时候，应该着直线

当元素不比例的时候，运动轨迹弧线，这种弧线运动轨迹两种不同的呈一种，一种轨迹初始方向垂直方向运动结束时瞬间运动方向水平的（Horizontal out），另外一种初始方向水平方向运动结束时瞬间运动方向垂直的（Vertical out）。

那么怎么选取这个呢？很简单，元素运动曲线，应该是要界主要运动主轴靠拢合。举个例子，在下动效，个界滚动是上下滚动，主轴是纵，此，卡片击后被展开时候，会先右平移动，并最终以垂运动结束，运动最终，切线是垂，也和垂主轴合了。

△ 元素按照弧线展开时候，最终应该和主轴合

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

在运动过程中，素不应彼此穿越，而应该互相留出空间。

但是一点也不是一成不变的。在比拥挤的界面当中，某个元素以「越」其他的元素，它同样没有穿其他的元素消失，而是单纯的移动。一点从某种意义上也是延续自我们常的物理规律，只不我们默认界面中的元素在个情况下拥有高度样的属。

△ 元素以越其他的元素运动

结语

我们总结么动效运动的规则和原则，从某种意义上还是延续自我们对物理世界的认，摩擦力和加速度在虚拟界面中以另外的方式续存着。模仿现世界的界面让我们对界面的秩序有更清晰的认，允许我们更轻松的和访问界面的内容。

如果效按照正确的方式来设计，它应该是显著，且会分散户注意的。如果是这样，那么你需要效更微妙一点，实在行甚至需要将它移除。效应该成为影响户操控界面的障碍，或者转移注意的存在。

当然，即使遵循这么多规律，动效的设依然一门，非单纯的科学，多测试多摸索总必的。