用户体验设计中的功能动画：什么是良好的过渡？

图片来源：ZURB大学

功能性动画是一种微妙的动画，具有清晰，合乎逻辑的目的。它可以减少认知负担，防止变化失明，并在空间关系中建立更好的回忆。但还有一件事。动画将用户界面带入生活。

运动可以通过将表面相乘和分割，并改变它们的形状和大小来使表面感觉活跃。您应该使用功能动画在导航上下文之间平滑地传输用户，解释屏幕上元素排列的变化，以及加强元素层次结构。

成功的运动设计具有以下六个特征：

1.回应

视觉反馈在UI设计中非常重要。它的工作原理是因为它吸引了用户对确认的自然渴望。在现实生活中，按钮，控件和对象会响应我们的交互，这就是人们期望事物发挥作用的方式。

Image credit: Smart Design

用户界面应该快速响应用户输入，精确地在用户触发它的位置，并显示新表面与创建它们的元素或动作之间的连接。点击应用程序感觉很棒，总觉得你知道发生了什么。

2.联想

将新创建的曲面与创建它们的元素或动作相关联。关联连接背后的逻辑是帮助用户理解视图布局中刚刚发生的更改以及触发更改的内容。

您可以在下面看到两个菜单转换示例。在第一个示例中，菜单远离触发它的触摸点，这打破了它与输入方法的关系。第二个示例就很好的解决了这个问题。

另一个例子是一个动作按钮，其功能在某些条件下发生变化 “播放”和“停止”按钮可能是可切换按钮的最常见示例。将播放按钮转换为暂停按钮表示两个动作已链接，按下一个动作使另一个动作可见。您应该为状态之间的过渡设置动画，使其看起来平滑，而不是不连续。

平滑过渡到回放控件既向用户通知按钮的功能，同时在交互中添加奇迹元素。图片来源：材料设计

3.自然

避免出人意料的转变。每一个运动都应该受到现实世界中力量的启发。在现实世界中，物体快速加速或减速的能力受到重量和表面摩擦的影响。以类似的方式，在良好的用户界面设计中不会立即发生启动和停止。

下面您可以看到一个很好的示例，用户选择列表中的项目以放大其详细视图。在扩展期间，当小卡片扩展为更大的卡片时，小卡片朝向其目的地移动。

在屏幕上向上移动的元素应该类似地描绘在通过向上移动的加速期间的努力。

4.目的

在正确的时间将焦点引导到正确的位置。就其本质而言，Motion 在用户界面中具有最高的突出性。文本段落和静态图像都不能与运动竞争。良好的过渡有助于引导用户进行下一步的互动。

第一次用户无法真正预测即将发生的交互，但正确的动画可以帮助用户保持导向，而不会感觉内容突然发生变化。

Mac OS在最小化窗口时使用功能动画。此动画将第一个状态与第二个状态连接起来。

Mac OS最小化Windows动画

另一个很好的例子是父对子过渡，其中用户选择列表项或卡元素中的项并放大其详细视图。此交互允许用户维护上下文。

父级对子级过渡的动画

5.迅速

当元素在位置或状态之间移动时，移动应该足够快以至于不会导致等待，但是足够慢以至于可以理解转换。

不要慢慢制作动画，因为它会造成不必要的延迟，并且会延长持续时间。

快速动画，以便用户不必等待动画完成。

交错和减慢许多元素的运动可以延长持续时间。但保持过渡时间短，因为用户会经常看到它们。将动画持续时间保持在300毫秒或以下。

6.清楚

过渡应该避免一次做太多，因为当多个项目需要在不同的方向或交叉路径上移动时，它们会变得混乱。

过渡应该清晰，简单，连贯。请记住，关于动画的更少。所以我们应该只关注动画为用户做的实际事情。

结论

最重要的是，动作不是随机的。每个动作背后都有目的。运动引导它，并专注于重要的事情，这样你就不会丢失。无论您的应用程序是有趣和有趣还是认真和直接，使用运动原理可以帮助您提供清晰，快速的凝聚力体验。

三米工作室“TF三缺一与他们的经纪人”小组的每周优质设计文章汉化计划12篇--《Functional Animation In UX Design: What Makes a Good Transition?（用户体验设计中的功能动画：什么是良好的过渡？）》。

Medium英文原文链接https://uxplanet.org/functional-animation-in-ux-design-what-makes-a-good-transition-d6e7b4344e5e