name: ui-design-engine description: UI设计专家决策引擎。提供项目类型路由(网页/移动端/后台/B2B/B2C)、设计系统决策(自建vs组件库)、Token三层架构、暗色模式适配、质量门控三级清单、10个常见错误模式。当用户需要UI设计、界面设计、设计系统、组件库选择、Design System、暗色模式、设计评审、UX设计时使用此技能。

UI设计决策引擎

从需求到交付的设计决策——类型路由×设计系统×Token体系×质量门控×错误免疫

版本：3.0 专家级 | 适用场景：企业级UI设计/设计系统构建/团队协作交付

工作流程总览

第一章：项目类型路由决策矩阵

1.1 六大项目类型完整决策框架

1.1.1 响应式网页端设计

| 维度 | 设计要求 | 技术实现 | 关键指标 | |------|---------|---------|---------| | 栅格系统 | 12列/16列弹性栅格 | CSS Grid + Flexbox | 列间距24px/32px | | 断点策略 | 5档断点覆盖 | Mobile-first媒体查询 | 覆盖90%设备 | | 首屏效率 | LCP<2.5s | 骨架屏+渐进加载 | 3G网络下可读 | | 触控区域 | 最小44×44px | Touch-action优化 | iOS/Android兼容 | | 内容密度 | 可读性优先 | 行高1.5-1.7 | 段落宽度50-75字符 |

网页端设计差异对照表：

| 设计元素 | 桌面端 | 平板端 | 移动端 | |---------|--------|--------|--------| | 栅格 | 12/16列 | 8列 | 4列 | | 主导航 | 顶部横向 | 左侧抽屉 | 底部Tab | | 内容区 | 多栏布局 | 单栏/双栏 | 单栏瀑布流 | | 图片策略 | 1x/2x/3x | 1x/2x | 动态裁剪 | | 交互方式 | 悬停悬停 | 触控+手势 | 手势为主 |

1.1.2 原生/跨端移动端设计

| 维度 | 设计要求 | iOS规范 | Android规范 | |------|---------|---------|-------------| | 安全区 | 全面屏适配 | Safe Area 44pt顶部 | Status Bar 24dp+ | | 导航模式 | 符合平台习惯 | Tab Bar(底部) | Bottom Navigation | | 触控目标 | ≥44×44pt(Apple)/48dp(Material) | HIG标准 | MD标准 | | 手势系统 | 平台原生手势 | 边缘滑动返回 | 三键导航/手势 | | 字体 | 系统字体 | SF Pro | Roboto | | 图标 | 系统风格统一 | SF Symbols | Material Icons |

移动端核心设计原则：

1.1.3 后台管理系统(B2B SaaS)设计

| 模块 | 设计重点 | 组件推荐 | 数据密度 | |------|---------|---------|---------| | 数据表格 | 分页/筛选/排序/批量操作 | AG Grid/Pro Table | 高密度 | | 表单系统 | 复杂联动/条件显隐/文件上传 | Formily/ProForm | 中密度 | | 导航架构 | 多级菜单/标签页/面包屑 | Ant Design Menu | 低密度 | | 仪表盘 | 数据可视化/实时监控 | ECharts/AntV | 卡片式 | | 权限系统 | 角色视图/操作隔离 | RBAC组件 | 状态引导 |

后台系统设计决策树：

1.1.4 B2C消费类产品设计

| 维度 | 设计要求 | 情感化策略 | 转化优化 | |------|---------|-----------|---------| | 品牌表达 | VI一致性+品牌调性 | 品牌色/字体/动效 | 情感化CTA | | 转化漏斗 | 关键路径优化 | 进度指示+心理激励 | 减少摩擦 | | 留存设计 | 签到/成就/通知 | 成就系统+Push策略 | LTV提升 | | 引导流 | 新手引导+功能发现 | Onboarding+Tips | 功能激活 | | 空状态 | 情感化兜底 | 插画+文案引导 | 行为引导 |

1.1.5 B2B企业级产品设计

