micro-interactions

微交互

微交互是一个瞬间：复选框绘出勾号，点赞时心形跳动，开关轻微过冲后平滑到位，达成目标时迸发彩纸。这些瞬间持续时间很短——200–600ms——却能传达出产品是由用心的人打造的。

参照始终是自然界。自然界中的事物不会瞬间停下。一切都有重量、惯性，以及稳定下来的过程。

---

优秀微交互的特点

微交互在满足以下条件时才有存在的价值：

1. 确认操作——让点击、轻触或输入的结果清晰无误
2. 奖励里程碑——庆祝用户为之努力的成果
3. 揭示内容——以有助于理解的方式展开信息
4. 增添质感——让原本平淡的瞬间显得真实而有触感

出现以下情况时，微交互就失去了作用：

• 延误用户操作（动画阻止用户执行下一步操作）
• 过于频繁地重复（沦为噪声，而非信号）
• 纯粹用于装饰（没有传达任何信息）

---

以自然界为参照

实体物品具有惯性、弹性和重量。融入这些特性的 UI 会让人觉得直观，因为它符合人们一生中形成的预期。

自然现象	UI 中的对应表现
门摆动后停下	开关轻微过冲后稳定到位
水滴落下	列表项依次显现
橡皮筋弹回	下拉刷新时的回弹
树叶飘落	关闭时轻柔淡出并向下飘移
铃铛摇响	触发时图标短暂摆动（抖动）
印章按在纸上	内部元素移动（例如图标轻推），但按钮边界不变

动效应当显得顺理成章——仿佛元素具有物理属性，不可能有其他表现方式。

---

常见模式

动画图标

触发时播放动画的图标，比静态替换更生动地传达状态变化。

勾号绘制： 完成时，勾号从起点到终点逐笔绘出。

@keyframes check-draw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
.checkmark path {
  stroke-dasharray: 20;
  animation: check-draw 300ms ease-out forwards;
}

点赞时心形跳动： 略微放大，然后回到原位。

@keyframes heart-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

汉堡图标 → 关闭图标变形： 菜单打开时，线条变形成 ×。

通知时铃铛摇动： 短暂来回摆动。

加载旋转指示器： 使用缓动旋转，而非线性旋转——弹簧式旋转显得生动，线性旋转则显得机械。

开关

开关应当让人感觉像一个实体开关，而不只是一次状态变化。

.toggle-thumb {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* cubic-bezier with overshoot — the thumb slides and bounces slightly */
}
.toggle:checked .toggle-thumb {
  transform: translateX(20px);
}

三次贝塞尔曲线 (0.34, 1.56, 0.64, 1) 会产生弹簧效果——滑块略微过冲后稳定到位。这就是让开关显得廉价还是高级的区别。

成功 / 完成

为真正完成的时刻增添标记——例如提交表单、完成引导步骤或达成目标。

• 勾号动画，逐笔绘出
• 细微的彩纸效果，用于高价值里程碑（首次购买、创建账户、达成目标）——谨慎使用，绝不要用于日常操作
• 进度条完成时的绿色填充过渡
• 统计数据达到最终值时的数字递增动画

显示与展开

通过轻微展开效果打开的折叠面板、工具提示和弹出窗口，比瞬间出现显得更用心。

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms ease-out;
}
.accordion-content.open {
  max-height: 500px; /* generous upper bound */
}

内容仿佛受到重力牵引般向下滑入，会显得自然；突然闪现则不会。

按钮交互反馈（稳定性规则）

按钮在悬停、聚焦或点击时，外部尺寸绝不能发生变化，也不能在布局中移动。

