轻松聘AI开发

19 KiB

Raw Blame History

轻松聘（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 视觉约束

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

13.2 业务逻辑约束

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

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

用户可直观区分：

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

13.3 可用性约束

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

十四、设计Token快速参考表

14.1 色彩Token

/* 品牌色 */
--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

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

14.3 圆角Token

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

14.4 阴影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);

14.5 字体Token

/* 层级 */
--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）移动端全平台 维护团队：产品设计组

19 KiB Raw Blame History

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

一、全局色彩规范

1.1 品牌主色系

1.2 业务状态标签色

1.3 文本中性分层色

1.4 容器与页面底色

1.5 边框与分割线

二、字体层级规范

2.1 字体族

2.2 字体层级

2.3 特殊数字展示

2.4 约束规则

三、间距规范

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

3.2 页面边距

四、圆角规范

特殊规则

五、阴影规范

约束规则

六、图标规范

6.1 基本规范

6.2 底部导航图标（4个）

6.3 核心业务图标清单

七、基础组件规范

7.1 按钮组件

主按钮 Primary Button

次要描边按钮 Secondary Button

文字按钮 Text Button

7.2 搜索框组件

7.3 列表行规范

7.4 业务标签组件

绿色标签（优质）

橙色标签（中性）

红色标签（风险）

八、核心专属组件规范

8.1 评分可视化组件

综合总分卡片

八维度雷达图容器

企业规模×行业二维矩阵

评分趋势曲线卡片

8.2 自定义权重调节组件

维度权重滑块

权重预设模板卡片

8.3 评分证据链溯源组件

数据源详情弹窗

证据快照卡片

8.4 企业并排对比组件

8.5 匹配门槛校验组件

匹配度进度卡片

沟通拦截弹窗

8.6 AI求职辅助组件

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

9.1 顶部多条件筛选栏

9.2 底部弹出选择器

9.3 全局通用弹窗

9.4 Toast轻提示

十、求职流程专项组件

10.1 简历上传卡片

10.2 投递状态标签

10.3 聊天会话面板

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

11.1 骨架屏

骨架屏类型

11.2 空页面

空状态类型

11.3 数据占位模块

十二、完整页面清单

12.1 C端页面（求职者）

12.2 B端页面（企业）

十三、输出硬性约束规则

13.1 视觉约束

13.2 业务逻辑约束

13.3 可用性约束

十四、设计Token快速参考表

14.1 色彩Token

14.2 间距Token

14.3 圆角Token

14.4 阴影Token

14.5 字体Token

19 KiB

Raw Blame History