| 特点 | 设计策略 | 协作功能 | 权限体系 | |------|---------|---------|---------| | 多人协作 | 实时同步+版本控制 | 评论/标注/分配 | RBAC+ACL | | 工作流 | 状态流转可视化 | 审批流/任务流 | 节点配置 | | 企业集成 | SSO/OIDC集成 | API/Webhook | 租户隔离 | | 合规要求 | 审计日志+数据导出 | 操作记录 | 权限追溯 |

1.1.6 数据可视化大屏设计

| 维度 | 设计要求 | 图表类型 | 交互方式 | |------|---------|---------|---------| | 信息密度 | 高密度数据展示 | 地图+图表混合 | 缩放+钻取 | | 实时性 | WebSocket推送 | 动态曲线 | 实时标注 | | 可读性 | 远距离可辨识 | 大字号+高对比 | 点击下钻 | | 主题 | 深色主题为主 | 全局主题切换 | 主题定制 |

1.2 设计差异对照总表

| 维度 | 网页端 | 移动端 | 后台系统 | B2C消费 | B2B企业 | 大屏 | |------|--------|--------|---------|---------|--------|-----| | 响应式 | 必需 | 不适用 | 可选 | 可选 | 单一 | 固定 | | 触控优化 | 部分 | 核心 | 可选 | 必需 | 可选 | 触摸可选 | | 性能优先级 | 中 | 高 | 低 | 中 | 中 | 低 | | 品牌表达 | 中 | 高 | 低 | 高 | 低 | 中 | | 信息密度 | 低 | 低 | 高 | 中 | 中 | 高 | | 操作效率 | 中 | 中 | 高 | 中 | 高 | 中 | | 无障碍 | 必需 | 必需 | 必需 | 推荐 | 必需 | 可选 |

第二章：设计系统决策框架

2.1 自建 vs 组件库决策树

2.2 主流组件库对比分析

| 组件库 | 框架 | 定位 | 主题定制 | 组件数量 | 学习曲线 | 适用场景 | 缺点 | |--------|------|------|---------|---------|---------|---------|------| | Ant Design | React | 企业中后台 | 主题平台 | 60+ | 中 | SaaS/后台 | 体积大 | | Element Plus | Vue3 | 企业中后台 | CSS变量 | 60+ | 低 | Vue项目 | Vue专属 | | Material UI | React | 通用 | 主题Provider | 50+ | 中 | 国际化产品 | Material风格明显 | | Chakra UI | React | 现代化 | Style Props | 50+ | 低 | 快速开发 | 运行时样式 | | Radix UI | React | Headless | 完全控制 | 40+ | 中 | 高度定制 | 无默认样式 | | shadcn/ui | React | Headless+设计 | Tailwind | 30+ | 中 | 现代化项目 | 需手动维护 | | daisyUI | React/Vue | Tailwind插件 | 主题系统 | 40+ | 低 | Tailwind项目 | 依赖Tailwind | | Arco Design | React | 企业级 | 主题平台 | 60+ | 中 | 字节系产品 | 体积大 | | TDesign | 多框架 | 企业级 | 主题平台 | 60+ | 中 | 腾讯系产品 | 生态一般 |

2.3 组件库选型决策矩阵

| 评估维度 | Ant Design | Element Plus | Chakra UI | shadcn/ui | Radix UI | |---------|-----------|--------------|-----------|-----------|----------| | 开发效率 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | | 定制灵活性 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | | 主题覆盖 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | | Bundle Size | 1.2MB+ | 300KB+ | 50KB+ | 0KB(源码) | 0KB(Headless) | | 设计一致 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ | | 无障碍支持 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | | 文档质量 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | | 社区活跃 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |

2.4 自建 vs 组件库成本分析

| 维度 | 使用组件库 | 自建组件库 | 混合方案 | |------|-----------|-----------|---------| | 初始开发 | 1x | 5-10x | 2-3x | | 维护成本 | 低 | 高 | 中 | | 品牌差异化 | 需深度定制 | 完全可控 | 部分可控 | | 迭代速度 | 快 | 慢 | 中 | | 一致性保证 | 依赖规范 | 自己掌控 | 需规范约束 | | 团队要求 | 初级即可 | 资深设计师+前端 | 中级团队 |

