# 轻松聘（mydreamjob）移动端UI设计系统规范 V1.0

> **产品定位**：大学生可信求职决策工具  
> **核心用户**：大三/大四应届生、毕业1-2年应届生、3年内年轻职场人、企业HR  
> **视觉风格**：专业、清爽、理性商务工具向  
> **画板基准**：390pt × 844pt（iPhone 15标准）  
> **网格系统**：全局4pt网格布局

---

## 一、全局色彩规范

### 1.1 品牌主色系

| 名称 | HEX | RGB | 用途 |
|------|-----|-----|------|
| **主色 Primary** | `#1677FF` | 22, 119, 255 | 主按钮、筛选激活态、高分企业标识、核心操作入口、雷达图高亮 |
| **辅助色 Secondary** | `#4096FF` | 64, 150, 255 | 次级操作、次要标签、进度条、滑块激活轨道 |

### 1.2 业务状态标签色

| 名称 | HEX | RGB | 用途 |
|------|-----|-----|------|
| **优质匹配色 Success** | `#00B42A` | 0, 180, 42 | 企业综合高分、高薪福利、低加班、匹配度≥80%、合规无风险 |
| **中性提示色 Warning** | `#FF7D00` | 255, 125, 0 | 企业中等评分、数据待补充、普通匹配、估算分数标记、权重模板提示 |
| **风险警示色 Danger** | `#F53F3F` | 245, 63, 63 | 企业合规风险、低分避雷、匹配度不足阈值、仲裁/处罚记录、恶意评价预警 |

### 1.3 文本中性分层色

| 名称 | HEX | RGB | 用途 |
|------|-----|-----|------|
| **标题文本 Title** | `#1D2129` | 29, 33, 41 | H1/H2标题、企业全称、岗位名称、综合总分、核心数据数字 |
| **正文文本 Body** | `#4E5968` | 78, 89, 104 | 正文文本、岗位职责、企业介绍、员工评价、权重说明 |
| **辅助文本 Caption** | `#86909C` | 134, 144, 156 | 辅助小字、数据来源标注、时间、行业规模标签、占位文案 |

### 1.4 容器与页面底色

| 名称 | HEX | RGB | 用途 |
|------|-----|-----|------|
| **页面背景 Background** | `#F2F3F5` | 242, 243, 245 | 全局页面背景、列表分割底色、筛选面板底层、空状态背景 |
| **卡片背景 Surface** | `#FFFFFF` | 255, 255, 255 | 卡片底色、弹窗面板、底部选择器、搜索框、表单输入框、雷达图画布 |

### 1.5 边框与分割线

| 名称 | HEX | RGB | 用途 |
|------|-----|-----|------|
| **分割线 Border** | `#E5E6EB` | 229, 230, 235 | 列表分割线、卡片边框 |
| **禁用边框 Disabled** | `#C9CDD4` | 201, 205, 212 | 禁用状态边框 |

---

## 二、字体层级规范

### 2.1 字体族

| 平台 | 字体 |
|------|------|
| iOS | SF Pro Text / 思源黑体 |
| Android | Roboto / 思源黑体 |
| Fallback | Inter, -apple-system, sans-serif |

### 2.2 字体层级

| 层级 | 字号 | 字重 | 行高 | 用途 |
|------|------|------|------|------|
| **H1** | 24px | Bold (700) | 32px | 页面顶级标题、模块总标题、企业对比页大标题 |
| **H2** | 20px | Bold (700) | 28px | 板块分区标题、雷达图标题、评分体系模块标题 |
| **H3** | 17px | Medium (500) | 24px | 卡片标题、岗位名称、分项维度标题、权重分组标题 |
| **Body** | 15px | Regular (400) | 22px | 正文描述、企业详情、评价正文、权重调节说明 |
| **Caption** | 13px | Regular (400) | 18px | 备注、数据来源、时间标签、维度状态小字、AI提示小字 |

### 2.3 特殊数字展示

| 类型 | 字号 | 字重 | 用途 |
|------|------|------|------|
| **大号数字** | 48px | Bold (700) | 综合总分展示 |
| **数字强调** | 28px | Bold (700) | 维度分数、匹配度百分比 |
| **数字标准** | 17px | Medium (500) | 列表数据、进度百分比 |

