Menu
交互规范，定义加载状态、空状态、反馈机制、动效、无障碍等交互细节
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
BMAD 全自动研发流水线编排器。编排 9 个专业 Agent（PM、架构师、UI Designer、Tech Lead、Scrum Master、Frontend、Backend、QA、DevOps）从需求到部署。 Triggers: 'boss mode', '/boss', '全自动开发', '从需求到部署', '帮我做一个', 'build this', 'ship it', '全流程', '自动化开发', '一键开发', 'start a project', 'new feature' Does NOT trigger: - 单文件修改或简单 bug 修复（直接编辑即可） - 纯代码阅读或解释（使用 read 工具） - 已有 pipeline 正在运行时的重复启动 - 极小事（预计 <30 分钟人工可完成、不需要 PRD/架构/门禁记录） Output: 完整项目代码 + PRD/架构/UI/测试/部署文档，写入 .boss/<feature>/ 目录
后端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践
自动生成 CHANGELOG，基于 git 提交历史和 pipeline 产物信息，遵循 Conventional Commits 和 Keep a Changelog 规范
从CEO/战略视角进行商业价值评审，评估市场契合度、ROI、竞争优势、风险和战略对齐
设计变体模式，产出2-3个设计方案及 tradeoff 分析，供用户选择后确定最终方案
前端测试编写指南，包括单元测试、集成测试和E2E测试的编写方法和最佳实践
| name | ui-designer/interaction-specification |
| description | 交互规范，定义加载状态、空状态、反馈机制、动效、无障碍等交互细节 |
| version | 1.0.0 |
| agent | ui-designer |
| type | guideline |
| user-invocable | false |
| agent-invocable | true |
| dependencies | ["ui-designer/design-system"] |
| triggers | ["需要定义交互行为时","需要处理边界情况时","需要确保无障碍访问时"] |
定义用户与界面交互的细节，包括加载状态、空状态、反馈机制、动效、无障碍等，确保交互流畅、友好、可访问。
| 场景 | 处理方式 | 时机 | 视觉表现 |
|---|---|---|---|
| 页面首次加载 | 骨架屏 | 首次进入页面 | 灰色占位块，模拟内容结构 |
| 页面刷新 | 顶部进度条 | 刷新页面 | 蓝色进度条，从左到右 |
| 按钮提交 | 按钮内 spinner | 点击提交按钮后 | 按钮内显示旋转图标，文字隐藏 |
| 列表加载更多 | 底部 spinner | 滚动到底部 | 底部显示"加载中..." |
| 局部刷新 | 区域内 spinner | 刷新某个区域 | 区域内显示旋转图标 |
| 搜索 | 输入框内 spinner | 输入后延迟搜索 | 输入框右侧显示旋转图标 |
┌─────────────────────────────────────┐
│ ████████ │ ← 标题占位
│ ████████████ │ ← 描述占位
│ │
│ ████ ████████████████ │ ← 列表项占位
│ ████ ████████████████ │
│ ████ ████████████████ │
└─────────────────────────────────────┘
骨架屏原则：
| 尺寸 | 大小 | 线宽 | 用途 |
|---|---|---|---|
| sm | 16px | 2px | 按钮内、输入框内 |
| md | 24px | 2.5px | 卡片内、区域内 |
| lg | 32px | 3px | 页面级加载 |
颜色：
| 场景 | 展示内容 | 操作引导 |
|---|---|---|
| 无数据 | 插图 + "暂无数据" | "创建第一个项目" 按钮 |
| 搜索无结果 | 插图 + "未找到相关内容" | "尝试其他关键词" 提示 |
| 网络错误 | 插图 + "网络连接失败" | "重试" 按钮 |
| 权限不足 | 插图 + "无权访问" | "返回首页" 按钮 |
| 404页面 | 插图 + "页面不存在" | "返回首页" 按钮 |
┌─────────────────────────────────────┐
│ │
│ [插图/图标] │
│ │
│ 暂无数据 │
│ 您还没有创建任何项目 │
│ │
│ [创建项目] 按钮 │
│ │
└─────────────────────────────────────┘
空状态原则：
| 类型 | 颜色 | 图标 | 持续时间 | 位置 |
|---|---|---|---|---|
| Success | Success | ✓ | 3秒 | 顶部居中 |
| Warning | Warning | ⚠ | 4秒 | 顶部居中 |
| Error | Error | ✕ | 5秒 | 顶部居中 |
| Info | Info | ℹ | 3秒 | 顶部居中 |
Toast设计：
┌─────────────────────────────────────┐
│ [图标] 操作成功 │
└─────────────────────────────────────┘
| 类型 | 用途 | 按钮 |
|---|---|---|
| 确认 | 危险操作（删除、清空） | "取消" + "确认" |
| 警告 | 重要提示 | "我知道了" |
| 信息 | 详细说明 | "关闭" |
Modal设计：
┌─────────────────────────────────────┐
│ 标题 [×] │
├─────────────────────────────────────┤
│ │
│ 内容区域 │
│ │
├─────────────────────────────────────┤
│ [取消] [确认] │
└─────────────────────────────────────┘
| 时机 | 验证方式 | 反馈位置 |
|---|---|---|
| 输入时 | 实时验证（延迟300ms） | 输入框下方 |
| 失焦时 | 立即验证 | 输入框下方 |
| 提交时 | 全部验证 | 输入框下方 + Toast |
错误提示：
| 场景 | 动效 | 参数 |
|---|---|---|
| 页面进入 | 淡入 | 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 |
动效原则：
| 组合 | 对比度 | 是否合规（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 |
对比度要求：
| 按键 | 功能 |
|---|---|
| Tab | 移动到下一个可聚焦元素 |
| Shift + Tab | 移动到上一个可聚焦元素 |
| Enter | 激活按钮、链接、提交表单 |
| Space | 切换复选框、单选框、开关 |
| Escape | 关闭弹窗、下拉菜单、取消操作 |
| 方向键 | 在列表、菜单、选项卡中导航 |
| Home / End | 跳到列表开头/结尾 |
聚焦指示：
| 元素 | 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 |
触控原则：
| 断点 | 交互调整 |
|---|---|
| < 640px (mobile) | 全屏弹窗、底部抽屉、大触控目标 |
| 640-1024px (tablet) | 侧边抽屉、适中触控目标 |
| > 1024px (desktop) | 居中弹窗、悬停效果、小触控目标 |
| 交互 | 说明 |
|---|---|
| 下拉刷新 | 列表顶部下拉触发刷新 |
| 滑动删除 | 列表项左滑显示删除按钮 |
| 长按 | 长按触发上下文菜单 |
| 双击 | 双击放大图片 |
| 捏合缩放 | 图片、地图支持捏合缩放 |
在UI设计文档中，应包含以下交互规范章节：
## 7. 交互规范
### 7.1 加载状态
[加载场景表格]
### 7.2 空状态
[空状态场景表格]
### 7.3 反馈机制
[Toast、Modal、表单验证规范]
### 7.4 动效规范
[页面过渡、弹窗动效、微交互表格]
### 7.5 无障碍设计
[颜色对比度、键盘导航、屏幕阅读器、触控目标]
❌ 无加载提示：操作后没有任何反馈，用户不知道是否成功 ❌ 空状态不友好：只显示"无数据"，没有引导用户下一步 ❌ 过度动画：所有元素都加动画，影响性能和体验 ❌ 忽略无障碍：不支持键盘导航，颜色对比度不足