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. **可访问性**：支持键盘、屏幕阅读器等辅助技术 ## 常见误区 ❌ **无加载提示**：操作后没有任何反馈，用户不知道是否成功 ❌ **空状态不友好**：只显示"无数据"，没有引导用户下一步 ❌ **过度动画**：所有元素都加动画，影响性能和体验 ❌ **忽略无障碍**：不支持键盘导航，颜色对比度不足