### 2.4 约束规则

- 页面最小展示文字 ≥ 12px
- 长评价、对比表格行高宽松，保证可读性
- 所有可点击控件热区 ≥ 48×48dp

---

## 三、间距规范

### 3.1 统一间距Token（4pt网格倍数）

| Token | 数值 | 用途 |
|-------|------|------|
| **spacing-xs** | 4px | 最小间距、图标内边距 |
| **spacing-sm** | 8px | 组件内间距、元素紧凑间距 |
| **spacing-md** | 16px | 标准组件间距、卡片内边距 |
| **spacing-lg** | 24px | 模块间距、列表项间距 |
| **spacing-xl** | 32px | 页面边距、大模块间距 |
| **spacing-2xl** | 48px | 页面顶部间距、底部安全区 |

### 3.2 页面边距

| 区域 | 数值 |
|------|------|
| 页面左右边距 | 16px |
| 卡片内边距 | 16px |
| 列表项内边距 | 16px |
| 底部安全区 | 34px (iPhone 15) |

---

## 四、圆角规范

| Token | 数值 | 用途 |
|-------|------|------|
| **radius-sm** | 4px | 小型元素、分隔线端点 |
| **radius-md** | 8px | 按钮、搜索框、输入框、筛选标签、滑块容器、评分小卡片 |
| **radius-lg** | 12px | 全量内容卡片、底部弹窗面板 |
| **radius-full** | 9999px | 圆形头像、圆形图标按钮 |

### 特殊规则

- 底部弹出选择器：顶部两角圆角归零，底部保留 12px 圆角
- 弹窗面板：四角统一 12px 圆角

---

## 五、阴影规范

| Token | 数值 | 用途 |
|-------|------|------|
| **shadow-sm** | 0 1px 2px rgba(0,0,0,0.04) | 卡片默认状态 |
| **shadow-md** | 0 2px 8px rgba(0,0,0,0.06) | 卡片悬停状态、弹窗面板 |
| **shadow-lg** | 0 4px 16px rgba(0,0,0,0.08) | 模态弹窗、底部弹出层 |

### 约束规则

- 全部组件仅使用极低透明度柔和浅灰投影
- 禁止厚重黑色硬阴影
- 保持清爽理性工具质感

---

## 六、图标规范

### 6.1 基本规范

| 属性 | 数值 |
|------|------|
| 标准尺寸 | 24px × 24px |
| 线条粗细 | 2px |
| 风格 | 统一线性轮廓 |
| 禁止 | 填充、渐变、粗描边图标 |

### 6.2 底部导航图标（4个）

| 图标 | 名称 | 激活色 | 非激活色 |
|------|------|--------|----------|
| 🏠 | 首页 | #1677FF | #86909C |
| 🏢 | 企业库 | #1677FF | #86909C |
| 📊 | 求职匹配 | #1677FF | #86909C |
| 👤 | 我的 | #1677FF | #86909C |

### 6.3 核心业务图标清单

| 图标名称 | 用途 |
|----------|------|
| `icon-weight` | 权重设置 |
| `icon-radar` | 雷达图 |
| `icon-evidence` | 证据链溯源 |
| `icon-compare` | 企业对比 |
| `icon-filter` | 多条件筛选 |
| `icon-resume` | 简历上传 |
| `icon-ai` | AI助手 |
| `icon-match` | 匹配度校验 |
| `icon-warning` | 避雷警示 |
| `icon-favorite` | 收藏 |
| `icon-send` | 投递 |
| `icon-chat` | 聊天会话 |
| `icon-matrix` | 企业规模矩阵 |
| `icon-trend` | 评分趋势曲线 |
| `icon-arbitration` | 仲裁风险 |
| `icon-source` | 工商数据源 |
| `icon-reset` | 重置权重 |
| `icon-save` | 保存自定义方案 |
| `icon-empty` | 空数据占位 |
| `icon-collapse` | 筛选收起/展开 |

---

## 七、基础组件规范

