跳到主要内容

动画功能

动效动画是设计系统中非常重要的一部分,其作用和功能对于提高用户体验、品牌形象和系统可用性都有着积极的作用。

在企业级应用的设计中,动效需要在尽可能短的时间内有效的完成过渡。


取悦用户

动画可以将普通体验转变为令人难忘的互动。

提升品牌形象

动效动画可以使界面更加生动有趣,给用户留下深刻印象,提高品牌形象和用户忠诚度。

教育用户

动画可以提供上下文和信息,而无需额外点击等操作。

连接多步骤中不同的步骤

用户需要通过一系列的步骤来完成操作,步骤和步骤之间是需要连接起来的,借助动画,帮助用户将流程串联起来,顺畅地完成整个历程。

设计师能够使用动画创建渐进式的展现形式。渐进式的展现能够减少一次展现出来的信息量,使得界面更加顺畅,易于学习。

引入新元素

当我们要在页面上引入新的元素或者控件的时候,我们会尝试引导用户的注意力到特定的对象上,并且告诉他们「为什么会有一个新东西进来」的原因。在引入新元素的时候,动效能够帮你界定这个元素和其他元素的关系,以及层次结构。

给用户以定位感

动画效果可以帮助用户构建更好的空间感。对于移动端用户而言尤其重要,因为小屏幕上用户的交互是非常敏感的,没有空间感是很容易迷失的。

我们可以使用动效来引导用户,动效有助于阐释界面的「空间变化」,也可以更好的解释界面之间的切换或者变化,通过为用户提供相关的信息,防止用户迷失。

减少认知负荷

当用户需要花费心力去尽力理解某个事物的时候,这个认知负荷就很重。一般而言,越省心的产品,认知负荷就越低。

作为设计师,我们的目标应该是创建易用的界面,如果设计得当,动画能够帮助用户减少认知负荷。

当用户需要输入信息的时候,不要指望用户的记忆,关键信息要可见。

帮助用户理解功能变化

当元素在交互之后功能发生改变之后,动效能够帮助用户理解功能上的变化。例如,当用户点击按钮之后,这个按钮将会带来什么样的改变。通过动效,用户可以获得「这个东西的功能是什么」的答案。

聚焦用户

动画可以吸引注意力并突出显示重要的数据或关键设计元素。

呈现系统状态

当用户通过交互触发界面行为的时候,他们希望能够看到视觉上的响应——整个交互系统应该明确地表示它已经收到了请求并且进行处理。

以下是动效反馈几种常见的情况:

  • 确认用户行为:系统收到用户的反馈之后,通过动效告知用户它已经收到反馈了,视觉反馈防止了用户再进行更多的操作。
  • 通知用户交互的结果
  • 下拉刷新更新内容:以加载指示器为代表的视觉反馈告知用户,系统已经开始处理之前的请求了。
  • 等待内容加载时的动画:加载动画给予用户「信息正在逐步加载」的视觉反馈,因此用户会在这个过程中感觉时间没有实际上那么快。