common-ui-design-spec

name common-ui-design-spec description UI设计规范技能，提供设计系统、配色方案、排版规则、无障碍标准等专业UI设计指导 trigger 需要创建或遵循UI设计规范时 disable-when 已有成熟的设计系统且无需变更时 category common tags ["ui","design","spec","system","accessibility","wcag"] common-ui-design-spec 功能描述 UI设计规范技能提供专业的设计系统指导，包括配色方案、排版规则、间距系统、组件规范、无障碍标准等。基于业界最佳实践，帮助团队建立统一的视觉语言和交互规范。 触发条件 新项目需要建立设计系统时 需要为产品定义配色方案时 需要确保无障碍设计合规时 需要统一组件样式和交互规范时 何时使用 项目初始化阶段需要定义设计规范时 开发过程中需要参考设计规范时 代码审查时需要检查设计合规性时 需要生成设计文档时 何时不使用 已有完善的设计系统且无需调整时 仅需要简单的页面修改时 用户明确不需要设计规范时 核心功能 1. 设计系统定义 颜色系统（主色、辅色、中性色、语义色） 排版系统（字体、字号、行高、字重） 间距系统（统一的间距令牌） 阴影系统（层级和深度） 圆角系统（统一的圆角大小） 2. 配色方案 行业适配的配色方案推荐 对比度检查（WCAG 2.1 AA/AAA） 配色方案生成器 深色模式支持 3. 排版规则 字体选择和组合 字号层级系统 行高和字间距 可读性最佳实践 4. 组件规范 4.1 表单组件 4.1.1 输入框（Input） 描述 ：用于接收用户输入的文本框 组件结构 ： ┌─────────────────────────────────┐ │ [图标] 输入占位符 [清除按钮] │ └─────────────────────────────────┘ 状态定义 ： 状态 样式 说明 默认 灰色边框 未交互状态 聚焦 主色边框 + 阴影 用户点击或Tab进入 悬停 边框变深 鼠标悬停 禁用 灰色背景 + 禁用光标 不可输入 错误 红色边框 + 错误图标 输入校验失败 成功 绿色边框 + 成功图标 输入校验通过 尺寸规格 ： 尺寸 高度 字体大小 xs 32px 12px sm 36px 13px md 40px 14px lg 48px 16px 交互行为 ： 聚焦时显示清除按钮（有内容时） 支持前缀/后缀图标 支持字数统计 回车触发提交 无障碍要求 ： 支持键盘导航（Tab聚焦、Enter提交） 标签与输入框关联（label for） 错误状态提供ARIA描述 4.1.2 密码框（Password） 描述 ：用于输入密码的安全输入框 组件结构 ： ┌─────────────────────────────────┐ │ [锁图标] ******** [眼睛图标] │ └─────────────────────────────────┘ 状态定义 ：同输入框 尺寸规格 ：同输入框 交互行为 ： 默认隐藏密码（显示●●●●） 点击眼睛图标切换显示/隐藏 支持密码强度提示条 密码强度等级 ： 等级 颜色 条件 弱 红色 < 6位或单一字符类型 中 橙色 6-8位或两种字符类型 强 绿色 ≥ 8位且三种字符类型 无障碍要求 ：同输入框 4.1.3 选择器（Select） 描述 ：用于从选项列表中选择值 组件结构 ： ┌─────────────────────────────────┐ │ 请选择 [下拉箭头] │ └─────────────────────────────────┘ ▼ ┌─────────────────────────────────┐ │ [勾选] 选项1 │ │ [勾选] 选项2 │ │ [勾选] 选项3 │ └─────────────────────────────────┘ 状态定义 ：同输入框 尺寸规格 ：同输入框 交互行为 ： 点击展开下拉列表 支持搜索过滤 支持多选（复选框） 支持远程搜索 无障碍要求 ： 键盘上下键导航选项 Enter确认选择 Esc关闭下拉 4.1.4 开关（Switch） 描述 ：用于切换两种状态（开/关） 组件结构 ： ┌───────┐ ┌─────────────┐ │ ● │ │ ● │ └───────┘ └─────────────┘ 关闭状态 开启状态 状态定义 ： 状态 样式 说明 开启 主色背景，圆点在右 状态为真 关闭 灰色背景，圆点在左 状态为假 禁用 半透明 不可切换 尺寸规格 ： 尺寸 宽度 高度 sm 32px 18px md 40px 22px lg 48px 26px 交互行为 ： 点击切换状态 支持拖拽切换 切换时有过渡动画 无障碍要求 ： 键盘Space切换 提供ARIA状态描述 4.2 反馈组件 4.2.1 加载框（Loading） 描述 ：用于表示操作正在进行中 组件结构 ： ┌─────────────────────────────────┐ │ ○○○ │ ← 旋转动画 │ 加载中... │ └─────────────────────────────────┘ 类型 ： 类型 说明 适用场景 旋转器 圆形旋转动画 轻量级加载 骨架屏 占位骨架 页面级加载 进度条 进度指示 文件上传、任务进度 按钮加载 按钮内旋转器 提交操作 尺寸规格 ： 尺寸 直径 边框宽度 sm 20px 2px md 28px 3px lg 40px 4px 交互行为 ： 加载时禁用交互 支持自定义加载文案 支持全屏遮罩 无障碍要求 ： 提供ARIA live区域通知加载状态 加载完成后恢复焦点 4.2.2 提示框（Alert） 描述 ：用于向用户显示重要信息 组件结构 ： ┌─────────────────────────────────┐ │ [图标] 提示内容 [关闭按钮] │ └─────────────────────────────────┘ 类型 ： 类型 颜色 图标 用途 Info 蓝色 信息图标 一般信息提示 Success 绿色 成功图标 操作成功提示 Warning 橙色 警告图标 需要注意的信息 Error 红色 错误图标 错误信息提示 状态定义 ： 状态 说明 默认 显示提示内容 关闭 点击关闭按钮隐藏 可关闭 显示关闭按钮 不可关闭 无关闭按钮 交互行为 ： 支持自动关闭（可配置时长） 支持手动关闭 支持点击遮罩关闭 无障碍要求 ： 使用ARIA role="alert" 支持键盘Esc关闭 4.2.3 Toast 描述 ：用于短暂显示操作结果 组件结构 ： ┌─────────────────┐ │ [图标] 提示内容 │ └─────────────────┘ 类型 ：同Alert 位置 ： 位置 说明 top-center 顶部居中 top-right 顶部右侧 bottom-center 底部居中 bottom-right 底部右侧 交互行为 ： 自动消失（默认3秒） 点击可手动关闭 多个Toast堆叠显示 无障碍要求 ： 使用ARIA live区域 不打断用户操作 4.2.4 进度条（Progress） 描述 ：用于显示任务进度 组件结构 ： ┌─────────────────────────────────┐ │ ████████████░░░░░░░░░░░░░░░░░ │ │ 50% │ └─────────────────────────────────┘ 类型 ： 类型 说明 线性 水平进度条 环形 圆形进度指示器 仪表盘 半圆进度指示器 状态定义 ： 状态 样式 进行中 主色进度条 成功 绿色进度条 错误 红色进度条 暂停 橙色进度条 交互行为 ： 实时更新进度 支持进度标签显示 支持动画效果 无障碍要求 ： 使用ARIA role="progressbar" 提供aria-valuenow/aria-valuemin/aria-valuemax 4.3 数据展示组件 4.3.1 表格（Table） 描述 ：用于展示结构化数据 组件结构 ： ┌──────┬──────┬──────┬──────┐ │ 列1 │ 列2 │ 列3 │ 操作 │ ← 表头（可固定） ├──────┼──────┼──────┼──────┤ │ 数据 │ 数据 │ 数据 │ [按钮] │ ← 数据行 │ 数据 │ 数据 │ 数据 │ [按钮] │ │ 数据 │ 数据 │ 数据 │ [按钮] │ ├──────┼──────┼──────┼──────┤ │ 共100条 1/10 [上一页] [下一页] 页大小：[10 ▼] │ ← 分页器 └──────┴──────┴──────┴──────┘ 分页规范 ： 项目 说明 默认页大小 10 可选页大小 10 / 20 / 50 分页器位置 底部居中 分页信息 显示总数、当前页/总页数 跳转 支持输入页码跳转 功能特性 ： 特性 说明 排序 点击表头切换升序/降序 筛选 表头下拉筛选 行选择 单选/多选（复选框） 固定表头 滚动时表头固定 固定列 首列/末列固定 加载态 骨架屏或加载提示 空状态 无数据时显示空状态提示 状态定义 ： 状态 说明 正常 显示数据 加载中 骨架屏或加载动画 空状态 显示空状态图标和提示 错误状态 显示错误提示和重试按钮 尺寸规格 ： 项目 规格 行高 48px 表头高度 44px 表格边框 1px #E8E8E8 单元格内边距 12px 16px 交互行为 ： 点击表头排序 点击复选框选择行 双击行可编辑（如支持） 支持拖拽调整列宽 无障碍要求 ： 使用语义化表格结构（thead/tbody/th） 支持键盘导航（上下键切换行） 筛选下拉支持键盘操作 4.3.2 标签（Tag） 描述 ：用于分类和标记 组件结构 ： ┌──────────┐ │ 标签内容 [×] │ └──────────┘ 类型 ： 类型 颜色 用途 默认 灰色 普通标签 主色 主色背景 重要标签 成功 绿色 成功状态 警告 橙色 警告状态 错误 红色 错误状态 状态定义 ： 状态 说明 默认 显示标签 可关闭 显示关闭按钮 选中 高亮显示 交互行为 ： 点击关闭按钮移除标签 支持点击选中/取消选中 无障碍要求 ： 使用ARIA role="tag" 关闭按钮支持键盘操作 4.3.3 徽章（Badge） 描述 ：用于显示通知数量 组件结构 ： ┌─┐ │5│ ← 徽章 ┌───┴─┴───┐ │ 图标/按钮 │ └──────────┘ 状态定义 ： 状态 说明 默认 显示数量 圆点 只显示红点（无数字） 最大值 超过99显示99+ 零值 隐藏或显示0 尺寸规格 ： 尺寸 宽度 高度 字体大小 sm 18px 18px 10px md 20px 20px 12px lg 24px 24px 14px 交互行为 ： 点击清除通知 悬停显示详情 无障碍要求 ： 使用ARIA role="status" 提供数量描述 4.4 导航组件 4.4.1 面包屑（Breadcrumb） 描述 ：用于显示当前页面在层级结构中的位置 组件结构 ： 首页 / 产品中心 / 电子产品 / 手机 ← 当前页面 状态定义 ： 状态 样式 当前页 主色文字 可点击 灰色文字，悬停变主色 分隔符 /（可自定义） 交互行为 ： 点击导航到对应页面 支持下拉菜单（有子项时） 无障碍要求 ： 使用ARIA role="navigation" 使用ol/li语义化结构 4.4.2 标签页（Tabs） 描述 ：用于在同一区域切换不同内容 组件结构 ： ┌─────────────────────────────────┐ │ [标签1 ●] [标签2] [标签3] │ ← 标签栏 ├─────────────────────────────────┤ │ │ │ 标签1的内容区域 │