### 7.1 按钮组件

#### 主按钮 Primary Button

| 属性 | 数值 |
|------|------|
| 高度 | 48px |
| 圆角 | 8px |
| 背景 | #1677FF |
| 文字 | #FFFFFF, 17px, Medium |
| 内边距 | 左右 24px |
| 最小宽度 | 120px |
| 热区 | ≥ 48×48dp |
| 用途 | 投递、保存权重、查看证据链、确认匹配、企业对比、提交简历 |

#### 次要描边按钮 Secondary Button

| 属性 | 数值 |
|------|------|
| 高度 | 48px |
| 圆角 | 8px |
| 背景 | #FFFFFF |
| 边框 | 1px solid #1677FF |
| 文字 | #1677FF, 17px, Medium |
| 用途 | 重置筛选、取消弹窗、清空权重、关闭对比面板 |

#### 文字按钮 Text Button

| 属性 | 数值 |
|------|------|
| 背景 | 无 |
| 边框 | 无 |
| 文字 | #1677FF, 15px, Regular |
| 用途 | 查看更多评价、展开数据源、查看完整评分趋势、导出个人档案 |

### 7.2 搜索框组件

| 属性 | 数值 |
|------|------|
| 高度 | 44px |
| 圆角 | 8px |
| 背景 | #FFFFFF |
| 边框 | 1px solid #E5E6EB |
| 内边距 | 左 44px, 右 40px |
| 图标尺寸 | 24px |
| 图标位置 | 左侧 12px |
| 清除按钮 | 右侧 12px |
| 文字 | #1D2129, 15px |
| 占位符 | #86909C, 15px |

### 7.3 列表行规范

| 属性 | 数值 |
|------|------|
| 行高 | 56-60px |
| 内边距 | 左右 16px |
| 分割线 | 0.5px solid #E5E6EB |
| 企业名称 | #1D2129, 17px, Medium |
| 综合分数 | #1D2129, 28px, Bold |
| 业务标签 | 13px, 圆角 4px |
| 行业/规模/地点 | #86909C, 13px |

### 7.4 业务标签组件

#### 绿色标签（优质）

| 属性 | 数值 |
|------|------|
| 背景 | rgba(0, 180, 42, 0.1) |
| 文字 | #00B42A, 13px |
| 边框 | 无 |
| 圆角 | 4px |
| 内边距 | 4px 8px |
| 用途 | 高分企业、高薪、低加班、高匹配、合规企业 |

#### 橙色标签（中性）

| 属性 | 数值 |
|------|------|
| 背景 | rgba(255, 125, 0, 0.1) |
| 文字 | #FF7D00, 13px |
| 边框 | 无 |
| 圆角 | 4px |
| 内边距 | 4px 8px |
| 用途 | 中等评分、数据估算、数据补充中、普通匹配 |

#### 红色标签（风险）

| 属性 | 数值 |
|------|------|
| 背景 | rgba(245, 63, 63, 0.1) |
| 文字 | #F53F3F, 13px |
| 边框 | 无 |
| 圆角 | 4px |
| 内边距 | 4px 8px |
| 用途 | 合规风险、劳动仲裁、低分避雷、匹配不足、处罚记录 |

---

## 八、核心专属组件规范

### 8.1 评分可视化组件

#### 综合总分卡片

| 属性 | 数值 |
|------|------|
| 卡片高度 | 120px |
| 圆角 | 12px |
| 背景 | #FFFFFF |
| 阴影 | shadow-md |
| 大号数字 | 48px, Bold, #1D2129 |
| 状态标签 | 紧贴数字右侧 |
| 企业规模层级 | #86909C, 13px |

#### 八维度雷达图容器

| 属性 | 数值 |
|------|------|
| 尺寸 | 280px × 280px |
| 背景 | #FFFFFF |
| 圆角 | 12px |
| 维度标签 | 13px, #4E5968 |
| 分数标签 | 15px, #1D2129 |
| 高亮区域填充 | rgba(22, 119, 255, 0.2) |
| 高亮边线 | #1677FF, 2px |
| 未覆盖维度 | #E5E6EB填充, 「暂未覆盖」标注 |
| 估算分数 | 橙色虚线区分 |

