将UI动效做得更好的技巧大全 — 包你嗨英语

将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

Good to great UI animation tips:Practical suggestions to improve your UI micro-interactions.

优化 UI 的动效小技巧:改善 UI 微交互的实用性建议

Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation.

让我们一起看一些 UI 动效从好到优秀的例子。通过小细节的调整,动效可以使你的 UI 格调达到一个新的高度。

The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon.


To create these animations, I followed the guidelines from Material Motion, IBM’s Animation Principles, and The UX in Motion Manifesto.

为了创建这些动画,我遵循了 Material Motion, IBM’s Animation Principles, 和 The UX in Motion Manifesto 中的指导原则。

All of the interactions were made using the early-access version of InVision Studio. You can download the source files here.

所有的交互都是使用 InVision Studio 的早期版本进行绘制的。您可以在此处下载源文档。

Make the content in tabs slide.


将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

The content on the left fades in and out. The one on the right slides with the tabs.


A good animation fades the content in and out from one state to another.

A great animation shows continuity in a transition by making the content

move between states.



When you design an interaction like a tab or a fly-out menu, try putting the position of the content relative to the action that opens it. This way you can animate not only the visibility of the content but the position too. Oh, and while you’re at it, add a swipe gesture that takes you from one piece of content to the other.


Connect the shared elements of a card


将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

The content on the left opens a new screen that slides up. The card on the right expands and fills the screen.


A good animation uses transitions like push left or slide up to show the content on a detail screen.

A great animation establishes a connection between two states by animating the shared content.



When animating between different states, see if there are any shared elements between them and connect them. With InVision Studio, components that are repeated between two linked screens are automatically connected when you create a Motion transition. This makes prototyping animations a breeze.

在不同状态之间制作动效时,查看它们之间是否存在任何共有元素并连接它们。使用 InVision Studio 时,在创建 Motion 转换时会自动连接两个链接屏幕之间重复的组件,这使得原型制作动画变得轻而易举。

Check out the Motion Manifesto to see the types of animations you can apply. The example above uses a combination of the Masking, Transformation, Parenting, and Easing principles.

查看 Motion Manifesto ,了解更多你可以应用的动画类型。上面的示例使用了Masking,Transformation,Parenting 和 Easing 原则的组合。

Use a cascading effect in your content.

在你的 ui 中使用瀑布效应的动效。

将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

The cards on the left appear by sliding and fading in. The ones on the right feature the same animation, but each card has a short delay.


A good animation changes the position and opacity of the material when it enters the screen.

A great animation quickly staggers the appearance of each group or element.



To accomplish the waterfalleffect, try applying delays to each piece or group of content. Keep the same easing and duration, so it feels consistent. Don’t cascade each little element, though—animate the groups of content. Keep the animation quick and snappy. Google recommends beginning each element no more than 20ms apart. Check out the choreography principle in Material Motion to see more examples.

要完成瀑布效果,请尝试对每个内容或每组内容应用延迟效果。保持相同的缓度与持续时间,这样在视觉上会感觉一致。尽管如此,在做一组内容的动效时,不要对每个小元素进行级联效果。尽量保持动画的快速和活泼。谷歌建议开始每个元素不超过 20 毫秒。查看 choreography principle in Material Motion 中的更多示例。

Make the content push other elements out of the way.


将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

The animation on the left animates on top of the other content. The animation on the right pushes the content out as it grows.


Good animations move and show elements in context.

Great animations show elements affecting their surroundings when they




Make the elements in your content aware of their surroundings. This means making the content attract or repel the elements around it. For more examples check out the Aware motion principle from Material Design.

使你的内容中的元素感知周围环境,这意味着使内容吸引或排斥其周围的元素。有关更多示例,请查看 Material Design 中的 Aware 运动原理。

Make menus appear in context.


将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

The menu on the left flies in from below. The menu on the right expands from the action that created it.


Good animated menus show the content appearing from the direction of the button that opened them.

Great animated menus emerge from the action that created them, growing from the point of touch.




Use buttons to show different states.


将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

The button on the left shows text indicating states. The button on the right uses the container to show different events.


Good interactions display the events next to the button.

Great interactions use the button itself to show the different states.



Try using the container of a button to provide visual feedback of a status. For example, you could replace the CTA with a spinner or a loading animation; or you could add an animation to the background showing progress. The solution is up to you, the idea is to use the space the user is already interacting with. Bonus points if you use the button color and copy to confirm a success state.

尝试使用按钮的容器来提供状态的可视反馈。例如,可以使用下拉列表或加载动画来替换 CTA(CTA 即 Call to Action,又叫行为引导按钮);或者可以在背景中添加显示进度的动效。我们的想法是在用户已有的交互中构建交互空间,当然解决方案的选择取决于你自己的喜好。如果使用按钮颜色和复制来确认成功状态,更是一条不错的加分项。

Bring attention to something important.


将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语

The example on the left uses color and position to make an element stand out. The one on the right uses a subtle animation to call the user’s attention.


Good design uses color, size, and position to highlight an important action the user needs to notice or act upon.

Great design uses animation to bring attention to that important action, without being disruptive.



When the user needs to act on something important, try animating the actions to attract their attention. Start with a subtle animation and increase the intensity (change of size, color, and speed) in relation to how important the action is. Use this only for critical actions—the more you use this effect, the less impactful it becomes… and the more annoyed your user gets.

当用户需要对重要事项采取行动时,请尝试设计动效以吸引他们的注意力。从一个细微的动画开始,增加与动作重要程度相关的强度(大小,颜色和速度的变化)。仅将其用于关键操作 - 您使用此效果的次数越多,其影响就越小......用户获得的烦恼就越大。



I hope these examples help you make better decisions when adding animations to your interactions. With new animation and prototyping tools like InVision’s Studio, I predict we’ll soon start seeing a renaissance of creative interactions. We just need to remember to use this new superpower responsibly.

我希望这些案例可以帮助你在为交互添加动效时做出更好的决策。借助 InVisionStudio 等动效原型图制作工具,我预测我们很快就会看到创意互动的复兴。我们只需要记住去使用这个新的超强工具。

Let’s apply animation to explain changes in states, draw attention to necessary actions, determine relationships between elements, and add a bit of fun and character to our products. By following these principles, we’ll transform our animations from good to great.


Happy animating!



将UI动效做得更好的技巧大全 — 包你嗨英语
将UI动效做得更好的技巧大全 — 包你嗨英语