Back to Details

interaction-physics

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Interaction Design

交互设计

Overview

概述

Interactions are the moments when your interface comes alive. They're the transitions between states, the feedback when users take action, the animations that guide attention. When done well, interactions are invisible—they feel natural and right. When done poorly, they distract or confuse.
This skill teaches you to think about interactions systematically: understanding animation principles, designing intentional microinteractions, providing clear feedback, and ensuring performance and accessibility.
交互是界面变得生动的瞬间，是状态间的过渡、用户操作后的反馈、引导注意力的动画。优秀的交互是无形的——它们自然且贴合需求。而糟糕的交互则会分散注意力或造成困惑。
本技能将教你系统地思考交互设计：理解动画原则、设计有目的性的微交互、提供清晰反馈，并确保性能与无障碍性。

Core Methodology: Microinteractions

核心方法：微交互

A microinteraction is a small, contained interaction that accomplishes a specific task. Examples: button hover state, form validation feedback, loading spinner, success notification, menu open/close.
微交互是完成特定任务的小型、独立交互。例如：按钮悬停状态、表单验证反馈、加载动画、成功通知、菜单展开/收起。

The Anatomy of a Microinteraction

微交互的构成要素

Every microinteraction has four parts:
  1. Trigger — What initiates the interaction? (user action, system event, time-based)
  2. Rules — What happens as a result? (what animates, what changes, how long)
  3. Feedback — What does the user see/hear? (animation, sound, haptic)
  4. Loops & Modes — Does it repeat? Can it be interrupted?
Example: Button Hover State
Trigger: User hovers over button
Rules: 
  - Background color changes to darker shade
  - Duration: 200ms
  - Easing: ease-out
Feedback: 
  - Visual: background color transition
  - Indicates: button is interactive
Loops & Modes: 
  - Repeats on every hover
  - Can be interrupted by click or mouse leave
每个微交互都包含四个部分：
  1. 触发条件 —— 什么会启动交互？（用户操作、系统事件、基于时间的触发）
  2. 规则 —— 触发后会发生什么？（哪些元素动、哪些内容变化、持续多久）
  3. 反馈 —— 用户会看到/听到什么？（动画、声音、触觉反馈）
  4. 循环与模式 —— 是否重复？能否被中断？
示例：按钮悬停状态
Trigger: User hovers over button
Rules: 
  - Background color changes to darker shade
  - Duration: 200ms
  - Easing: ease-out
Feedback: 
  - Visual: background color transition
  - Indicates: button is interactive
Loops & Modes: 
  - Repeats on every hover
  - Can be interrupted by click or mouse leave

Designing Intentional Microinteractions

设计有目的性的微交互

Principle 1: Provide Feedback Every user action should result in visible feedback. Users need to know their action was registered.
Principle 2: Guide Attention Use animation to guide users' attention to important elements.
Principle 3: Communicate State Use animation to communicate state changes (loading, success, error, etc.).
Principle 4: Delight Without Distraction Add personality and delight, but don't distract from the task.
原则1：提供反馈 用户的每一次操作都应得到可见的反馈，让用户知道操作已被系统接收。
原则2：引导注意力 使用动画将用户的注意力引导至重要元素。
原则3：传达状态 使用动画传达状态变化（加载中、成功、错误等）。
原则4：愉悦但不干扰 为交互增添个性与愉悦感，但不要分散用户完成任务的注意力。

Animation Principles

动画原则

Principle 1: Timing

原则1：时长控制

Timing is critical. Too fast and the animation feels abrupt. Too slow and it feels sluggish.
General Guidelines:
  • UI Feedback (hover, focus, state change): 150-250ms
  • Transitions (page changes, modal open/close): 300-500ms
  • Attention-Grabbing (alerts, notifications): 500-1000ms
  • Loading (spinners, progress bars): 1-2 seconds or continuous
css
/* UI Feedback - Fast */
button {
  transition: background-color 200ms ease-out;
}

