1. 用户研究
   - 用户访谈
   - 观察用户行为
   - 问卷调查
   - 同理心地图

2. 持续迭代
   - 创建用户画像
   - 用户旅程地图
   - 原型设计
   - 可用性测试

3. 评估和优化
   - 与真实用户测试
   - 收集反馈
   - 持续改进

1. 可感知（Perceivable）
   - 提供文本替代（alt text）
   - 提供字幕和音频描述
   - 内容可以以不同方式呈现

2. 可操作（Operable）
   - 键盘可访问
   - 足够的时间完成任务
   - 避免引发癫痫的内容
   - 导航清晰

3. 可理解（Understandable）
   - 文本可读
   - 内容可预测
   - 帮助用户避免和纠正错误

4. 健壮（Robust）
   - 兼容辅助技术
   - 符合标准

## 颜色对比度
- 正常文本: 至少 4.5:1
- 大文本(18pt+): 至少 3:1
- 交互元素: 至少 3:1

## 键盘导航
- 所有功能可通过键盘访问
- 焦点指示清晰可见
- Tab顺序符合逻辑

## 屏幕阅读器支持
- 语义化HTML标签
- ARIA标签正确使用
- 图片有描述性alt文本

## 触摸目标
- 最小尺寸: 44x44px (iOS) / 48x48dp (Android)
- 元素间距: 至少8px

1. 对话式AI界面
   - 自然语言交互
   - 上下文理解
   - 多轮对话支持

2. 语音交互
   - 语音命令
   - 语音搜索
   - 语音反馈

3. 手势控制
   - 滑动、捏合、旋转
   - 3D Touch / Haptic Feedback
   - 空间手势（AR/VR）

4. 混合交互
   - 语音 + 触摸
   - 手势 + 视觉反馈
   - AI建议 + 手动操作

## 提供多种选择
- 不强制单一交互方式
- 用户可选择偏好方式
- 提供降级方案

## 上下文感知
- 根据场景自动切换
- 例: 驾驶时优先语音，办公时优先触摸

## 反馈清晰
- 每种交互都有明确反馈
- 视觉 + 听觉 + 触觉反馈

// 多模态搜索示例
interface SearchInterface {
  // 文本输入
  textSearch: (query: string) => void;

  // 语音输入
  voiceSearch: (audio: Blob) => void;

  // 图片搜索
  imageSearch: (image: File) => void;

  // AI对话
  conversationalSearch: (context: string) => void;
}

1. 智能预测
   - 预测用户下一步操作
   - 智能推荐内容
   - 自动完成输入

2. 自适应界面
   - 根据用户习惯调整布局
   - 动态显示常用功能
   - 隐藏不常用选项

3. 个性化内容
   - 基于用户偏好的内容推荐
   - 个性化通知时机
   - 定制化工作流

4. 上下文感知
   - 时间感知（早晨/晚上不同界面）
   - 位置感知（家/办公室不同功能）
   - 设备感知（手机/平板/桌面）

## 透明度
- 让用户知道为什么看到这些内容
- 提供"为什么推荐这个"的解释
- 允许用户调整偏好

## 控制权
- 用户可以关闭个性化
- 提供"重置推荐"选项
- 允许手动调整

## 隐私保护
- 本地处理优先
- 明确数据使用说明
- 提供数据删除选项

// 智能预测示例
interface PredictiveUI {
  // 预测用户意图
  predictIntent: (userBehavior: UserAction[]) => Intent;

  // 智能推荐
  recommend: (context: UserContext) => Recommendation[];

  // 自适应布局
  adaptLayout: (userPreferences: Preferences) => Layout;
}

// 示例: 智能搜索
function SmartSearch() {
  const [query, setQuery] = useState('');
  const predictions = usePredictions(query); // AI预测

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      {predictions.map(p => (
        <Suggestion key={p.id} onClick={() => setQuery(p.text)}>
          {p.text}
          <Confidence score={p.confidence} />
        </Suggestion>
      ))}
    </div>
  );
}

1. 极简主义
   - 移除不必要的元素
   - 每个元素都有明确目的
   - 留白的力量

