交互设计 interaction-design

---

name: 交互设计 description: 通过反馈模式、微交互和可访问的交互设计创建直观的用户体验。用于设计加载状态、错误处理用户体验、动画指南或触摸交互。 license: MIT

交互设计

通过周到的反馈和交互模式创建直观的用户体验。

交互模式

模式	持续时间	用例
微交互	100-200ms	按钮按压、切换
过渡	200-400ms	页面更改、模态框
进入	300-500ms	列表项出现

加载状态

/* 骨架加载器 */
.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; }
}

function LoadingState({ isLoading, children }) {
  if (isLoading) {
    return <div className="skeleton" style={{ height: 200 }} />;
  }
  return children;
}

错误状态

function ErrorState({ error, onRetry }) {
  return (
    <div className="error-container" role="alert">
      <Icon name="warning" />
      <h3>出了点问题</h3>
      <p>{error.message}</p>
      <button onClick={onRetry}>再试一次</button>
    </div>
  );
}

空状态

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>
  );
}

可访问性

// 向屏幕阅读器宣布状态变化
function StatusAnnouncer({ message }) {
  return (
    <div aria-live="polite" aria-atomic="true" className="sr-only">
      {message}
    </div>
  );
}

// 尊重运动偏好
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

动画指南

• 保持动画在500ms以下（更长会感觉迟钝）
• 进入时使用ease-out，退出时使用ease-in
• 尊重 prefers-reduced-motion
• 确保焦点指示器始终可见
• 测试键盘导航

最佳实践

• 为所有操作提供即时反馈
• 显示等待时间超过0.5秒的加载状态
• 包含带有恢复选项的清晰错误消息
• 设计有意义的空状态
• 支持键盘导航