/* Transitions - Medium */
.modal {
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* Loading - Slower */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}
时长至关重要。太快会让动画显得突兀，太慢则会让人觉得迟缓。
通用指南：
  • UI反馈（悬停、聚焦、状态变化）：150-250ms
  • 过渡效果（页面切换、模态框展开/收起）：300-500ms
  • 吸引注意力（提示、通知）：500-1000ms
  • 加载状态（加载动画、进度条）：1-2秒或持续循环
css
/* UI Feedback - Fast */
button {
  transition: background-color 200ms ease-out;
}

/* Transitions - Medium */
.modal {
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* Loading - Slower */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

Principle 2: Easing

原则2：缓动效果

Easing functions control how an animation accelerates and decelerates. Different easing functions convey different meanings.
Common Easing Functions:
EasingMeaningUse Case
linear
Constant speedContinuous, mechanical (spinners, progress bars)
ease-in
Slow start, fast endExiting, dismissing
ease-out
Fast start, slow endEntering, appearing, most interactions
ease-in-out
Slow start and endSmooth, natural transitions
cubic-bezier(0.34, 1.56, 0.64, 1)
Elastic, bouncyPlayful, attention-grabbing
css
/* UI Feedback - ease-out (most common) */
button {
  transition: background-color 200ms ease-out;
}

/* Entering - ease-out */
.modal {
  animation: slideIn 400ms ease-out;
}

/* Exiting - ease-in */
.modal.closing {
  animation: slideOut 300ms ease-in;
}

/* Continuous - linear */
.spinner {
  animation: spin 1s linear infinite;
}

/* Playful - cubic-bezier */
.bounce {
  animation: bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
缓动函数控制动画的加速与减速方式，不同的缓动函数传递不同的含义。
常见缓动函数：
EasingMeaningUse Case
linear
Constant speedContinuous, mechanical (spinners, progress bars)
ease-in
Slow start, fast endExiting, dismissing
ease-out
Fast start, slow endEntering, appearing, most interactions
ease-in-out
Slow start and endSmooth, natural transitions
cubic-bezier(0.34, 1.56, 0.64, 1)
Elastic, bouncyPlayful, attention-grabbing
css
/* UI Feedback - ease-out (most common) */
button {
  transition: background-color 200ms ease-out;
}

/* Entering - ease-out */
.modal {
  animation: slideIn 400ms ease-out;
}

/* Exiting - ease-in */
.modal.closing {
  animation: slideOut 300ms ease-in;
}

/* Continuous - linear */
.spinner {
  animation: spin 1s linear infinite;
}

/* Playful - cubic-bezier */
.bounce {
  animation: bounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

Principle 3: Distance

原则3：移动距离

The distance an element moves affects how long the animation should take. Larger distances need longer durations.
css
/* Small movement - short duration */
button:hover {
  transform: scale(1.05);
  transition: transform 150ms ease-out;
}

/* Medium movement - medium duration */
.modal {
  animation: slideIn 400ms ease-out;
}
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Large movement - longer duration */
.page-transition {
  animation: fadeIn 600ms ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
元素移动的距离会影响动画所需的时长，移动距离越大，时长应越长。
css
/* Small movement - short duration */
button:hover {
  transform: scale(1.05);
  transition: transform 150ms ease-out;
}

/* Medium movement - medium duration */
.modal {
  animation: slideIn 400ms ease-out;
}
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Large movement - longer duration */
.page-transition {
  animation: fadeIn 600ms ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Common Microinteractions

常见微交互

Microinteraction 1: Button States

微交互1：按钮状态

css
/* Default state */
button {
  background-color: var(--color-primary);
  color: white;
  transition: background-color 200ms ease-out;
}

/* Hover state */
button:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
}

/* Active state */
button:active:not(:disabled) {
  background-color: var(--color-primary-darker);
  transform: scale(0.98);
}

/* Focus state */
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Disabled state */
button:disabled {
  background-color: var(--color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Loading state */
button.loading {
  pointer-events: none;
  opacity: 0.8;
}

button.loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
css
/* Default state */
button {
  background-color: var(--color-primary);
  color: white;
  transition: background-color 200ms ease-out;
}

/* Hover state */
button:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
}

/* Active state */
button:active:not(:disabled) {
  background-color: var(--color-primary-darker);
  transform: scale(0.98);
}

/* Focus state */
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Disabled state */
button:disabled {
  background-color: var(--color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Loading state */
button.loading {
  pointer-events: none;
  opacity: 0.8;
}

button.loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Microinteraction 2: Form Validation

微交互2：表单验证

css
/* Input default state */
input {
  border: 1px solid var(--color-border);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

/* Input focus state */
input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Input valid state */
input.valid {
  border-color: var(--color-success);
}

input.valid:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Input error state */
input.error {
  border-color: var(--color-error);
}

input.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error message animation */
.error-message {
  animation: slideDown 300ms ease-out;
  color: var(--color-error);
  font-size: 14px;
  margin-top: 4px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
css
/* Input default state */
input {
  border: 1px solid var(--color-border);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

/* Input focus state */
input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Input valid state */
input.valid {
  border-color: var(--color-success);
}

input.valid:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Input error state */
input.error {
  border-color: var(--color-error);
}

input.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error message animation */
.error-message {
  animation: slideDown 300ms ease-out;
  color: var(--color-error);
  font-size: 14px;
  margin-top: 4px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Microinteraction 3: Loading States

微交互3：加载状态

css
/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-skeleton) 0%,
    var(--color-skeleton-light) 50%,
    var(--color-skeleton) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Progress bar */
.progress-bar {
  height: 4px;
  background-color: var(--color-border);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 300ms ease-out;
}
css
/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-skeleton) 0%,
    var(--color-skeleton-light) 50%,
    var(--color-skeleton) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Progress bar */
.progress-bar {
  height: 4px;
  background-color: var(--color-border);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 300ms ease-out;
}

Microinteraction 4: Notifications

微交互4：通知组件

css
/* Notification container */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 300ms ease-out;
  z-index: 1000;
}

/* Notification variants */
.notification.success {
  border-left: 4px solid var(--color-success);
}

.notification.error {
  border-left: 4px solid var(--color-error);
}

.notification.warning {
  border-left: 4px solid var(--color-warning);
}

/* Notification exit animation */
.notification.exiting {
  animation: slideOut 300ms ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(400px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(400px);
  }
}
css
/* Notification container */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 300ms ease-out;
  z-index: 1000;
}

/* Notification variants */
.notification.success {
  border-left: 4px solid var(--color-success);
}

.notification.error {
  border-left: 4px solid var(--color-error);
}

.notification.warning {
  border-left: 4px solid var(--color-warning);
}

/* Notification exit animation */
.notification.exiting {
  animation: slideOut 300ms ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(400px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(400px);
  }
}

Microinteraction 5: Transitions Between Pages

微交互5：页面过渡

css
/* Page fade transition */
.page {
  animation: fadeIn 400ms ease-out;
}

.page.exiting {
  animation: fadeOut 300ms ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Page slide transition */
.page {
  animation: slideIn 400ms ease-out;
}

.page.exiting {
  animation: slideOut 300ms ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}
css
/* Page fade transition */
.page {
  animation: fadeIn 400ms ease-out;
}

.page.exiting {
  animation: fadeOut 300ms ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Page slide transition */
.page {
  animation: slideIn 400ms ease-out;
}

.page.exiting {
  animation: slideOut 300ms ease-in forwards;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

Performance Considerations

性能考量

Use GPU-Accelerated Properties

使用GPU加速属性

Animate properties that are GPU-accelerated for smooth performance:
Good (GPU-accelerated):
  • transform
    (translate, rotate, scale)
  • opacity
Avoid (CPU-intensive):
  • left
    , 
    top
    , 
    width
    , 
    height
  • background-color
    (unless necessary)
  • box-shadow
css
/* Good - GPU-accelerated */
button:hover {
  transform: scale(1.05);
  transition: transform 200ms ease-out;
}

/* Avoid - CPU-intensive */
button:hover {
  width: 110px;
  height: 110px;
  transition: width 200ms ease-out, height 200ms ease-out;
}
为实现流畅的性能，优先选择由GPU加速的属性进行动画：
推荐（GPU加速）：
  • transform
    （平移、旋转、缩放）
  • opacity
避免（CPU密集型）：
  • left
    、
    top
    、
    width
    、
    height
  • background-color
    （除非必要）
  • box-shadow
css
/* Good - GPU-accelerated */
button:hover {
  transform: scale(1.05);
  transition: transform 200ms ease-out;
}

/* Avoid - CPU-intensive */
button:hover {
  width: 110px;
  height: 110px;
  transition: width 200ms ease-out, height 200ms ease-out;
}

Reduce Motion for Users Who Prefer It

为偏好减少动画的用户适配

Respect the 
prefers-reduced-motion
media query:
css
/* Default animations */
button {
  transition: background-color 200ms ease-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}
尊重
prefers-reduced-motion
媒体查询：
css
/* Default animations */
button {
  transition: background-color 200ms ease-out;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

Accessibility Considerations

无障碍设计考量

1. Provide Non-Animation Feedback

1. 提供非动画反馈

Don't rely on animation alone for feedback. Combine with color, text, or icons.
css
/* Bad - only animation */
button:hover {
  transform: scale(1.1);
}

/* Good - animation + color change */
button:hover {
  background-color: var(--color-primary-dark);
  transform: scale(1.05);
}
不要仅依赖动画提供反馈，应结合颜色、文本或图标。
css
/* Bad - only animation */
button:hover {
  transform: scale(1.1);
}

/* Good - animation + color change */
button:hover {
  background-color: var(--color-primary-dark);
  transform: scale(1.05);
}

2. Ensure Keyboard Navigation

2. 确保键盘导航可用

Interactions should work with keyboard navigation:
css
/* Hover state for mouse users */
button:hover {
  background-color: var(--color-primary-dark);
}

/* Focus state for keyboard users */
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  background-color: var(--color-primary-dark);
}
交互应支持键盘导航：
css
/* Hover state for mouse users */
button:hover {
  background-color: var(--color-primary-dark);
}

/* Focus state for keyboard users */
button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  background-color: var(--color-primary-dark);
}

3. Avoid Motion Sickness

3. 避免引发晕动症

Avoid rapid, flashing, or disorienting animations:
css
/* Bad - rapid flashing */
.alert {
  animation: flash 100ms infinite;
}

/* Good - subtle, slow animation */
.alert {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
避免快速、闪烁或令人迷失方向的动画：
css
/* Bad - rapid flashing */
.alert {
  animation: flash 100ms infinite;
}

/* Good - subtle, slow animation */
.alert {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

How to Use This Skill with Claude Code

如何与Claude Code配合使用本技能

Audit Your Interactions

审计你的交互设计

"I'm using the interaction-design skill. Can you audit my interactions?
- Identify microinteractions that are missing
- Check animation timing and easing
- Identify performance issues (CPU-intensive animations)
- Check accessibility (reduced motion, keyboard navigation)
- Suggest improvements"
"I'm using the interaction-design skill. Can you audit my interactions?
- Identify microinteractions that are missing
- Check animation timing and easing
- Identify performance issues (CPU-intensive animations)
- Check accessibility (reduced motion, keyboard navigation)
- Suggest improvements"

Design Microinteractions

设计微交互

"Can you help me design microinteractions for:
- Button states (hover, active, disabled, loading)
- Form validation feedback
- Loading states
- Success/error notifications
- Page transitions"
"Can you help me design microinteractions for:
- Button states (hover, active, disabled, loading)
- Form validation feedback
- Loading states
- Success/error notifications
- Page transitions"

Implement Animations

实现动画

"Can you implement animations for:
- Button hover and active states
- Modal open/close
- Page transitions
- Loading spinner
- Notification entrance/exit
Include timing, easing, and accessibility considerations"
"Can you implement animations for:
- Button hover and active states
- Modal open/close
- Page transitions
- Loading spinner
- Notification entrance/exit
Include timing, easing, and accessibility considerations"

Optimize Animation Performance

优化动画性能

"Can you optimize my animations for performance?
- Identify CPU-intensive animations
- Suggest GPU-accelerated alternatives
- Check for unnecessary animations
- Ensure smooth 60fps performance"
"Can you optimize my animations for performance?
- Identify CPU-intensive animations
- Suggest GPU-accelerated alternatives
- Check for unnecessary animations
- Ensure smooth 60fps performance"

Design Critique: Evaluating Your Interactions

设计评审：评估你的交互设计

Claude Code can critique your interactions:
"Can you evaluate my interactions?
- Are my animations intentional and purposeful?
- Is my timing appropriate?
- Are my easing functions right?
- Are my interactions accessible?
- What's one thing I could improve immediately?"
Claude Code可以评审你的交互设计：
"Can you evaluate my interactions?
- Are my animations intentional and purposeful?
- Is my timing appropriate?
- Are my easing functions right?
- Are my interactions accessible?
- What's one thing I could improve immediately?"

Integration with Other Skills

与其他技能的集成

  • design-foundation — Animation tokens and timing
  • component-architecture — Interactions in components
  • accessibility-excellence — Accessible interactions
  • layout-system — Transitions between layouts
  • design-foundation —— 动画令牌与时长配置
  • component-architecture —— 组件中的交互设计
  • accessibility-excellence —— 无障碍交互设计
  • layout-system —— 布局间的过渡效果

Key Principles

核心原则

1. Animation Should Have Purpose Every animation should serve a purpose: provide feedback, guide attention, or communicate state.
2. Timing Matters Appropriate timing makes animations feel natural. Too fast or too slow feels wrong.
3. Easing Conveys Meaning Different easing functions convey different meanings (ease-out for entering, ease-in for exiting).
4. Performance is Critical Smooth animations require GPU-accelerated properties and careful performance optimization.
5. Accessibility is Essential Respect user preferences for reduced motion and provide non-animation feedback.
1. 动画应具备目的性 每一个动画都应有明确的目的：提供反馈、引导注意力或传达状态。
2. 时长至关重要 合适的时长让动画自然流畅，过长或过短都会显得违和。
3. 缓动传递含义 不同的缓动函数传递不同的含义（ease-out用于进入动画，ease-in用于退出动画）。
4. 性能是关键 流畅的动画需要使用GPU加速属性，并进行细致的性能优化。
5. 无障碍性必不可少 尊重用户减少动画的偏好，并提供非动画形式的反馈。

Checklist: Is Your Interaction Design Ready?

检查清单：你的交互设计是否就绪？

  • All user actions provide visible feedback
  • Animation timing is appropriate (150-250ms for UI feedback)
  • Easing functions are intentional (ease-out for entering, ease-in for exiting)
  • Animations use GPU-accelerated properties (transform, opacity)
  • Reduced motion preferences are respected
  • Keyboard navigation works well
  • Non-animation feedback is provided (color, text, icons)
  • Loading states are clear and communicative
  • Error states are clear and helpful
  • Success states are clear and satisfying
  • Page transitions are smooth and intentional
Intentional, delightful interactions transform a functional product into one that feels loved.
  • 所有用户操作都有可见反馈
  • 动画时长合适（UI反馈为150-250ms）
  • 缓动函数选择合理（ease-out用于进入，ease-in用于退出）
  • 动画使用GPU加速属性（transform、opacity）
  • 适配了减少动画的用户偏好
  • 键盘导航功能正常
  • 提供了非动画形式的反馈（颜色、文本、图标）
  • 加载状态清晰且具有传达性
  • 错误状态清晰且有帮助
  • 成功状态清晰且令人愉悦
  • 页面过渡流畅且有目的性
有目的性、令人愉悦的交互设计能将一个功能性产品转变为用户喜爱的产品。