2. 渐进式披露
   - 先显示核心功能
   - 高级功能按需显示
   - 分层信息架构

3. 认知负荷管理
   - 一次只呈现必要信息
   - 避免选择过载
   - 清晰的视觉层次

## 信息分层
Level 1 - 核心信息（始终可见）
- 主要操作
- 关键数据
- 核心导航

Level 2 - 次要信息（悬停/点击显示）
- 详细说明
- 高级选项
- 辅助功能

Level 3 - 深度信息（专门页面）
- 设置和配置
- 帮助文档
- 高级功能

动效应该传达信息，而非装饰：

## 反馈（Feedback）
- 确认用户操作已执行
- 示例：按钮点击、表单提交

## 方向（Orientation）
- 显示元素来自何处/去向何处
- 示例：模态框从屏幕中心展开

## 聚焦（Focus）
- 引导注意力到重要变化
- 示例：新消息通知动画

## 连续性（Continuity）
- 在过渡期间保持上下文
- 示例：页面切换时的平滑过渡

| 持续时间    | 使用场景                           |
|------------|-----------------------------------|
| 100-150ms  | 微反馈（悬停、点击）                |
| 200-300ms  | 小型过渡（切换、下拉菜单）           |
| 300-500ms  | 中型过渡（模态框、页面切换）         |
| 500ms+     | 复杂编排动画                       |

**原则**:
- 快速响应：用户操作的即时反馈应 < 100ms
- 自然过渡：避免过快（生硬）或过慢（拖沓）
- 可中断：允许用户取消长动画

## 常用缓动类型

**Ease-Out（减速）**
- 用途：元素进入视图
- 特点：快速开始，缓慢结束
- 感觉：自然、舒适

**Ease-In（加速）**
- 用途：元素退出视图
- 特点：缓慢开始，快速结束
- 感觉：果断、明确

**Ease-In-Out（先加速后减速）**
- 用途：元素在视图间移动
- 特点：两端缓慢，中间快速
- 感觉：平滑、流畅

**Spring（弹性）**
- 用途：交互式动画
- 特点：带有回弹效果
- 感觉：活泼、有趣

## 必需的交互状态

**默认（Default）**
- 元素的初始状态
- 清晰可见

**悬停（Hover）**
- 鼠标悬停时的状态
- 提供视觉反馈
- 注意：移动端无悬停

**激活（Active/Pressed）**
- 点击/触摸时的状态
- 即时反馈

**聚焦（Focus）**
- 键盘导航时的状态
- 清晰的焦点指示器
- 对比度 ≥ 3:1

**禁用（Disabled）**
- 不可用时的状态
- 降低不透明度（通常50%）
- 禁用交互

**加载（Loading）**
- 处理中的状态
- 提供进度指示
- 防止重复提交

## 加载时长策略

**短操作（< 2秒）**
- 使用：加载动画/旋转器
- 示例：按钮加载状态

**中等操作（2-10秒）**
- 使用：进度条
- 示例：文件上传

**长操作（> 10秒）**
- 使用：进度百分比 + 预计时间
- 示例：大文件处理

## 骨架屏（Skeleton Screens）
- 保持布局稳定
- 减少感知等待时间
- 提供内容预期

## 尊重用户偏好

**prefers-reduced-motion**
- 检测用户系统设置
- 减少或禁用动画
- 保持功能完整

**实现原则**:
- 动画时长 → 接近0（0.01ms）
- 动画迭代 → 1次
- 过渡效果 → 最小化

**替代方案**:
- 使用淡入淡出替代复杂动画
- 使用即时状态变化
- 保持视觉反馈（颜色、图标变化）

## 60fps 动画原则

**优先使用**:
- transform（translate, scale, rotate）
- opacity
- 这些属性在GPU上运行，性能最佳

**避免使用**:
- width, height（触发布局重排）
- top, left（触发布局重排）
- margin, padding（触发布局重排）

**高刷新率支持**:
- 目标：120fps（高刷屏设备）
- 使用原生动画API
- 避免JavaScript动画（移动端）

## 信息分层
Level 1 - 核心信息（始终可见）
- 主要操作
- 关键数据
- 核心导航

