ui-designer/interaction-specification

# 交互规范

## 适用场景

定义用户与界面交互的细节，包括加载状态、空状态、反馈机制、动效、无障碍等，确保交互流畅、友好、可访问。

## 交互设计原则

1. **及时反馈**：用户操作后立即给予反馈
2. **清晰引导**：明确告诉用户下一步该做什么
3. **容错性**：允许用户撤销、修改操作
4. **一致性**：相同操作在不同场景下行为一致
5. **可访问性**：支持键盘、屏幕阅读器等辅助技术

## 交互规范

### 1. 加载状态

#### 加载场景

| 场景 | 处理方式 | 时机 | 视觉表现 |
|------|----------|------|----------|
| 页面首次加载 | 骨架屏 | 首次进入页面 | 灰色占位块，模拟内容结构 |
| 页面刷新 | 顶部进度条 | 刷新页面 | 蓝色进度条，从左到右 |
| 按钮提交 | 按钮内 spinner | 点击提交按钮后 | 按钮内显示旋转图标，文字隐藏 |
| 列表加载更多 | 底部 spinner | 滚动到底部 | 底部显示"加载中..." |
| 局部刷新 | 区域内 spinner | 刷新某个区域 | 区域内显示旋转图标 |
| 搜索 | 输入框内 spinner | 输入后延迟搜索 | 输入框右侧显示旋转图标 |

#### 骨架屏设计

```
┌─────────────────────────────────────┐
│  ████████                            │  ← 标题占位
│  ████████████                        │  ← 描述占位
│                                     │
│  ████  ████████████████              │  ← 列表项占位
│  ████  ████████████████              │
│  ████  ████████████████              │
└─────────────────────────────────────┘
```

**骨架屏原则**：
- 模拟真实内容的结构和布局
- 使用灰色占位块（Gray-200）
- 添加微妙的动画（shimmer效果）
- 不要显示真实数据的占位符

#### Spinner设计

| 尺寸 | 大小 | 线宽 | 用途 |
|------|------|------|------|
| sm | 16px | 2px | 按钮内、输入框内 |
| md | 24px | 2.5px | 卡片内、区域内 |
| lg | 32px | 3px | 页面级加载 |

**颜色**：
- 主色（Primary）：主要操作的加载
- 灰色（Gray-400）：次要操作的加载
- 白色（White）：深色背景上的加载

### 2. 空状态

#### 空状态场景

| 场景 | 展示内容 | 操作引导 |
|------|----------|----------|
| 无数据 | 插图 + "暂无数据" | "创建第一个项目" 按钮 |
| 搜索无结果 | 插图 + "未找到相关内容" | "尝试其他关键词" 提示 |
| 网络错误 | 插图 + "网络连接失败" | "重试" 按钮 |
| 权限不足 | 插图 + "无权访问" | "返回首页" 按钮 |
| 404页面 | 插图 + "页面不存在" | "返回首页" 按钮 |

#### 空状态设计

```
┌─────────────────────────────────────┐
│                                     │
│           [插图/图标]                │
│                                     │
│           暂无数据                   │
│      您还没有创建任何项目            │
│                                     │
│        [创建项目] 按钮               │
│                                     │
└─────────────────────────────────────┘
```

**空状态原则**：
- 使用友好的插图或图标
- 说明为什么是空的
- 提供明确的操作引导
- 不要让用户感到困惑或沮丧

### 3. 反馈机制

#### Toast通知

| 类型 | 颜色 | 图标 | 持续时间 | 位置 |
|------|------|------|----------|------|
| Success | `Success` | ✓ | 3秒 | 顶部居中 |
| Warning | `Warning` | ⚠ | 4秒 | 顶部居中 |
| Error | `Error` | ✕ | 5秒 | 顶部居中 |
| Info | `Info` | ℹ | 3秒 | 顶部居中 |

**Toast设计**：
```
┌─────────────────────────────────────┐
│  [图标]  操作成功                    │
└─────────────────────────────────────┘
```

- 背景：对应语义色
- 文字：白色
- 圆角：radius-md
- 阴影：shadow-lg
- 最大宽度：400px
- 可手动关闭（右侧×按钮）

#### Modal确认框

| 类型 | 用途 | 按钮 |
|------|------|------|
| 确认 | 危险操作（删除、清空） | "取消" + "确认" |
| 警告 | 重要提示 | "我知道了" |
| 信息 | 详细说明 | "关闭" |

**Modal设计**：
```
┌─────────────────────────────────────┐
│  标题                          [×]   │
├─────────────────────────────────────┤
│                                     │
│  内容区域                            │
│                                     │
├─────────────────────────────────────┤
│              [取消]  [确认]          │
└─────────────────────────────────────┘
```

- 背景：White
- 圆角：radius-xl
- 阴影：shadow-2xl
- 最大宽度：480px
- 遮罩：rgba(0,0,0,0.5)

#### 表单验证

| 时机 | 验证方式 | 反馈位置 |
|------|----------|----------|
| 输入时 | 实时验证（延迟300ms） | 输入框下方 |
| 失焦时 | 立即验证 | 输入框下方 |
| 提交时 | 全部验证 | 输入框下方 + Toast |

**错误提示**：
- 颜色：Error
- 字号：14px
- 图标：✕
- 位置：输入框下方，space-2间距

### 4. 动效规范

#### 页面过渡

