selfrelease
980 lines
30 KiB
Markdown
980 lines
30 KiB
Markdown
# TurboHR UI/UX 完整优化方案
|
||
|
||
> 版本：V1.0
|
||
> 日期：2026-07-31
|
||
> 适用范围：企业管理端、员工门户、平台管理端
|
||
> 参考方向：Gusto 的任务驱动体验、温暖可信的视觉语言、员工自助和低门槛业务流程
|
||
> 说明：本方案借鉴 Gusto 的产品原则，不复制其品牌、页面或视觉资产。
|
||
|
||
---
|
||
|
||
## 1. 项目目标
|
||
|
||
TurboHR 已具备员工、合同、考勤、薪酬、社保公积金、离职、制度、证据链、审批、通知、员工门户及 AI 顾问等较完整的后端能力。当前优化重点不应继续堆叠入口，而应将既有能力组织成更容易理解和完成的工作流。
|
||
|
||
本轮优化目标如下：
|
||
|
||
1. 将产品从“模块型管理后台”升级为“任务型 HR 工作台”。
|
||
2. 让非专业 HR 用户也能在清晰引导下完成发薪、入职、离职和月度社保等复杂业务。
|
||
3. 建立国际化、可信、温暖但不过度装饰的品牌与视觉体系。
|
||
4. 减少页面跳转、重复录入、操作犹豫和错误返工。
|
||
5. 提高员工自助率，减少 HR 重复答疑和资料收集工作。
|
||
6. 建立可扩展的设计系统，为中英文、多地区和多组织能力预留空间。
|
||
|
||
### 1.1 核心设计原则
|
||
|
||
- **任务优先**：首先告诉用户现在要做什么，而不是先展示系统有哪些模块。
|
||
- **渐进披露**：日常信息优先，高级配置在需要时出现。
|
||
- **一步一决策**：复杂流程每一步只解决一个主要问题。
|
||
- **状态透明**：所有流程都能看见当前状态、负责人、截止时间和下一步。
|
||
- **异常前置**：尽量在提交、归档、发布之前发现问题。
|
||
- **人物优先**：HR 系统中的主体是员工，不是数据表和字段。
|
||
- **一致可预测**：同一类动作、状态和反馈在所有模块中保持一致。
|
||
- **国际框架、本地语义**：交互采用国际通行方式，劳动用工文案保持中国法律语义准确。
|
||
|
||
---
|
||
|
||
## 2. 当前产品诊断
|
||
|
||
### 2.1 信息架构问题
|
||
|
||
当前侧边栏包含工作台、员工管理、薪税社保、合规风控、AI 辅助和系统等多个分组，并且所有分组默认展开。日常高频任务、高级配置、辅助工具和系统管理处于同一层级。
|
||
|
||
主要影响：
|
||
|
||
- 新用户无法迅速判断应该从哪里开始。
|
||
- 低频工具持续占用导航空间。
|
||
- 用户需要理解系统模块之间的关系，才能完成真实业务。
|
||
- “考勤确认—加班计算—发薪—工资条发布”等连续工作被人为拆散。
|
||
- 页面入口多，但缺乏统一的“我的工作”视角。
|
||
|
||
### 2.2 页面结构问题
|
||
|
||
- Dashboard 同时承担概览、薪税、风险、待办、成本和人力分析，第一屏焦点不清。
|
||
- Money、Termination、SocialInsurance、AIAssistant 等页面体量过大，局部交互难以保持一致。
|
||
- 页面标题、说明、工具栏、筛选区和数据区缺乏完全统一的结构。
|
||
- 大量操作按钮同时出现，主要动作与次要动作区分不足。
|
||
- 表格能够承载数据，但不够支持重复、高频和批量操作。
|
||
- 页面状态经常表现为模块状态，缺少负责人、截止时间、影响范围和下一步说明。
|
||
|
||
### 2.3 视觉问题
|
||
|
||
- 当前紫色主色与灰白卡片具有较强的通用后台模板感。
|
||
- 品牌名“企业用工专家”描述了功能，但品牌识别度不足。
|
||
- 大量 `text-xs` 导致信息虽然密集，但阅读压力较大。
|
||
- 页面主要依赖卡片和边框分区，缺少明确的视觉层级。
|
||
- 图标、状态标签、按钮密度和留白在不同页面存在差异。
|
||
- `max-w-content` 已配置，但主内容容器未实际限制超宽屏宽度。
|
||
|
||
### 2.4 交互问题
|
||
|
||
- 用户需要跨页面记忆上下文和上一步结果。
|
||
- 部分复杂流程虽有步骤，但缺少持续可见的摘要和风险提示。
|
||
- 批量操作入口常驻，未根据选择状态渐进出现。
|
||
- 错误反馈偏结果型，缺少问题定位与修复建议。
|
||
- AI 顾问与业务上下文分离，用户需要重新描述员工、批次或风险背景。
|
||
- 员工门户功能已覆盖多个场景，但仍更像功能集合，不像统一的员工工作台。
|
||
|
||
---
|
||
|
||
## 3. 目标产品框架
|
||
|
||
### 3.1 目标一级导航
|
||
|
||
| 一级入口 | 主要内容 | 核心用户任务 |
|
||
|---|---|---|
|
||
| 首页 | 今日任务、审批、风险、截止日、快捷创建、近期动态 | 判断今天先做什么 |
|
||
| 团队 | 员工目录、入职、异动、合同、特殊状态、离职 | 管理员工全生命周期 |
|
||
| 薪酬 | 发薪、工资条、加班、社保公积金、专项扣除 | 完成每月薪酬工作 |
|
||
| 时间 | 考勤、排班、休假、月度确认 | 管理工时和出勤 |
|
||
| 合规 | 风险、制度、证据链、用工体检、审计 | 发现并处理用工风险 |
|
||
|
||
全局右上区域保留：
|
||
|
||
- 全局搜索／命令面板。
|
||
- 快速创建按钮。
|
||
- 待审批入口。
|
||
- 通知入口。
|
||
- 帮助与 AI 助手。
|
||
- 组织及个人菜单。
|
||
|
||
以下内容移入“设置”或“更多”：
|
||
|
||
- 文本模板。
|
||
- 数据导入和导出。
|
||
- 用户与权限。
|
||
- 企业信息。
|
||
- 通知规则。
|
||
- 社保和公积金基础配置。
|
||
- 审计配置及平台级管理。
|
||
|
||
### 3.2 导航行为
|
||
|
||
- 默认只展开当前一级导航对应的二级菜单。
|
||
- 记住用户最近访问的页面和分组状态。
|
||
- 当前页面使用底色、左侧标识和文本颜色共同表达，不只依赖颜色。
|
||
- 导航底部提供“设置”和“帮助”，避免与日常模块混排。
|
||
- 桌面端侧边栏宽度建议为 224–240px，可折叠为 64px 图标栏。
|
||
- 移动端不复刻完整侧边栏，使用“首页、团队、待办、我的”四入口底栏。
|
||
|
||
### 3.3 全局搜索和命令面板
|
||
|
||
快捷键建议为 `Cmd/Ctrl + K`，搜索范围包括：
|
||
|
||
- 员工姓名、手机号、员工编号。
|
||
- 发薪批次和月份。
|
||
- 合同、制度和证据链。
|
||
- 页面与功能。
|
||
- 可执行命令，例如“新增员工”“创建发薪批次”“发起离职”。
|
||
|
||
搜索结果按“人员、任务、记录、功能”分组，最近使用项优先。敏感信息不应出现在未经授权的搜索结果摘要中。
|
||
|
||
---
|
||
|
||
## 4. 首页：从数据看板升级为任务中心
|
||
|
||
### 4.1 页面目标
|
||
|
||
首页第一屏必须回答：
|
||
|
||
1. 今天最需要处理什么？
|
||
2. 最近一个重要截止日是什么？
|
||
3. 哪些流程或员工存在异常？
|
||
|
||
### 4.2 推荐布局
|
||
|
||
#### 顶部区域
|
||
|
||
- 问候语：`早上好，李经理`。
|
||
- 补充信息：`7 月 31 日，星期五 · 上海`。
|
||
- 右侧主按钮：`+ 快速创建`。
|
||
- 可选企业／组织切换器。
|
||
|
||
#### 主任务卡
|
||
|
||
只展示当前最重要的一项任务，例如：
|
||
|
||
> 7 月工资等待复核
|
||
> 63 名员工，预计应发 ¥428,560，计划 8 月 5 日发布
|
||
> 3 项异常需要处理
|
||
|
||
主操作：`继续复核`。
|
||
次操作：`查看异常`、`稍后提醒`。
|
||
|
||
主任务的选择规则：
|
||
|
||
1. 已逾期事项。
|
||
2. 高风险合规事项。
|
||
3. 需要当前用户审批的事项。
|
||
4. 未来三日内到期事项。
|
||
5. 当前月度流程的下一步。
|
||
|
||
#### 待办队列
|
||
|
||
使用分段控制器切换：
|
||
|
||
- 需要我处理。
|
||
- 等待他人。
|
||
- 即将到期。
|
||
- 已完成。
|
||
|
||
每条待办包含：事项、关联员工或批次、截止时间、风险级别、负责人和一个直接操作。
|
||
|
||
#### 人员动态
|
||
|
||
- 待入职。
|
||
- 本周入职。
|
||
- 合同即将到期。
|
||
- 试用期即将结束。
|
||
- 特殊状态提醒。
|
||
- 离职交接中。
|
||
|
||
#### 数据洞察
|
||
|
||
放在第二屏，避免与任务竞争注意力：
|
||
|
||
- 本月人力成本。
|
||
- 年度成本趋势。
|
||
- 部门人数变化。
|
||
- 风险分布。
|
||
- 员工完成率和自助率。
|
||
|
||
### 4.3 空状态
|
||
|
||
无待办时不显示空白卡片，应表达积极完成状态：
|
||
|
||
> 今天没有待处理事项
|
||
> 下一次发薪准备将在 8 月 1 日开始。
|
||
|
||
可提供 `查看日历` 和 `创建任务` 两个入口。
|
||
|
||
---
|
||
|
||
## 5. 团队与员工体验
|
||
|
||
### 5.1 员工目录
|
||
|
||
默认列表列建议：
|
||
|
||
| 列 | 内容 |
|
||
|---|---|
|
||
| 员工 | 头像、姓名、职位／部门 |
|
||
| 状态 | 在职、待入职、试用期、离职处理中、已离职 |
|
||
| 入职日期 | 本地化日期和在职时长 |
|
||
| 合同 | 合同类型、到期时间或风险 |
|
||
| 薪酬状态 | 已配置、缺失、变更待生效 |
|
||
| 下一项任务 | 最需要完成的员工相关事项 |
|
||
| 操作 | 查看详情和更多菜单 |
|
||
|
||
优化要求：
|
||
|
||
- 点击整行进入员工详情。
|
||
- 搜索与筛选始终位于同一工具栏。
|
||
- 筛选条件展示为可移除的条件标签。
|
||
- 支持保存视图，例如“合同 30 天内到期”“上海在职员工”。
|
||
- 选中员工后再出现批量操作栏。
|
||
- 批量离职、删除等危险操作必须显示影响范围和不可逆后果。
|
||
- 支持列显示管理、列冻结和舒适／紧凑密度切换。
|
||
|
||
### 5.2 员工 Profile Shell
|
||
|
||
员工详情采用统一框架，避免不同档案页面重复搭建标题和导航。
|
||
|
||
头部固定信息：
|
||
|
||
- 头像、姓名、职位、部门。
|
||
- 在职状态和关键风险。
|
||
- 联系方式。
|
||
- 入职日期和直属负责人。
|
||
- `编辑资料` 主按钮及更多操作菜单。
|
||
|
||
推荐 Tab：
|
||
|
||
1. 概览。
|
||
2. 工作信息。
|
||
3. 薪酬福利。
|
||
4. 考勤休假。
|
||
5. 文件合同。
|
||
6. 绩效与事件。
|
||
7. 历史记录。
|
||
|
||
概览页内容：
|
||
|
||
- 待完成事项。
|
||
- 当前合同摘要。
|
||
- 薪酬与参保摘要。
|
||
- 最近考勤异常。
|
||
- 最近文件和记录。
|
||
- 生命周期时间线。
|
||
|
||
隐私要求：
|
||
|
||
- 身份证、银行卡、工资默认遮罩。
|
||
- 查看完整敏感信息需要具备权限。
|
||
- 查看和导出敏感数据写入审计日志。
|
||
- 在操作附近说明数据用途，避免用户不清楚为何收集。
|
||
|
||
### 5.3 入职流程
|
||
|
||
统一为五阶段：
|
||
|
||
`发送邀请 → 员工填写 → HR 审核 → 合同确认 → 完成配置`
|
||
|
||
每位待入职员工显示：
|
||
|
||
- 总完成度。
|
||
- 当前阶段。
|
||
- 缺失资料。
|
||
- 员工最后操作时间。
|
||
- 预计入职日期。
|
||
- 可执行动作，如提醒、重新发送、代为补录。
|
||
|
||
完成配置应包含合同、薪酬、社保、班次和系统访问权限，不应只以员工资料提交为终点。
|
||
|
||
### 5.4 离职流程
|
||
|
||
保留现有六步能力，并统一为：
|
||
|
||
1. 选择员工和离职类型。
|
||
2. 确认原因与日期。
|
||
3. 合规检查。
|
||
4. 费用结算。
|
||
5. 工作交接和材料。
|
||
6. 复核、审批与执行。
|
||
|
||
桌面端使用“主内容 + 右侧摘要”布局。右侧始终显示：
|
||
|
||
- 员工和离职类型。
|
||
- 生效日期。
|
||
- 补偿金额。
|
||
- 风险级别。
|
||
- 缺失材料。
|
||
- 当前审批状态。
|
||
|
||
底部固定操作栏：`保存草稿`、`上一步`、`继续`。最后一步根据权限显示 `提交审批` 或 `执行离职`，避免三个同等权重的终态按钮同时出现。
|
||
|
||
---
|
||
|
||
## 6. 薪酬与发薪体验
|
||
|
||
### 6.1 月度发薪中心
|
||
|
||
将发薪操作组织为一个连续流程：
|
||
|
||
`准备数据 → 异常检查 → 复核工资 → 归档 → 发布工资条 → 完成`
|
||
|
||
页面顶部显示：
|
||
|
||
- 月份和批次名称。
|
||
- 流程步骤。
|
||
- 当前负责人。
|
||
- 计划发布时间。
|
||
- 员工数量和预计总额。
|
||
- 自动保存状态。
|
||
|
||
### 6.2 准备数据
|
||
|
||
集中呈现以下数据源的完成情况：
|
||
|
||
- 员工和薪酬结构。
|
||
- 考勤。
|
||
- 加班。
|
||
- 请假。
|
||
- 社保公积金。
|
||
- 专项附加扣除。
|
||
- 奖金、补偿或其他一次性项目。
|
||
|
||
每个数据源显示“已同步、存在异常、尚未导入、无需处理”。支持直接进入问题位置，不要求用户自行寻找模块。
|
||
|
||
### 6.3 异常检查
|
||
|
||
使用后端现有 pre-check 能力构建发薪质量门禁。
|
||
|
||
异常按严重级别分为：
|
||
|
||
- 阻断：未配置薪资、关键身份信息缺失、计算失败。
|
||
- 警告：与上月相比变化显著、加班异常、实发为负数。
|
||
- 提示：新员工首月、离职结算、一次性奖金。
|
||
|
||
每条异常需要提供：
|
||
|
||
- 员工。
|
||
- 具体字段。
|
||
- 当前值和参考值。
|
||
- 影响。
|
||
- 建议操作。
|
||
- `立即修复` 入口。
|
||
|
||
修复后自动重新检查，并保留处理记录。
|
||
|
||
### 6.4 工资复核表
|
||
|
||
- 固定员工姓名列和实发工资列。
|
||
- 工资项目支持分组展开和折叠。
|
||
- 修改后的单元格明确标识，并支持撤销。
|
||
- 显示与上月的金额和百分比变化。
|
||
- 支持筛选“仅看异常”“仅看已修改”“仅看新增员工”。
|
||
- 表尾固定显示人数、应发、扣款、税额、公司成本和实发合计。
|
||
- 大数据量使用虚拟滚动或服务端分页，避免一次渲染全部员工。
|
||
|
||
### 6.5 归档与发布
|
||
|
||
归档前弹出复核摘要，而不是只询问是否确认：
|
||
|
||
- 员工数量。
|
||
- 总金额。
|
||
- 未解决警告。
|
||
- 后续影响。
|
||
- 归档后是否可撤销。
|
||
|
||
归档后将主要操作变为 `发布工资条`。支持立即发布和定时发布，发布完成后展示员工查看／确认进度。
|
||
|
||
---
|
||
|
||
## 7. 时间、考勤和排班
|
||
|
||
### 7.1 模块结构
|
||
|
||
建议二级导航：
|
||
|
||
- 月度概览。
|
||
- 每日出勤。
|
||
- 排班。
|
||
- 休假。
|
||
- 规则设置。
|
||
|
||
现有六个平级 Tab 应重新按使用频率分组，高级班次设置放入次级入口。
|
||
|
||
### 7.2 月度确认流程
|
||
|
||
`导入／同步 → 识别异常 → 员工确认 → HR 锁定 → 同步发薪`
|
||
|
||
页面显示：
|
||
|
||
- 应确认人数。
|
||
- 已确认人数。
|
||
- 未确认人员。
|
||
- 异常考勤数量。
|
||
- 加班总时长。
|
||
- 当前发布状态。
|
||
|
||
“取消发布”属于次要危险操作，应收进更多菜单并说明会对员工端及发薪数据造成的影响。
|
||
|
||
### 7.3 排班
|
||
|
||
- 周视图作为默认视图。
|
||
- 班次用色块与缩写共同表达，不能只依赖颜色。
|
||
- 支持复制上周、按部门批量排班和冲突检测。
|
||
- 在发布排班前检查重复班次、休假冲突和连续工作风险。
|
||
|
||
---
|
||
|
||
## 8. 社保公积金体验
|
||
|
||
### 8.1 日常办理与配置分离
|
||
|
||
日常用户默认进入“月度办理”，配置版本、费率试算和基数调整放入“规则与配置”。
|
||
|
||
月度办理流程：
|
||
|
||
`确认增减员 → 检查基数变化 → 生成申报名单 → 导出／办理 → 标记完成`
|
||
|
||
每一步显示：
|
||
|
||
- 待办数量。
|
||
- 关键变化。
|
||
- 是否存在阻断问题。
|
||
- 上一步完成时间和操作者。
|
||
|
||
### 8.2 配置版本
|
||
|
||
- 使用时间线展示历史版本。
|
||
- 清楚标记当前生效版本和未来版本。
|
||
- 新建版本时显示与当前版本的差异。
|
||
- 应用调基前展示影响人数和公司成本变化。
|
||
- 允许导出受影响员工名单。
|
||
|
||
---
|
||
|
||
## 9. 合规、制度与证据链
|
||
|
||
### 9.1 统一风险中心
|
||
|
||
将风险、用工体检、合同提醒、特殊状态提醒和相关证据入口汇总为统一风险中心。
|
||
|
||
风险列表字段：
|
||
|
||
- 风险事项。
|
||
- 关联员工／流程。
|
||
- 风险等级。
|
||
- 截止时间。
|
||
- 负责人。
|
||
- 建议动作。
|
||
- 证据完整度。
|
||
- 处理状态。
|
||
|
||
风险详情使用三栏结构：问题说明、法律／制度依据、处理动作与证据。
|
||
|
||
### 9.2 规章制度
|
||
|
||
制度发布流程：
|
||
|
||
`起草 → 审核 → 公示／征求意见 → 发布 → 员工阅读确认 → 归档`
|
||
|
||
制度列表优先展示状态、覆盖人数、已读率、未读人员和最近更新时间。员工已读统计应能直接发送提醒。
|
||
|
||
### 9.3 证据链
|
||
|
||
证据链采用时间线表达，按事件展示：
|
||
|
||
- 发生时间。
|
||
- 事件类型。
|
||
- 操作者和相关人员。
|
||
- 文件及来源。
|
||
- 是否完整、是否签署或确认。
|
||
- 与制度、审批和员工事件的关联。
|
||
|
||
支持按离职、违纪、考勤、合同等场景生成证据包，并在导出前展示包含内容和敏感信息提示。
|
||
|
||
---
|
||
|
||
## 10. AI 顾问优化
|
||
|
||
### 10.1 从独立聊天升级为上下文助手
|
||
|
||
保留完整 AI 工作区，同时在业务页面提供“询问 AI”入口。系统自动附带当前上下文，例如：
|
||
|
||
- 当前员工和已授权档案摘要。
|
||
- 当前发薪批次和异常。
|
||
- 当前离职原因、日期和风险评估。
|
||
- 当前制度文档或证据链。
|
||
|
||
用户不需要重新描述“这个员工是谁、现在在哪一步”。发送前应明确显示即将带入的上下文，并允许取消部分内容。
|
||
|
||
### 10.2 AI 输出结构
|
||
|
||
优先提供结构化结果：
|
||
|
||
- 结论。
|
||
- 风险级别。
|
||
- 依据。
|
||
- 建议步骤。
|
||
- 可生成材料。
|
||
- 需要人工确认的部分。
|
||
|
||
AI 建议不能直接执行高风险操作。生成合同、制度或离职材料后，需要进入预览、编辑和确认流程。
|
||
|
||
---
|
||
|
||
## 11. 员工门户
|
||
|
||
### 11.1 目标结构
|
||
|
||
移动端首页优先展示：
|
||
|
||
- 我的待办。
|
||
- 最新工资条。
|
||
- 考勤和休假。
|
||
- 合同与文件。
|
||
- 制度阅读确认。
|
||
- 个人资料。
|
||
|
||
底部导航建议：`首页｜时间｜文件｜我的`。
|
||
|
||
### 11.2 员工首页
|
||
|
||
第一屏显示需要员工完成的动作，例如：
|
||
|
||
- 确认本月考勤。
|
||
- 阅读新制度。
|
||
- 补充入职材料。
|
||
- 确认合同。
|
||
- 查看工资条。
|
||
|
||
不要首先展示功能说明或宣传内容。每项任务展示截止时间、完成要求和一个明确按钮。
|
||
|
||
### 11.3 自助数据维护
|
||
|
||
在权限允许的前提下支持员工更新：
|
||
|
||
- 手机号、地址和紧急联系人。
|
||
- 银行卡。
|
||
- 专项附加扣除。
|
||
- 个人证件和附件。
|
||
|
||
敏感变更进入 HR 审核，并向员工展示“已提交、审核中、已生效、被退回”的完整状态。
|
||
|
||
---
|
||
|
||
## 12. 视觉设计系统
|
||
|
||
### 12.1 品牌气质
|
||
|
||
关键词：可信、温暖、清晰、专业、有人情味、不过度严肃。
|
||
|
||
避免：
|
||
|
||
- 通用紫色 SaaS 模板感。
|
||
- 大面积单一米色或深蓝色主题。
|
||
- 过多装饰卡片、渐变球和营销式构图。
|
||
- 超大标题占据工作空间。
|
||
- 用插画替代真实业务信息。
|
||
|
||
### 12.2 建议色彩
|
||
|
||
以下为方向性 Token，最终需通过品牌设计和 WCAG 对比度测试：
|
||
|
||
| Token | 建议色值 | 用途 |
|
||
|---|---|---|
|
||
| `brand-600` | `#C7442E` | 主按钮、当前导航、品牌强调 |
|
||
| `brand-700` | `#A93625` | Hover、Active |
|
||
| `ink-900` | `#202622` | 主要文字 |
|
||
| `ink-600` | `#59615C` | 次要文字 |
|
||
| `surface-page` | `#F7F8F6` | 页面背景 |
|
||
| `surface-card` | `#FFFFFF` | 内容背景 |
|
||
| `border` | `#DDE1DD` | 边框和分隔线 |
|
||
| `success-600` | `#237A57` | 成功、安全、完成 |
|
||
| `warning-600` | `#A76113` | 警告、临期 |
|
||
| `danger-600` | `#B83232` | 高风险、危险操作 |
|
||
| `info-600` | `#356A8A` | 信息、进行中 |
|
||
|
||
颜色不能单独表达状态。状态组件必须同时包含文字，必要时增加图标。
|
||
|
||
### 12.3 字体
|
||
|
||
建议字体栈：
|
||
|
||
```css
|
||
font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
font-variant-numeric: tabular-nums;
|
||
```
|
||
|
||
字体层级：
|
||
|
||
| 层级 | 字号 | 字重 | 用途 |
|
||
|---|---:|---:|---|
|
||
| Page title | 24px | 600 | 页面主标题 |
|
||
| Section title | 16–18px | 600 | 页面分区 |
|
||
| Card title | 14–16px | 600 | 小型内容块 |
|
||
| Body | 14px | 400 | 默认正文和表格 |
|
||
| Metadata | 12–13px | 400 | 时间、辅助信息 |
|
||
| KPI | 24–32px | 600 | 关键数字 |
|
||
|
||
不使用随视口宽度缩放字号，不使用负字距。
|
||
|
||
### 12.4 间距和尺寸
|
||
|
||
- 使用 4px 基础单位。
|
||
- 页面水平内边距：移动端 16px，桌面端 24–32px。
|
||
- 主内容最大宽度：1440px；数据密集表格可使用全可用宽度。
|
||
- 常规区块垂直间距：24px。
|
||
- 表单字段间距：16px。
|
||
- 按钮高度：小型 32px，默认 40px，大型 48px。
|
||
- 输入框默认高度：40px。
|
||
- 图标按钮保持稳定的 36×36px 或 40×40px。
|
||
- 卡片圆角不超过 8px。
|
||
|
||
### 12.5 页面标准结构
|
||
|
||
每个管理端页面统一为：
|
||
|
||
1. `PageHeader`：标题、说明、状态和主要动作。
|
||
2. `Tabs/SegmentedControl`：只在确有同级视图时使用。
|
||
3. `FilterBar`：搜索、筛选、视图和导出。
|
||
4. `Content`：列表、表格、流程或详情。
|
||
5. `BulkActionBar`：仅选择数据后出现。
|
||
6. `Pagination/Footer`：分页、总数和显示密度。
|
||
|
||
### 12.6 组件补齐
|
||
|
||
建议建立或完善：
|
||
|
||
- AppShell。
|
||
- PageHeader。
|
||
- GlobalSearch／CommandPalette。
|
||
- FilterBar 和 FilterChip。
|
||
- DataTable。
|
||
- Stepper。
|
||
- TaskItem。
|
||
- Timeline。
|
||
- StatBlock。
|
||
- InlineAlert。
|
||
- Drawer。
|
||
- SplitPane。
|
||
- StickyActionBar。
|
||
- SensitiveValue。
|
||
- PermissionGate。
|
||
- FormSection。
|
||
- SaveStatus。
|
||
- UndoToast。
|
||
|
||
---
|
||
|
||
## 13. 表单、反馈和可访问性
|
||
|
||
### 13.1 表单
|
||
|
||
- 标签始终可见，placeholder 不代替标签。
|
||
- 必填项统一表达，不在每个标签后堆叠红色星号。
|
||
- 校验错误出现在字段附近，并说明如何修复。
|
||
- 长表单按语义分区，支持保存草稿和离开保护。
|
||
- 对身份证、手机号、银行卡、金额和日期提供格式化输入。
|
||
- 自动保存时显示“保存中／已保存／保存失败”。
|
||
|
||
### 13.2 操作反馈
|
||
|
||
- 成功：Toast，可提供“撤销”。
|
||
- 普通失败：Toast + 字段或区域内错误。
|
||
- 页面加载失败：区域级 Error State 和重试按钮。
|
||
- 危险操作：确认对话框，说明对象、数量、后果及可恢复性。
|
||
- 长耗时任务：显示进度和后台处理状态，不能只让按钮持续转圈。
|
||
|
||
### 13.3 可访问性
|
||
|
||
- 正文和交互文字达到 WCAG AA 对比度。
|
||
- 所有功能支持键盘访问和可见焦点。
|
||
- 图标按钮具有明确的 `aria-label` 和 tooltip。
|
||
- 表格表头、排序状态和选择状态可被辅助技术理解。
|
||
- Modal 打开时锁定焦点，关闭后返回触发元素。
|
||
- 动画遵循 `prefers-reduced-motion`。
|
||
- 移动端触控目标至少 44×44px。
|
||
|
||
---
|
||
|
||
## 14. 国际化与本地化
|
||
|
||
### 14.1 工程要求
|
||
|
||
- 界面文案全部进入 i18n 资源文件。
|
||
- 日期、数字、百分比和货币统一通过 `Intl` 格式化。
|
||
- 内部存储使用 ISO 日期和明确时区。
|
||
- 不在业务组件内拼接中文句子。
|
||
- 布局支持英文文案比中文长 30%–80%。
|
||
- 表格列和按钮不依赖固定中文宽度。
|
||
|
||
### 14.2 语言策略
|
||
|
||
- 第一阶段：简体中文和英文框架。
|
||
- 第二阶段：繁体中文。
|
||
- 第三阶段：根据业务扩展国家／地区包。
|
||
|
||
劳动合同、解聘、社保公积金等功能需要区分“界面语言”和“适用法律地区”。英文界面不意味着将中国法概念简单替换成美国 HR 术语。
|
||
|
||
### 14.3 品牌与文案
|
||
|
||
- 品牌名应简短、可记忆、便于形成中英文组合。
|
||
- “企业用工专家”可保留为价值说明，而非唯一品牌名。
|
||
- 文案使用动作导向表达，例如“复核 7 月工资”，避免“薪税管理功能”。
|
||
- 按钮描述结果，例如“发布工资条”，避免笼统的“确定”。
|
||
- 空状态提供下一步，不使用无帮助的“暂无数据”。
|
||
|
||
---
|
||
|
||
## 15. 后端能力与前端映射
|
||
|
||
| 现有能力 | 推荐前端体验 | 优先级 |
|
||
|---|---|---|
|
||
| Dashboard todos、风险和合规评分 | 首页任务排序、统一风险中心 | P0 |
|
||
| Calendar 和提醒 | 首页截止日、员工时间线、月度日历 | P0 |
|
||
| Payroll batch pre-check | 发薪异常质量门禁 | P0 |
|
||
| 归档、撤销归档、定时发布 | 发薪 Stepper 和发布中心 | P0 |
|
||
| Onboarding link 和资料上传 | 入职进度面板、员工自助资料收集 | P1 |
|
||
| Contract confirm | 入职和合同确认闭环 | P1 |
|
||
| Termination draft、审批和执行 | 离职流程及审批收件箱 | P0 |
|
||
| WorkProcess | 跨模块统一审批和办理中心 | P1 |
|
||
| Policy read records | 制度已读率、未读提醒和证据 | P1 |
|
||
| Attendance publish／confirm | 月度确认流程和员工响应追踪 | P1 |
|
||
| Evidence chain | 员工详情时间线、风险处理证据包 | P1 |
|
||
| Audit log | 敏感字段查看和关键操作追踪 | P1 |
|
||
| RAG／AI conversation | 上下文 AI、结构化风险建议 | P2 |
|
||
| Portal APIs | Employee Hub | P1 |
|
||
| Notification settings/logs | 统一通知中心和偏好设置 | P2 |
|
||
| Platform org/user APIs | 多组织管理工作台 | P2 |
|
||
|
||
### 15.1 建议补充的后端聚合能力
|
||
|
||
尽管现有接口已覆盖大部分功能，前端重构时建议增加少量聚合接口，避免首页和流程页并发请求过多：
|
||
|
||
- `GET /workspace/next-actions`：当前用户下一步任务。
|
||
- `GET /workspace/deadlines`：统一截止日和提醒。
|
||
- `GET /employees/:id/summary`：员工 Profile 首屏摘要。
|
||
- `GET /payroll2/batches/:id/workflow`：发薪步骤、异常和完成状态。
|
||
- `GET /approvals/inbox`：跨模块审批收件箱。
|
||
- `GET /search`：全局搜索。
|
||
|
||
聚合接口只负责编排已有业务数据，不重复实现核心计算逻辑。
|
||
|
||
---
|
||
|
||
## 16. 响应式策略
|
||
|
||
### 16.1 桌面端
|
||
|
||
- 适用于完整发薪表、社保办理、配置和批量管理。
|
||
- 1280px 以上使用侧边栏与主内容布局。
|
||
- 超宽屏限制主要内容宽度，数据表格场景可例外铺满。
|
||
|
||
### 16.2 平板
|
||
|
||
- 侧边栏默认折叠。
|
||
- 表格优先保留关键列，其他字段进入详情。
|
||
- 复杂流程保持步骤和摘要，但摘要可折叠。
|
||
|
||
### 16.3 手机端
|
||
|
||
管理员端只优先支持：
|
||
|
||
- 查看首页待办。
|
||
- 审批。
|
||
- 查看员工摘要。
|
||
- 处理通知。
|
||
- 查看发薪状态和异常摘要。
|
||
|
||
完整工资表编辑、复杂配置和批量导入应引导用户使用桌面端。员工门户则必须完整支持手机端。
|
||
|
||
---
|
||
|
||
## 17. 技术与组件重构建议
|
||
|
||
### 17.1 页面拆分
|
||
|
||
按领域拆分大型页面：
|
||
|
||
```text
|
||
pages/payroll/
|
||
PayrollHome.tsx
|
||
PayrollWorkflow.tsx
|
||
PayrollReviewTable.tsx
|
||
PayrollExceptions.tsx
|
||
PayrollPublish.tsx
|
||
|
||
pages/termination/
|
||
TerminationList.tsx
|
||
TerminationWorkflow.tsx
|
||
steps/
|
||
components/
|
||
|
||
pages/social/
|
||
MonthlyProcess.tsx
|
||
SocialConfig.tsx
|
||
HousingFundConfig.tsx
|
||
VersionHistory.tsx
|
||
```
|
||
|
||
拆分目标不是追求小文件，而是建立清晰的领域边界、复用状态组件和降低单页面变更风险。
|
||
|
||
### 17.2 状态与数据
|
||
|
||
- React Query 的 key 统一工厂化，明确失效规则。
|
||
- 复杂流程使用 reducer 或状态机表达，避免大量彼此关联的 `useState`。
|
||
- 筛选、Tab 和分页写入 URL，支持刷新、分享和返回。
|
||
- 对乐观更新提供撤销机制。
|
||
- 大型表格考虑列配置持久化。
|
||
|
||
### 17.3 设计 Token
|
||
|
||
将颜色、圆角、阴影、字号、层级、宽度和动效统一定义为 Token，不继续在页面内直接使用 `bg-[#...]` 等任意值。Tailwind 配置与 CSS 变量应共用同一语义命名。
|
||
|
||
---
|
||
|
||
## 18. 分阶段实施计划
|
||
|
||
### Phase 0：基线和验证，3–5 天
|
||
|
||
- 建立核心任务的可用性基线。
|
||
- 记录发薪、入职和离职的点击数及完成时间。
|
||
- 整理角色和权限矩阵。
|
||
- 确认中英文品牌策略。
|
||
- 建立桌面、平板和手机测试视口。
|
||
|
||
交付物：体验基线、页面清单、角色矩阵、设计原则确认稿。
|
||
|
||
### Phase 1：全局框架，2–3 周
|
||
|
||
- 新导航和 AppShell。
|
||
- PageHeader、FilterBar、DataTable 等基础组件。
|
||
- 新色彩、字体、间距和状态体系。
|
||
- 首页任务中心。
|
||
- 全局宽度和响应式修复。
|
||
- WCAG AA 基础整改。
|
||
|
||
验收：一级导航不超过五项；首页第一屏存在唯一主任务；所有页面使用统一标题结构；1920px 下内容不无边界拉伸。
|
||
|
||
### Phase 2：核心业务流程，3–5 周
|
||
|
||
- 发薪工作流。
|
||
- 离职工作流。
|
||
- 月度社保办理。
|
||
- 月度考勤确认。
|
||
- 员工 Profile Shell。
|
||
|
||
验收：核心任务无需用户跨模块寻找下一步；所有流程能显示当前步骤、阻断项和负责人；危险操作明确说明影响。
|
||
|
||
### Phase 3：员工自助与协作，3–4 周
|
||
|
||
- Employee Hub。
|
||
- 入职进度中心。
|
||
- 审批收件箱。
|
||
- 制度阅读追踪。
|
||
- 通知中心。
|
||
|
||
验收：员工可在手机端完成主要自助任务；HR 能统一查看员工响应状态；审批不再分散在业务页面中。
|
||
|
||
### Phase 4：智能化和国际化，3–4 周
|
||
|
||
- 上下文 AI。
|
||
- 全局搜索和命令面板。
|
||
- 中英文资源化。
|
||
- Intl 日期、数字和货币格式化。
|
||
- 保存视图和个性化工作台。
|
||
|
||
验收：AI 自动识别当前业务上下文；核心页面完成中英文切换；英文文本不出现按钮溢出和布局破坏。
|
||
|
||
---
|
||
|
||
## 19. 成功指标
|
||
|
||
### 19.1 效率指标
|
||
|
||
- 首次创建员工到入职完成的时间。
|
||
- 创建发薪批次到发布工资条的时间。
|
||
- 每次发薪的点击数和页面跳转数。
|
||
- 异常发现到修复的平均时间。
|
||
- 离职流程平均完成时长。
|
||
- 批量操作使用率。
|
||
|
||
### 19.2 质量指标
|
||
|
||
- 发薪归档后撤销率。
|
||
- 工资条发布错误率。
|
||
- 入职资料一次通过率。
|
||
- 逾期合同和未处理高风险数量。
|
||
- 重复导入和数据冲突数量。
|
||
- 高风险操作误触和取消率。
|
||
|
||
### 19.3 体验指标
|
||
|
||
- 首页待办完成率。
|
||
- 员工自助完成率。
|
||
- 员工制度阅读确认率。
|
||
- 移动端任务完成率。
|
||
- 客服／内部咨询数量。
|
||
- SUS 或内部满意度评分。
|
||
|
||
建议目标：
|
||
|
||
- 发薪操作时间下降 30%。
|
||
- 核心流程页面跳转下降 40%。
|
||
- 入职资料一次通过率提升至 85% 以上。
|
||
- 员工自助完成率达到 80% 以上。
|
||
- 高风险事项逾期数量下降 50%。
|
||
|
||
---
|
||
|
||
## 20. 页面验收清单
|
||
|
||
每个页面发布前至少验证：
|
||
|
||
- 用户能否在 5 秒内理解页面目的。
|
||
- 是否存在唯一且明确的主要动作。
|
||
- 是否说明当前状态和下一步。
|
||
- 是否避免同时展示过多低频操作。
|
||
- 加载、空、错误、无权限和部分数据状态是否完整。
|
||
- 危险操作是否说明对象、数量、后果和可恢复性。
|
||
- 文字和状态对比度是否达到 WCAG AA。
|
||
- 仅使用键盘是否能完成主要操作。
|
||
- 360px、768px、1280px、1440px、1920px 是否无溢出和遮挡。
|
||
- 中英文最长文案是否不破坏布局。
|
||
- 敏感信息是否按权限遮罩并留下审计记录。
|
||
- 页面返回后筛选、分页和滚动位置是否合理保留。
|
||
|
||
---
|
||
|
||
## 21. 建议优先制作的高保真原型
|
||
|
||
为了尽快验证方向，第一轮只需设计以下八个关键页面：
|
||
|
||
1. 新首页任务中心。
|
||
2. 新导航和全局搜索。
|
||
3. 员工目录。
|
||
4. 员工概览详情。
|
||
5. 发薪流程总览。
|
||
6. 发薪异常和工资复核表。
|
||
7. 离职流程。
|
||
8. 员工门户首页。
|
||
|
||
上述页面覆盖导航、人物、任务、数据表、复杂流程、风险和移动端，可用于验证整个设计系统，无需一开始重画所有页面。
|
||
|
||
---
|
||
|
||
## 22. 参考资料
|
||
|
||
- Gusto 产品能力总览：<https://gusto.com/product>
|
||
- Gusto Employee Self-Serve：<https://gusto.com/product/payroll/employee-self-serve>
|
||
- Gusto 2025 Feature Showcase：<https://gusto.com/product/showcase/2025>
|
||
- Gusto 报表与自定义报告：<https://support.gusto.com/article/101334493100000/view-download-and-customize-reports-in-gusto-for-admins>
|
||
- Gusto Money Dashboard：<https://gusto.com/product/money/dashboard>
|
||
|
||
这些参考资料体现的共同方向是：减少专业门槛、围绕下一步组织界面、让异常在提交前出现、强化员工自助，并使跨模块数据自然衔接。TurboHR 应保留自身在中国劳动用工合规、证据链和离职处理方面的差异化能力，在此基础上建立国际化产品体验。
|
||
|