建议：

创业公司/快速验证：使用成熟组件库 + 品牌主题覆盖
中型企业：shadcn/ui + 自建特色组件
大型企业：自建设计系统 + Design Token

2.5 设计系统架构决策

第三章：Design Token三层架构深度解析

3.1 Token体系概述

3.2 Global Token 完整定义

3.2.1 色彩原语 (Color Palette)

3.2.2 间距原语 (Spacing Scale)

| Token | 值 | 用途 | |-------|-----|------| | spacing.0 | 0px | 重置 | | spacing.1 | 1px | 细线 | | spacing.2 | 2px | 边框 | | spacing.3 | 3px | 微调 | | spacing.4 | 4px | 图标间距 | | spacing.6 | 6px | 紧凑间距 | | spacing.8 | 8px | 组件内间距 | | spacing.12 | 12px | 小间距 | | spacing.16 | 16px | 标准间距 | | spacing.20 | 20px | 中间距 | | spacing.24 | 24px | 大间距 | | spacing.32 | 32px | 区块间距 | | spacing.40 | 40px | 大区块 | | spacing.48 | 48px | 页面区块 | | spacing.64 | 64px | 页面间距 | | spacing.80 | 80px | 大页面 | | spacing.96 | 96px | 超大间距 | | spacing.128 | 128px | 极间距 |

3.2.3 字体原语 (Typography Scale)

| Token | 值 | 行高 | 用途 | |-------|-----|------|------| | fontSize.xs | 12px | 16px | 辅助文字 | | fontSize.sm | 13px | 18px | 次要文字 | | fontSize.base | 14px | 20px | 正文 | | fontSize.md | 15px | 22px | 中等正文 | | fontSize.lg | 16px | 24px | 大正文 | | fontSize.xl | 18px | 28px | 小标题 | | fontSize.2xl | 20px | 28px | 标题 | | fontSize.3xl | 24px | 32px | 大标题 | | fontSize.4xl | 30px | 36px | 主标题 | | fontSize.5xl | 36px | 40px | 英雄标题 |

3.2.4 圆角原语 (Border Radius)

| Token | 值 | 用途 | |-------|-----|------| | radius.none | 0px | 无圆角 | | radius.sm | 2px | 小圆角 | | radius.md | 4px | 默认圆角 | | radius.lg | 6px | 大圆角 | | radius.xl | 8px | 卡片圆角 | | radius.2xl | 12px | 大卡片 | | radius.3xl | 16px | 模态框 | | radius.full | 9999px | 圆形 |

3.2.5 阴影原语 (Shadow Scale)

| Token | 值 | 用途 | |-------|-----|------| | shadow.xs | 0 1px 2px rgba(0,0,0,0.05) | 轻微阴影 | | shadow.sm | 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) | 小阴影 | | shadow.md | 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06) | 中阴影 | | shadow.lg | 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) | 大阴影 | | shadow.xl | 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04) | 悬浮阴影 | | shadow.2xl | 0 25px 50px rgba(0,0,0,0.25) | 模态阴影 | | shadow.inner | inset 0 2px 4px rgba(0,0,0,0.06) | 内阴影 |

3.2.6 动效原语 (Motion Scale)

| Token | 值 | 用途 | |-------|-----|------| | duration.instant | 0ms | 即时 | | duration.fast | 100ms | 快速反馈 | | duration.normal | 200ms | 标准过渡 | | duration.slow | 300ms | 缓慢动画 | | duration.slower | 500ms | 复杂动画 | | easing.default | cubic-bezier(0.4, 0, 0.2, 1) | 默认缓动 | | easing.in | cubic-bezier(0.4, 0, 1, 1) | 入场缓动 | | easing.out | cubic-bezier(0, 0, 0.2, 1) | 退场缓动 | | easing.inOut | cubic-bezier(0.4, 0, 0.2, 1) | 往复缓动 |

