Back to Details

micro-interactions

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Micro-Interactions

微交互

A micro-interaction is a moment. A checkbox that draws its checkmark. A heart that pulses when liked. A toggle that eases into place with a little overshoot. A confetti burst on completing a goal. These moments are small in duration — 200–600ms — but they communicate that the product was made by people who cared.
The reference is always the natural world. Nothing in nature snaps instantly. Everything has weight, momentum, and a moment of settling.
微交互是一个瞬间的体验：比如复选框逐步绘制出对勾、点赞时心跳动的效果、切换按钮略带过冲后归位的动画、完成目标时的彩屑爆发效果。这些瞬间持续时间很短——200-600毫秒——却能传递出产品是由用心的人打造的信号。
设计灵感始终源于自然界。自然界中没有事物会瞬间切换状态，所有物体都有重量、动量和归位的过程。

What Makes a Good Micro-Interaction

优质微交互的标准

A micro-interaction earns its place when it:
  1. Confirms an action — makes the result of a click, tap, or input unmistakably clear
  2. Rewards a milestone — celebrates something the user worked toward
  3. Reveals something — unfolds information in a way that aids understanding
  4. Adds texture — makes an otherwise flat moment feel physical and real
It fails when it:
  • Delays the user (animation blocks the next action)
  • Repeats too often (becomes noise, not signal)
  • Exists only for decoration (no information is conveyed)
一个微交互具备存在价值的前提是：
  1. 确认操作结果——让点击、轻触或输入的结果清晰无误
  2. 奖励里程碑——为用户达成的目标提供庆祝反馈
  3. 展示信息——以易于理解的方式展开内容
  4. 增添质感——让原本平淡的界面体验更具真实物理感
而以下情况则说明微交互设计失败：
  • 拖慢用户操作（动画阻塞后续行为）
  • 重复过于频繁（沦为干扰而非有效信号）
  • 仅作装饰用途（未传递任何信息）

Natural World as Reference

以自然界为设计参考

Physical objects have inertia, springiness, and weight. UI that borrows these properties feels intuitive because it matches expectations built over a lifetime.
Natural behaviourUI equivalent
A door swinging to restToggle that overshoots slightly before settling
Water drippingStaggered list item reveals
A rubber band snapping backPull-to-refresh bounce
A leaf fallingGentle fade + drift downward on dismiss
A bell ringingIcon that briefly oscillates (shakes) on trigger
A stamp pressing paperInner element shift (e.g. icon nudge) without shifting button bounds
The motion should feel inevitable — as if the element has physical properties and cannot behave any other way.
物理物体具有惯性、弹性和重量。借鉴这些特性的UI会更符合直觉，因为它契合人们在生活中形成的认知。
自然行为UI对应效果
门摆动后归位切换按钮略带过冲后归位
水滴落下列表项依次展开
橡皮筋回弹下拉刷新的弹跳效果
树叶飘落关闭时的淡入淡出+缓慢下移效果
铃铛晃动触发时图标短暂振动（摇晃）
印章按压纸张内部元素偏移（如图标轻移）但不改变按钮边界
动效应给人一种“必然发生”的感觉——仿佛元素本身具备物理属性，只能以这种方式运动。

Patterns

设计模式

Animated Icons

动效图标

Icons that animate on trigger communicate state change more vividly than a static swap.
Checkmark draw-on: A checkmark that draws itself from start to end point on completion.
css
@keyframes check-draw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
.checkmark path {
  stroke-dasharray: 20;
  animation: check-draw 300ms ease-out forwards;
}
Heart pulse on like: Scale up slightly then settle back.
css
@keyframes heart-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
Hamburger → close morphing: Lines animate to form an × when a menu opens.
Bell shake on notification: A brief oscillating rotation.
Loading spinner: Rotate with easing rather than linear — a spring rotation feels alive; linear feels mechanical.
触发时产生动画的图标，比静态切换更能清晰传达状态变化。
**对勾绘制动画：**完成操作时，从起点到终点逐步绘制对勾。
css
@keyframes check-draw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
.checkmark path {
  stroke-dasharray: 20;
  animation: check-draw 300ms ease-out forwards;
}
**点赞时心跳动：**先略微放大，再恢复原尺寸。
css
@keyframes heart-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
**汉堡菜单→关闭图标变形：**菜单打开时，线条动画形成×形状。
**通知铃铛晃动：**短暂的往复旋转动画。
**加载 spinner：**使用缓动曲线而非线性旋转——弹性旋转更具生命力，线性旋转则显得机械。