Level 2 - 次要信息（悬停/点击显示）
- 详细说明
- 高级选项
- 辅助功能

Level 3 - 深度信息（专门页面）
- 设置和配置
- 帮助文档
- 高级功能

// 渐进式表单示例
function ProgressiveForm() {
  const [step, setStep] = useState(1);

  return (
    <div>
      {/* Step 1: 核心信息 */}
      {step === 1 && (
        <BasicInfo onNext={() => setStep(2)} />
      )}

      {/* Step 2: 可选信息 */}
      {step === 2 && (
        <OptionalInfo
          onBack={() => setStep(1)}
          onNext={() => setStep(3)}
        />
      )}

      {/* Step 3: 确认 */}
      {step === 3 && (
        <Confirmation onBack={() => setStep(2)} />
      )}
    </div>
  );
}

// 渐进式披露示例
function AdvancedSettings() {
  const [showAdvanced, setShowAdvanced] = useState(false);

  return (
    <div>
      {/* 基础设置（始终显示） */}
      <BasicSettings />

      {/* 高级设置（按需显示） */}
      <button onClick={() => setShowAdvanced(!showAdvanced)}>
        {showAdvanced ? '隐藏' : '显示'}高级设置
      </button>

      {showAdvanced && <AdvancedOptions />}
    </div>
  );
}

- 颜色系统: 主色、辅助色、语义色
- 字体系统: 标题、正文、辅助文字
- 间距系统: 4px/8px基准网格
- 圆角系统: 统一的圆角半径
- 阴影系统: 统一的阴影层级

- 按钮行为: 点击、悬停、禁用状态
- 表单验证: 统一的错误提示方式
- 导航模式: 统一的导航结构
- 反馈机制: 统一的成功/错误提示

// 加载状态
<Button loading={isLoading}>
  {isLoading ? '提交中...' : '提交'}
</Button>

// 操作反馈
const handleSave = async () => {
  toast.loading('保存中...');
  try {
    await save();
    toast.success('保存成功！');
  } catch (error) {
    toast.error('保存失败，请重试');
  }
};

- 短操作(<2s): 加载动画
- 中等操作(2-10s): 进度条
- 长操作(>10s): 进度百分比 + 预计时间

