在数码纪元里，
把物联网解决方案拆成可探索的卡片

1. 先定义卡片语义，再动第一个像素

   把设备接入、数据看板、告警闭环、权限审计拆成 4 类卡片，每类只允许承载 1 个主指标。卡片标题控制在 14 个汉字内，超出即拆卡，避免信息密度失控。

   卡片宽度基准 300px标题 ≤14 字主指标 1 个/卡

2. 用 12 列栅格锁定对齐轨道

   桌面端卡片横跨 3 列（4 卡/行）、平板横跨 6 列（2 卡/行）、手机横跨 12 列（单列）。列间距 16px，卡片间距 12–20px，任何卡片边缘必须落在列轨道上，禁止自由浮动排版。

   桌 3 列平板 6 列手机 12 列gutter 16px

3. 配色按 60-30-10 分配面积

   约 60% 中性浅底承载内容、30% 主色用于标题与关键结构线、10% 强调色只点亮按钮与激活态。禁止把最高彩度色铺成整条横幅；绿色作主色需降饱和，并与中性灰、暖色点缀协调。

   中性底 60%主色 30%强调色 ≤10%

4. 图片先定比例，再谈加载

   Hero 用 4:3、卡片用 16:10、作品带用 16:9，容器统一 object-fit:cover 并写死宽高比，避免图片加载导致布局跳动（CLS < 0.1）。所有图片加 loading="lazy" 与描述性 alt。

   CLS < 0.1Hero 4:3卡片 16:10

5. 动效只做渐显错峰，不做入场依赖

   用纯 CSS keyframes 让卡片在加载后自动渐显，错峰间隔 50–80ms，总时长不超过 450ms。元素默认即可见终态，不依赖滚动监听或状态类；同时提供 prefers-reduced-motion 降级。

   错峰 50–80ms总时长 ≤450ms默认可见

6. 点按区与断点一起验收

   所有按钮最小高度 44px、最小宽度 44px；在 320px 宽度下逐项检查横向溢出，长设备编号用 break-word 强制断行，表格转为卡片或横向滚动，确保无横向滚动条。

   点按区 ≥44px320px 无溢出断点 1600/1024/640/380

从采集到决策：四个推进阶段的量化对照

同一条物联网解决方案，在不同阶段的关键指标完全不同。沿着纵向时间轴探索，每一步都给出可验收的数值。

1. 阶段 01设备接入

   统一协议适配层，支持 MQTT / Modbus / OPC UA 三类主流协议；设备注册、鉴权、影子配置全部卡片化，配置模板一次编写多处复用。

   ≤200ms单设备注册响应
2. 阶段 02边缘计算

   在网关侧完成数据清洗、阈值判断与本地缓存，只上传变化量。带宽占用下降明显，弱网环境下仍能保持数据连续。

   ↓62%上行带宽占用
3. 阶段 03数据看板

   卡片式看板按角色分层：运维看在线率与告警队列，运营看产能与能耗，管理层看趋势与成本。同一份数据，三种栅格排布。

   3 类角色视角卡片集
4. 阶段 04告警闭环

   告警分级 P0–P3，P0 推送延迟 ≤10s，处置动作与耗时自动记录，形成可回溯的处置链路，避免告警疲劳。

   ↓47%无效告警占比

四张卡片，覆盖物联网解决方案的关键能力