Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/echoVic/boss-skill --skill ui-designer-interaction-specificationEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Basado en la clasificación ocupacional SOC
Mostrando SKILL.md
| 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 无障碍设计
[颜色对比度、键盘导航、屏幕阅读器、触控目标]
❌ 无加载提示：操作后没有任何反馈，用户不知道是否成功 ❌ 空状态不友好：只显示"无数据"，没有引导用户下一步 ❌ 过度动画：所有元素都加动画，影响性能和体验 ❌ 忽略无障碍：不支持键盘导航，颜色对比度不足