【原译】下一个转场，动画见

王广西

好的动画转场能够提升用户体验，今天翻译的文章将说明动画与用户体验的关系，以一些精彩的动画转场案例。以下是译文：

在设计数字产品时，为用户提供无缝体验是广受欢迎的目标。 现代设备和软件已经实现了在屏幕上进行元素之间的复杂过渡，作为设计师，我们应该接受这种为更好的用户体验索带来的发展。 但是如何定义一个好的转场呢?

好的动画是看不见的。 你不注意到你是在看动画。 ——帕斯夸里德

1. 动画和用户体验

为了更好地定义转场，了解动画和用户体验之间的关系非常关键。

动画贯通上下文
如今，数码产品已经能够使我们做之前难以想象的事情，如从你的手腕上订购一辆出租车或无需思考就能准备好一顿饭。 随后，这意味着作为一个成功的产品界面设计师的工作是至关重要的。 通过所有这些复杂的交互和可能性，用户可以快速贯通和产品定位。 如果元素在屏幕上突然(重新)移动，你可以失去对界面的理解。在电影中当有人经过时间机器时使用动画和音效并不罕见，所以在界面设计时也很自然地使用动画。

动画提供反馈
使用动画可以为用户提供有价值的反馈，而不会弄乱界面或避开用户信息。 一个很好的例子是iOS上的相机应用程序，当它试图对焦于一个对象，十字准星淡入并通过收缩模仿抓住焦点。当抓住正确的焦点，曝光会闪烁两次然后逐渐消失，告知用户准备拍照了。 这些类型的动画在没有避开用户的前提下提供非常具体的信息。

动画突出重点
如果一个界面功能拥有很多元素，它可以将用户的注意力在屏幕上转移到一个特定的元素。 使用动画使设计师能够通过位置，规模和不透明度来吸引用户的注意力。 另一个技巧是使用异步时间轴动画将注意力放在变化的元素上。

如果不使用动画，流程会感觉不流畅；如果不是，这可能意味着你的动画是多余的。 ——迈克尔·维拉尔

动画不解决用户流程
动画绝对可以帮助提高界面使用体验，但仅仅是一小部分的用户交互。动画可以帮助用户去理解的他们的设计之路，但需要确保路径是通往正确的目标和期望。

2. 交互设计中的动画

动画可以提升用户体验，但并不是每一个动画都适合你的产品。诺基亚在2010年做过研究，他们得出的结论是，用户就动画作为一个过渡的一部分是喜忧参半。 不过通过使用不同的速度和动画曲线，他们能够确定哪些是最理想的动画。

缓冲

计算机生成的动画是非线性的，而使用缓冲动画被证明是自然并更令人愉悦的。 诺基亚发现动画从慢到快的发展通常经历了从低到高的产品，最有可能是因为产品提供了慢于预期的反馈。

产品提供的反馈应该尽快转为产品消息并快速响应，即使最终到目的地的路径很缓慢。 如果已经展示出了产品的进步，用户通常更倾向于等待新的改变，所以越快地反馈进展，与用户建立连接也越快。 只要确保你的加载时间快，不必显示一致的进程，可以向下面这样：

3. 动画转换的精彩案例

在用户界面上我们已经收集了一些例子，这些案例都增强了用户体验。

iOS上的日历
为了确保用户了解他们的日历，它提供了一个缩放和规模动画以保持上下文在屏幕之间的灵活过渡。 因为缩放动画，用户就会被呈现一种无形的系统布局，即底部是全年日期，上面一层是具体月份。

可见缩放动画帮助贯穿上下文。

iOS上的Facebook
使用动画来改善转场的另一个很好的例子是在Facebook应用程序中打开和关闭照片。无论点击任何照片，它都会提供一个全屏视图的照片。为改善体验，你点击停留在屏幕上的照片和自动变焦，而背后的界面和它的周围会逐渐淡入。关闭照片回到图片在时间轴的原有位置。所以使用这些小动画的界面很容易追踪正在发生什么。

Iconjar
这些动画并不限于移动设备。 例如在Iconjar网站上，当你点击一个链接它将揭示以无缝的方式打开一个下拉菜单。 因为下拉单的出现和隐藏，用户理解到它是源于你点击才出现的。

4. 总结

动画不仅提供美观的界面，还可以是真实的用户体验改良剂。关键在于在有趣和功能之间找到合适的平衡点，并确保用户流程是在没有动画的前提也是好的。一个良好的过渡是不突出的，不仅增强了用户体验，同时是有趣的。

来源：medium   

博客无法插入动画视频，点击可查看：下一个转场，动画见

晨嘉哒

厉害