64 lines
3.7 KiB
Markdown
64 lines
3.7 KiB
Markdown
# 里程查询口径与移动阅读审计
|
||
|
||
## 1. 审计范围
|
||
|
||
本轮为 UX 与可访问性联合审计，范围覆盖里程查询的统计摘要、每日矩阵、缺失数据、接口失败、长日期横向浏览、URL 状态和 390 × 844 移动布局。
|
||
|
||
## 2. 用户目标与可访问性目标
|
||
|
||
用户需要在不误读数据的前提下，快速判断查询范围内有多少车辆真正产生了里程证据，并能在桌面和手机上浏览自然日矩阵。键盘用户需要能够聚焦矩阵并用方向键浏览长日期范围；错误和缺失值需要有可区分的语义。
|
||
|
||
## 3. 已确认优势
|
||
|
||
- 车牌、日期和数据源同屏，快捷日期会同步 URL，刷新和分享后可恢复。
|
||
- 桌面矩阵在固定工作区内独立滚动，页面本身没有额外纵向滚动。
|
||
- 移动端保留车牌与区间总里程固定列，并使用底部任务表单修改筛选。
|
||
- `0 km` 与每日缺失值已有不同视觉符号，矩阵区域可以获得键盘焦点。
|
||
|
||
## 4. 本轮修复的 UX 风险
|
||
|
||
- 原“已绑定主车辆 4 辆”容易被理解为 4 辆都有里程，实际只有 2 辆有证据。现改为“有里程车辆 2 / 4 辆”，并显示覆盖率。
|
||
- 原无任何日记录的车辆仍显示“区间总里程 0 km”，会把未上报误读为已上报且未行驶。现统一显示 `—`，并明确“未上报不计为 0”。
|
||
- 原“日均里程”没有说明分母。现改为“车日均里程”，说明为“总里程 ÷ 有效车辆日”。
|
||
- 原接口失败时，错误提示下方仍可能出现一张全为横线的矩阵。现错误、加载、空范围和有效矩阵互斥。
|
||
- 读表说明现直接展示“本页有数据车辆数”，移动端同样保留这一关键信息。
|
||
|
||
## 5. 可访问性风险与处理
|
||
|
||
- 区间总里程单元格新增可访问名称，读屏可以区分“88.7 公里”和“无可用里程”。
|
||
- 长日期矩阵保持 `region`、可聚焦和左右方向键浏览；浏览器实测从 `scrollLeft 0` 移动到 `96`。
|
||
- 错误仍使用 `role=alert`，并在结果卡内提供可聚焦的重试操作。
|
||
- 颜色只用于辅助里程高低，数值、`0 km` 和 `—` 仍是主要信息，不依赖颜色单独传达状态。
|
||
|
||
## 6. 机会区
|
||
|
||
- 当真实生产数据达到数百自然日与数万车辆时，还需要继续验证服务端聚合、导出内存占用和大规模分页性能。
|
||
- 可在后续接入数据完整性 SLA，让覆盖率从描述性指标升级为可操作的质量入口。
|
||
|
||
## 7. 证据限制与验证缺口
|
||
|
||
- 本轮使用本地真实应用与 mock API 数据验证，未连接生产账号或真实大规模车辆集。
|
||
- 已验证 DOM 语义、键盘横向浏览、桌面/移动响应式与自动化回归；未进行 VoiceOver、NVDA、200% 缩放和正式 WCAG 合规认证。
|
||
- 控制台仅出现 Semi UI 在 React StrictMode 下已知的 `findDOMNode` 弃用警告，没有发现本轮页面逻辑异常。
|
||
|
||
## 8. 建议
|
||
|
||
1. 保持“有数据 / 查询范围”的分数式口径，避免回退到只显示授权车辆总数。
|
||
2. 后续把覆盖率与运维质量的缺数工单串联，但不要在没有真实处置能力前把它做成可点击假入口。
|
||
3. 下一轮优先审计车辆查询的主档维护、来源证据与批量同步反馈。
|
||
|
||
## 当前运行截图
|
||
|
||
- 桌面优化前：`before/desktop-mileage.png`
|
||
- 桌面优化后：`after/desktop-mileage.png`
|
||
- 移动端优化前：`before/mobile-mileage.png`
|
||
- 移动端优化后：`after/mobile-mileage.png`
|
||
|
||
## 验证结果
|
||
|
||
- 定向测试：`StatisticsPage.test.tsx` 22 / 22 通过。
|
||
- Web 全量测试：77 个测试文件、480 项测试全部通过。
|
||
- 生产构建与发布资产门禁：通过。
|
||
- 浏览器：1440 × 1000、390 × 844；页面无额外纵向溢出。
|
||
|