UI Designer/interaction Specification

交互规范

适用场景

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

交互设计原则

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

交互规范

1. 加载状态

加载场景

骨架屏设计

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

骨架屏原则：

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

Spinner设计

颜色：

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

2. 空状态

空状态场景

空状态设计

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

空状态原则：

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

3. 反馈机制

Toast通知

Toast设计：

┌─────────────────────────────────────┐
│  [图标]  操作成功                    │
└─────────────────────────────────────┘

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

Modal确认框

Modal设计：

┌─────────────────────────────────────┐
│  标题                          [×]   │
├─────────────────────────────────────┤
│                                     │
│  内容区域                            │
│                                     │
├─────────────────────────────────────┤
│              [取消]  [确认]          │
└─────────────────────────────────────┘

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

表单验证

错误提示：

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

4. 动效规范

页面过渡

弹窗动效

微交互

动效原则：

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

5. 无障碍设计

颜色对比度

对比度要求：

• 正文文字：≥4.5:1（WCAG AA）
• 大文字（18px+）：≥3:1（WCAG AA）
• 图标、UI组件：≥3:1

键盘导航

聚焦指示：

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

屏幕阅读器

触控目标

触控原则：

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

6. 响应式交互

断点调整

移动端特殊交互

输出要求

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

## 7. 交互规范

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

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

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

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

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

关键原则

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

常见误区

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