#### 企业规模×行业二维矩阵

| 属性 | 数值 |
|------|------|
| 容器高度 | 200px |
| 圆角 | 12px |
| 背景 | #FFFFFF |
| 圆形面积 | 区分企业体量 |
| 热门行业高亮 | #1677FF 20%透明度填充 |

#### 评分趋势曲线卡片

| 属性 | 数值 |
|------|------|
| 容器高度 | 160px |
| 圆角 | 12px |
| 背景 | #FFFFFF |
| 折线粗细 | 2px |
| 上升曲线 | #00B42A |
| 下降曲线 | #F53F3F |
| 平稳曲线 | #86909C |

### 8.2 自定义权重调节组件

#### 维度权重滑块

| 属性 | 数值 |
|------|------|
| 滑块轨道高度 | 4px |
| 滑块手柄尺寸 | 24px |
| 轨道背景 | #E5E6EB |
| 激活轨道 | #1677FF |
| 数值输入框宽度 | 60px |
| 数值字号 | 15px, Medium |
| 归一化提示 | #86909C, 13px |

#### 权重预设模板卡片

| 模板名称 | 标签色 |
|----------|--------|
| 求稳版 | #1677FF |
| 薪资优先版 | #FF7D00 |
| 成长冲刺版 | #00B42A |
| 稳健通勤版 | #86909C |

| 属性 | 数值 |
|------|------|
| 卡片高度 | 64px |
| 圆角 | 8px |
| 背景 | #FFFFFF |
| 边框 | 1px solid #E5E6EB |
| 激活边框 | 2px solid #1677FF |

### 8.3 评分证据链溯源组件

#### 数据源详情弹窗

| 属性 | 数值 |
|------|------|
| 最大高度 | 80vh |
| 圆角 | 顶部 0, 底部 12px |
| 背景 | #FFFFFF |
| 分栏标题 | 17px, Medium, #1D2129 |
| 数据来源标注 | 13px, #86909C |
| 采集时间 | 13px, #86909C |

#### 证据快照卡片

| 属性 | 数值 |
|------|------|
| 卡片圆角 | 8px |
| 背景 | #F7F8FA |
| 内边距 | 12px |
| 官方数据源标识 | #1677FF标签 |
| 用户评价标识 | #86909C标签 |
| 风险记录高亮 | #F53F3F背景 |

### 8.4 企业并排对比组件

| 属性 | 数值 |
|------|------|
| 支持2-3家企业 | 横向分栏 |
| 卡片宽度 | 自适应 |
| 卡片间距 | 12px |
| 高分维度底色 | rgba(0, 180, 42, 0.08) |
| 低分维度底色 | rgba(245, 63, 63, 0.08) |
| 分数差值标注 | 绿色/红色底色 |

### 8.5 匹配门槛校验组件

#### 匹配度进度卡片

| 属性 | 数值 |
|------|------|
| 卡片高度 | 80px |
| 圆角 | 12px |
| 进度条高度 | 8px |
| 进度条背景 | #E5E6EB |
| 达标进度填充 | #00B42A |
| 未达标进度填充 | #F53F3F |
| 匹配度数字 | 28px, Bold |
| 差距维度标注 | #86909C, 13px |

#### 沟通拦截弹窗

| 属性 | 数值 |
|------|------|
| 弹窗宽度 | 300px |
| 圆角 | 12px |
| 背景 | #FFFFFF |
| 警示图标 | 48px, #F53F3F |
| 警示文字 | 17px, Medium, #1D2129 |
| 说明文字 | 15px, #4E5968 |
| 确认按钮 | 主按钮样式 |

### 8.6 AI求职辅助组件

| 属性 | 数值 |
|------|------|
| AI生成内容标注 | 「AI辅助建议」小字, 12px, #86909C |
| AI图标 | 20px, #1677FF |
| 输入框高度 | 44px |
| 输入框圆角 | 8px |

---

## 九、筛选、弹窗、选择器规范

### 9.1 顶部多条件筛选栏

