从一盏灯到一朵云：探索智能生活的响应式新界面

1. 1
   先定栅格再画界面

   以 12 列栅格为骨架，断点设为 380 / 640 / 1024 / 1600px；卡片间距统一 12–16px，避免用 100vw 导致横向溢出。检验标准：320px 宽度下无横向滚动条。

2. 2
   把高频规则下沉到边缘

   将「回家开灯」「离家断电」等 8–12 条高频场景放在本地网关执行，云端只做兜底。目标：本地响应 ≤ 200ms，云端往返允许 400–800ms。

3. 3
   上报频率按设备价值分级

   安防类 1–2 秒、环境类 10–30 秒、能耗类 5 分钟。压缩后单设备日均上行控制在 2MB 以内，可显著降低云带宽账单。

4. 4
   数据可视化只留 3 个主指标

   首页看板最多呈现「当前用电」「在线设备数」「异常告警」三项，其余折叠进二级页。经验值：单屏图表 ≤ 3 个，首屏可读时间 ≤ 1.5 秒。

5. 5
   为弱网设计降级路径

   网络抖动时切到本地缓存视图并提示「数据可能延迟 30 秒」；图片统一 loading="lazy"，首屏主图体积控制在 200KB 内，避免白屏。

6. 6
   上线前做三档真机回归

   至少覆盖 320px 小屏、768px 平板、1920px 桌面三档；重点检查点按区 ≥ 44px、长英文词断行、表格在小屏转卡片。每档回归用例不少于 20 条。

量化对照

提示：阈值随业务浮动，建议每季度复测一次，并把结论写回这份清单。