| 场景 | 动效 | 参数 |
|------|------|------|
| 页面进入 | 淡入 | 300ms ease-out, opacity 0→1 |
| 页面退出 | 淡出 | 200ms ease-in, opacity 1→0 |
| 路由切换 | 淡入淡出 | 250ms ease-in-out |

#### 弹窗动效

| 场景 | 动效 | 参数 |
|------|------|------|
| Modal出现 | 淡入 + 缩放 | 250ms ease-out, scale 0.95→1, opacity 0→1 |
| Modal消失 | 淡出 + 缩放 | 200ms ease-in, scale 1→0.95, opacity 1→0 |
| Drawer出现 | 滑入 | 300ms ease-out, translateX -100%→0 |
| Drawer消失 | 滑出 | 250ms ease-in, translateX 0→-100% |

#### 微交互

| 场景 | 动效 | 参数 |
|------|------|------|
| 按钮悬停 | 背景色渐变 | 150ms ease-out |
| 按钮按下 | 缩放 | 100ms ease-out, scale 0.98 |
| 卡片悬停 | 阴影加深 | 200ms ease-out |
| 展开收起 | 高度动画 | 250ms ease-in-out |
| 淡入淡出 | 透明度 | 200ms ease-in-out |

**动效原则**：
- 动效要有意义，不要为了炫技
- 保持克制，不要过度动画
- 微交互要快（150ms），大动画可以慢（300ms）
- 提供关闭动画的选项（尊重用户偏好）

### 5. 无障碍设计

#### 颜色对比度

| 组合 | 对比度 | 是否合规（WCAG AA） |
|------|--------|---------------------|
| Gray-900 / White | 16.1:1 | ✅ |
| Gray-700 / White | 9.5:1 | ✅ |
| Gray-500 / White | 4.6:1 | ✅ |
| Primary / White | 需计算 | 需≥4.5:1 |

**对比度要求**：
- 正文文字：≥4.5:1（WCAG AA）
- 大文字（18px+）：≥3:1（WCAG AA）
- 图标、UI组件：≥3:1

#### 键盘导航

| 按键 | 功能 |
|------|------|
| Tab | 移动到下一个可聚焦元素 |
| Shift + Tab | 移动到上一个可聚焦元素 |
| Enter | 激活按钮、链接、提交表单 |
| Space | 切换复选框、单选框、开关 |
| Escape | 关闭弹窗、下拉菜单、取消操作 |
| 方向键 | 在列表、菜单、选项卡中导航 |
| Home / End | 跳到列表开头/结尾 |

**聚焦指示**：
- 所有可交互元素必须有明显的聚焦状态
- 聚焦样式：2px Primary 外发光
- 不要移除默认的 outline

#### 屏幕阅读器

| 元素 | ARIA 属性 | 说明 |
|------|-----------|------|
| 按钮 | `aria-label` | 图标按钮必须有文字说明 |
| 输入框 | `aria-label` 或关联 `<label>` | 说明输入框用途 |
| 加载状态 | `aria-busy="true"` | 告知正在加载 |
| 错误提示 | `aria-live="polite"` | 实时播报错误 |
| 弹窗 | `role="dialog"`, `aria-modal="true"` | 标识为对话框 |
| 导航 | `role="navigation"`, `aria-label` | 标识导航区域 |

#### 触控目标

| 设备 | 最小尺寸 | 推荐尺寸 |
|------|----------|----------|
| 移动端 | 44x44px | 48x48px |
| 桌面端 | 32x32px | 40x40px |

**触控原则**：
- 按钮、链接等可点击元素要足够大
- 相邻元素之间要有足够间距（至少8px）
- 移动端优先考虑拇指可达区域

### 6. 响应式交互

#### 断点调整

| 断点 | 交互调整 |
|------|----------|
| < 640px (mobile) | 全屏弹窗、底部抽屉、大触控目标 |
| 640-1024px (tablet) | 侧边抽屉、适中触控目标 |
| > 1024px (desktop) | 居中弹窗、悬停效果、小触控目标 |

#### 移动端特殊交互

| 交互 | 说明 |
|------|------|
| 下拉刷新 | 列表顶部下拉触发刷新 |
| 滑动删除 | 列表项左滑显示删除按钮 |
| 长按 | 长按触发上下文菜单 |
| 双击 | 双击放大图片 |
| 捏合缩放 | 图片、地图支持捏合缩放 |

## 输出要求

在UI设计文档中，应包含以下交互规范章节：

```markdown
## 7. 交互规范

### 7.1 加载状态
[加载场景表格]

### 7.2 空状态
[空状态场景表格]

### 7.3 反馈机制
[Toast、Modal、表单验证规范]

### 7.4 动效规范
[页面过渡、弹窗动效、微交互表格]

### 7.5 无障碍设计
[颜色对比度、键盘导航、屏幕阅读器、触控目标]
```

## 关键原则

1. **及时反馈**：用户操作后立即给予反馈
2. **清晰引导**：明确告诉用户下一步该做什么
3. **容错性**：允许用户撤销、修改操作
4. **可访问性**：支持键盘、屏幕阅读器等辅助技术

## 常见误区

❌ **无加载提示**：操作后没有任何反馈，用户不知道是否成功
❌ **空状态不友好**：只显示"无数据"，没有引导用户下一步
❌ **过度动画**：所有元素都加动画，影响性能和体验
❌ **忽略无障碍**：不支持键盘导航，颜色对比度不足