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.

让内容跟随标签一起滑动

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

连接卡片间的共有元素

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 中使用瀑布效应的动效。

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.

让内容将其他元素推开。

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 

change.

好的动效在移动时并在上下文中显示元素。

优秀的动效展示了当他们做出改变时周围的元素也跟着进行改变。

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.

使菜单显示在上下文中

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.

使用按钮显示不同的状态。

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.

还有一些重要的事情需要注意

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.

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

Conclusion

结语

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!

让我们一起开心的使用动效吧！

小彩蛋：感谢你阅读到文章的最后，获取更多国外优秀设计第一手资讯，请关注微信公众号：包你嗨设计英语学习社区