设计师就业衔接班！45天 PS、AI、AE 从入门到入行 详情戳>>>
本文追根溯源，先从动效的起源讲起，一步步推进与产品、体验之间的关系，最后通过案例分析动效设计的原理和应用。一起来看看吧～
我们在进行设计的时候，往往遇到以下的场景：这就是信息的无限性和手机屏幕的有限性之间的矛盾，如何把信息合理的展示给用户，需要我们重新对信息进行组织分类，使信息能更高效有序地被用户认知。在进行信息设计的时候，我们会经常遇到「扁平化设计」这个词，在我的理解看来，扁平化设计可以理解为：「精简交互步骤，用户用最少的步骤就完成任务」。
迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则，是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点（译者注：这本书在豆瓣的评分有9.3分，值得一看）。这些原则最初是用来为动画片这种传统的形式设计的，然而，这些原则也同样适用于 UI设计。
编者按：本文由负责Material Design 动效设计的谷歌设计师撰写，帮助大家深入理解动效的作用，才能做出更好的动效设计。有时候现代科技产物使用起来非常复杂，但是其实「复杂」本身没有好坏之分：不好是因为没有处理好这个复杂所以产生了「混乱」，所以应该被批评的不是复杂而是因复杂所产生的混乱。
动画效果如今已经深入到 UI界面的每个角落。屏与屏之间的切换因为动效而显得更加连贯，交互的上下文逻辑也因为动效的加持而更加清晰。
上篇内容回顾：《最全最好用的动效落地方法，都帮你总结好了（上）》接下来进入下篇。主题是：从 Web 前端的角度来讲，有哪些便捷的方法实现这些动效？
用户体验设计的发展日趋完善，优秀的动效是完善用户体验中不可或缺的一环，优秀的界面动态设计可以让产品的用户体验锦上添花……你会说，这些道理我都懂，但是动效做起来真的很麻烦啊。
本篇文章不长，但是干货满满，希望能给大家带来一些实际帮助。下面进入译文。
一、前言B类产品设计过程中会遇到各种各样的问题，不同问题有不同的解法。有的问题不适合用动效去解决，盲目无意义的动效不仅浪费设计师及开发成本，更会降低产品性能、分散用户操作注意力等。
本设计指南适用于UI界面中交互微动效，涵盖入场、出场动效，过渡动效和加载动效，在时间和缓动曲线的选择上提供了一些通用的设计建议，帮助设计师理清动效设计思路，提高设计效率。一. 本指南的适用范围本指南适用于UI界面中交互微动效，属于功能性动效。
如何吸引用户注意力： 1.人性化：尽量不要传达系统消息感，可以考虑用人物对话等更有温度的形式来包装 2.个人IP：头像在互联网世界中，如同现实世界的名字一样，都是属于个人形象IP的一个标志，更容易被用户关注到
讲的非常好，很感谢，但是文章中有一点点小问题，比如说文章中有一处是长边完全显示，写成了短边完全显示，会加长阅读的时间。不过也无伤大雅，总之很感谢！
思路非常好，点个赞，现实很多设计师在设计中更多是在参考需求原型，而没有跳出原型去思考设计策略，所以当面试官问到这个问题的时候不知道怎么说。 文章最后给出的设计策略个人觉得还是并不能解决问题。对于商品交易，除非复购或者对此商品非常了解，缩短交易路径是可用的，但是这只能复盖很小一部分场景，缩短交易路径的方法并不是单纯地缩短操作路径，这是很多新手都会走的误区...
特意登录感谢无私的大神
受益匪浅，感谢作者分享，期待后续文章
如何吸引用户注意力： 1.人性化：尽量不要传达系统消息感，可以考虑用人物对话等更有温度的形式来包装 2.个人IP：头像在互联网世界中，如同现实世界的名字一样，都是属于个人形象IP的一个标志，更容易被用户关注到