对于UX来说，动画是伟大产品设计的关键吗？

作者：Daniel Korpai?

原文链接：https://www.invisionapp.com

优秀的视觉和完美的UI不足以在应用程序的海洋中脱颖而出。

　　假如没有动画，即便是最周到的界面也会让客户感到困惑，让他们觉得自己在没有上下文的情况下做出选择。

　　良好的动画将您的设计客户体验提升到一个新的水平，为您的客户提供愉快，满意和流畅的体验。

　　动画，有时在移动应用程序的情况下结合声音和触觉反馈，使得使用应用程序的笼统体验更具触觉性，更接近现实，减少认知负荷，由于客户可以在使用时更快地识别所有连接和上下文应用程序。

　　在本文中，我的目标是收集创立动画界面时必不可少的所有关键准则，无论您使用哪种工具，框架或者技术。

　　这一切都是关注焦点和注意力

　　应用程序中任何动画中最重要的工作是提供上下文并指导客户的关注点，以取得引导和流畅的体验。

　　您可以在这里看到动画如何提供上下文并将不同的屏幕连接成一个有凝聚力的体验(Joshua Oluwagbemiga设计)

　　动画有助于连接其余未连接的屏幕，因而客户在浏览和使用您的应用或者网站时不会感到迷失。

　　为了从动画中取得最佳效果，限制是关键。很容易被动画带走，并在屏幕上动画一切，但这首先打破了融入动作的核心价值。

　　使用序列为您的动画带来顺序和层次结构

　　在客户界面上一次动画化每个元素就像每个人同时在一个房间里说话一样。

　　看看所有这些酒吧是如何移动的?(GIF by Anton Tkachev)

　　当您需要在屏幕上为多个元素设置动画时，请始终在它们之间使用短暂的推迟。肯定要保持动画的缓和和持续时间，所以一切都感觉一致。对于快速流畅的动画，请尝试在动画元素之间使用不超过20毫秒的推迟。

　　有关更多示例，请查看Material Motion中的编排原理。

　　速度是良好动画的关键

　　通常通过改变动画的持续时间(过渡持续多长时间)和缓和(随时间加速)来控制动画的速度。

　　动画的持续时间可以决定整体客户体验。

　　适时的动画就是一切。(Charles Patterson的Unsplash概念)

　　作为一般规则，尝试使用持续时间为0.3s-1s的动画。

　　动画比0.3秒更短的可以感觉到几乎不存在，由于它很容易错过的过渡，当客户不通知他们，这样的速度可能会导致紧张和混乱的客户。

　　但是长动画并没有好多少; 超过1秒的动画可能会感觉很慢，并妨碍与界面交互。

　　使用更快速和更快速的动画的一个巨大好处是它可以让您的应用感觉更快;

不幸的是，情况恰恰相反。假如你的动画滞后，你的应用程序会感觉破碎，通常很慢，并且使用起来不愉快。

　　速度不仅适用于动画的持续时间，还适用于触发手势和动画开始之间的滞后。例如，当在图像之间滑动时，假如滑动手势和动画开始之间存在滞后，则完整的体验被破坏并且在图像之间快速滑动将感觉像是不可能完成的任务。

　　尊重物理定律

　　在现实世界中，没有什么能够瞬间开始或者中止。因为摩擦等自然力量，事情需要时间加快和减速。

　　动画体现得越自然，客户需要的认知负荷越少，习惯并了解其目的。

　　这就是春天动画应该如何运作(GH by Ehsan Rahimi)

　　但是，除了动画的持续时间之外，肯定要熟习不同类型的缓动(随着时间的推移加速)。

　　设计中使用的缓和类型：

　　线性：没有任何缓和的动画。这是最不自然的缓和类型，因而只有在必要时才能明智地使用它。

　　缓入：加速宽松。动画开始缓慢并快速结束。

　　缓解：缓和减速。动画快速开始并在结束时减速。缓解通常是最佳选择，由于快速启动会给出响应感，同时依然会在最后提供自然减速。

　　缓和：加速和减速，相似于汽车的移动方式。肯定要使用较短的动画(约0.3-0.5秒); 否则，它会感觉很慢。

　　Spring：带有弹跳结束的动画。因为其俏皮性和响应性，常用于现代应用程序。

　　使用正确的动画，您的应用程序可以感觉像是自然世界的延伸，而不是笼统，奇怪或者不连贯的体验。

　　将动画连接到交互

　　动画通常在应用程序中的两个场景中触发：在加载屏幕期间/之后，以及客户通过滑动，点击或者拖动与界面交互时。

　　交互类型始终决定将触发的动画类型。例如，假如客户在屏幕上向上滑动，则动画将通过屏幕底部的向上滑动动画显示新元素。另一个例子是当新屏幕从右侧滑入时，客户将期望通过向左滑动手势导航回到前一屏幕。

　　我们就是这样做的：将触摸交互与动画联络起来 – (玛莎伯格曼的缩放日历)

　　在设计和应用动画时，请始终考虑将首先触发这些动画的不同交互。

　　使用动画原型来传达您的想法

　　实现动画，尤其是自己设置动画，始终是一项挑战，需要设计人员和开发人员的额外努力。

　　为了使这个过程尽可能轻松，许多设计师使用可以与开发人员共享的高保真原型，开发人员可以检查和复制动画的代码。

　　使用高保真动画原型是设计人员与开发人员交流动画创意，处理方案和要求的最有效方式。

　　理解动画在您的设计语言中的重要性?Jakub Antalik的互动)

　　确保以一致的方式使用动画，就像任何其余视觉元素一样。将您的动画集成到您的设计系统中可以改变整体客户体验和设计过程。

　　摘要

　　正如您所看到的，动画是创立出色客户体验的关键部分，而不仅仅是事后的想法。从一开始就开始考虑动画和交互，这样您即可以专注于整个产品设计过程中的整体客户体验。

　　这些动画原理是永恒的，无论你是熟习动画还是已经理解它们的一切，这些都是在设计新的动画和交互时总是值得牢记的少量关键规则。

　　我只能鼓励大家开始尝试iOS / Android应用程序或者基于Web的项目的动画。动画是产品设计中最有趣的部分!