垃圾数据展示大屏低保真原型说明

一、文档摘要

本说明面向产品经理、UI设计师与前端工程师，给出一页式（大屏）低保真原型的结构、组件清单、数据字段与接口示例、交互说明与交付项，便于快速进入高保真设计与开发。页面以 1920×1080（16:9）为基准分辨率，采用灰度/线框风格，便于聚焦信息与交互流。

二、目标与受众

• 目标：实时展示垃圾数据（噪声、重复、错误记录等）的数量、来源、趋势及治理进度，支持快速定位问题并推动治理闭环。
• 主要受众：数据治理团队、数据平台运维、产品经理、业务负责人。
• 使用场景：监控室、周会展示、跨团队问题排查会、治理效果月报。

三、信息架构与总体布局（Wireframe 概述）

页面采用三行三列弹性栅格（逻辑分区），但在低保真阶段以 5 个主要模块为主：

• 顶栏（Header，横跨全宽）
• 第一行：KPI 卡片区（总体健康、垃圾率、清洗率、告警数）
• 第二行（主区，左右分布）：
  • 左：趋势大图（时序垃圾率/清洗率）
  • 中：来源分布与堆栈图或饼图
  • 右：异常样本列表（可分页/导出）
• 第三行：来源明细表 + 审计/处理进度（可折叠）

布局示意（自上而下）：

• Header (H)
• KPI Row (K1,K2,K3,K4)
• Main Row: [Trend | Source Distribution | Sample List]
• Bottom Row: [Source Detail Table | Audit / Timeline]

尺寸基准：Header 80px；KPI 行 200px；主区高度约 480px；底部高度约 200px。

四、各模块低保真说明

1 顶栏（Header）

• 内容：产品名/Logo（左）、当前时间与大屏更新时间（中右）、全局筛选（时间范围、业务线、来源类型）与导出按钮（右端）。
• 交互：全屏刷新，每隔 N 分钟自动刷新；筛选变更后驱动全屏联动。

2 KPI 卡片区（4 个卡片）

交互：点击卡片自动跳转到对应详情（例如点击“垃圾率”聚焦趋势图）；鼠标悬停显示近 7/30 天小趋势。

3 主区左：时序趋势图

• 展示：垃圾率与清洗率双轴时序；支持分钟/小时/天粒度切换。
• 交互：区域选择（brush）触发下方样本列表筛选；点击某条时间点展开样本快照。

4 主区中：来源分布（堆栈/环形）

• 展示：按来源（采集A/采集B/第三方）或业务线堆栈柱状，支持 Top N 与其他合并。
• 交互：单项点开钻取，显示该来源的错误类型分布。

5 主区右：异常样本列表

• 列表列：样本ID、时间、来源、字段错误摘要、建议处理动作、状态（未处理/处理中/已处理）。
• 功能：快速标注（误判/确认垃圾/加入白名单）、导出 CSV、查看原始记录弹窗。

6 底部：来源明细表 + 审计/处理进度

• 明细表支持多维切片（来源、日期、字段缺失率、重复率）。
• 审计列出最近人工修复动作与模型迭代记录，便于追踪治理闭环。

五、组件清单与字段（表格）

六、接口示例（Mock API）

注：接口仅为低保真交付参考，字段名与权限需与后端对齐。

1 /api/v1/metrics/summary

请求参数：{ start_time, end_time, source_ids[], business_line }
示例响应:

{
  "total_count": 560000,
  "garbage_count": 56000,
  "garbage_rate": 0.10,
  "clean_rate": 0.92,
  "score": 78
}

2 /api/v1/metrics/timeseries

请求参数：{ start_time, end_time, granularity }
示例响应:

[{"ts":"2025-08-19T10:00:00Z","garbage_rate":0.12,"clean_rate":0.90},{"ts":"2025-08-19T11:00:00Z","garbage_rate":0.10,"clean_rate":0.91}]

3 /api/v1/samples/list

请求参数：{ page, size, filters }
示例响应:

[{"sample_id":"s-001","ts":"...","source":"采集A","error_summary":"字段X缺失","status":"未处理"}]


七、交互流程

1. 用户在 Header 选择时间范围 -> 全屏联动刷新所有组件。
2. 用户在趋势图选取时间段 -> 异常样本列表自动筛选对应时间样本。
3. 在异常样本上点击“查看原始” -> 弹窗显示原始记录并提供“标注/加入白名单/建议修复”按钮。
4. 标注后触发后台接口记录（审计日志）并刷新样本状态。
5. 用户导出样本 CSV 或将告警推至协作平台（如工单系统）。

八、低保真设计注意事项

- 风格：灰阶线框为主，避免颜色干扰信息结构，关键交互态用单一强调色（用于高保真阶段再定）。
- 文本：使用真实场景示例 & 角色语境（如“运维工程师”、“数据平台负责人”），减少模板化句子，降低 AI 文本痕迹。
- 性能：页面首屏请求应优先调用 summary 与 timeseries 接口，样本列表采用懒加载或虚拟滚动。

九、交付物

1. 本低保真说明（当前文档）。
2. 可点击中低保真原型（如 Figma 或 Mockflow）——基于本说明制作。
3. 前端组件清单与 Mock API（可导出为 JSON 或 OpenAPI 草案）。
4. 交付给后端的字段与数据契约清单。

十、后续建议

- 基于本低保真快速制作 Figma 原型，完成交互动效后进入可开发切图。
- 与后端协商缓存策略与时间序列分片，确保趋势图在高并发下仍能保持低延时。
- 在后续迭代中加入主动学习标注面板，将人工标注样本直接回流模型训练管道。

本说明针对一页式垃圾数据治理大屏的低保真原型需求，提供了结构化、可执行的输出，便于团队快速推进交互原型与开发对接。