3.3 Semantic Token 语义化定义

3.4 Component Token 组件级定义

3.5 Figma变量配置SOP

3.5.1 Figma Token插件配置流程

3.5.2 Figma Variables命名规范

| 类型 | 命名模式 | 示例 | |------|---------|------| | Global | {category}-{variant}-{scale} | gray-50, blue-500 | | Semantic | {semanticRole}-{property} | color-text-primary | | Component | {component}-{state}-{property} | button-primary-bg-hover |

3.5.3 Style Dictionary转换配置

第四章：暗色模式深度适配

4.1 暗色模式设计原则

4.2 暗色模式色彩映射规则

4.2.1 背景色映射矩阵

| 层级 | 浅色模式 | 暗色模式 | 亮度差 | |------|---------|---------|--------| | 基础背景 | #FFFFFF | #0A0A0A | - | | 表面层 | #F5F5F5 | #171717 | +12% | | 卡片层 | #FFFFFF | #1C1C1C | +11% | | 悬浮层 | #FAFAFA | #262626 | +13% | | 模态层 | #FFFFFF | #1C1C1C | +11% | | 表格表头 | #F3F4F6 | #1F1F1F | +12% | | 分割线 | #E5E7EB | #2D2D2D | +9% |

4.2.2 文字色映射矩阵

| 层级 | 浅色模式 | 暗色模式 | 对比度验证 | |------|---------|---------|-----------| | 主要文字 | #171717 | #FAFAFA | 16.1:1 ✓ | | 次要文字 | #525252 | #A3A3A3 | 7.5:1 ✓ | | 辅助文字 | #737373 | #737373 | 4.6:1 ✓ | | 占位文字 | #A3A3A3 | #525252 | 4.6:1 ✓ | | 禁用文字 | #D4D4D4 | #525252 | 4.6:1 ✓ | | 反色文字 | #FFFFFF | #0A0A0A | 16.1:1 ✓ |

4.2.3 品牌色映射

| 模式 | 主色 | 主色背景 | 强调色 | |------|------|---------|--------| | 浅色 | #3B82F6 | #EFF6FF | #2563EB | | 暗色 | #60A5FA | #1E3A8A | #3B82F6 | | 调整说明 | +10%亮度 | +20%饱和度 | +5%亮度 |

4.2.4 语义Token暗色覆盖

4.3 暗色模式实现架构

4.3.1 CSS变量方案

4.3.2 Tailwind CSS暗色模式

4.3.3 React Context方案

4.4 对比度标准(WCAG 2.1)

4.5 暗色模式质量检查清单

| 检查项 | 标准 | 检测方法 | |--------|------|---------| | 主要文字对比度 | ≥4.5:1 | WebAIM Contrast Checker | | 次要文字对比度 | ≥3:1 | Figma Contrast插件 | | 按钮文字对比度 | ≥4.5:1 | axe DevTools | | 输入框边框对比度 | ≥3:1 | 手动检测 | | 链接文字对比度 | ≥4.5:1 | 自动扫描 | | 焦点指示器 | 可见且≥3:1 | 手动测试 | | 图标对比度 | ≥3:1 | 放大检测 | | 分割线对比度 | ≥3:1 | 检测非装饰性线 | | 错误状态可见性 | 明确可辨 | 灰度测试 | | 选中状态可见性 | 与背景区分 | 灰度测试 |

第五章：设计规范体系

5.1 间距系统

5.1.1 8px基准栅格系统

5.1.2 组件内间距规范

| 组件类型 | 内边距(小) | 内边距(中) | 内边距(大) | 说明 | |---------|-----------|-----------|-----------|------| | 按钮 | 8px 12px | 8px 16px | 12px 24px | 根据按钮尺寸 | | 输入框 | 8px 12px | 10px 12px | 12px 16px | 含图标时调整 | | 卡片 | 12px | 16px | 24px | 根据卡片尺寸 | | 模态框 | 16px | 24px | 32px | 含标题/按钮时调整 | | 表格单元格 | 8px 12px | 12px 16px | 16px 24px | 根据内容密度 | | 下拉菜单项 | 8px 12px | 10px 12px | 12px 16px | 悬停态加间距 | | Toast提示 | 12px 16px | 16px 20px | - | 根据类型 |