.btn {
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn:hover {
  background-color: var(--color-brand-600); /* subtle shift in hue or brightness */
}
.btn:active {
  background-color: var(--color-brand-700); /* deeper contrast on press */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* inner shadow suggests depth without scaling */
}

按钮在布局中应始终稳固。反馈通过颜色、内部阴影或内部元素的细微微动画来传达（例如箭头向右移动 2px），且不能影响按钮的占用空间。

骨架屏 → 内容过渡

内容加载完成后，不要让它突然闪现。用 150–200ms 将内容淡入覆盖在骨架屏上。骨架屏逐渐消散，内容随之显现。

.content-loaded {
  animation: fade-in 150ms ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

吸引用户注意远处的变化

用户常常会错过发生在当前关注点或点击区域之外的更新（变化盲视）。如果某个区域发生变化，而用户当前并未关注该区域——例如远处角落的一条通知——请使用轻微的动画引导用户视线。

• **通知徽章绽放：**收到新通知时，短暂地将徽章放大至 1.2 倍，再恢复到 1.0 倍。
• **背景高亮渐隐：**如果列表项更新或新增一行，请用淡淡的品牌色调高亮其背景，并在 1–2 秒内渐变至透明。
• **轻微抖动：**非常小幅度的水平抖动（2–4px）可以吸引用户注意侧边栏或工具栏中的项目，同时不会显得咄咄逼人。

**规则：**动画不得循环。吸引到用户注意后，动作必须停止，避免持续造成干扰。

---

组件稳定性的至高规则

交互元素——尤其是按钮——必须保持布局稳定。

• **不得缩放：**绝不要在按钮悬停或点击时使用 transform: scale()。这会造成视觉抖动，感觉像是“软塌塌的”，而非精致高级。
• **不得位移：**绝不要使用 translate 或会改变元素相对于相邻元素位置的边距。
• **原因：**布局稳定能带来专业工程设计般的可靠感和“稳固感”。如果 UI 在用户光标下移动，就会让人觉得难以预测。

---

如何声明动效

**状态变化用过渡，序列动画用关键帧。**CSS 过渡可以被中断：悬停过程中将光标移开，元素会从当前状态转向。关键帧动画则无法如此——它会播放到结束，然后跳变。每个悬停、焦点、激活和选中状态都应使用过渡。仅将 @keyframes 用于分阶段的入场动画，或自行循环播放的动画。

明确指定属性。transition: all 会为所有发生变化的内容添加动画，包括会迫使浏览器每帧重新布局页面的布局属性；这也会导致组件在无关类应用时开始滑动。

/* the element decides what moves */
transition-property: opacity, scale;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

**will-change 是最后手段。**只有在发现首帧卡顿时才添加，并且仅用于 transform、opacity 或 filter；动画结束后应将其移除。它会预留一个合成层；广泛应用会消耗更多内存，得不偿失。

---

克制

微交互是调味料，不是主菜。

• 每次触发一次——保存时勾选标记动画一次，而不是每次渲染都播放
• 重复操作时跳过——批量删除 50 个项目时，不应播放 50 次动画
• 动画不得阻塞操作——用户必须能立即继续操作；动画应与结果同时进行，而不是取代结果
• 始终尊重 prefers-reduced-motion

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

**针对每项交互自问：**这能让结果更清晰，还是只会让视觉效果更繁杂？如果是后者，就移除它。

---

审查清单

• **至高规则：**按钮和交互元素在悬停和点击时是否保持完全稳定（尺寸不变、不发生位移）？
• 每项微交互是否确认操作、奖励里程碑或帮助用户理解？
• 时长是否为 200–600ms——既不瞬间结束，也不会慢到让人觉得在等待？
• 动效是否参照自然物理规律（弹簧、缓出、过冲），而非线性计时？
• 动画是否不阻塞操作——用户能否立即继续？
• 是否尊重 prefers-reduced-motion？
• 高投入的庆祝效果（五彩纸屑、绽放效果）是否仅用于真正的里程碑？
• 动画图标是否清晰传达其代表的状态变化？
• 切换按钮/开关是否使用弹簧缓动曲线，而非线性曲线？
• 远处的变化（焦点区域之外）是否通过短暂且不循环的动画高亮，以引导用户视线？