micro-interactions
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMicro-interaction Animation
微交互动画
Apply Disney's 12 animation principles to small UI feedback moments and interface details.
将迪士尼的12条动画原则应用于小型UI反馈场景和界面细节设计中。
Quick Reference
快速参考
| Principle | Micro-interaction Implementation |
|---|---|
| Squash & Stretch | Button press compression, toggle bounce |
| Anticipation | Hover state hints, pre-click feedback |
| Staging | Focus attention on active element |
| Straight Ahead / Pose to Pose | Progress vs state changes |
| Follow Through / Overlapping | Ripple effects, settling motion |
| Slow In / Slow Out | Snappy but smooth transitions |
| Arc | Toggle switches, circular menus |
| Secondary Action | Icons respond to parent state |
| Timing | 100-300ms for most interactions |
| Exaggeration | Clear but not distracting |
| Solid Drawing | Consistent transform behavior |
| Appeal | Delightful, purposeful feedback |
| 原则 | 微交互实现方式 |
|---|---|
| 挤压与拉伸（Squash & Stretch） | 按钮按下时的压缩效果、切换控件的弹跳效果 |
| 预备动作（Anticipation） | 悬停状态提示、点击前反馈 |
| 舞台呈现（Staging） | 将注意力聚焦在活跃元素上 |
| 逐帧动画/关键帧动画（Straight Ahead / Pose to Pose） | 进度变化 vs 状态切换 |
| 跟随动作与重叠动作（Follow Through / Overlapping） | 涟漪效果、稳定后的微动 |
| 缓入缓出（Slow In / Slow Out） | 干脆但流畅的过渡效果 |
| 弧线运动（Arc） | 切换开关、圆形菜单 |
| 次要动作（Secondary Action） | 图标随父元素状态变化做出响应 |
| 时机控制（Timing） | 大多数交互时长为100-300ms |
| 夸张表现（Exaggeration） | 清晰但不分散注意力 |
| 实体感绘制（Solid Drawing） | 一致的变换行为 |
| 吸引力（Appeal） | 愉悦且有目的性的反馈 |
Principle Applications
原则应用
Squash & Stretch: Buttons compress slightly on press (scaleY: 0.95). Toggle thumbs squash when hitting bounds. Notification badges bounce on update. Keep subtle—this is UI, not cartoon.
Anticipation: Hover states prepare for click. Buttons lift/grow slightly before press animation. Draggable items elevate on grab start. Loading spinners wind up before spinning.
Staging: Active form field clearly distinguished. Error states demand attention. Success confirmations are unmistakable. One interaction feedback at a time.
Straight Ahead vs Pose to Pose: Progress indicators animate continuously (straight ahead). Checkboxes snap between states (pose to pose). Combine: loading indicator ends with state-change snap.
Follow Through & Overlapping: Ripple effects expand past tap point. Toggle switches overshoot then settle. Checkmarks draw with slight delay after box fills. Menu items stagger in.
Slow In / Slow Out: Quick ease-out for responsive feel. 100ms with ease-out feels instant. Avoid linear—looks broken. Snappy entrance, gentle settling.
Arc: Toggle switches travel in slight arc. Circular action buttons expand radially. Dropdown carets rotate smoothly. Menu items can follow curved path.
Secondary Action: Icon changes color as button state changes. Badge count updates with parent notification. Helper text appears as input focuses. Shadow responds to elevation.
Timing: Immediate feedback: 50-100ms. Standard transitions: 100-200ms. Complex micro-interactions: 200-300ms. Anything longer feels sluggish for small UI.
Exaggeration: Enough to notice, not enough to distract. Error shakes: 3-5px, not 20px. Success scales: 1.05-1.1, not 1.5. Subtle but unmistakable.
Solid Drawing: Transform origin matters—buttons scale from center, tooltips from pointer. Consistent behavior across similar elements. Maintain visual integrity during animation.
Appeal: Micro-interactions add personality without overwhelming. Users should feel the interface is responsive and alive. Small delights build into overall experience quality.
挤压与拉伸（Squash & Stretch）：按钮按下时轻微压缩（scaleY: 0.95）。切换控件的滑块在触达边界时产生挤压效果。通知徽章更新时产生弹跳效果。保持效果微妙——这是UI设计，而非卡通动画。
预备动作（Anticipation）：悬停状态为点击操作做准备。按钮在按下动画前轻微抬起/放大。可拖拽元素在被抓取时升高。加载 spinner 在开始旋转前先“上弦”。
舞台呈现（Staging）：活跃表单字段需清晰区分。错误状态需吸引注意力。成功确认信息需明确无误。同一时间仅展示一个交互反馈。
逐帧动画 vs 关键帧动画（Straight Ahead vs Pose to Pose）：进度指示器持续动画（逐帧）。复选框在状态间快速切换（关键帧）。结合使用：加载指示器结束时伴随状态切换的瞬时变化。
跟随动作与重叠动作（Follow Through & Overlapping）：涟漪效果超出点击点扩散。切换开关先过冲再稳定。勾选标记在复选框填充后稍有延迟再绘制。菜单项依次出现。
缓入缓出（Slow In / Slow Out）：快速的缓出效果带来响应感。100ms的缓出动画感觉即时。避免线性动画——看起来像是失效了。干脆的入场，柔和的稳定。
弧线运动（Arc）：切换开关沿轻微弧线运动。圆形操作按钮径向展开。下拉菜单的 caret 平滑旋转。菜单项可沿曲线路径出现。
次要动作（Secondary Action）：图标随按钮状态变化改变颜色。徽章计数随父通知更新。辅助文本在输入框获得焦点时显示。阴影随元素高度变化做出响应。
时机控制（Timing）：即时反馈：50-100ms。标准过渡：100-200ms。复杂微交互：200-300ms。小型UI交互时长过长会显得迟缓。
夸张表现（Exaggeration）：效果足够明显但不分散注意力。错误抖动：3-5px，而非20px。成功缩放：1.05-1.1倍，而非1.5倍。微妙但明确无误。
实体感绘制（Solid Drawing）：变换原点很重要——按钮从中心缩放，提示框从指针位置展开。相似元素保持一致的行为。动画过程中保持视觉完整性。
吸引力（Appeal）：微交互为界面增添个性但不过度。用户应感受到界面的响应性和生命力。细微的愉悦体验会提升整体体验质量。
Component Patterns
组件模式
Button States
按钮状态
css
.button {
transition: transform 100ms ease-out,
box-shadow 100ms ease-out;
}
.button:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}css
.button {
transition: transform 100ms ease-out,
box-shadow 100ms ease-out;
}
.button:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.button:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}Toggle Switch
切换开关
css
.toggle-thumb {
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
transform: translateX(20px);
}css
.toggle-thumb {
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-thumb.active {
transform: translateX(20px);
}Checkbox
复选框
css
.checkmark {
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
stroke-dashoffset: 0;
}css
.checkmark {
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 200ms ease-out 50ms;
}
.checkbox:checked + .checkmark {
stroke-dashoffset: 0;
}Timing Reference
时机参考
| Interaction | Duration | Easing |
|---|---|---|
| Hover | 100ms | ease-out |
| Click/tap | 100ms | ease-out |
| Toggle | 150-200ms | spring/elastic |
| Checkbox | 150ms | ease-out |
| Focus ring | 100ms | ease-out |
| Tooltip show | 150ms | ease-out |
| Tooltip hide | 100ms | ease-in |
| Badge update | 200ms | elastic |
| Form error | 200ms | ease-out |
| 交互类型 | 时长 | 缓动效果 |
|---|---|---|
| 悬停 | 100ms | ease-out |
| 点击/轻触 | 100ms | ease-out |
| 切换 | 150-200ms | spring/elastic |
| 复选框 | 150ms | ease-out |
| 聚焦环 | 100ms | ease-out |
| 提示框显示 | 150ms | ease-out |
| 提示框隐藏 | 100ms | ease-in |
| 徽章更新 | 200ms | elastic |
| 表单错误 | 200ms | ease-out |
Best Practices
最佳实践
- Every interactive element needs feedback
- Disabled states: no animation, reduced opacity
- Group related feedback together
- Don't animate on every change—filter unnecessary updates
- Test without animation—functionality shouldn't depend on it
- Respect
prefers-reduced-motion
- 每个交互元素都需要反馈
- 禁用状态：无动画，降低透明度
- 将相关反馈分组
- 不要对每一次变化都做动画——过滤不必要的更新
- 测试无动画情况下的表现——功能不应依赖动画
- 尊重设置
prefers-reduced-motion