# 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 产品能力总览： - Gusto Employee Self-Serve： - Gusto 2025 Feature Showcase： - Gusto 报表与自定义报告： - Gusto Money Dashboard： 这些参考资料体现的共同方向是：减少专业门槛、围绕下一步组织界面、让异常在提交前出现、强化员工自助，并使跨模块数据自然衔接。TurboHR 应保留自身在中国劳动用工合规、证据链和离职处理方面的差异化能力，在此基础上建立国际化产品体验。