客服热线:021-64338901

学会功能性动画帮你更好的完善用户体验

于人类是视觉驱动的生物,图像的影响只有在动画的帮助下才会增加。我们的眼睛天生就会特别关注移动的物体,而动画就像糖果一样,吸引人的注意力,有助于区分应用程序和竞争对手。

截止到目前为止,越来越多的设计师将动画作为一种功能元素融入其中,以增强用户体验。动画不再只是为了娱乐;它是完成交互的最重要工具之一。

然而,动画在设计中只有用在合适的时间和地点的时候,才能够增强用户体验。好的用户界面动画是有目的的;它们有意义,而且功能性强。在本文中,我们将讨论功能动画在UX设计中的作用,并了解何时将动画运用到设计中。

什么是功能动画?

功能动画是嵌入在UI设计中的一个微妙元素,它是该设计功能的一部分。并且它强化了设计,具有非常明确和合乎逻辑的目的,包括:

1、减少认知负担

2、防止变化迷失

3、在空间关系中建立更好的联系

动画使用户界面栩栩如生。在以用户为中心的设计方法中,用户是主要焦点,用户界面需要直观、快速响应和人性化。功能动画就可以帮助你实现这些目标。

功能动画在用户界面设计中的作用

经过深思熟虑和经过测试的功能动画有可能实现多种功能。

用户操作的可视反馈

良好的交互设计提供反馈。这种反馈会让你觉得你正在与屏幕上的元素进行交互,并演示这种交互的结果(不管它是否成功)。

用户界面元素,如按钮和控件,即使它们位于一层玻璃的后面,也应该是可感知的。

按钮和其他活动控件应通过视觉反馈响应用户操作。(图片来源:Behance)

当您需要告诉用户操作结果时,视觉反馈也很很重要。在操作未成功完成的情况下,功能动画以快速、简单的方式提供有关问题的信息。例如,当输入错误的密码时,可以使用震动动画。这样很容易理解,因为晃动是一个普遍表达“不”的含义,就像摇头是人们相互反馈的方式。

用户看到此动画并立即了解问题。图片来源:thekineticui

目的

确认系统已收到用户的操作。

确认(或拒绝)用户的操作。

系统状态的可见性

作为尼尔森的可用性的10大法则之一,系统状态的可见性仍然是用户界面设计中最重要的原则之一。用户希望在任何给定时间知道他们在系统中的当前位置,并且应用程序不应该让他们猜测,系统应该通过适当的视觉反馈告诉用户发生了什么。

数据上传和下载得到过程是使用功能动画的最好时机。例如,下载进度条,给用户实时反馈和心理预期。

有趣的动画也会分散用户的注意力,并使他们等待更长时间。

功能动画还可以用于吸引用户注意应用程序中的重要状态变化,例如来电:

或收件箱中的新电子邮件。

目的:

提供系统状态的实时通知,并使用户能够快速了解正在发生的事情。

视觉提示

用户在第一次使用某个应用程序时,通常需要一些帮助来理解如何使用该应用程序。特别是含有不熟悉或者独特交互方式的界面(如手势操作的界面),这一点尤为重要。如果没有帮助,用户可能会对如何与应用程序交互感到困惑。

当涉及到教用户如何使用你的UI界面时,你应该提供一组视觉提示,来传达哪些是可能存在的交互。这种功能性动画驱使用户注意到可能存在的交互。

视觉提示可以让用户了解将要发生的事情。例如,可以在iOS相机应用程序(iOS 7之前)中找到功能动画,它为用户拍摄照片做准备。