Toggle / Switch

切换控件

A toggle should feel like a physical switch, not a state change.
css
.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);
}
The cubic-bezier 
(0.34, 1.56, 0.64, 1)
produces a spring effect — the thumb overshoots and settles. This is the difference between a switch that feels cheap and one that feels premium.
切换控件应给人物理开关的触感，而非单纯的状态变化。
css
.toggle-thumb {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 带过冲效果的cubic-bezier曲线——滑块滑动后略有回弹 */
}
.toggle:checked .toggle-thumb {
  transform: translateX(20px);
}
cubic-bezier(0.34, 1.56, 0.64, 1)
会产生弹性效果——滑块略有过冲后归位。这正是廉价开关与高端开关的区别所在。

Success / Completion

成功/完成状态

Mark moments of genuine completion — a form submitted, an onboarding step finished, a goal reached.
  • Checkmark animation that draws on
  • Subtle confetti for high-value milestones (first purchase, account created, goal achieved) — use sparingly, never for routine actions
  • Green fill transition on a progress bar completing
  • Number count-up when a stat reaches its final value
标记真正的完成时刻——表单提交、引导步骤完成、目标达成。
  • 逐步绘制的对勾动画
  • 针对高价值里程碑的细腻彩屑效果（首次购买、账户创建、目标达成）——谨慎使用，切勿用于常规操作
  • 进度条完成时的绿色填充过渡
  • 数值逐步跳升至最终值的动画

Reveal and Disclosure

内容展开与披露

Accordions, tooltips, and popovers that open via a small reveal feel more considered than appearing instantly.
css
.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms ease-out;
}
.accordion-content.open {
  max-height: 500px; /* generous upper bound */
}
Content that slides down as if gravity is pulling it into place feels natural. Content that blinks into existence does not.
通过小幅展开动画呈现的折叠面板、提示框和弹出层，比瞬间出现的设计更显考究。
css
.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms ease-out;
}
.accordion-content.open {
  max-height: 500px; /* 设置足够大的上限值 */
}
仿佛受重力影响向下滑动的内容更符合自然规律，而瞬间出现的内容则不然。

Button Interaction Feedback (Stability Rule)

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

Buttons must never change their outer dimensions or shift their position in the layout when hovered, focused, or clicked.
css
.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 */
}
The button remains rock-solid in the layout. Feedback is conveyed through colour, internal shadows, or subtle micro-animations of inner elements (like an arrow moving 2px to the right) that do not affect the button's footprint.
按钮在 hover、focus 或点击状态下，绝不能改变外部尺寸或在布局中移位。
css
.btn {
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}
.btn:hover {
  background-color: var(--color-brand-600); /* 色调或亮度的细微变化 */
}
.btn:active {
  background-color: var(--color-brand-700); /* 按下时对比度加深 */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* 内阴影营造深度感，无需缩放 */
}
按钮应在布局中保持绝对稳定。反馈通过颜色、内阴影或内部元素的细微微动画（如箭头向右移动2px）传递，且不影响按钮的占位空间。

Skeleton → Content Transition

骨架屏→内容过渡

