Back to Details

interaction-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Interaction Design

交互设计

Create intuitive user experiences through thoughtful feedback and interaction patterns.
通过精心设计的反馈和交互模式打造直观的用户体验。

Interaction Patterns

交互模式

PatternDurationUse Case
Microinteraction100-200msButton press, toggle
Transition200-400msPage change, modal
Entrance300-500msList items appearing
模式时长使用场景
微交互100-200ms按钮点击、切换操作
过渡动画200-400ms页面切换、模态框
入场动画300-500ms列表项出现

Loading States

加载状态

css
/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
jsx
function LoadingState({ isLoading, children }) {
  if (isLoading) {
    return <div className="skeleton" style={{ height: 200 }} />;
  }
  return children;
}
css
/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
jsx
function LoadingState({ isLoading, children }) {
  if (isLoading) {
    return <div className="skeleton" style={{ height: 200 }} />;
  }
  return children;
}

Error States

错误状态

jsx
function ErrorState({ error, onRetry }) {
  return (
    <div className="error-container" role="alert">
      <Icon name="warning" />
      <h3>Something went wrong</h3>
      <p>{error.message}</p>
      <button onClick={onRetry}>Try Again</button>
    </div>
  );
}
jsx
function ErrorState({ error, onRetry }) {
  return (
    <div className="error-container" role="alert">
      <Icon name="warning" />
      <h3>Something went wrong</h3>
      <p>{error.message}</p>
      <button onClick={onRetry}>Try Again</button>
    </div>
  );
}

Empty States

空状态

jsx
function EmptyState({ title, description, action }) {
  return (
    <div className="empty-state">
      <Illustration name="empty-inbox" />
      <h3>{title}</h3>
      <p>{description}</p>
      {action && <button onClick={action.onClick}>{action.label}</button>}
    </div>
  );
}
jsx
function EmptyState({ title, description, action }) {
  return (
    <div className="empty-state">
      <Illustration name="empty-inbox" />
      <h3>{title}</h3>
      <p>{description}</p>
      {action && <button onClick={action.onClick}>{action.label}</button>}
    </div>
  );
}

Accessibility

无障碍设计

jsx
// Announce state changes to screen readers
function StatusAnnouncer({ message }) {
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {message}
    </div>
  );
}

// Respect motion preferences
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
jsx
// Announce state changes to screen readers
function StatusAnnouncer({ message }) {
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {message}
    </div>
  );
}

// Respect motion preferences
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

Animation Guidelines

动画指南

  • Keep animations under 500ms (longer feels sluggish)
  • Use ease-out for entering, ease-in for exiting
  • Respect 
    prefers-reduced-motion
  • Ensure focus indicators are always visible
  • Test with keyboard navigation
  • 动画时长控制在500ms以内（更长会显得拖沓）
  • 入场使用ease-out曲线，退场使用ease-in曲线
  • 遵循
    prefers-reduced-motion
    设置
  • 确保焦点指示器始终可见
  • 测试键盘导航可用性

Best Practices

最佳实践

  • Provide immediate feedback for all actions
  • Show loading states for waits >0.5s
  • Include clear error messages with recovery options
  • Design meaningful empty states
  • Support keyboard navigation
  • 为所有操作提供即时反馈
  • 等待时间超过0.5s时显示加载状态
  • 包含清晰的错误信息及恢复选项
  • 设计有意义的空状态
  • 支持键盘导航