5.1.3 组件间间距规范

| 关系 | 间距值 | 说明 | |------|-------|------| | 紧密关联元素 | 4px | 标签与输入框 | | 同一组元素 | 8px | 表单项之间 | | 相关组件 | 12px | 按钮与按钮 | | 独立组件 | 16px | 卡片之间 | | 功能区块 | 24px | 不同功能区块 | | 页面区块 | 32px | 大区块之间 | | 页面边界 | 24px | 内容与边距 |

5.1.4 4px辅助栅格(精细调整)

5.2 字体层级系统

5.2.1 字体族规范

| 平台 | 中文 | 英文/数字 | 等宽字体 | |------|------|----------|---------| | iOS | SF SC / 苹方 | SF Pro | SF Mono | | Android | Noto Sans SC | Roboto | Roboto Mono | | Windows | 微软雅黑 | Segoe UI | Consolas | | macOS | 苹方 | SF Pro | SF Mono | | Web | system-ui回退链 | Inter/Roboto | JetBrains Mono |

5.2.2 字体层级定义

5.2.3 字体使用场景对照

| 层级 | 字号 | 字重 | 行高 | 使用场景 | |------|------|------|------|---------| | Display XL | 36px | 600 | 40px | 落地页英雄区 | | Display LG | 30px | 600 | 36px | 首页大标题 | | Display MD | 24px | 600 | 32px | 页面主标题 | | Display SM | 20px | 600 | 28px | 区块标题 | | Heading XL | 20px | 600 | 28px | 卡片标题 | | Heading LG | 18px | 600 | 26px | 区块副标题 | | Heading MD | 16px | 600 | 24px | 列表项标题 | | Heading SM | 14px | 600 | 20px | 表格标题 | | Body XL | 16px | 400 | 24px | 导语/摘要 | | Body LG | 15px | 400 | 22px | 正文(PC端) | | Body MD | 14px | 400 | 20px | 正文(移动端) | | Body SM | 13px | 400 | 18px | 辅助正文 | | Label LG | 14px | 500 | 20px | 按钮文字 | | Label MD | 13px | 500 | 18px | 标签文字 | | Label SM | 12px | 500 | 16px | 小标签 | | Caption LG | 12px | 400 | 16px | 图注 | | Caption MD | 11px | 400 | 14px | 时间戳 | | Caption SM | 10px | 400 | 12px | 极小辅助 |

5.3 响应式断点系统

5.3.1 断点定义

| 断点名称 | 屏幕宽度 | 设备类型 | 列数 | 栅格宽度 | |----------|---------|---------|------|---------| | xs | 0-479px | 小手机 | 4列 | 100% | | sm | 480-767px | 大手机/小平板 | 4列 | 100% | | md | 768-1023px | 平板 | 8列 | 100% | | lg | 1024-1279px | 小笔记本 | 12列 | 960px | | xl | 1280-1535px | 笔记本/桌面 | 12列 | 1152px | | 2xl | 1536-1919px | 大桌面 | 12列 | 1344px | | 3xl | ≥1920px | 超大屏幕 | 12列 | 1536px |

5.3.2 响应式策略

5.3.3 响应式栅格配置

5.3.4 各断点布局模式

| 设备 | 主导航 | 侧边栏 | 内容区 | 底部导航 | |------|--------|--------|--------|---------| | 手机(xs-sm) | 隐藏/Hamburger | 抽屉 | 全宽单栏 | 底部Tab | | 平板(md) | 侧边栏收起 | 可展开 | 双栏/三栏 | 可选底部 | | 桌面(lg+) | 顶部/侧边常显 | 固定 | 多栏栅格 | 无 |

5.4 无障碍设计规范(Accessibility)

5.4.1 WCAG 2.1核心要求

