设备接入层：多协议统一纳管
MQTT、CoAP、LwM2M 与 Modbus 统一映射为内部设备模型，接入成功率与握手耗时直接作为卡片主指标暴露给运维，避免「设备离线了但没人知道」。
- 连接握手 < 800ms，断线重连退避 2s / 8s / 30s 三档
- 影子设备缓存最近 24h 遥测，弱网期间不丢点位
- 批量导入按 500 台/批 分批提交，失败项单独回执
01 / 能力卡片Bento 错落格：5 张卡片覆盖 IoT 全链路
栅格跨列刻意不等宽——大卡承载核心叙事，小卡承载可扫读参数，视觉节奏由内容权重决定，而不是平均分配。
边缘计算：把计算下沉到网关
在边缘完成数据清洗与阈值判定，只上传变化量与聚合值。
- 上行流量下降 约 62%
- 本地规则生效延迟 < 50ms
数据可视化：一屏读懂产线
时序曲线、状态热力与排行榜同屏并列，卡片内自带单位与阈值线。
- 首屏图表 ≤4 个，避免认知过载
- 刷新节奏 5s，支持暂停冻结
告警编排：从触发到闭环
分级告警 + 值班路由，把「响铃」变成「有人负责」。
- P0 告警 60s 内触达责任人
- 重复告警抑制窗口 10min
移动端一致性
同一套卡片令牌，窄屏自动堆叠
640px 以下卡片转为单列，点按区保持 ≥44px，运维在巡检路上也能完成确认与派单。
02 / 图文特写一次「设备到卡片」的完整链路拆解
以温控产线为例，从传感器采样到用户看到跳动的数字，中间经过 6 个环节，每一步都有可量化的验收口径。
把「感知—传输—建模—呈现」写成一张可验收的参数表
很多 IoT 项目的问题不在采集，而在呈现层把所有数据平铺，用户找不到重点。我们的做法是：前端只订阅聚合后的业务指标，卡片按「异常优先」排序，正常态收敛为一行细字，异常态才展开色彩与动效。
- 采样周期
- 1s / 5s 可配
- 边缘聚合窗口
- 10s 滚动
- 指标卡片上限
- 12 张 / 屏
- 图表首帧渲染
- < 300ms
- 断网本地缓存
- ≥ 6h
- 数字滚动时长
- 2.4s 缓出
- 采样与预处理：传感器上报原始值，边缘侧做单位归一与毛刺过滤，丢弃连续 3 个相同值的冗余点。
- 设备建模：按「产品—设备—点位」三层建模，点位命名统一为 domain.asset.metric，避免后期字段打架。
- 指标聚合：云端按 1min / 5min / 1h 三级降采样，近 7 天查 5min 粒度、近 90 天查 1h 粒度，兼顾精度与响应。
- 前端订阅：只订阅当前可见卡片的指标，不可见区域延迟 2s 再拉取，降低移动端流量与功耗。
- 卡片呈现：正常态灰色细字，超阈值时数字转为强调色并触发一次 2.4s 缓出计数动画，动效只跑一遍，不循环闪烁。
03 / 实用清单卡片式 IoT 界面的 6 条落地准则
每条都给出可执行做法与验收阈值，可直接抄进前端开发规范与设计走查表。
先定栅格，再画卡片
用 12 列栅格 + 16px 槽宽起稿，卡片跨列只允许 3/4/6/8/12 五种取值，避免出现 5 列这类无法在移动端整除的宽度。
验收：1024 / 640 / 380 三档无横向滚动卡片只放一个主指标
每张卡片限定 1 个主数字 + 最多 3 条辅助信息，主数字字号至少是正文的 1.8 倍，单位紧随其后并降一级颜色。
验收：3 秒内可复述卡片结论状态用色，不用装饰
正常 / 预警 / 故障三态分别对应中性、暖金强调色、主色加深，禁止用大面积高饱和填充整张卡片，只允许图标与数字点亮。
验收：色盲模拟下仍可区分三态动效只做一次，且可降级
数字滚动 2.4s、进度条生长 1.4s，均使用缓出曲线且只播放一次；必须在 prefers-reduced-motion 下完全关闭，静态值依然可读。
验收：关动效后信息零丢失图片统一裁切，防布局跳动
所有配图放入固定宽高比容器（16/9 或 4/3），使用 object-fit:cover，并写死容器宽高比而非依赖图片原始尺寸。
验收：CLS 指标 ≤0.05为弱网与长文本兜底
设备名与告警文案可能出现超长英文串，容器统一 min-width:0 并开启 overflow-wrap:break-word，表格在窄屏改为横向滚动。
验收：320px 宽无内容溢出04 / 常见问题设计与集成中最常被追问的 4 个问题
回答均给出口径与折中方案，方便设计与前端开发直接对齐。
卡片数量多的时候，怎么避免首屏变成数据墙？
按「异常优先」排序：故障与预警卡片置顶并保持 1 张卡的完整高度，正常态卡片压缩为紧凑行高；同时限制首屏可见卡片不超过 12 张，其余进入折叠区。实测可让关键异常的首屏发现时间从 11s 降到 3s 以内。
物联网集成时，前端该直连设备还是只对接聚合接口？
一律只对接平台聚合接口。前端订阅业务指标而不是原始点位，一方面避免移动端拉取上千点位造成流量与电量浪费，另一方面让点位命名与聚合逻辑变化时不必改动界面代码，接口层与展示层解耦。
数据可视化的刷新频率设多少合适？
建议按指标分级：状态类 5s、趋势类 30s、统计类 5min。所有图表提供暂停冻结按钮，用户查看细节时不被刷新打断；页面不可见时暂停轮询，可降低约 40% 的无效请求。
弱网或断网时，卡片该如何表现？
展示最近一次成功数据并标注「数据时间戳」，同时显示本地缓存时长（建议 ≥6h）。断网态用中性灰而非红色系，避免与真实故障混淆；恢复连接后先补拉聚合值再增量订阅，防止曲线出现断点跳变。
05 / 数据面板指标面板：把巡检结论压进一屏
横向进度条表达占比与达标率，表格表达逐项对比，图集表达现场实况——三类信息各司其职。
链路健康度
采样窗口 5min逐项对比
单位：ms / %| 环节 | 优化前 | 优化后 | 变化 |
|---|---|---|---|
| 采集到呈现 | 480ms | 120ms | -75% |
| 首屏可读指标 | 6 项 | 12 项 | +100% |
| 告警触达时长 | 4min | 60s | -75% |
| 移动端流量 | 基准 | -62% | 下行下降 |
把你的设备清单，变成一屏会跳动的卡片
提交现有网关型号、点位数与刷新诉求，我们按 12 列栅格输出一版可交互的卡片式界面骨架，含数据可视化面板与告警态配色，前端开发可直接按令牌复刻。
预约架构评审
含栅格走查表 + 卡片令牌清单