When content loads, do not flash it in. Fade it over the skeleton at 150–200ms. The skeleton dissolves, the content arrives.
css
.content-loaded {
  animation: fade-in 150ms ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
内容加载完成时，不要瞬间闪现。应在150-200毫秒内淡入覆盖骨架屏，骨架屏逐渐消失，内容逐步呈现。
css
.content-loaded {
  animation: fade-in 150ms ease-out;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Attracting Attention to Remote Changes

引导用户关注远端变化

Users often miss updates that occur far away from their current focus or click area (change blindness). If an area changes that the user is not currently looking at—such as a notification in a distant corner—use a subtle animation to guide their eye.
  • Notification Badge Bloom: When a new notification arrives, briefly scale the badge up (1.2) and settle back to 1.0.
  • Background Highlight Fade: If a list item updates or a new row is added, highlight its background with a subtle brand tint and fade it to transparent over 1–2 seconds.
  • Subtle Shake: A very small horizontal shake (2–4px) can draw attention to a sidebar or toolbar item without being aggressive.
Rule: The animation should be non-looping. Once the eye is caught, the motion must stop to avoid becoming a permanent distraction.
用户常常会错过当前焦点或点击区域以外的更新（变化盲视）。如果用户当前未关注的区域发生变化——比如角落的通知——可使用细微动画引导其视线。
  • **通知徽章绽放效果：**新通知到来时，徽章短暂放大至1.2倍后恢复原尺寸。
  • **背景高亮淡出：**列表项更新或新增行时，用品牌色淡色高亮背景，并在1-2秒内渐变为透明。
  • **细微摇晃：**极小幅度的水平摇晃（2-4px）可吸引用户注意侧边栏或工具栏元素，且不会过于突兀。
**原则：**动画应是非循环的。一旦吸引到用户视线，动画必须停止，避免成为持续干扰。

The Sacred Rule of Component Stability

组件稳定性黄金法则

Interactive elements — especially buttons — must be layout-stable.
  • No Scaling: Never use 
    transform: scale()
    on hover or click for buttons. It causes visual vibrating and can feel "squishy" rather than premium.
  • No Shifting: Never use 
    translate
    or margins that change the element's position relative to its neighbors.
  • Why: Layout stability creates a sense of professional engineering and "sturdiness." If the UI moves under the user's cursor, it feels unpredictable.
交互式元素——尤其是按钮——必须保持布局稳定。
  • **禁止缩放：**按钮在hover或点击状态下，绝不能使用 
    transform: scale()
    。这会导致视觉抖动，且给人“软塌”而非高端的感觉。
  • **禁止移位：**绝不能使用 
    translate
    或改变边距来调整元素相对于相邻元素的位置。
  • **原因：**布局稳定能传递出专业严谨的工程感和“坚固感”。如果UI在用户光标下移动，会显得不可预测。

Restraint

克制原则

Micro-interactions are seasoning, not the meal.
  • Once per trigger — a checkmark animates once on save, not on every render
  • Skip on repeat actions — a bulk delete of 50 items should not animate 50 times
  • No blocking animations — the user must be able to continue immediately; the animation runs alongside, not instead of, the result
  • Respect 
    prefers-reduced-motion
     — always
css
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
Ask for each interaction: does this make the result clearer, or just more visually busy? If the answer is the latter, remove it.
微交互是调味剂，而非主菜。
  • 单次触发单次动画——保存时对勾动画仅播放一次，而非每次渲染都播放
  • 重复操作跳过动画——批量删除50个项目时，不应播放50次动画
  • 禁止阻塞型动画——用户必须能立即继续操作；动画应与结果同步进行，而非替代结果
  • 始终尊重 
    prefers-reduced-motion
css
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
**对每个交互都要问：**这是让结果更清晰，还是仅仅增加视觉干扰？如果是后者，就删除它。

Review Checklist

审核清单

  • Sacred Rule: Do buttons and interactive elements remain perfectly stable (no size change, no shifting) during hover and click?
  • Does each micro-interaction confirm an action, reward a milestone, or aid understanding?
  • Is the duration 200–600ms — not instant, not slow enough to feel like waiting?
  • Does motion reference natural physics (spring, ease-out, overshoot) rather than linear timing?
  • Is the animation non-blocking — the user can continue immediately?
  • Is 
    prefers-reduced-motion
    respected?
  • Are high-effort celebrations (confetti, bloom effects) reserved for genuine milestones?
  • Do animated icons clearly communicate the state change they represent?
  • Does the toggle/switch use a spring easing curve, not linear?
  • Are remote changes (outside focal area) highlighted with a brief, non-looping animation to guide the eye?
  • **黄金法则：**按钮和交互式元素在hover和点击时是否保持完全稳定（无尺寸变化、无移位）？
  • 每个微交互是否能确认操作结果、奖励里程碑或帮助理解内容？
  • 动画时长是否在200-600毫秒之间——既非瞬间完成，也不会让用户产生等待感？
  • 动效是否参考自然物理规律（弹性、缓出、过冲）而非线性时序？
  • 动画是否非阻塞——用户能否立即继续操作？
  • 是否尊重 
    prefers-reduced-motion
    设置？
  • 高成本庆祝效果（彩屑、绽放效果）是否仅用于真正的里程碑？
  • 动效图标是否能清晰传达其所代表的状态变化？
  • 切换控件是否使用弹性缓动曲线而非线性曲线？
  • 远端变化（焦点区域外）是否通过短暂、非循环的动画高亮以引导用户视线？