网站设计之4种方式在UI设计中使用功能动画

十年前，使用动画的用户界面被避免，通常与弹出窗口和闪烁的广告相关联，但是这已经改变了。今天的交互设计和动画细节在现代网站和现代应用中都有根本的区别。在这个声明中明确表达了这种心态转变：

如果我们要设计更好的数字产品，那么我们需要从一开始就拥抱应用程序和网站的交互性。

动画为什么工作

运动本质上在用户界面中具有最高的突出水平。文本复制和静态图像都不能与动作竞争。我们的眼睛硬连线注意移动的物体 – 几乎是一个反射。我们可以利用这个功能动画来利用它。

什么是功能动画？

功能动画是嵌入在UI中的微妙动画，作为该设计功能的一部分。它有一个非常明确和合乎逻辑的目的：

• 减少认知负荷
• 防止失明
• 在空间关系中建立更好的回忆

在以人为本的设计方法中，用户是主要焦点，用户界面需要直观，响应和人性化。功能动画可以帮助您实现这些目标。

功能动画如何改善UX

我们对应用程序或网站的体验和印象是由一系列因素组合而成，互动发挥重要作用。当我们找到正确的情况时，为我们的设计添加动议可以是有意义和有用的。经过深思熟虑的测试功能动画有潜力实现多种功能，包括：

视觉反馈

良好的互动设计提供反馈。反馈确认系统已收到用户的操作，并演示交互的结果是否成功。该组中的动画需要非常微妙，应该设计得适应。

按钮反馈

在现实生活中，按钮会响应我们的互动，这就是我们期望的事情。为了可预测用户数字接口应该以相同的方式行事。

资料来源：Jaron Pulver

可视化动作结果

按照原则展示，不要告诉，您可以使用动画反馈来强调出现问题。例如，视觉抖动动画在错误的密码输入。就像摇头一样，就像说“不，再试一次”。用户注意到动画并立即了解当前状态。

您还可以加强用户正在执行的操作。在下面的示例中，当用户单击“提交”时，会在应用程序显示成功状态之前短暂显示一个微调。复选标记动画使用户感觉过程成功完成。

图片来源：Colin Garven

2.软化状态变化

在设计中添加动画的其他好处是在变化的时刻。用户界面中的状态变化，特别是在网络上，往往涉及硬削减，可能使其难以遵循。没有什么比突然的变化感觉更不自然。界面的突然变化很难让用户处理。通过在UI中添加一些动画，应该改变这些变化的时刻。

建立连接

动画转换应作为用户界面的不同状态之间的中介，帮助用户了解屏幕状态发生变化时发生的情况。用户只需遵循运动，并了解两个UI状态如何相关。

图片来源：Anish Chandran

它也适用于关联缩略图和详细视图：

卡片从原来的位置移动到模态的位置，清楚地表明它是同一个项目，只是更多的细节。

图片来源：Charles Patterson

呼叫注意更改

动画可以帮助眼睛看到一个新的对象来自于其显示或隐藏物体的位置，并可以再次找到。我们可以使用它来引起对隐藏或揭示信息的变化的注意，例如打开内容的抽屉。在下面的示例中，当您点击汉堡包图标时，主导航幻灯片的方式。这个动作让你知道主菜单还没有消失。

图片来源：Tamas Kojo

3.系统状态的可见性

作为Jakob Nielsen的10项启发式的可用性原型之一，系统状态的可见性仍然是用户界面设计中最重要的原则之一。对于用户而言，非常重要的是在任何给定时间了解和理解系统中的当前上下文。

进度指标

数据上传和下载过程是功能动画的好机会。动画加载栏设置了对动作的处理速度的期望。在故障的情况下，动画可能是有帮助的。即使一个不愉快的通知，如数据下载失败，应该以一个很好的方式提供。

图片来源：xjw

拉动刷新

用户的等待时间从它们发起动作的时刻开始，最糟糕的情况是系统没有收到任何指示。拉动刷新动作应该立即反应。在收到用户的请求后，立即给出一些视觉反馈，以表明该进程已经启动是至关重要的。动画将帮助您。

图片来源：Tony Babel

解释动画

有时，用户需要一些额外的帮助来了解用户流程或如何与某些界面元素进行交互。对于包含用户的新的或不熟悉的功能或交互的用户界面尤其如此。

新手上路

用户入门需要一个完美的UX，并且在入门流中的动画对于首次使用者如何与应用程序进行互动有着巨大的影响。动画让您无限自由地传达任何东西，无论多么复杂或干燥的主题，以娱乐的方式。

 图片来源：Anastasiia Andriichuk

视觉提示

动画可以提供一些有用的视觉线索。第一次打开页面时最常看到解释性动画，动画显示页面的特定元素应该如何使用。这种类型的动画可以在游戏中找到，这些游戏通常与渐进式披露非常好，当您进一步进入游戏时，显示游戏机制。只有当用户在他们的经验中达到适当的点时才触发这种提示。

结论

动画是以复杂的方式使用的强大工具。

我们需要从一开始就拥抱这个动议，并将其视为我们设计的自然部分，因为设计不仅仅是视觉呈现。正如史蒂夫·乔布斯（Steve Jobs）关于设计的那样：它不仅仅是它的外观和感觉。设计是如何工作的。