UI中使用动效的3个关键点【百科全说】

小编：动效如今也是很受欢迎的一种设计表现形式，它不仅可以缓解用户在等待的焦虑情绪，还能大大的提高用户的使用体验。动效是强大的，好的动效可以让你的作品很快的脱颖而出即使是最常规的交互。一起来看看使用动效的3个关键点！

随着技术的快速发展，动效不再是视觉上的华美，更多的用户所要求的期望功能。动效解决了很多功能问题和接口，可以真正与用户互动。

下面让我们探索动效的关键策略，提高界面接口的功能增加情感的力量。

1.系统状态

在你的程序在后台总发生一些过程，如正在从服务器下载数据，进行计算。这总是需要一些时间的。你需要让用户知道这个程序没有冻结，显示正在处理的状态。视觉交互给用户一种控制程序的感觉。

加载完成度

加载时间对大多数产品是不可避免的。而动效虽然不能解决这个问题，但会减少一点问题。

当我们不能缩短时，当然可以使等待变得更愉快。

有创意的过程动效可以减少用户感知的时间。动效影响用户感知你的产品，使它看起来比实际上更好。

如果一个应用在加载时为用户提供了一些有趣的事情，这会使得用户更少等待本身。

图片来源：Ramotion

下拉刷新

这组很流行的动效是“下拉刷新”，它发起一个移动设备上的内容更新的过程。

图片来源：Zee Young

提示：刷新动效应该与设计整体匹配——如果应用很小，动效也应该是。

通知

因为运动会吸引注意力，动效是一个令人愉快的方式可以与没有太多的用户进行交互。

移动的对象立即抓住了用户的注意力。图片来源：Arjun Kani

2.导航和转换

最基本的动效是转换。这种类型的动效背后的逻辑是帮助用户理解发生在页面上的布局的变化，改变了什么以及以后如何再次改变。一个典型的例子是一个汉堡包按钮，进行切换隐藏内容。

动效设计可以有效地引导用户愉快的接受通知。

图片来源：Gal Shir

尽管汉堡包动效可能在这里是最推荐的，还是有很多其他方式的动画导航。

导航之间的转换

设计师使用动效在导航之间切换用户上下文，解释屏幕上的元素的变化。

不同状态之间的转换应该充当中介的UI,帮助用户理解屏幕上的变化是发生了什么。

图片来源：Ehsan Rahimi

视觉元素之间的层次结构和联系

动效可以完美的描述对象，并说明它们如何进行交互的。

动效说明了元素是如何交互的。

图片来源：Vitaly Rubtsov

功能变化

在某些情况下，设计师们不得不设计一个在一定条件下变化的操作按钮。我们经常在空间受限的手机设计中看到。

“开始”和“停止”按钮可能是最常见的多态按钮的例子。

图片来源：KREATIVA Studio

这种类型的动画显示了当用户进行交互时元素是怎样改变的。在下面的示例中，当用户按浮动操作按钮，加号变成了一支铅笔。这表示铅笔是主要的功能。这个小的细节意味着接下来发生不同的情况，知道图标意味着这两种状态。

按钮改变从一个“ ”到“铅笔”表明按钮的功能发生了变化。

图片来源：Material Design

3.视觉反馈

视觉反馈对于任何用户界面都至关重要。它可以让用户有控制感，让用户感觉理解在给定的时间的当前上下文的系统。

反馈确认

用户界面的元素如按钮和控件应该是真实的，即使他们是在另一个图层后面。

在物质世界中，按钮、控件和其他与我们进行交互的对象。人们期望用户界面控件具有类似的响应能力。

为了弥合这一差距，视觉和运动轨迹需要即时输入，动画的外观和方式可以直接进行操作。

按钮响应用户的点击。图片来源：Material Design

可视化的行为的结果

动效可以提高每一个交互并且是加强用户预成型的操作。

在下面的例子中，当用户点击“支付”，一个转轮短暂出现在应用中表示成功的状态。动效让用户觉得他们可以很容易支付而且用户会很喜欢这样的细节。

视觉反应可以增加用户的参与度并取悦用户。图片来源：Michaël Villar

工具和教程

下面的教程可以帮助你把动效融入你的Android或者iOS项目中：

用Adobe After Effects制作动效
用图形和动效指南帮助你为应用程序添加一个动效到你的Android程序
使用iOS自定义的动画项目

总结

动效在使用时是一种强大的复杂的方式。它为设计增加了生命，即使是最简单的交互，也能让你的作品脱颖而出。精心设计的动效增强用户体验。

谢谢。

uxplanet

原文作者：Nick Babich

译文地址：UI中国

译者：厉嗣傲

UI中使用动效的3个关键点