原文链接：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的项目的动画。动画是产品设计中最有趣的部分!
网友评论