| 属性 | 数值 |
|------|------|
| 高度 | 44px |
| 背景 | #FFFFFF |
| 分割线 | 0.5px solid #E5E6EB |
| 标签样式 | 圆角 8px, 内边距 8px 12px |
| 未激活标签 | 背景 #F2F3F5, 文字 #4E5968 |
| 激活标签 | 背景 rgba(22, 119, 255, 0.1), 文字 #1677FF |

### 9.2 底部弹出选择器

| 属性 | 数值 |
|------|------|
| 最大高度 | 50vh |
| 圆角 | 顶部 0, 底部 12px |
| 背景 | #FFFFFF |
| 遮罩 | rgba(0, 0, 0, 0.5) |
| 选项行高 | 56px |
| 选项文字 | 17px, #1D2129 |
| 选中项文字 | 17px, Medium, #1677FF |
| 取消/确认按钮 | 高度 48px |

### 9.3 全局通用弹窗

| 属性 | 数值 |
|------|------|
| 弹窗宽度 | 300px (居中) / 全宽 (底部) |
| 圆角 | 12px |
| 背景 | #FFFFFF |
| 遮罩 | rgba(0, 0, 0, 0.5) |
| 标题 | 17px, Medium, #1D2129 |
| 内容文字 | 15px, #4E5968 |
| 按钮区域 | 底部, 右对齐 |

### 9.4 Toast轻提示

| 属性 | 数值 |
|------|------|
| 最小宽度 | 120px |
| 最大宽度 | 280px |
| 圆角 | 8px |
| 背景 | rgba(0, 0, 0, 0.75) |
| 文字 | #FFFFFF, 15px |
| 内边距 | 12px 20px |
| 显示时长 | 2秒 |

---

## 十、求职流程专项组件

### 10.1 简历上传卡片

| 属性 | 数值 |
|------|------|
| 卡片高度 | 80px |
| 圆角 | 12px |
| 背景 | #FFFFFF |
| 边框 | 1px dashed #1677FF (未上传) |
| 图标 | 32px, #1677FF |
| 标题 | 15px, Medium, #1D2129 |
| 副标题 | 13px, #86909C |

### 10.2 投递状态标签

| 状态 | 颜色 | 文字 |
|------|------|------|
| 待企业查看 | #1677FF | 「待查看」 |
| 意向匹配 | #00B42A | 「意向匹配」 |
| 面试邀约 | #FF7D00 | 「面试邀约」 |
| Offer | #00B42A | 「Offer」 |
| 已拒绝 | #86909C | 「已拒绝」 |

### 10.3 聊天会话面板

| 属性 | 数值 |
|------|------|
| 消息气泡圆角 | 12px |
| 发送方气泡背景 | #1677FF |
| 接收方气泡背景 | #F2F3F5 |
| 消息文字 | 15px |
| 时间戳 | 12px, #86909C |
| 输入框高度 | 44px |

---

## 十一、空状态、骨架屏规范

### 11.1 骨架屏

| 属性 | 数值 |
|------|------|
| 动画 | 渐变闪烁 (1.5s循环) |
| 背景 | #F2F3F5 |
| 高亮条 | rgba(255, 255, 255, 0.6) |
| 圆角 | 与实际组件一致 |

#### 骨架屏类型

- 企业列表骨架 (行高 60px)
- 评分雷达图骨架 (280px × 280px)
- 企业详情骨架
- 对比页面骨架
- 权重设置页骨架

### 11.2 空页面

| 属性 | 数值 |
|------|------|
| 图标尺寸 | 80px |
| 图标颜色 | #C9CDD4 |
| 标题 | 17px, Medium, #1D2129 |
| 副标题 | 15px, #86909C |
| 操作按钮 | 次要描边按钮样式 |

#### 空状态类型

- 无匹配岗位
- 无意向企业
- 无员工评价
- 暂无投递记录
- 暂无企业入驻

### 11.3 数据占位模块

| 类型 | 样式 |
|------|------|
| 维度「暂未覆盖」 | 灰色占位卡片, #E5E6EB背景, #86909C文字 |
| 「数据估算」 | 橙色虚线标识 |
| 网络异常 | 空状态页面 + 重试按钮 |
| 冷启动引导 | 引导卡片 + 操作提示 |