| 级别 | 要求项 | 达标标准 | |------|--------|---------| | A | 替代文本 | 图片必须有alt属性 | | A | 音视频控制 | 媒体必须有播放控制 | | A | 内容结构 | 使用正确的语义标签 | | A | 颜色对比 | 文字与背景≥3:1 | | A | 页面标题 | 每个页面有唯一标题 | | A | 链接目的 | 链接文本描述清晰 | | AA | 对比度增强 | 文字与背景≥4.5:1 | | AA | 可调整文本 | 不使用滚动情况下可放大200% | | AA | 多方式输入 | 支持键盘操作 | | AA | 无时间限制 | 可调整/延长超时 | | AA | 导航标记 | 跳过链接/焦点指示 | | AAA | 对比度极致 | 文字与背景≥7:1 | | AAA | 阅读等级 | 简单语言可理解 | | AAA | 手势替代 | 点击可替代滑动 |

5.4.2 无障碍设计检查清单

5.4.3 ARIA使用规范

| ARIA属性 | 用途 | 使用场景 | |---------|------|---------| | aria-label | 提供可访问名称 | 图标按钮、无标签交互元素 | | aria-describedby | 关联描述 | 表单验证信息、提示 | | aria-labelledby | 关联标签 | 自定义组件标签 | | aria-live | 声明实时区域 | Toast通知、计数器 | | aria-expanded | 展开状态 | Accordion、下拉菜单 | | aria-selected | 选中状态 | Tabs、Select选项 | | aria-disabled | 禁用状态 | 禁用但可见元素 | | aria-hidden | 隐藏内容 | 装饰性元素 | | role | 定义角色 | 自定义组件语义 | | aria-current | 当前项 | 导航当前页 |

第六章：2026年设计趋势与前沿

6.1 AI辅助设计革命

6.2 设计Token标准化进程

| 标准化组织 | 规范 | 状态 | 生态系统支持 | |-----------|------|------|-------------| | W3C Design Token | CSS Custom Properties | Candidate Rec | Chrome/Safari/Firefox | | Design Tokens W3C CG | 跨平台Token格式 | Working Draft | Figma/Style Dictionary | | Open Design Kit | 跨框架设计系统 | Active | 多平台支持中 |

2026 Token发展趋势：

6.3 空间UI与沉浸式设计

| 趋势 | 描述 | 适用场景 | 实现技术 | |------|------|---------|---------| | Glassmorphism | 玻璃拟态 | 浮层/卡片 | backdrop-filter | | Neumorphism | 柔光投影 | 按钮/控件 | 复杂阴影组合 | | 3D Elements | 三维元素 | 品牌展示/游戏 | CSS 3D/WebGL | | Spatial Audio | 空间音频 | 沉浸体验 | Web Audio API | | Haptic Feedback | 触觉反馈 | 移动端 | Vibration API | | Micro-3D | 微3D效果 | 卡片悬停 | CSS transform |

6.4 自适应与智能布局

6.5 设计工程化实践

| 工程化领域 | 工具/技术 | 2026成熟度 | |-----------|----------|-----------| | 设计转代码 | v0.dev, Builder.io, Figma to Code | ⭐⭐⭐⭐⭐ | | 组件开发 | Storybook, Ladle, Histoire | ⭐⭐⭐⭐⭐ | | 样式系统 | Tailwind CSS v4, UnoCSS | ⭐⭐⭐⭐⭐ | | 版本控制 | GitHub, GitLab, Figma Branch | ⭐⭐⭐⭐ | | 自动化测试 | Playwright, Chromatic | ⭐⭐⭐⭐ | | 部署发布 | Chromatic, Storybook Deploy | ⭐⭐⭐⭐ |

第七章：10个常见错误模式深度解析

错误模式一：间距系统混乱

| 维度 | 详细内容 | |------|---------| | 错误表现 | 随意使用4px、5px、6px、7px、9px、10px等非标准间距 | | 根本原因 | 缺乏间距规范文档或未严格遵守设计系统 | | 诊断方法 | 在设计稿中测量所有间距，统计非8倍数值数量 | | 修复方案 | 建立8px基准栅格，逐步替换非标准间距 | | 预防措施 | 使用设计Token，通过Figma Variables约束 |

