动效设计：时间、缓动与克制之间的判断

动效设计最容易走向两个极端。一个极端是“没有动效”：界面元素突然出现、突然消失，状态切换生硬，用户虽然能完成任务，但总觉得哪里不对。另一个极端是“动效过剩”：每个按钮都有弹跳，每个页面都有转场，每个列表都有入场动画，用户被动画包围，操作变慢，性能下降。真正好的动效设计，不在多，也不在少，而在“恰到好处”。它要回答的不是“怎么让画面动起来”，而是“这个动效是否帮助用户理解发生了什么”。

动效到底在解决什么问题

动效不是视觉装饰，它承担几种具体的沟通功能。理解这些功能，才能判断某个动效是否必要。

如果一个动效不能归入以上任何一类，它可能只是装饰。装饰不是不能有，但要有预算，不能挤占功能动效的空间。

时长：快一点还是慢一点

动效时长是最基础的参数，也是最容易出错的地方。太短，用户感觉不到；太长，用户觉得拖沓。经验值可以作为起点，但最终要根据场景调整。

移动端通常比桌面端稍快，因为屏幕小、距离短。大屏幕上的转场可以稍长，因为视觉移动距离更远。重要原则是：动效时长应该与元素移动距离和用户预期匹配。一个按钮的按下反馈不应该用 400ms，一个全屏转场也不应该用 100ms。

另一个原则是：用户重复操作的动效应该更短。第一次看到某个转场时，用户愿意花时间理解；第十次操作时，同样的转场就成了等待。对于高频操作，动效应接近即时，或者允许用户关闭。

缓动曲线：直线运动为什么看起来假

缓动曲线决定动效的速度变化。线性运动在现实世界中几乎不存在，物体启动和停止都需要加速和减速。界面动效如果使用线性曲线，会显得机械、生硬。

常见的缓动类型：

• ease-out：快速启动，缓慢停止。适合元素进入屏幕，如模态出现、提示弹出。

• ease-in：缓慢启动，快速停止。适合元素离开屏幕，如关闭、消失。

• ease-in-out：两端缓慢，中间快。适合位置移动，如抽屉滑动。

• 弹簧曲线：带轻微回弹，适合需要强调的交互，如拖拽释放。

• 自定义贝塞尔：根据品牌调性微调，如更快的启动、更慢的停止。

缓动曲线不需要每种场景都自定义。一个设计系统通常定义三到五条标准曲线，覆盖进入、离开、移动、强调。曲线太多会导致动效风格不一致，反而降低品质感。

转场：让空间关系可理解

转场是动效中最复杂的一类，因为它涉及多个元素和空间关系。好的转场让用户知道“我从哪里来，到了哪里”，坏的转场让用户迷失方向。

常见的转场类型：

• 淡入淡出：适合内容替换，不强调方向。简单但容易显得平淡。

• 滑动推入：适合层级导航，新页面从右侧推入，返回时反向。

• 缩放展开：适合从卡片到详情，保持元素连续性。

• 共享元素转场：列表项放大为详情页，视觉连续性最强。

• 翻转：适合正反面切换，如卡片翻转。

• 遮罩扩散：从触发点扩散到全屏，适合强调来源。

选择转场时，要考虑导航层级和用户心理模型。同级切换适合淡入淡出；进入下一级适合推入；从列表到详情适合共享元素；从触发点展开适合遮罩扩散。

转场还需要处理中断。如果用户在动画进行中再次操作，动画应该立即响应新操作，而不是排队等待。否则界面会显得迟钝。实现上可以使用 prefers-reduced-motion 和动画取消机制。

微交互：小动效的大作用

微交互是围绕单个组件的动效，通常很短暂，但能显著提升体验。常见微交互包括：

• 按钮按下时的轻微缩放或颜色变化。

• 复选框勾选时的对勾绘制。

• 开关滑动时的轨道变化。

• 点赞时的心形弹跳。

• 输入框聚焦时的边框扩展。

• 列表项删除时的滑出和高度收起。

• 新消息到达时的轻微脉冲。

微交互的设计要点是：短暂、清晰、不打断。它不应该让用户等待，也不应该抢走注意力。微交互可以有品牌个性，但要克制。一个点赞动画持续 500ms 还算合理，持续 2 秒就会让人烦躁。

微交互还需要考虑重复性。用户可能一天点赞几十次，第一次觉得有趣，第十次就觉得多余。对于高频微交互，应该允许用户关闭，或者让动画非常短。

性能：动效不能以卡顿为代价

动效再好，如果导致掉帧，体验就是负面的。性能优化的基本原则是：只动画化 transform 和 opacity，避免动画化 width、height、top、left、margin 等会触发重排的属性。

另一个性能问题是动效数量。同时动画多个元素会占用主线程和合成线程。列表入场动画、页面转场和加载动画同时进行时，低端设备容易掉帧。设计时应控制同时动画的元素数量，必要时使用错峰延迟。

还需要考虑 will-change 的使用。它可以提示浏览器提前优化，但滥用会消耗内存。只在确实需要时使用，并在动画结束后移除。

无障碍：动效也需要被尊重

动效对部分用户会造成不适，尤其是前庭敏感用户。快速移动、缩放、旋转、视差效果可能引发眩晕、恶心或头痛。无障碍设计要求尊重用户的系统设置。

prefers-reduced-motion 是浏览器提供的媒体查询，用于检测用户是否要求减少动效。设计系统应该为减少动效模式提供替代方案：

• 用淡入淡出替代位移和缩放。

• 移除视差和自动播放动画。

• 缩短动效时长或直接跳过。

• 保持状态变化的可见性，不依赖动画传递信息。

• 为循环动画提供暂停控制。

动效不应该承载唯一的信息。如果某个状态只能通过动画识别，减少动效用户就会丢失信息。状态变化应该同时通过文字、颜色或图标表达。

克制：动效设计的最高原则

动效设计最难的不是实现，而是判断“这个动效该不该有”。每一个动效都应该有理由。如果找不到理由，它可能只是装饰。

几个判断问题：

• 这个动效帮助用户理解了什么？

• 如果没有它，用户会困惑吗？

• 它是否拖慢了操作？

• 用户重复看到它会不会烦？

• 它在低端设备上是否流畅？

• 它是否尊重减少动效设置？

如果答案指向“帮助理解”和“不拖慢”，动效就有价值。如果指向“好看”和“品牌”，可以保留但要克制。如果指向“因为别人有”，就应该删掉。

动效设计不是让界面动起来，而是让界面在正确的时间、以正确的方式、用正确的时长动。它服务于理解、反馈和空间感，而不是炫技。好的动效，用户不会特别注意到，但如果没有，他们会觉得界面少了点什么。这种“少了点什么”的感觉，就是动效设计的分寸。