---

## 十二、完整页面清单

### 12.1 C端页面（求职者）

| 页面 | 核心组件 |
|------|----------|
| **首页** | 高分企业榜单、快速筛选入口、权重模板快捷入口 |
| **企业库** | 企业搜索、多维度筛选、企业列表卡片 |
| **企业详情页** | 8维度雷达图、分项评分、证据链溯源入口、员工评价、收藏投递按钮、评分趋势 |
| **自定义权重配置页** | 维度滑块调节、预设模板、一键重排企业清单 |
| **企业对比页** | 2-3家企业横向维度对比、权重实时联动更新 |
| **求职匹配页** | 岗位匹配列表、匹配度标签、投递前置诊断 |
| **简历档案页** | 简历上传、个人信息填写、AI投递话术助手 |
| **沟通会话页** | 匹配门槛校验拦截、聊天面板、意向确认弹窗 |
| **个人中心** | 投递记录、收藏企业、我的评价、账号隐私设置、求职档案导出 |

### 12.2 B端页面（企业）

| 页面 | 核心组件 |
|------|----------|
| **企业入驻页** | 企业资质认证、工商信息填写 |
| **岗位发布页** | 岗位编辑、薪资范围设置 |
| **评分数据查看页** | 企业评分详情、维度分数、证据链 |
| **候选人匹配列表** | 候选人卡片、匹配度标签、意向状态 |

---

## 十三、输出硬性约束规则

### 13.1 视觉约束

1. ✅ 仅输出标准化设计Token规范文档
2. ❌ 不产出任何页面效果图、截图、插画素材
3. ❌ 禁止卡通插画、高饱和渐变、炫酷动效、深色模式
4. ✅ 保持商务清爽工具视觉调性

### 13.2 业务逻辑约束

所有业务视觉区分贴合V1.3产品文档核心逻辑：

- 分层评分体系 (8维度)
- 权重自定义功能
- 证据溯源机制
- 匹配沟通门槛
- 企业二维覆盖矩阵

用户可直观区分：

- 企业稳定性
- 合规风险
- 匹配优劣
- 数据完整度

### 13.3 可用性约束

- 所有标注文案、占位提示、状态标签文字字号 ≥ 12px
- 全部可点击控件热区 ≥ 48×48dp
- 适配学生、HR多年龄段阅读需求

---

## 十四、设计Token快速参考表

### 14.1 色彩Token

```css
/* 品牌色 */
--color-primary: #1677FF;
--color-secondary: #4096FF;

/* 状态色 */
--color-success: #00B42A;
--color-warning: #FF7D00;
--color-danger: #F53F3F;

/* 文本色 */
--color-text-title: #1D2129;
--color-text-body: #4E5968;
--color-text-caption: #86909C;

/* 背景色 */
--color-bg-page: #F2F3F5;
--color-bg-surface: #FFFFFF;

/* 边框色 */
--color-border: #E5E6EB;
--color-border-disabled: #C9CDD4;
```

### 14.2 间距Token

```css
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
```

### 14.3 圆角Token

```css
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
```

### 14.4 阴影Token

```css
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 2px 8px rgba(0,0,0,0.06);
--shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
```

### 14.5 字体Token

```css
/* 层级 */
--font-h1: 700 24px/32px 'Inter', 'SF Pro Text', sans-serif;
--font-h2: 700 20px/28px 'Inter', 'SF Pro Text', sans-serif;
--font-h3: 500 17px/24px 'Inter', 'SF Pro Text', sans-serif;
--font-body: 400 15px/22px 'Inter', 'SF Pro Text', sans-serif;
--font-caption: 400 13px/18px 'Inter', 'SF Pro Text', sans-serif;
```

---

## 十五、版本记录

| 版本 | 日期 | 说明 |
|------|------|------|
| V1.0 | 2026-08-04 | 初始版本，完整设计Token规范 |

---

> **文档状态**：已完成  
> **适用范围**：轻松聘（mydreamjob）移动端全平台
> **维护团队**：产品设计组