错误模式二：色彩无层级

| 维度 | 详细内容 | |------|---------| | 错误表现 | 所有文字使用同一灰色，标题/正文/辅助无区分 | | 根本原因 | 缺乏文字色阶定义或直接使用颜色未转换 | | 诊断方法 | 灰度模式预览，确认所有元素可区分 | | 修复方案 | 建立3-5级文字色阶：primary/secondary/tertiary/disabled/placeholder | | 预防措施 | 设计系统Token中预定义文字色，禁止直接使用#ccc等颜色 |

错误模式三：组件状态缺失

| 维度 | 详细内容 | |------|---------| | 错误表现 | 按钮只有正常态，hover/active/disabled/focus全部缺失 | | 根本原因 | 设计阶段未考虑交互状态，或开发阶段遗漏 | | 诊断方法 | 使用Figma组件检查器，确认每个组件变体数量 | | 修复方案 | 设计完整4态：default → hover → active → focus → disabled | | 预防措施 | Storybook中组件必须有交互演示，QA强制检查状态 |

错误模式四：表单无验证

| 维度 | 详细内容 | |------|---------| | 错误表现 | 用户提交后才报错，无实时校验，无内联提示 | | 根本原因 | 表单设计未考虑验证时机和错误反馈 | | 诊断方法 | 测试每个表单字段，确认错误触发时机和展示方式 | | 修复方案 | 实现三级验证：输入时(格式)→失焦时(必填)→提交时(业务) | | 预防措施 | 表单组件内置验证逻辑，设计系统提供ErrorMessage组件 |

错误模式五：安全区忽视

| 维度 | 详细内容 | |------|---------| | 错误表现 | 内容被刘海/圆角/底部指示条遮挡 | | 根本原因 | 未考虑iOS Safe Area和Android Display Cutout | | 诊断方法 | 在真机全面屏设备上测试 | | 修复方案 | 使用safe-area-inset系列CSS变量/padding | | 预防措施 | 设计稿中标注安全区，开发使用env()函数处理 |

错误模式六：图标风格混用

| 维度 | 详细内容 | |------|---------| | 错误表现 | 同一页面混用Outlined/Filled/Bold等不同风格图标 | | 根本原因 | 图标库不统一，或从多个来源复制图标 | | 诊断方法 | 截图后灰度查看，统计图标线条粗细/填充方式 | | 修复方案 | 统一图标库(建议Lucide/Phosphor)，制定图标使用规范 | | 预防措施 | 使用图标组件库，设计系统锁定图标变体选择 |

错误模式七：状态设计不完整

| 维度 | 详细内容 | |------|---------| | 错误表现 | 只有成功态，缺少Loading/Empty/Error/Partial状态 | | 根本原因 | 设计只考虑happy path，忽视异常场景 | | 诊断方法 | 检查每个数据展示组件的空状态和错误状态 | | 修复方案 | 设计5态系统：Default → Loading → Empty → Error → Success | | 预防措施 | 在设计系统文档中强制要求每个组件定义5态 |

错误模式八：对比度不达标

| 维度 | 详细内容 | |------|---------| | 错误表现 | 浅灰文字配浅灰背景，难以阅读 | | 根本原因 | 仅凭视觉感觉选择颜色，未测量对比度 | | 诊断方法 | 使用WebAIM Contrast Checker检测主要文字组合 | | 修复方案 | 调整颜色确保正文≥4.5:1，大文字≥3:1 | | 预防措施 | Figma插件自动检测对比度，CI/CD集成对比度扫描 |

错误模式九：断点响应式失效

| 维度 | 详细内容 | |------|---------| | 错误表现 | 中间尺寸(768px-1024px)布局错乱 | | 根本原因 | 只测试最大和最小断点，忽视中间尺寸 | | 诊断方法 | 在各断点间尺寸逐一测试，检查布局完整性 | | 修复方案 | 制定完整断点策略，测试每个断点及中间值 | | 预防措施 | 自动化截图测试覆盖所有断点，CI/CD集成 |

