设计系统架构师

# [品牌/产品名称] 设计系统 ## 品牌属性 **个性**：[极简/大胆/趣味/专业/奢华] **核心情感**：[信任/兴奋/平静/紧迫] **目标受众**：[目标受众描述] --- # 1. 基础 ## 色彩系统 ### 主色板 | 颜色名称 | HEX | RGB | HSL | 无障碍评级 | |---------|-----|-----|-----|-----------| | 主色 | #0071E3 | rgb(0, 113, 227) | hsl(210, 100%, 45%) | AAA | | 辅助色 | #5856D6 | rgb(88, 86, 214) | hsl(239, 60%, 59%) | AA | | 背景色 | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | AAA | | 表面色 | #F5F5F7 | rgb(245, 245, 247) | hsl(240, 13%, 96%) | AAA | | 文本主色 | #1D1D1F | rgb(29, 29, 31) | hsl(240, 3%, 12%) | AAA | | 文本辅助色 | #86868B | rgb(134, 134, 139) | hsl(240, 2%, 54%) | AA | ### 语义色 | 语义 | 颜色 | HEX | 用途 | |------|-------|-----|------| | 成功 | 绿色 | #34C759 | 操作成功 | | 警告 | 橙色 | #FF9500 | 需要关注 | | 错误 | 红色 | #FF3B30 | 操作失败 | | 信息 | 蓝色 | #007AFF | 提示信息 | ### 深色模式对应色 | 语义 | 浅色模式 | 深色模式 | 对比度 | |------|---------|---------|--------| | 背景色 | #FFFFFF | #000000 | 21:1 | | 表面色 | #F5F5F7 | #1C1C1E | 14:1 | | 文本主色 | #1D1D1F | #F5F5F7 | 15:1 | | 文本次色 | #86868B | #98989D | 7:1 | ### 色彩使用规则 - **主色**：用于主要操作按钮、链接、选中状态 - **辅助色**：用于次要操作、强调元素 - **背景色**：用于页面主背景 - **表面色**：用于卡片、面板、弹窗 - **文本主色**：用于标题和正文 - **文本次色**：用于辅助说明、占位符 --- ## 字体排印 ### 主要字体：SF Pro Display / SF Pro Text | 样式 | 字重 | 字号 | 行高 | 字间距 | 用途 | |------|------|------|------|--------|------| | 大标题 | 粗体 | 34px | 41px | 0.37px | 页面标题 | | 标题1 | 粗体 | 28px | 34px | 0.36px | 区块标题 | | 标题2 | 粗体 | 22px | 28px | 0.35px | 子区块标题 | | 标题3 | 中等 | 20px | 25px | 0.38px | 卡片标题 | | 正文 | 常规 | 17px | 22px | -0.41px | 正文内容 | | 标注 | 常规 | 16px | 21px | -0.32px | 辅助文本 | | 副标题 | 常规 | 15px | 20px | -0.24px | 列表项 | | 脚注 | 常规 | 13px | 18px | -0.08px | 注释 | | 说明 | 常规 | 11px | 16px | 0.07px | 辅助说明 | ### 响应式缩放 | 设备 | 缩放比例 | 基准字号 | |------|---------|---------| | 桌面端 | 1.0x | 17px | | 平板 | 0.9x | 15px | | 移动端 | 0.8x | 14px | ### 字体配对策略 - **标题**：SF Pro Display，字重 700 - **正文**：SF Pro Text，字重 400 - **强调**：SF Pro Text，字重 600 - **代码**：SF Mono，字重 400 ### 无障碍最小字号 - **正文**：最小 14px - **辅助文本**：最小 12px - **按钮文本**：最小 16px --- ## 布局网格 ### 响应式网格规格 | 设备 | 宽度 | 列数 | 间距 | 边距 | |------|------|------|------|------| | 桌面端 | 1440px | 12 | 24px | 80px | | 平板 | 768px | 8 | 16px | 32px | | 移动端 | 375px | 4 | 12px | 16px | ### 断点定义 | 断点 | 范围 | 设备 | |------|------|------| | 小屏 | < 375px | 小屏手机 | | 中屏 | 375px - 768px | 手机 | | 大屏 | 768px - 1440px | 平板 | | 超大屏 | > 1440px | 桌面端 | ### 安全区域 - **刘海屏**：顶部安全区 44px，底部安全区 34px - **圆角屏**：四角圆角半径 24px - **横屏**：左右安全区 44px --- ## 间距系统 ### 8px 基准间距 | 值 | 用途 | |-----|------| | 4px | 图标与文本间距 | | 8px | 紧凑元素间距 | | 12px | 表单元素内部间距 | | 16px | 卡片内边距 | | 24px | 区块间距 | | 32px | 组件间距 | | 48px | 页面区块间距 | | 64px | 大区块间距 | | 96px | 页面边距 | | 128px | 页面最大边距 | --- ## 2. 组件 ### 导航组件 #### 1. 顶部导航栏 **结构**：Logo（左）+ 导航链接（中）+ 操作按钮（右） **状态**： - 默认：透明背景，深色文本 - 滚动：毛玻璃效果，半透明背景 - 激活：当前页面链接高亮 **使用指南**： - 用于全局导航 - 不要放置超过 7 个导航项 - 移动端折叠为汉堡菜单 **无障碍**： - ARIA：`role="navigation"`，`aria-label="主导航"` - 键盘：Tab 键循环导航，Enter 键激活 **规格**： - 高度：64px（桌面端），48px（移动端） - 内边距：水平 16px - 阴影：`0 1px 3px rgba(0,0,0,0.1)` #### 2. 标签栏 **结构**：图标 + 标签（垂直排列） **状态**：默认、选中、禁用 **变体**：标准、紧凑（仅图标） **规格**： - 高度：49px - 图标大小：24px - 选中色：主色 #### 3. 侧边栏 **结构**：导航项列表 + 折叠按钮 **状态**：展开、折叠、悬停、选中 **规格**： - 宽度：280px（展开），64px（折叠） - 导航项高度：44px - 内边距：水平 16px #### 4. 面包屑 **结构**：首页 / 分类 / 当前页 **状态**：默认、悬停、当前 **规格**： - 字号：13px - 分隔符：`/` 或 `>` - 间距：8px --- ### 输入组件 #### 5. 按钮（6 种变体） | 变体 | 用途 | 背景色 | 文本色 | 边框 | |------|------|--------|--------|------| | 主要 | 主要操作 | 主色 | 白色 | 无 | | 次要 | 次要操作 | 透明 | 主色 | 1px 主色 | | 填充 | 强调操作 | 表面色 | 文本主色 | 无 | | 危险 | 删除操作 | 错误色 | 白色 | 无 | | 幽灵 | 低优先级 | 透明 | 主色 | 无 | | 链接 | 文本链接 | 透明 | 主色 | 无 | **状态**：默认、悬停、激活、禁用、加载、错误 **规格**： - 高度：44px（标准），32px（紧凑），52px（大） - 内边距：水平 16px - 圆角：8px - 阴影：`0 2px 4px rgba(0,0,0,0.1)` **无障碍**： - ARIA：`role="button"`，`aria-disabled` - 键盘：Tab 聚焦，Enter/Space 激活 - 焦点环：2px 主色描边 #### 6. 文本输入框 **结构**：标签 + 输入框 + 辅助文本 + 错误提示 **状态**：默认、聚焦、悬停、禁用、错误、成功 **变体**：单行、多行、密码、搜索 **规格**： - 高度：36px - 内边距：8px 12px - 圆角：8px - 边框：1px 灰色 - 聚焦边框：2px 主色 **无障碍**： - ARIA：`role="textbox"`，`aria-label`，`aria-describedby` - 键盘：Tab 键聚焦，Enter 键提交 #### 7. 下拉选择框 **结构**：触发按钮 + 选项列表 **状态**：默认、展开、选中、禁用 **规格**： - 触发按钮：36px 高度 - 选项高度：36px - 列表阴影：`0 4px 12px rgba(0,0,0,0.15)` #### 8. 开关 **结构**：轨道 + 滑块 **状态**：开、关、禁用 **规格**： - 尺寸：44x28px - 滑块：24px 圆形 - 开状态：主色背景 #### 9. 复选框 **结构**：方框 + 勾选标记 **状态**：未选、选中、不确定、禁用 **规格**： - 尺寸：20x20px - 圆角：4px - 选中色：主色 #### 10. 单选按钮 **结构**：圆形 + 中心点 **状态**：未选、选中、禁用 **规格**： - 尺寸：20x20px - 选中色：主色 #### 11. 滑块 **结构**：轨道 + 滑块 + 刻度 **状态**：默认、拖动、禁用 **规格**： - 轨道：4px 高 - 滑块：24px 圆形 - 刻度：可选 --- ### 反馈组件 #### 12. 警告提示 **结构**：图标 + 标题 + 描述 + 操作按钮 **变体**：信息、成功、警告、错误 **规格**： - 内边距：16px - 圆角：12px - 图标大小：20px #### 13. 轻提示 **结构**：图标 + 文本 **状态**：显示、自动消失 **规格**： - 内边距：12px 16px - 圆角：8px - 显示时长：3 秒 #### 14. 模态框 **结构**：遮罩 + 容器 + 标题 + 内容 + 操作区 **状态**：打开、关闭、滚动 **规格**： - 宽度：480px（标准） - 圆角：16px - 遮罩：rgba(0,0,0,0.5) #### 15. 进度指示器 **变体**：线性、圆形、不确定 **规格**： - 线性：4px 高 - 圆形：24px 直径 - 颜色：主色 #### 16. 骨架屏 **结构**：占位块 + 渐变动画 **变体**：文本、图片、卡片 **规格**： - 背景：表面色 - 动画：1.5s 循环 --- ### 数据展示组件 #### 17. 卡片 **结构**：图片 + 标题 + 描述 + 操作 **变体**：标准、紧凑、可点击 **规格**： - 内边距：16px - 圆角：12px - 阴影：`0 2px 8px rgba(0,0,0,0.1)` #### 18. 表格 **结构**：表头 + 行 + 单元格 **状态**：默认、悬停、选中、排序 **规格**： - 行高：44px - 单元格内边距：8px 12px - 表头背景：表面色 #### 19. 列表 **结构**：图标 + 标题 + 描述 + 操作 **变体**：标准、分组、可滑动 **规格**： - 行高：44px - 内边距：8px 16px #### 20. 统计指标 **结构**：数值 + 标签 + 趋势 **变体**：单个、多个、带图表 **规格**： - 数值字号：28px - 标签字号：13px #### 21. 图表 **变体**：柱状图、折线图、饼图 **规格**： - 颜色：主色、辅助色、成功色、警告色 - 网格线：1px 灰色 --- ### 媒体组件 #### 22. 图片容器 **变体**：方形、圆形、圆角、全宽 **规格**： - 圆角：12px - 加载状态：骨架屏 - 错误状态：占位图标 #### 23. 视频播放器 **结构**：播放按钮 + 进度条 + 控制栏 **状态**：播放、暂停、加载、错误 **规格**： - 控制栏：44px 高 - 进度条：4px 高 #### 24. 头像 **变体**：圆形、方形、在线状态 **规格**： - 尺寸：24px、32px、40px、48px、64px - 在线指示：8px 绿色圆点 --- ## 3. 模式 ### 页面模板 #### 25. 落地页 **结构**：导航 + 英雄区 + 特性区 + 展示区 + 行动号召 + 页脚 **规格**： - 英雄区：全宽，最小高度 600px - 区块间距：96px #### 26. 仪表盘 **结构**：侧边栏 + 顶部栏 + 内容区 **内容**：统计卡片 + 图表 + 最近活动 #### 27. 设置页 **结构**：分组列表 + 开关 + 选择器 **分组**：账户、通知、隐私、帮助 #### 28. 个人资料页 **结构**：头像 + 姓名 + 简介 + 统计 + 内容 #### 29. 结账页 **结构**：步骤指示器 + 表单 + 订单摘要 **步骤**：购物车 → 配送 → 支付 → 确认 ### 用户流程 #### 30. 引导流程 **步骤**：欢迎 → 功能展示 → 权限请求 → 完成 **规格**： - 每屏一个主题 - 进度指示器 - 跳过按钮 #### 31. 认证流程 **步骤**：登录 → 验证 → 注册 **规格**： - 表单居中 - 社交登录选项 - 忘记密码链接 #### 32. 搜索流程 **步骤**：输入 → 建议 → 结果 → 筛选 **规格**： - 搜索框：44px 高 - 建议：实时显示 - 结果：分页或无限滚动 #### 33. 筛选流程 **步骤**：选择 → 应用 → 结果 **规格**： - 筛选面板：侧边栏或弹窗 - 应用按钮：主要按钮 #### 34. 空状态 **结构**：图标 + 标题 + 描述 + 操作 **规格**： - 图标：64px - 标题：17px 粗体 - 操作：主要按钮 ### 反馈模式 #### 35. 成功反馈 **结构**：绿色图标 + 标题 + 描述 **规格**： - 图标：32px - 标题：17px 粗体 #### 36. 错误反馈 **结构**：红色图标 + 标题 + 描述 + 重试 **规格**： - 图标：32px - 重试按钮：次要按钮 #### 37. 加载反馈 **结构**：进度指示器 + 文本 **规格**： - 指示器：24px - 文本：13px 灰色 #### 38. 空状态反馈 **结构**：图标 + 标题 + 描述 + 操作 **规格**： - 图标：64px - 操作：主要按钮 --- ## 4. 令牌 ```json { "brand": { "name": "[品牌/产品名称]", "version": "1.0.0" }, "colors": { "primary": { "default": "#0071E3", "hover": "#0077ED", "active": "#0066CC", "disabled": "#99C7F5" }, "secondary": { "default": "#5856D6", "hover": "#5E5CE6", "active": "#4F4DBF" }, "background": { "default": "#FFFFFF", "dark": "#000000", "surface": "#F5F5F7", "surfaceDark": "#1C1C1E" }, "text": { "primary": "#1D1D1F", "secondary": "#86868B", "disabled": "#C7C7CC", "inverse": "#FFFFFF" }, "semantic": { "success": "#34C759", "warning": "#FF9500", "error": "#FF3B30", "info": "#0071E3" } }, "typography": { "display": { "fontSize": 34, "lineHeight": 41, "fontWeight": 700, "letterSpacing": 0.37 }, "headline1": { "fontSize": 28, "lineHeight": 34, "fontWeight": 700, "letterSpacing": 0.36 }, "headline2": { "fontSize": 22, "lineHeight": 28, "fontWeight": 700, "letterSpacing": 0.32 }, "headline3": { "fontSize": 20, "lineHeight": 25, "fontWeight": 600, "letterSpacing": 0.38 }, "body": { "fontSize": 17, "lineHeight": 22, "fontWeight": 400, "letterSpacing": -0.41 }, "callout": { "fontSize": 15, "lineHeight": 20, "fontWeight": 400, "letterSpacing": -0.32 }, "subheadline": { "fontSize": 15, "lineHeight": 20, "fontWeight": 400, "letterSpacing": -0.24 }, "footnote": { "fontSize": 13, "lineHeight": 18, "fontWeight": 400, "letterSpacing": -0.08 }, "caption": { "fontSize": 11, "lineHeight": 16, "fontWeight": 400, "letterSpacing": 0.07 } }, "spacing": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48, "4xl": 64, "5xl": 96, "6xl": 128 }, "radius": { "sm": 4, "md": 8, "lg": 12, "xl": 16, "full": 9999 }, "shadows": { "sm": "0 1px 3px rgba(0,0,0,0.1)", "md": "0 2px 8px rgba(0,0,0,0.1)", "lg": "0 4px 16px rgba(0,0,0,0.1)", "xl": "0 8px 32px rgba(0,0,0,0.1)" }, "breakpoints": { "mobile": 375, "tablet": 768, "desktop": 1440 }, "grid": { "columns": 12, "gutter": { "mobile": 12, "tablet": 16, "desktop": 20 }, "margin": { "mobile": 16, "tablet": 32, "desktop": 80 } }, "components": { "button": { "height": 36, "padding": "8px 16px", "radius": 8, "fontSize": 16 }, "input": { "height": 36, "padding": "8px 12px", "radius": 8, "fontSize": 16 }, "card": { "padding": 16, "radius": 12, "shadow": "0 2px 8px rgba(0,0,0,0.1)" }, "modal": { "width": 480, "radius": 16, "padding": 24 } } } ``` --- ## 5. 文档 ### 设计原则 #### 原则 1：清晰性 - **示例**：每个页面只有一个主要操作 - **示例**：文本对比度始终满足 AAA 标准 - **示例**：图标始终配有文本标签 #### 原则 2：一致性 - **示例**：所有按钮使用相同的圆角和阴影 - **示例**：所有表单使用相同的间距和字号 - **示例**：所有页面使用相同的导航结构 #### 原则 3：包容性 - **示例**：支持键盘导航 - **示例**：支持屏幕阅读器 - **示例**：支持动态字体缩放 ### 注意事项 | 应该做 | 不应该做 | |--------|---------| | 使用主色突出主要操作 | 不要使用超过 3 种颜色 | | 使用 8px 间距系统 | 不要使用奇数间距 | | 使用系统字体 | 不要使用超过 2 种字体 | | 使用语义化颜色 | 不要使用纯装饰色 | | 提供空状态反馈 | 不要显示空白页面 | | 使用响应式布局 | 不要固定宽度 | | 提供加载反馈 | 不要让用户等待 | | 使用无障碍标签 | 不要依赖颜色传达信息 | | 使用触控目标 ≥ 44px | 不要使用过小的点击区域 | | 使用一致的导航 | 不要改变导航位置 | ### 开发者实现指南 #### 1. 环境设置 ```bash npm install [品牌/产品名称]-design-system ``` #### 2. 引入样式 ```css @import '@[品牌/产品名称]/design-system/styles.css'; ``` #### 3. 使用组件 ```jsx import { Button, Card, Input } from '@[品牌/产品名称]/design-system'; function App() { return ( <Card> <Input placeholder="请输入" /> <Button variant="primary">提交</Button> </Card> ); } ``` #### 4. 主题定制 ```jsx import { ThemeProvider } from '@[品牌/产品名称]/design-system'; const theme = { colors: { primary: '#0071E3', }, spacing: { lg: 16, }, }; function App() { return ( <ThemeProvider theme={theme}> <YourApp /> </ThemeProvider> ); } ``` #### 5. 无障碍实现 ```jsx // 键盘导航 <Button onKeyDown={handleKeyDown} aria-label="提交表单"> // 屏幕阅读器 <div role="alert" aria-live="assertive"> 操作成功 </div> // 焦点管理 <Modal onOpen={() => focusFirstElement()}> ``` #### 6. 响应式实现 ```css /* 移动端优先 */ .container { padding: 16px; } /* 平板 */ @media (min-width: 768px) { .container { padding: 32px; } } /* 桌面端 */ @media (min-width: 1440px) { .container { padding: 80px; } } ``` --- *文档版本：1.0.0* *最后更新：[日期]* *维护者：[团队名称]*