动效设计的克制之道：less is more

打开某些网页，弹窗从天而降、按钮疯狂抖动、页面切换像幻灯片放映——设计师可能觉得"炫酷"，用户只感到眩晕和烦躁。动效是 UI 设计中的双刃剑：用得好，它让界面流畅自然、引导用户注意力；用得滥，它制造混乱、拖慢性能、甚至导致眩晕症患者无法使用。

这篇文章聊聊动效设计的克制哲学：什么时候该加，什么时候不该加，以及怎么加才对。

动效的本质目的

动效不是装饰品，它有明确的功能性目标：

1. 建立空间感：页面切换、抽屉滑出——让用户理解"元素从哪来、到哪去"
2. 提供反馈：按钮按下、加载中——让用户知道系统收到了操作
3. 引导注意力：新消息提醒、错误提示——让用户聚焦重要信息
4. 缓解等待焦虑：骨架屏、进度条——让等待感觉更短

如果一个动效不服务于以上任何一个目标，那它大概率是多余的。Material Design 的动效指南有一句话总结得极好："Motion provides meaning."

动效设计的四条铁律

1. 速度是核心体验

动效最忌讳"慢"。人类感知延迟的阈值大约是 100ms，超过 200ms 就会感到"卡顿"。参考值：

• 微交互（按钮 hover、图标切换）：100-200ms
• 小范围过渡（tooltip、下拉菜单）：200-300ms
• 页面级转场（路由切换、全屏弹窗）：300-500ms

超过 500ms 的动效，请加一个跳过按钮。另外，优先使用 ease-out（快进慢出）而非 linear（匀速），会更自然。

2. 一个页面只讲一个动画故事

想象一个页面同时发生：导航栏滑入、卡片从下方浮出、背景粒子闪烁、CTA 按钮脉冲——用户的视觉系统瞬间过载。正确做法是分层引入：

/* 错峰入场，而非一拥而上 */
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 80ms; }
.card:nth-child(3) { animation-delay: 160ms; }

用 stagger（错峰）让元素依次入场，节奏感远好于同时爆发。每屏页面控制在 1-2 个动画焦点区域即可。

3. 尊重用户的减法偏好

操作系统提供了"减少动效"设置（prefers-reduced-motion），你的 CSS 应该响应这个偏好：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

这不是可选的"锦上添花"，而是无障碍设计的基本要求。对于前庭功能障碍、偏头痛患者，强动效会直接导致生理不适。

4. 动效不是性能的借口

优先使用 transform 和 opacity——这两个属性只触发合成（compositing），不触发重排（reflow）或重绘（repaint）：

/* ❌ 差：触发 layout，掉帧 */
.modal { animation: slide-in 0.3s; }
@keyframes slide-in { from { top: 100%; } to { top: 0; } }

/* ✅ 好：只触发 compositing，丝滑 */
.modal { animation: slide-in 0.3s; }
@keyframes slide-in { 
  from { transform: translateY(100%); } 
  to { transform: translateY(0); } 
}

加动效之前的自检清单

每当你准备添加一个动效，问自己五个问题：

• 这个动效帮助用户理解了什么？（如果答不上来，删掉）
• 它会在 300ms 内完成吗？（如果不会，缩短它）
• 用户频繁操作时会感到烦躁吗？（如果是，加防抖或跳过机制）
• 低性能设备上会不会卡顿？（用 Chrome DevTools 的 Performance 面板验证）
• 开启 prefers-reduced-motion 后页面还能正常使用吗？（如果不能，修好它）

克制，本身就是一种设计语言

耐看的界面往往没有花哨的动效。想想你每天用的那些优秀产品——Notion 的页面切换几乎没有动效，Linear 的列表更新只有微妙的高度过渡，GitHub 的按钮只有一个简单的颜色变化。它们之所以让人觉得"好用"，恰恰因为动效存在感极低。

好动效像空气——存在但你不会注意它。它帮你理解页面结构、确认操作成功、感知状态变化，然后悄然退场。如果你的用户注意到了你的动画，那它很可能太多了。

下次做 UI 动效时，记住这句设计箴言："Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."