设计界面动效我们需要什么

设计的本质是解决问题，动效设计自然也不例外，当打算在界面中加入动效元素时，我们应该先明确

清楚动效设计的价值所在，而不只是出于对「酷炫」或者「潮流」的盲目追求。从商业价值和体验价

值两个角度，大概总结如下：

1. 商业价值

通过动效设计可以更好地吸引用户注意力，提升用户对内容的点击探索欲。比如说，当我们在业务上

非常希望用户去触发某个互动入口时，除了在视觉上进行强调，也可以给这个互动入口在合适的时机

加上合适的动画（比如从屏幕边缘飞入、旋转出现、发光闪烁等），使之更容易被用户注意到、产生

可交互的认知，进而触发交互行为。案例：以下 App 里图片上标签的圆点有扩散动效，点击可以查

看所有相关的聚合内容。

通过动效设计可以提升用户使用时的舒适度，或者制造一些「小惊喜」让用户产生快感和满足感，使

用户感到不那么枯燥，从而达到提升用户使用黏性，更好地留住用户的目的，甚至还可以吸引用户主

动进行传播，扩大产品影响力。案例：下面这个 App 中，当完成一件任务的时候，会出现满屏彩纸

片飞舞的动效，带给用户惊喜和成就感。


通过动效设计可以辅助视觉元素更好地传达产品品牌味道，成为产品设计语言的重要构成之一，加强

与竞品的差异化，强化用户对产品品牌的感知。

具体到指标上，可以通过 UV 点击率、留存率、满意度、认知度、舆情反馈等来进行综合验证和衡量

，评估动效设计是否达到了效果。

2. 体验价值

动效设计可以描述当前情境，更清晰地体现内容元素之间的逻辑和层级关系，帮助用户理解上下文、

知道当前所在位置。

动效设计可以引导用户的操作浏览，给用户以明确的方向感，而不是对下一步该看什么、做什么感到

不知所措。

动效设计可以促进用户的情感体验，缓解用户的焦虑情绪（比如等待期间）、制造惊喜等。

遵循原则：动效应该是自然、和谐、可用的

不是简单地动起来、或者凭感觉调两下就叫动效设计，动效设计应该有其基础原则。在此主要从物理

规律、品牌调性、可用性三方面进行总结。

1. 物理规律

动效设计应该是自然的、贴近现实生活的，元素的运动轨迹应该符合真实世界的物理规律，这样能让

用户更快地认知、理解和接受，而不是感到突兀和不协调。比如元素从可视区域外进场是逐渐减速的

ease out 曲线，从可视区域内离场是逐渐加速的 ease in 曲线，都是符合我们的物理常识的（想象

一下一个元素从界面中向下掉到界面外，是不是像真实世界里的自由落体运动），在决定一个元素的

运动曲线时，不妨从物理世界中寻找隐喻，比如设计一个元素点击出现、然后上升消失的过程，可以

参考氢气球的上浮使用加速运动曲线


2. 品牌调性

动效的风格和节奏应该是符合产品的品牌调性的，和竞品相比有个性和差异化的，而不是与之南辕北

辙。比如一个基调为青春活力的产品，可以使用更多的弹性阻尼动效曲线，但如果将其用在一个基调

为沉稳可靠的产品上，就会显得很不协调。

3. 可用性

界面动效设计同样需要遵循基础的可用性原则。比如不能让用户产生多余的等待，影响到用户操作的

效率；比如保证体验的一致性，相似交互触发的动效应该有统一的规范和逻辑，而不是花样百出造成

用户认知错乱；比如不能大幅影响到产品性能，产生严重的掉帧、卡顿等。