/* 移动优先 */
.container {
  padding: 16px;
  font-size: 14px;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    font-size: 16px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

- 最小触摸目标: 44x44px
- 元素间距: 至少8px
- 避免悬停依赖（移动端无悬停）
- 手势支持: 滑动、捏合、长按

- 首屏加载: <2秒
- 交互响应: <100ms
- 动画帧率: 60fps+（高刷屏120fps）
- 图片优化: WebP格式，懒加载

// 骨架屏
function ProductList() {
  const { data, loading } = useProducts();

  if (loading) {
    return <SkeletonList count={10} />;
  }

  return <List data={data} />;
}

// 乐观更新
const handleLike = async (id: string) => {
  // 立即更新UI
  setLiked(true);

  try {
    await api.like(id);
  } catch (error) {
    // 失败时回滚
    setLiked(false);
    toast.error('操作失败');
  }
};

❌ 错误: "Error 500: Internal Server Error"
✅ 正确: "抱歉，服务器出了点问题。我们正在修复，请稍后再试。"

❌ 错误: "Invalid input"
✅ 正确: "邮箱格式不正确，请输入有效的邮箱地址"

function ErrorBoundary({ children }) {
  return (
    <ErrorBoundary
      fallback={
        <div>
          <h2>出错了</h2>
          <p>页面加载失败，请刷新重试</p>
          <button onClick={() => window.location.reload()}>
            刷新页面
          </button>
        </div>
      }
    >
      {children}
    </ErrorBoundary>
  );
}

- Figma: 协作设计工具
- Sketch: Mac设计工具
- Adobe XD: Adobe设计工具
- Framer: 交互原型工具

- Material Design (Google)
- Human Interface Guidelines (Apple)
- Fluent Design (Microsoft)
- Ant Design (Alibaba)
- Chakra UI
- shadcn/ui

- Dribbble: 设计作品展示
- Behance: 创意作品平台
- Pinterest: 设计灵感收集
- Variant.com/community: 高质量设计案例
- Awwwards: 优秀网站设计

- Lighthouse: Chrome性能和可访问性审计
- axe DevTools: 可访问性检查
- WAVE: Web可访问性评估
- Color Contrast Analyzer: 颜色对比度检查

function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  const handleLogin = async (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      await login(email, password);
      toast.success('登录成功！');
    } catch (error) {
      toast.error('邮箱或密码错误，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <form
        onSubmit={handleLogin}
        className="w-full max-w-md space-y-6"
        aria-label="登录表单"
      >
        <h1 className="text-2xl font-bold text-center">
          欢迎回来
        </h1>

        {/* 邮箱输入 */}
        <div>
          <label htmlFor="email" className="block text-sm font-medium mb-2">
            邮箱
          </label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            aria-required="true"
            className="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
            placeholder="your@email.com"
          />
        </div>

        {/* 密码输入 */}
        <div>
          <label htmlFor="password" className="block text-sm font-medium mb-2">
            密码
          </label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            aria-required="true"
            className="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {/* 提交按钮 */}
        <button
          type="submit"
          disabled={loading}
          className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          aria-busy={loading}
        >
          {loading ? '登录中...' : '登录'}
        </button>

        {/* 辅助链接 */}
        <div className="text-center text-sm">
          <a href="/forgot-password" className="text-blue-600 hover:underline">
            忘记密码？
          </a>
        </div>
      </form>
    </div>
  );
}

function SmartSearch() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [predictions, setPredictions] = useState([]);
  const [loading, setLoading] = useState(false);

  // 防抖搜索
  const debouncedSearch = useMemo(
    () => debounce(async (q: string) => {
      if (!q) return;

      setLoading(true);
      try {
        const [searchResults, aiPredictions] = await Promise.all([
          api.search(q),
          api.predict(q)
        ]);
        setResults(searchResults);
        setPredictions(aiPredictions);
      } finally {
        setLoading(false);
      }
    }, 300),
    []
  );

  useEffect(() => {
    debouncedSearch(query);
  }, [query, debouncedSearch]);

  return (
    <div className="relative">
      {/* 搜索输入 */}
      <div className="relative">
        <input
          type="search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="搜索..."
          className="w-full px-4 py-3 pl-12 border rounded-lg"
          aria-label="搜索"
        />
        <SearchIcon className="absolute left-4 top-3.5 text-gray-400" />

        {/* 语音输入按钮 */}
        <button
          onClick={() => startVoiceInput()}
          className="absolute right-4 top-3"
          aria-label="语音搜索"
        >
          <MicIcon />
        </button>
      </div>

      {/* AI预测建议 */}
      {predictions.length > 0 && (
        <div className="mt-2 p-2 bg-blue-50 rounded-lg">
          <p className="text-xs text-gray-600 mb-2">AI建议:</p>
          {predictions.map(p => (
            <button
              key={p.id}
              onClick={() => setQuery(p.text)}
              className="block w-full text-left px-3 py-2 hover:bg-blue-100 rounded"
            >
              {p.text}
              <span className="text-xs text-gray-500 ml-2">
                {Math.round(p.confidence * 100)}% 匹配
              </span>
            </button>
          ))}
        </div>
      )}

      {/* 搜索结果 */}
      {loading ? (
        <div className="mt-4">
          <SkeletonList count={5} />
        </div>
      ) : (
        <div className="mt-4 space-y-2">
          {results.map(result => (
            <SearchResult key={result.id} data={result} />
          ))}
        </div>
      )}
    </div>
  );
}

1. 研究阶段
   - 用户访谈
   - 竞品分析
   - 需求定义

2. 设计阶段
   - 信息架构
   - 交互设计
   - 视觉设计

3. 原型阶段
   - 低保真原型
   - 高保真原型
   - 可用性测试

4. 开发阶段
   - 设计交付
   - 开发协作
   - 设计审查

5. 测试阶段
   - 功能测试
   - 可访问性测试
   - 性能测试

6. 迭代优化
   - 数据分析
   - 用户反馈
   - 持续改进