移动应用程序中的动效转换

动效是用户体验的重要组成部分。 当涉及到移动应用程序的转换时，有很多东西可以通过动效非常巧妙地沟通交流。 发送消息，打开设置，选中该框，导航到另一页 - 这些都是界面变化的时刻。 在界面过渡时进行动效制作是强化用户行为的绝佳方式。

在本文中，我们将回顾功能性动效丰富视觉设计和支持交互体验的常见情况。

https://dribbble.com/Ramotion

提供系统状态

当用户触发某些操作时，他们希望看到一个视觉响应的反馈 - 系统应该明确表示它已收到请求并正在进行处理。 以下是动效反馈提升用户体验的几种情况：

确认用户操作

用户得到系统收到该操作指令的确认。 当用户有视觉反馈时，这可以防止他们再次重复点击元素。

反馈用户他们的行为结果。https://dribbble.com/ColinGarven

刷新页面内容

使用下拉指令来刷新页面上的内容。 加载指示器（loading）格式的视觉反馈可帮助用户了解系统正在处理他们的请求。

巧妙的动效可以帮助用户理解正在发生的事情。https://dribbble.com/Ramotion

等待内容加载

加载不一定很无聊。 几乎所有的应用程序都可以在加载内容时利用巧妙的动效来防止用户离开。 加载动画可以占用用户的视觉反馈，因此用户会感受到更短的等待时间。

动效可以保持用户在应用程序加载完成之前参与其中。https://dribbble.com/UI8

在多步骤过程中连接不同的步骤

有时用户需要通过一系列步骤来完成操作。 应该清楚的是，每一个步骤之间是相互连接的。 动效可以帮助您连接每一步操作以创建一个完整的旅程。

下面是一个很好的例子关于如何使用动效创建线性事件的进程。

https://dribbble.com/antalik

动效可以帮助设计师创建渐进式披露。 渐进式披露通过减少一次性呈现的信息量，使界面更易于学习。 以下是两个很好的例子关于使用渐进式披露在有意义的模块中提供信息：

https://dribbble.com/Ramotion

https://dribbble.com/AntonSKV

引入新的元素

当我们在页面上引入一个新元素时，我们试图将用户的注意力集中在该对象上，并帮助他们回答这个问题——“为什么我会看到一个新对象？”。当引入新元素时，动效可以帮助您定义对象关系和层次结构。

动效可以显示新物体来自哪里。https://dribbble.com/virgilpana

给用户一种空间定位的感觉

动效可以帮助用户建立更好的空间信息心理模型。 这对于移动用户来说尤其重要 - 将短时间关注和小屏幕尺寸组合在一起可能会导致用户在屏幕迷宫中迷路的情况。

我们可以使用动效来指导用户。 动效有助于解释信息如何从一个区域流向另一个区域。 通过向用户提供关于他们目前正在进行操作的信息，可以防止用户迷路。

方向性动效让你知道你现在在哪里与你来自哪里。https://dribbble.com/johnjbrown

在下面的例子中，浮动动作按钮（FAB）转换为标题，并向用户说明这两个对象之间的相互关系。

动效可以帮助你建立元素之间的关系。https://dribbble.com/anish_chandran

尽量减少认知负荷

认知负荷是使用产品时所需的脑力总量。 认知负荷直接影响用户与您的app的交互方式。 一般来说，使用产品所需的脑力总量越多，这个app就越不理想。

作为设计师，我们的目标应该是创建一个易于使用的界面。 如果使用得当，动效可以减少用户使用过程中完成操作所需的工作量。

在几乎任何应用程序中，用户都必须填写一些表单。 许多表单都将文本占位符作为字段的标签。 当用户点击这个字段时，标签消失。 因此，用户很难弄清这个字段代表什么。 浮动标签可帮助用户保持上下文的连贯，并使其在长表单的交互中更加舒适。

当涉及到用户输入时，不要依赖用户的内存。 使所有关键信息可见。https://dribbble.com/mds

允许用户理解功能变化

功能性的改变发生在元素进行交互之后改变其功能时。 例如，当用户点击按钮时，该按钮将意味着不同的意义。 这个动效可以帮助用户找到问题的答案——“这个元素现在意味着什么？”。

一个功能变化的常见例子是切换， 可以在很多移动界面中看到。动效可以帮助用户了解元素所处的状态。

在点击按钮上使用动效，以便用户可以看到更改。https://dribbble.com/jurrehoutkamp

在某些情况下，单个元素的功能变化会导致整个视图的功能变化。 例如，一个汉堡菜单变成'X'并激活一个新的视图。

向用户明确表示对象实用程序已更改。https://dribbble.com/tamaskojo

结论

在复杂的交互操作时，动效的功能是强大的。 它解决了界面中的许多功能问题，并使他们感到活跃并真正对用户作出交互反馈。 无论您设计什么应用程序，它都会向您的用户讲述故事。 动效的功能可以帮助你更加有效地讲述故事。

我的设计作品（Dribbble）：https://dribbble.com/exciting

---

本文翻译来自Medium感谢Nick Babich

原文链接