Files

T

selfrelease 821a62e3f8 feat: Sprint 1 — 设计Token系统 + 新导航5分组 + AppShell/PageHeader/FilterBar/DataTable组件 + 花名册导出扩充19字段 + 社保/公积金不缴纳选项 + 个税申报表导出 + 入离职/绩效统计看板

2026-07-31 17:40:49 +08:00

30 KiB

Raw Permalink Blame History

TurboHR UI/UX 完整优化方案

版本：V1.0
日期：2026-07-31
适用范围：企业管理端、员工门户、平台管理端
参考方向：Gusto 的任务驱动体验、温暖可信的视觉语言、员工自助和低门槛业务流程
说明：本方案借鉴 Gusto 的产品原则，不复制其品牌、页面或视觉资产。

1. 项目目标

TurboHR 已具备员工、合同、考勤、薪酬、社保公积金、离职、制度、证据链、审批、通知、员工门户及 AI 顾问等较完整的后端能力。当前优化重点不应继续堆叠入口，而应将既有能力组织成更容易理解和完成的工作流。

本轮优化目标如下：

将产品从“模块型管理后台”升级为“任务型 HR 工作台”。
让非专业 HR 用户也能在清晰引导下完成发薪、入职、离职和月度社保等复杂业务。
建立国际化、可信、温暖但不过度装饰的品牌与视觉体系。
减少页面跳转、重复录入、操作犹豫和错误返工。
提高员工自助率，减少 HR 重复答疑和资料收集工作。
建立可扩展的设计系统，为中英文、多地区和多组织能力预留空间。

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 页面目标

首页第一屏必须回答：

今天最需要处理什么？
最近一个重要截止日是什么？
哪些流程或员工存在异常？

4.2 推荐布局

顶部区域

问候语：早上好，李经理。
补充信息：7 月 31 日，星期五 · 上海。
右侧主按钮：+ 快速创建。
可选企业／组织切换器。

主任务卡

只展示当前最重要的一项任务，例如：

7 月工资等待复核
63 名员工，预计应发 ¥428,560，计划 8 月 5 日发布
3 项异常需要处理

主操作：继续复核。
次操作：查看异常、稍后提醒。

主任务的选择规则：

已逾期事项。
高风险合规事项。
需要当前用户审批的事项。
未来三日内到期事项。
当前月度流程的下一步。

待办队列

使用分段控制器切换：

需要我处理。
等待他人。
即将到期。
已完成。

每条待办包含：事项、关联员工或批次、截止时间、风险级别、负责人和一个直接操作。

人员动态

待入职。
本周入职。
合同即将到期。
试用期即将结束。
特殊状态提醒。
离职交接中。

数据洞察

放在第二屏，避免与任务竞争注意力：

本月人力成本。
年度成本趋势。
部门人数变化。
风险分布。
员工完成率和自助率。

4.3 空状态

无待办时不显示空白卡片，应表达积极完成状态：

今天没有待处理事项
下一次发薪准备将在 8 月 1 日开始。

可提供 查看日历 和 创建任务 两个入口。

5. 团队与员工体验

5.1 员工目录

默认列表列建议：

列	内容
员工	头像、姓名、职位／部门
状态	在职、待入职、试用期、离职处理中、已离职
入职日期	本地化日期和在职时长
合同	合同类型、到期时间或风险
薪酬状态	已配置、缺失、变更待生效
下一项任务	最需要完成的员工相关事项
操作	查看详情和更多菜单

优化要求：

点击整行进入员工详情。
搜索与筛选始终位于同一工具栏。
筛选条件展示为可移除的条件标签。
支持保存视图，例如“合同 30 天内到期”“上海在职员工”。
选中员工后再出现批量操作栏。
批量离职、删除等危险操作必须显示影响范围和不可逆后果。
支持列显示管理、列冻结和舒适／紧凑密度切换。

5.2 员工 Profile Shell

员工详情采用统一框架，避免不同档案页面重复搭建标题和导航。

头部固定信息：

头像、姓名、职位、部门。
在职状态和关键风险。
联系方式。
入职日期和直属负责人。
编辑资料 主按钮及更多操作菜单。

5.3 入职流程

统一为五阶段：

发送邀请 → 员工填写 → HR 审核 → 合同确认 → 完成配置

每位待入职员工显示：

总完成度。
当前阶段。
缺失资料。
员工最后操作时间。
预计入职日期。
可执行动作，如提醒、重新发送、代为补录。

完成配置应包含合同、薪酬、社保、班次和系统访问权限，不应只以员工资料提交为终点。

5.4 离职流程

保留现有六步能力，并统一为：

选择员工和离职类型。
确认原因与日期。
合规检查。
费用结算。
工作交接和材料。
复核、审批与执行。

桌面端使用“主内容 + 右侧摘要”布局。右侧始终显示：

员工和离职类型。
生效日期。
补偿金额。
风险级别。
缺失材料。
当前审批状态。

底部固定操作栏：保存草稿、上一步、继续。最后一步根据权限显示 提交审批 或 执行离职，避免三个同等权重的终态按钮同时出现。

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

建议字体栈：

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 页面标准结构

每个管理端页面统一为：

PageHeader：标题、说明、状态和主要动作。
Tabs/SegmentedControl：只在确有同级视图时使用。
FilterBar：搜索、筛选、视图和导出。
Content：列表、表格、流程或详情。
BulkActionBar：仅选择数据后出现。
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 页面拆分

按领域拆分大型页面：

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. 建议优先制作的高保真原型

为了尽快验证方向，第一轮只需设计以下八个关键页面：

新首页任务中心。
新导航和全局搜索。
员工目录。
员工概览详情。
发薪流程总览。
发薪异常和工资复核表。
离职流程。
员工门户首页。

上述页面覆盖导航、人物、任务、数据表、复杂流程、风险和移动端，可用于验证整个设计系统，无需一开始重画所有页面。

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 应保留自身在中国劳动用工合规、证据链和离职处理方面的差异化能力，在此基础上建立国际化产品体验。

30 KiB Raw Permalink Blame History Unescape Escape