93 lines
12 KiB
Markdown
93 lines
12 KiB
Markdown
# 生产 H5 UI 回归与 Figma 识图对比报告（2026-07-17）
|
||
|
||
## 1. 结论
|
||
|
||
本轮使用 1 名一线员工（`PILOT-03`）和 1 名项目主管（`PILOT-01`）登录生产 H5，覆盖员工端 7 个业务路由、主管端 6 个业务路由，并补测训练中、训练结果、SOP 反馈、员工能力详情和派发进度等关键状态。
|
||
|
||
业务页面均可进入，员工训练完成后主管首页能看到新增待复盘记录；但当前版本**不能标记为 Figma 高保真 UI 验收通过**。识图对比确认 3 项 P0、8 项 P1：
|
||
|
||
- P0：训练结果页沿用训练中的滚动位置，完成后首屏直接落到页面中段，核心总分不可见。
|
||
- P0：主管团队画像一次渲染 2316 名成员，页面高度约 246931px；员工能力详情追加在全量列表末尾，正常点击后用户看不到详情。
|
||
- P0：员工“我”和主管“我”均明文展示完整手机号，属于生产界面的隐私暴露。
|
||
- P1：多个页面的固定底部导航遮挡正文或主按钮；今日页、主管首页的信息密度明显低于 Figma，关键区块被推到下一屏。
|
||
- P1：SOP 答案完成后不自动定位答案，负反馈也未实现 Figma 的原因选择与补充说明。
|
||
- P1：训练历史和主管复盘详情仍是密集数据表，未形成 Figma 的“摘要—录音—逐句标注—建议—行动”层级。
|
||
|
||
结论口径：**业务闭环可用，UI 对齐度为部分通过；先修 P0，再进行下一轮 Figma 视觉验收。**
|
||
|
||
## 2. 测试范围与方法
|
||
|
||
- 环境：`https://peilian.njzhmj.top/h5/`
|
||
- 生产浏览器视口：员工端 `400×886`，主管端 `400×927`
|
||
- 测试身份：测试编号代替手机号记录；报告不保存或展示完整手机号
|
||
- Figma 文件：`30hFiKtieGYraOZvJPJcPd`
|
||
- 对比方式：每张生产截图生成后，立即通过 Figma 插件读取对应正式画板 node 并截图，使用识图比较信息层级、密度、排版、主操作、滚动位置、加载态和空状态
|
||
- 原始证据目录：`.data/private/ui-regression-20260717/`
|
||
- 隐私说明：原始截图包含真实组织同步数据，目录已被 Git 忽略，不应上传到公开工单或外部图床
|
||
|
||
本轮完成 1 次真实训练并生成主管待复盘记录，同时分别提交 1 次 SOP“有帮助”和 1 次“没解决”反馈。未执行“标记已复盘”或新增主管派发，保留待复盘记录供后续回归。
|
||
|
||
## 3. 逐页识图结果
|
||
|
||
### 3.1 员工端
|
||
|
||
| 页面/状态 | 生产截图 | Figma 对照 | 识图结论 | 优先级 |
|
||
|---|---|---|---|---|
|
||
| 今日 | `employee-today-viewport.png` | `23:3`，`figma-employee-today.png` | 品牌头部、师傅 Hero、问答卡和任务卡结构一致；生产首屏只显示到“今日安排”，Figma 同高度已完整展示“我的地图”和底部导航。生产任务卡过高、正文过长，首屏核心入口密度不足。 | P1 |
|
||
| 训练前预习 | `employee-practice-entry-viewport.png` | `53:2`，`figma-employee-practice-prep.png` | 页面标题、场景标签、角色、要点、红线、话术和主按钮顺序基本一致，是本轮对齐度最高的页面。生产使用系统无衬线字体，Figma 使用统一设计字体；动态岗位与场景内容差异不作为 UI 缺陷。 | 通过，P2 微调 |
|
||
| 场景对练 | `employee-practice-active.png`、`employee-practice-active-round3.png` | `54:2`，`figma-employee-practice-active.png` | 情绪/信任、对话、求助和风格重生成能力已存在；生产首轮以大文本框和工具按钮为主，Figma 以对话上下文、红线提示和大录音控件为主。生产主按钮与固定底栏发生遮挡，且回合上下文的视觉层级偏弱。 | P1 |
|
||
| 训练结果 | `employee-practice-result.png`、`employee-practice-result-top.png` | `55:2`，`figma-employee-practice-result.png` | 结束评分后未重置滚动位置，首屏直接落在老师傅建议/反馈中段；手动回到顶部后仅显示总分和建议，缺少 Figma 的四维评分、问题/建议/标准、导师改写对照。 | **P0** |
|
||
| 问师傅答案 | `employee-sop-result.png`、`employee-sop-result-settled.png` | `79:11`，`figma-employee-sop-result.png` | 提交 1.8 秒后仍停留“检索中”，结果随后生成，但答案从首屏下方开始，页面不自动定位。Figma 直接把“我的问题—答案—步骤—话术—引用—反馈”放入结果首屏，信息路径更短。 | P1 |
|
||
| SOP 反馈 | `employee-sop-feedback.png`、`employee-sop-negative-feedback.png` | `79:674`，`figma-employee-sop-feedback.png` | 生产点击“没解决”后直接写入反馈，仅展示成功提示；Figma 要求选择“没有回答问题/步骤不具体/引用不准/过期/不适合现场”等原因并可补充说明。当前反馈无法支撑知识库复核定位。 | P1 |
|
||
| 我的成长 | `employee-profile.png` | 无独立正式“我”画板；参考 `89:9` 工作量化看板 | 账号、岗位切换、成长分和历史入口可用；完整手机号同时作为标题和账号展示，需掩码。成长摘要采用密集文字和数字格，缺少趋势、行为分组和清晰的证据入口。 | **P0（隐私）** / P1 |
|
||
| 训练历史详情 | `employee-history-detail.png` | `56:2`，`figma-employee-history-detail.png` | 生产将五项评分和对话全文按表格纵向展开；Figma 使用顶部指标、录音、逐句标注、SOP 命中和主管建议。模拟文本训练没有录音可隐藏，但仍应保留逐句分组和摘要层级。 | P1 |
|
||
| 案例素材 | `employee-cases.png` | `79:706`，`figma-employee-cases.png` | 当前一线账号没有案例录入权限，生产展示“暂无入库案例”；Figma 只有有权限时的录音上传态。权限判断正确，但缺少正式的无权限/无案例空状态画板。 | P1（设计覆盖） |
|
||
| 学习中心 | `employee-learning.png` | `80:2`，`figma-employee-learning.png` | 生产路由是“今日任务/错题本/岗前任务”学习首页，Figma `80:2` 是单个优秀案例详情，二者不是同一页面状态。当前矩阵把学习首页和案例详情合并映射，无法做像素级验收。 | P1（设计映射） |
|
||
|
||
### 3.2 主管端
|
||
|
||
| 页面/状态 | 生产截图 | Figma 对照 | 识图结论 | 优先级 |
|
||
|---|---|---|---|---|
|
||
| 主管今日工作台 | `supervisor-home.png` | `57:2`，`figma-supervisor-home.png` | 四项概览、连续低分预警、待复盘和快捷入口结构一致；生产卡片更高、文案更长，同高度下看不到 Figma 的训练趋势，底栏覆盖快捷入口下部。 | P1 |
|
||
| 待复盘列表 | `supervisor-reviews.png` | `58:2`，`figma-supervisor-reviews.png` | 单条待办展示清楚，低分优先语义存在；缺少 Figma 的“全部/连续低分/待复盘”筛选，数据增多后无法快速定位。 | P1 |
|
||
| 主管复盘详情 | `supervisor-review-detail.png` | `59:2`，`figma-supervisor-review-detail.png` | 生产能看评分、对话、建议、贡献分和派发选项，但首屏是五项评分表，录音/逐句标注/主要行动均在下方或缺失；固定底栏覆盖对话区。 | P1 |
|
||
| 团队画像列表 | `supervisor-team.png` | `61:2`，`figma-supervisor-team-detail.png` | 生产一次渲染 2316 行、2316 个派发按钮，DOM 页面高度约 246931px；无搜索、分页或虚拟列表。Figma 是单员工能力详情，不是全量无限列表。 | **P0** |
|
||
| 员工能力详情 | `supervisor-team-detail.png` | `61:2`，`figma-supervisor-team-detail.png` | 详情确实可生成，但被追加在 2316 行列表末尾，点击后不自动定位；本轮只能通过浏览器脚本定位到详情。应改为独立详情页或抽屉，并在点击后立即进入。 | **P0** |
|
||
| 训练任务派发 | `supervisor-assign.png` | `61:530`，`figma-supervisor-assign.png` | 生产使用手机号/外部 ID、姓名、15 个场景按钮和原因输入，整页约 2255px；确认按钮被固定底栏遮挡。Figma 的员工标签、截止时间、目标和任务要求层级更清楚，但部分字段需要先补后端契约，不能只做静态 UI。 | P1 |
|
||
| 派发进度与预警 | `supervisor-assign-progress.png` | `62:2`，`figma-supervisor-assign-progress.png` | 生产已有待训练/完成/低分再练计数和真实预警，但与派发表单堆在同一长页，任务列表缺少进度条、状态筛选和逾期信息。建议拆成“新建任务/派发进度”两个视图。 | P1 |
|
||
| 我的主管工作台 | `supervisor-profile.png` | 无独立正式画板；参考 `57:2` 主管视觉系统 | 角色和可操作范围明确，但完整手机号以大号品牌红明文展示，且页面大面积空白。建议改为姓名/项目/角色主信息，手机号仅显示后四位。 | **P0（隐私）** / P1 |
|
||
|
||
## 4. 优先修复清单
|
||
|
||
### P0：必须在下一轮 UI 验收前修复
|
||
|
||
1. 训练状态从“对练”切换到“结果”时执行 `scrollTo(0, 0)`，并补自动化断言：结果页首屏必须出现总分。
|
||
2. 团队画像增加项目内搜索和分页/虚拟列表；员工能力详情改为独立路由或抽屉，点击成员后立即可见，禁止追加到全量列表末尾。
|
||
3. 员工与主管个人页统一手机号脱敏，例如 `181****6126`；标题改用组织姓名或测试编号，不再把手机号作为显示名。
|
||
|
||
### P1：高优先级视觉与交互收口
|
||
|
||
1. 给所有带固定底栏的页面增加统一底部安全区，主按钮与最后一张卡片不得进入导航遮挡区。
|
||
2. 今日页压缩任务卡正文和垂直间距，保证 400×886 首屏至少露出“我的地图”标题及一个入口。
|
||
3. SOP 检索使用骨架屏/阶段提示；答案生成后滚动到“师傅回答”锚点，同时保留用户主动返回输入区的能力。
|
||
4. 按 Figma 补 SOP 负反馈原因选择与补充说明；直接写“没解决”只能作为快速入口，不能替代可诊断反馈。
|
||
5. 重构训练历史和主管复盘详情的信息顺序：摘要指标 → 录音（有真实音频时）→ 逐句标注 → SOP/红线 → 建议与行动。
|
||
6. 待复盘列表补筛选；主管首页压缩卡片，训练趋势可放入第二屏但不能被冗长快捷入口挤掉。
|
||
7. 派发页将员工选择改为搜索选择器/底部弹层，将场景改为可检索单选；确认按钮固定在底栏上方。截止时间、任务目标和任务要求需先补真实字段契约。
|
||
8. 为案例无权限、案例为空、学习首页分别补正式 Figma 状态；不要继续用案例详情画板验收学习首页。
|
||
|
||
### P2：全局视觉统一
|
||
|
||
1. 明确代码端字体策略。若继续使用系统字体，应同步修改 Figma；若以 Figma 为准，则补 Web Font 和加载降级，避免两套字形长期并存。
|
||
2. 统一红色语义：品牌主红用于主操作，风险/告警使用状态色；普通分数不要同时出现蓝色、红色和黑色三套规则。
|
||
3. 统一圆角、边框灰度、标题字号和胶囊标签高度，优先抽取今日页、训练页和主管页共用的卡片/按钮变量。
|
||
|
||
## 5. 复验标准
|
||
|
||
- 400px 宽真实浏览器下，所有主按钮完整可见且不被底部导航覆盖。
|
||
- 训练结束后无需用户滚动，首屏直接看到总分、维度分和下一步操作。
|
||
- 团队画像初始 DOM 不再包含 2316 行；首屏加载和成员搜索在可接受时间内完成，点击成员后 1 次操作即可看到详情。
|
||
- 所有生产页面不得出现完整手机号。
|
||
- SOP 生成后自动进入答案区域；“没解决”能提交至少一个结构化原因。
|
||
- 员工与主管各再次跑 1 个真实账号，按本报告相同 node id 截图复验；P0 全部关闭后，才能把 UI 状态从“部分通过”改为“高保真验收通过”。
|