12 列栅格骨架
以 12 列 + 8pt 间距节奏组织所有模块，卡片跨列数固定为 3/4/6，避免视觉漂移。
- 断点：380 / 640 / 1024 / 1600
- 栅格沟槽：16px，超大屏 24px
IoT Solutions · 响应式设计
智尚空间：让每一台设备
智尚空间：让每一台设备
在任意屏幕上一致可信
以 12 列栅格为骨架，把物联网采集、边缘处理与可视化终端编排为同一套响应式设计语言。从 320px 手持仪表到 2560px 指挥大屏，同一份 IoT 解决方案数据在不同断点下保持对齐、层级与可读性，让用户体验在「现场—云端—看板」三段链路中无缝衔接。
99.95%网关在线率
<180ms端到端时延
4 级断点320 → 2560px
极光网格 · 微噪点渲染
Data Panel
数据可视化面板
面向运维与产品双视角：左列是设备侧健康度，右列是前端体验侧指标。所有数值均按 60 秒滚动窗口聚合，异常阈值触发后在看板内直接高亮，不再依赖二次跳转。
近 8 个采集周期 · 边缘节点吞吐（万条/分钟）
采样窗口 60s设备侧健康度
实时12,480台
已接入终端
99.95%
网关在线率
0.37%
丢包率（阈值 1%）
体验侧指标（多设备）
Core Web Vitals1.9s
LCP（移动端 4G）
0.04
CLS（布局位移）
96分
可用性巡检得分
Capability Grid
六项核心能力，落在同一套栅格上
每一项能力都给出可验收的量化口径，方便在需求评审时直接对照，而不是停留在概念描述。
低时延遥测通道
MQTT over TLS 上报，边缘侧做 200ms 聚合去重，再向云端批量提交，兼顾实时与成本。
- 端到端 P95 时延 ≤180ms
- 单网关承载 800 台终端
响应式设计一致性
同一组件在手机、平板、工控屏与指挥大屏上复用，仅切换列数与密度，不改信息结构。
- 组件复用率 ≥85%
- 视觉走查差异项 <3 处/版本
可观测的交互设计
关键交互（下发指令、切换视图、筛选设备）全部埋点，形成可用性漏斗并回流到设计评审。
- 关键路径埋点覆盖 100%
- 漏斗周环比复盘 1 次
安全与权限分层
设备证书 + 租户级 RBAC，指令下发二次确认，危险操作需双人复核并留痕。
- 证书轮换周期 90 天
- 高危操作审计留存 180 天
创新科技可演进
边缘推理与规则引擎以插件方式接入，新算法上线不需要重做前端界面与交互层。
- 插件热更新 <5 分钟
- 界面改动量 0 行
Changelog
最新动态与资讯
只记录有验收口径的变更：改了什么、影响哪些断点、需要谁配合，全部写明。
网关固件灰度升级策略上线
按 5% → 20% → 100% 三档灰度，任一批次失败率超过 0.5% 自动回滚，回滚耗时控制在 90 秒内，升级期间看板保留旧版本指标对照。
看板组件库升级至密度两级制
新增「紧凑 / 舒适」两档密度，紧凑档行高 32px 用于工控屏，舒适档行高 44px 用于手持终端，两档共用同一套配色令牌与圆角规范。
告警确认路径缩短为两步
通过合并确认弹层与备注输入，告警处置平均耗时由 42 秒降至 17 秒；同时补充键盘可达路径，巡检人员在工控屏上可全程无鼠标操作。
Workflow
从现场到看板的四步工作流程
每一步都定义了输入、输出与验收指标，任何一环不达标就不进入下一步，避免问题被推到上线前夜。
现场盘点与建模
梳理设备类型、协议与采样频率，输出点位表与数据字典，明确哪些字段需要实时、哪些可批量。
验收：点位表覆盖率 ≥98%边缘接入与聚合
部署边缘网关插件，配置 200ms 聚合窗口与断网缓存策略，缓存不少于 6 小时数据。
验收：断网续传成功率 ≥99%响应式界面编排
按 12 列栅格定义卡片跨列与断点行为，先做 320px 与 2560px 两个极端宽度，再补齐中间档位。
验收：无 4px 以上对齐偏差灰度发布与复盘
小流量验证指标与交互漏斗，观察 72 小时后全量，并把异常样本回写进设计规范。
验收：回滚率 ≤1%，复盘闭环 100%
Checklist
实用指导清单：IoT 界面落地前必须过的 6 关
适用于物联网解决方案的 Web 看板与移动端巡检页，逐条给出做法、参数与阈值，可直接转成验收单。
-
先定断点，再画界面
断点建议固定为
380 / 640 / 1024 / 1600四档，栅格沟槽 16px、超大屏 24px。先在 320px 与 2560px 两个极端宽度验证卡片跨列与文本换行，再补中间档，可减少 60% 以上的返工。 -
实时与批量数据分流
控制指令与告警走实时通道（P95 ≤180ms），历史曲线与报表走批量通道（延迟 5~15 分钟可接受）。混用同一条链路会让看板在高峰时段整体卡顿，实测可导致首屏交互延迟上升 3 倍。
-
图表容器必须锁比例
所有图表与缩略图用
aspect-ratio固定宽高比，配合object-fit:cover，把 CLS 控制在 0.05 以内。否则数据刷新时整屏跳动，巡检人员极易误读相邻卡片数值。 -
危险指令强制二次确认
关机、复位、阈值改写三类操作需二次确认 + 双人复核，按钮点击区不小于 44×44px，并与普通操作保持至少 24px 间距，防止戴手套场景误触。
-
密度可切换，信息层级不变
紧凑档行高 32px 用于工控屏，舒适档 44px 用于手持终端；两档只改间距与字号，不改字段顺序与颜色语义，保证跨设备认知一致。
-
把降级路径写进设计稿
弱网、断网、设备离线三种状态必须有独立视觉与文案，离线卡片保留最近一次数据并标注时间戳；同时为动效提供
prefers-reduced-motion降级，避免长时间作业人员的视觉疲劳。