你不需要动画
When done right, animations make an interface feel predictable, faster, and more enjoyable to use. They help you and your product stand out.
当动画处理得当时,它们会让界面感觉更可预测、更快速、更愉悦。它们帮助你与你的产品脱颖而出。
But they can also do the opposite. They can make an interface feel unpredictable, slow, and annoying. They can even make your users lose trust in your product.
但它们也可能产生相反的效果。它们会让界面变得不可预测、缓慢且令人烦躁,甚至让用户对你的产品失去信任。
So how do you know when and how to animate to improve the experience?
那么,你怎么知道何时以及如何用动画来改善体验?
Step one is making sure your animations have a purpose.
第一步是确保你的动画有明确的目的。
Before you start animating, ask yourself: what’s the purpose of this animation?
As an example, what’s the purpose of this marketing animation we built at Linear?
在开始制作动画之前,先问问自己:这个动画的目的是什么?
举个例子,我们在 Linear 制作的这个营销动画的目的是什么?
You can view the full animation on linear.app/ai.
你可以在 linear.app/ai 查看完整动画。
This animation explains how Product Intelligence (Linear’s feature) works. We could have used a static asset, but the animated version helps the user understand what this feature does, straight in the initial viewport of the page.
这段动画解释了 Product Intelligence(Linear 的功能)是如何工作的。我们本可以用静态资源,但动画版本能帮助用户直接在首屏就理解这个功能的作用。
Another purposeful animation is this subtle scale down effect when pressing a button. It’s a small thing, but it helps the interface feel more alive and responsive.
另一个有目的的动画是按钮按下时的轻微缩小效果。这很细微,却让界面更有生命力、更灵敏。
Sonner’s enter animation, on the other hand, has two purposes:
Sonner 的进入动画则有两个目的:
- - Having a toast suddenly appear would feel off, so we animate it in.
- - 如果 toast 突然弹出,会显得突兀,因此我们使用动画让它平滑出现。
- - Because it comes from and leaves in the same direction, it creates spatial consistency, making the swipe-down-to-dismiss gesture feel more intuitive.
- - 由于它从同一方向出现并离开,保持了空间一致性,使向下滑动关闭的手势更直观。
But sometimes the purpose of an animation might just be to bring delight.
但有时动画的目的可能只是为了带来愉悦。
Morphing of the feedback component below helps make the experience more unique and memorable. This works as long as the user will rarely interact with it. It’ll then become a pleasant surp...