功能性动画设计:优秀的转场效果

功能动画是一种目标明确合理的微妙动画。它可以减少认知负荷，防止视觉失明的变化，在空间上创造更好的印象。但另一点是，动画使用户界面更加生动。

功能性动画主要承担界面的引导作用，反映页面变化的因果关系。如何设计这种动画效果？

功能动画是一种目标明确合理的微妙动画。它可以减少认知负荷，防止视觉失明的变化，在空间上创造更好的印象。但另一点是，动画使用户界面更加生动。

通过组合和分割，改变形状和尺寸，运动可以使外观感觉新鲜。应使用功能动画，在导航内容之间流畅地引导用户，解释屏幕元素和排列的变化，并强调元素水平。

动效设计的成功具有以下六个特点：

1. 响应

视觉反馈UI设计非常重要。因为它符合用户的要求。确认应答自然需要，所以它有效。在现实生活中，按钮、遥控器和各种物体都会响应我们的操作，人们对事物的期望也是如此。

图片来源：Smart Design

接口应迅速响应用户输入，准确地说，它是在用户触发的那一刻响应，显示新界面和元素与触发它们的操作之间的关系。点击整个应用程序，并且总是知道正在发生什么，这感觉很棒。

对象对用户意图的适当反馈。图片来源：Material Design

2. 关联性

将新生成的界面与触发它们的元素或操作联系起来。相关性背后的逻辑可以帮助用户在界面布局中了解刚刚发生的变化，是什么导致了变化。

在下图中，您可以看到两个菜单的过渡效果。在第一个例子中，菜单的位置远离触发接触点，破坏了与这种输入模式的关系。

错误的做法。图片来源:Material Design

在第二个例子中，菜单是从触点产生的。这将这个元素与触点联系起来。

正确的做法。图片来源:Material Design

另一个例子是操作按钮在特定情况下改变功能。“播放”和“暂停”按钮可能是开关按钮中最常见的例子。播放变为暂停，表明两者是相关的。点击其中一个，你会看到另一个。应设计状态之间的过渡动画，使其看起来流畅不间断。

在向用户展示按钮功能的同时，播放控件的流畅过渡也给这个操作增添了一丝惊叹。图片来源：Material Design

3. 自然

避免意想不到的过渡效果。所有的运动都应该遵循现实世界中力的作用。事实上，受其重量和表面摩擦的影响，一个物体加速减速的速度。类似地，在良好的界面设计中，启动和停止不会立即发生。

在下图中，可以看到一个很好的例子，用户选择列表中的一个，并将其展开到详细的视图中。在扩展过程中，小卡沿着弧线移动到目标位置，并扩展成更大的卡。

正确的做法。在屏幕上向上移动的物体在移动时应反映加速力。图片来源：Material Design

4. 有目的

在合适的时间引导视线到合适的位置。动画自然是最高水平的突显。无论是文字段落还是静止图片，都无法与之相比。良好的过渡效果引导用户进入下一步。

用户第一次无法预测操作触发的结果，但适当的动画可以帮助用户保持方向，不会感觉到内容的突然变化。

Mac 在最小化窗口时，OS采用了一种功能性动画。动画将前后两种状态联系起来。

Mac OS最小化动画

另一个很好的例子是父子的过渡。用户选择列表项或卡元素，放大进入详细视图。这个操作让用户了解来龙去脉。

父子过渡动画。图片来源:Material Design

5. 快速

当元素在不同的位置和状态之间移动时，运动要足够快，不能让人等待；也不能太快，让过渡能够理解。

错误的做法。图片来源:Material Design

过渡效果要清晰、简洁、有组织。记住，关于动画，少就是多。我们应该只关注动画能给用户带来的实际价值。

正确的做法。图片来源:Material Design

结论

综上所述，动画不是随意的。每个操作背后都有自己的目的。动画引导它，展示重要内容，防止被忽视。无论你的应用是快乐、幽默还是严肃、直接，动画的应用原则都有助于提供清晰、快速、粘性的体验。

精心设计。注意每一个细节，是成功构建易用人机交互的关键。

非常感谢！