--- 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