错误模式十：过度动画

| 维度 | 详细内容 | |------|---------| | 错误表现 | 每个元素都有动画，页面加载缓慢，用户分心 | | 根本原因 | 动效为装饰而非功能，设计过度追求"流畅" | | 诊断方法 | 禁用CSS动画后评估页面功能是否完整 | | 修复方案 | 动效三原则：功能反馈(必需)、状态指示(适度)、品牌表达(少量) | | 预防措施 | 设计规范中定义动效时长上限(≤300ms)，禁止纯装饰动效 |

第八章：质量门控三级清单

P0 致命门槛 (上线阻断)

P1 品质门槛 (发布前必须解决)

P2 优秀门槛 (持续迭代优化)

第九章：设计交付清单

9.1 设计稿交付要求

| 类型 | 文件格式 | 要求 | |------|---------|------| | 页面设计 | Figma/Sketch源文件 | 包含所有组件变体和状态 | | 标注稿 | PNG/PDF | 包含间距/字号/颜色标注 | | 切图 | PNG/WebP/SVG | 1x/2x/3x + 压缩优化 | | 图标 | SVG | 统一尺寸，统一样式 | | 动效 | Lottie/MP4 | 可编辑源文件+导出文件 |

9.2 开发交接清单

9.3 QA验收清单

| 检查类别 | 检查项 | 通过标准 | |---------|--------|---------| | 功能 | 按钮点击 | 100%可点击，有反馈 | | 功能 | 表单提交 | 数据正确，服务端响应 | | 功能 | 页面跳转 | 路由正确，无404 | | 视觉 | 样式一致性 | 与设计稿一致 | | 视觉 | 响应式 | 各断点正常 | | 视觉 | 暗色模式 | 正常切换 | | 无障碍 | 键盘导航 | Tab顺序正确 | | 无障碍 | 屏幕阅读 | 读屏正常 | | 无障碍 | 对比度 | 达标WCAG AA | | 性能 | 首屏加载 | <3s | | 性能 | 交互响应 | <100ms |

附录：设计系统建设路线图

Phase 1: 基础建设 (Week 1-4)

| 任务 | 交付物 | 负责人 | |------|--------|--------| | 设计规范制定 | 间距/字体/色彩规范文档 | 设计师 | | Token体系设计 | Global Token + Semantic Token | 设计师 | | 组件库选型 | 组件库评估报告 | 前端+设计师 | | 基础组件开发 | Button/Input/Select等 | 前端 |

Phase 2: 核心组件 (Week 5-8)

| 任务 | 交付物 | 负责人 | |------|--------|--------| | 表单组件开发 | Form/FormItem/FormRule | 前端 | | 数据展示组件 | Table/Card/List | 前端 | | 导航组件开发 | Menu/Tabs/Breadcrumb | 前端 | | 反馈组件开发 | Modal/Drawer/Message | 前端 |

Phase 3: 主题系统 (Week 9-12)

| 任务 | 交付物 | 负责人 | |------|--------|--------| | 主题配置 | 浅色/暗色主题 | 前端 | | 品牌主题 | 企业品牌定制 | 设计师 | | 主题切换 | 动态主题切换 | 前端 | | 主题文档 | 主题使用指南 | 前端 |

Phase 4: 生态完善 (Week 13-16)

| 任务 | 交付物 | 负责人 | |------|--------|--------| | 动效规范 | 动效Token + 示例 | 设计师 | | 图标库 | 统一图标库 | 设计师 | | 文档站点 | Storybook + 规范文档 | 全员 | | 社区运营 | 组件贡献指南 | 全员 |

文档版本: v3.0 专家级
更新日期: 2026年1月
适用场景: 企业级UI设计 / 设计系统构建 / 团队协作交付
配套工具: Figma / Style Dictionary / Storybook / Tailwind CSS

UI Design Engine

See it in action