前言

近几年动动效系统已被各种规模的团队采用。无论是简单的样式参考还是完整的设计指南，设计师和开发人员都以此进行更高效的沟通交流交流。

某些团队已经将动效设计集成到大的设计系统中，也有团队依旧专注于颜色、版式和按钮等更静态的组件。基于Google Material，Shopify Polaris，Salesforce Lightning等设计系统，都在朝着更加结构化的方向发转，我们也将动效设计集成为一个更为完善的设计方针，本次就为大家进行详细分享。

基本要义

1-名词释义

动效设计是平面设计与动画设计的中间学科，能更有效地传递信息、表达氛围。

能在UI设计中使用和谐准确富有张力的动态展示形式，表现场景之间的转化，让用户能充分了解其操作的变化，以达到提升用户体验的目的。

2-价值

使信息更明确；使等待不枯燥；使变化不生硬；使反馈不单调；使体验有情感；使用户更愉悦

清晰表达产品层级关系，使界面衔接更自然

为产品注入活力

吸引用户关注，便于用户理解

完善交互，提升用户体验

情感化设计减少用户焦虑感

提高研发效率

3-原则

和谐：良好的动效关系能和谐合理自然地展示页面中的各元素状态

准确：快速精准的用动效展示元素运动关系，避免用户过长时间的等待，造成不必要的干扰

有意义：无意义的动效只会分散用户注意力，增加页面加载难度，降低用户体验

富有张力：适当的夸张、富有情感化的动效可以用于品牌个性的展示与塑造

4-设计方向

功能性：每一帧都有着明确、合理的目标，清晰有逻辑性的微妙动画，能减少认知负担，防止页面转换视盲，在空间关系上建立更好的回馈

创意性：增加产品趣味性与品牌特色,让用户产生兴趣并提高认知度

（配图皆来源于网络 侵删）