智能家居
灯光、温控、门锁统一物模型,场景切换一次下发。
- 设备类型 18 类
- 场景响应 ≤1.2s
这是一个网页样式设计参考 · 卡片式设计 × 智慧交汇 · 物联网解决方案栅格样本
用卡片式设计把智能家居、智慧城市与工业网关的数据收进同一套栅格:每张卡片是一个可协作的节点,12 列网格保证跨端对齐,数据可视化让设备状态一眼可读,用户体验优化从「找得到」开始。

每一步都给出可交付物与协作角色,避免方案停留在演示阶段。
先盘点设备清单,按 MQTT / CoAP / Modbus 分组,统一物模型字段与单位。
交付:设备台账 + 物模型表网关侧做本地过滤与聚合,仅上传变化量,弱网下缓存 15 分钟再补传。
交付:边缘规则集 + 缓存策略按 12 列栅格定义卡片尺寸:核心状态 4 列、趋势图 8 列、告警 3 列。
交付:响应式栅格规范用事件总线把家居、楼宇、交通三方场景串成跨域联动规则并灰度验证。
交付:联动规则库 + 灰度记录下列指标用于评估一次物联网解决方案迭代是否真的改善了体验。
面向设计、前端与设备侧协作的 6 条落地要点,每条都带阈值或做法。
12 列栅格配合 minmax(0,1fr),卡片固定跨列(如 4/6/8 列),窗口缩放时只改变跨列数量,不重排内容顺序,避免用户每次换屏都要重新找信息。
中性底占约 60%、主色约 30%、强调色 ≤10%;告警红、在线绿仅用于状态点与数字,单卡着色面积控制在 8% 以内,防止整屏被高饱和色主导。
高频传感器 1s、环境类 10s、门禁与能耗 60s;变化量小于阈值(如温度 ±0.3℃)不推送,可显著降低移动端耗电与流量。
断连后保留最后一次数据并标注时间戳,超 90s 显示「数据延迟」;重连补传按时间序合并,避免曲线出现断崖式回跳。
小屏卡片把开关、场景按钮放大到 44px 以上并保持 12px 间距;文字缩到 12px 时行高保持 1.6,兼顾可读与点按准确率。
入场动画 0.3–0.6s ease-out 缓慢上浮,进度条按真实比例增长;同时提供 prefers-reduced-motion 降级,让敏感用户得到静态视图。
中心辐射卡表达「中枢 + 六类场景」,右侧面板用条形比例呈现协作贡献度。
灯光、温控、门锁统一物模型,场景切换一次下发。
路灯、井盖、停车位按区域聚合,异常自动派单。
统一物模型 · 事件总线 · 权限边界
所有卡片通过此节点交换状态
分钟级用电曲线,峰谷策略按房间下发。
Modbus 转 MQTT,本地缓存保障断网不停产。
趋势、分布、拓扑三类图表组件化复用。
设备双向证书、数据分级脱敏,权限最小化。




按接入成本、联动能力与适用规模做取舍,避免一次性把预算压在过度方案上。
| 方案 | 接入成本 | 联动能力 | 适合规模 | 关键指标 |
|---|---|---|---|---|
| 轻量单域 | 低,复用云平台现成卡片 | 单场景联动(回家/离家) | 单户型或单门店 | 上线 ≤2 周,设备 ≤50 台 |
| 区域协同 | 中,需边缘网关与物模型治理 | 跨子系统联动(家居 + 能耗) | 园区、社区、楼宇 | 延迟 ≤180ms,设备 50–2000 台 |
| 城市级生态 | 高,需多方标准与权限体系 | 跨域事件总线与开放接口 | 城市或大型集团 | 在线率 99.9%,支持多租户隔离 |