栅格即契约
所有卡片吸附 12 列栅格，卡片间距 12–20px，断点 640 / 1024 / 1600px。跨列数固定为 3、4、6、12，避免改版时反复对齐。
模块对齐这是一个网页样式设计参考 · 卡片式栅格版式演示（网联世界 · 大数据分析）
数据可视化面板
三块卡片，看清网联世界的实时数据
左侧主图按 5 分钟粒度滚动刷新，右侧三张指标卡锁定异常与转化。所有卡片统一 24px 圆角、1px 分隔线与三级暖影，保证同一视线高度下信息密度稳定。
链路吞吐（近 12 个采样点 · 单位：万条/分钟）
实时数据流 · 5 分钟粒度
2,486在线设备（台）较上一周期 +3.2%
0.42s交互响应（P90）卡片切换无需等待
97.6%数据完整率缺失回补窗口 90 秒
展开：数据到卡片的 4 步进度轴
- 接入：网关按 1s 心跳上报，字段裁剪后体积降 38%。
- 清洗：去重 + 空值回补，异常值标记为
flag=2不直接丢弃。 - 聚合：按 5 分钟窗口滚动聚合，写入宽表供卡片直读。
- 呈现：卡片按 12 列栅格排布，首屏只展示 3 个核心指标。
实时数据优先
首屏三张卡的刷新周期分别为 5s / 15s / 60s，越靠近决策的数字刷新越快，避免全屏高频刷新带来的视觉噪声。
刷新分级交互设计克制
卡片 hover 仅做 4px 上浮与景深变化，展开态用 disclosures 承载细节，主流程操作不超过两级，点按区 ≥44px。
极致用户体验合作伙伴墙
六类数据供给方，拼出完整的网联世界
每类伙伴只回传约定字段，接口契约写入卡片元数据，方便在可视化面板里追溯数据来源。
车联网平台车辆轨迹 · 10s 上报
城市感知网路侧单元 · 1s 心跳
云资源供给算力指标 · 5min 聚合
终端设备商固件与在线率 · 15min
行业数据服务标签补充 · 每日增量
安全合规审计脱敏校验 · 全量留痕
关键数据条
四项指标，衡量大数据分析是否真的被用起来
指标口径固定在卡片右上角的说明气泡里，任何一个数字都能下钻到原始宽表，避免“看数不信数”。
38%看板周活跃率目标 ≥35%，口径：7 日内访问去重
1.9s首屏数据可读时间目标 ≤2.5s，骨架屏先行
64%自助分析替代率减少人工取数工单
12类可视化图表族柱/线/漏斗/热力/桑基等
服务 / 价格档位
按数据规模与实时性选择档位
三档均可先做 2 周试用，按接入数据源数量与卡片数量计费，超出部分按每 10 个数据源阶梯加价。
实用指导清单
把大数据卡片做得好用的 6 条落地要点
每一条都对应可验证的参数阈值，可直接抄进设计与接入评审清单。
先定刷新分级，再排卡片
核心决策卡 5s、辅助卡 15s、成本类卡 60s；把 1s 刷新只留给告警条，避免整屏跳动造成读数困难。
栅格跨列只取 3/4/6/12
12 列体系下间距固定 12–20px，断点 640、1024、1600px；跨列数收敛能减少 70% 的改版返工。
每张卡只放一个结论
卡片标题写结论、副标题写口径、脚注写更新时间；数字与单位同字号比例 2:1，关键值用强调色点亮即可。
空值有兜底，异常有标记
缺失值回补窗口 90 秒，超时展示“—”；异常值置 flag=2 并在卡片右上角显示小圆点，不静默丢弃。
埋点验证用户体验
首屏可读 ≤2.5s、卡片切换 P90 ≤0.5s、下钻返回不丢筛选态；连续两周留存低于 30% 就回查默认卡片配置。
性能与无障碍同时收口
图片统一 lazy + 固定宽高比防跳动；对比度 ≥4.5:1，键盘焦点可见，动画在 prefers-reduced-motion 下降级为静态。
