
动效是用户体验的重要组成部分。 当涉及到移动应用程序的转换时,有很多东西可以通过动效非常巧妙地沟通交流。 发送消息,打开设置,选中该框,导航到另一页 - 这些都是界面变化的时刻。 在界面过渡时进行动效制作是强化用户行为的绝佳方式。
在本文中,我们将回顾功能性动效丰富视觉设计和支持交互体验的常见情况。

提供系统状态
当用户触发某些操作时,他们希望看到一个视觉响应的反馈 - 系统应该明确表示它已收到请求并正在进行处理。 以下是动效反馈提升用户体验的几种情况:
确认用户操作
用户得到系统收到该操作指令的确认。 当用户有视觉反馈时,这可以防止他们再次重复点击元素。

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

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

在多步骤过程中连接不同的步骤
有时用户需要通过一系列步骤来完成操作。 应该清楚的是,每一个步骤之间是相互连接的。 动效可以帮助您连接每一步操作以创建一个完整的旅程。
下面是一个很好的例子关于如何使用动效创建线性事件的进程。

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


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

给用户一种空间定位的感觉
动效可以帮助用户建立更好的空间信息心理模型。 这对于移动用户来说尤其重要 - 将短时间关注和小屏幕尺寸组合在一起可能会导致用户在屏幕迷宫中迷路的情况。
我们可以使用动效来指导用户。 动效有助于解释信息如何从一个区域流向另一个区域。 通过向用户提供关于他们目前正在进行操作的信息,可以防止用户迷路。

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

尽量减少认知负荷
认知负荷是使用产品时所需的脑力总量。 认知负荷直接影响用户与您的app的交互方式。 一般来说,使用产品所需的脑力总量越多,这个app就越不理想。
作为设计师,我们的目标应该是创建一个易于使用的界面。 如果使用得当,动效可以减少用户使用过程中完成操作所需的工作量。
在几乎任何应用程序中,用户都必须填写一些表单。 许多表单都将文本占位符作为字段的标签。 当用户点击这个字段时,标签消失。 因此,用户很难弄清这个字段代表什么。 浮动标签可帮助用户保持上下文的连贯,并使其在长表单的交互中更加舒适。

允许用户理解功能变化
功能性的改变发生在元素进行交互之后改变其功能时。 例如,当用户点击按钮时,该按钮将意味着不同的意义。 这个动效可以帮助用户找到问题的答案——“这个元素现在意味着什么?”。
一个功能变化的常见例子是切换, 可以在很多移动界面中看到。动效可以帮助用户了解元素所处的状态。

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

结论
在复杂的交互操作时,动效的功能是强大的。 它解决了界面中的许多功能问题,并使他们感到活跃并真正对用户作出交互反馈。 无论您设计什么应用程序,它都会向您的用户讲述故事。 动效的功能可以帮助你更加有效地讲述故事。
我的设计作品(Dribbble):https://dribbble.com/exciting
本文翻译来自Medium感谢Nick Babich
网友评论