深度分析动效设计原理，提升产品可用性！

大家好，我是Clippp。今天为大家带来的文章是「动效」设计。动效在产品设计中扮演着重要角色，它的好坏与否直接影响了用户的使用体验和对产品的印象。

2020年的第35篇分享

本文追根溯源，先从动效的起源讲起，一步步推进与产品、体验之间的关系，最后通过案例分析动效设计的原理和应用。一起来看看吧～

动效设计的起源

• 将动效设计与UI动画区分开;
• 阐明动效如何帮助可用性;

• 解开核心动效的内部工作机制。

动效设计与用户体验

‍

‍

• 期望:当用户与界面交互时，他们期望看到哪些行为？动效是否符合预期或引起混乱？
• 连续性：交互在整个体验中是否发生一致的运动行为？
• 叙述：触发的动作是否与满足用户意图的事件的逻辑进程相关联？

• 关系：UI界面的空间、美学和层级结构如何相互关联并影响用户的决策？动效如何影响各种元素的关系？

产品动效设计原理

‍

‍

• 可交互的元素移动速度更快，出现在前景中;
• 非交互式元素移动速度较慢，退到背景中。

‍

‍

总结——动效即交流

—  The End  —

原文：toptal.com/designers/ux/motion-design-principles

作者：Micah Bowers

译者：Clippp