特性 01
统一接入层
支持 MQTT / Modbus / LoRaWAN 等 6 类协议，入站数据统一映射为「设备—指标—时间戳」三元组，前端分屏视图无需为每种协议单独写渲染分支。
创新视界
IOT SPLIT VIEW
预约体验评审
创新视界 · 编辑跨页式分屏
让物联网数据
让物联网数据
以分屏并置的方式被一眼读懂
左右对照、上下呼应——我们把设备侧实时流与体验侧决策面板放进同一视界：左栏讲「发生了什么」，右栏答「下一步做什么」。模块化布局与响应式栅格让 320px 手机到 2560px 大屏都保持同一信息密度节奏。
42%跨栏对照后告警定位提速
1.8s首屏可交互时间目标
3 档分屏断点（1024 / 640 / 380）
01 / 数据可视化面板
分屏数据面板：左看趋势，右抓异常
把「趋势」与「异常」拆到两栏是分屏设计的核心收益：用户视线无需在页面间跳转，决策链路缩短。下方柱状图为近 7 天网关上报成功率，右栏为需要立刻处理的三个阈值项。
网关上报成功率（近 7 天）
读数口径：每 15 秒采样一次，取 5 分钟滑动窗口均值；低于 95% 的时段在右栏阈值卡中自动生成待办。
待处理阈值项
- 95%上报成功率下限连续 10 分钟低于此值即触发工单，避免漏报堆积。
- 120ms指令下发时延超过则回退到本地边缘策略，保障产线不停机。
- 3 台离线设备并联上限同网关下超 3 台离线先查供电与固件版本。
特性 02
对照式监控
趋势曲线与告警列表并排，鼠标悬停任一告警即在左栏定位对应时间点，把「找问题」从分钟级压到 10 秒级。
特性 03
响应式折叠
1024px 以下栏宽不足时自动由左右并置改为上下堆叠，首屏仍保留 3 项关键指标，避免手机上出现横向滚动条。
02 / 实用指导清单
分屏式物联网界面落地 5 条硬清单
不是审美偏好，而是可验收的工程参数。按顺序执行，通常一次评审即可通过。
-
先定栏宽比例，再谈配色
主屏用 1.02 : 0.98 的非对称双栏（而非严格 50:50），让数据侧略宽；当容器宽度 < 1024px 时切为单栏堆叠。验收线：任一断点下不得出现横向滚动。
-
同屏信息量控制在 7±2 条
每个分屏区块内可读条目不超过 9 个，超出即拆成下一屏。指标卡数字字号 ≥ 1.5rem，说明文字 ≤ 2 行，避免视线在两个栏位之间反复扫动。
-
强调色只做「指针」，不做「地板」
强调色面积占比控制在 10% 以内：只用于按钮、激活态、关键数字与细线高亮。大面积底色一律走中性/低饱和表面色，保证长时间盯屏不疲劳。
-
动效必须「加载即播」且可降级
缩放呼吸类动效周期建议 16–18s、幅度 ≤ 3.5%；用 @keyframes 自动播放，禁止依赖脚本添加类名才显示。开启「减少动态效果」时全部动效关闭但内容完整可见。
-
图片统一裁切，杜绝布局跳动
所有配图容器写死宽高比（Hero 4:3.05、卡片 16:10），配合 object-fit:cover；图片加 loading="lazy"，首屏关键图优先。验收线：图片加载前后布局偏移 < 0.1。
03 / 解决方案对比
单栏长页 vs 分屏并置：怎么选
两种结构没有绝对优劣，取决于用户任务类型。下面按「任务—结构」给出可判定的取舍标准。
适合「对照与决策」类任务
- 需要同时看趋势与明细，例如曲线 + 告警列表
- 跨栏联动是高价值操作，可把定位耗时压到 10s 内
- 大屏与桌面端为主，横向空间 ≥ 1280px
- 信息密度要求高，单屏可承载 6–9 条关键指标
适合「阅读与引导」类任务
- 以流程说明、上手指引为主，阅读顺序线性
- 移动端占比 > 70%，纵向滚动更符合手势习惯
- 内容更新频繁、模块顺序常调整，维护成本更低
- 对首屏信息量要求低，更看重叙事节奏
折中做法：桌面端用分屏承载「监控 + 处置」，移动端自动降级为单栏卡片流，保持同一套模块化布局与设计令牌，避免两套代码分叉。
04 / 常见问题 FAQ
分屏设计落地时的四个高频疑问
点击展开查看答案，全部内容默认静态可读，不依赖脚本。
分屏会不会让手机端体验变差？
会，如果硬撑双栏。做法是设置 1024px 断点：低于该宽度即由并置改为上下堆叠，并只保留 3 项最关键指标。实测窄屏下横向溢出条数为 0，首屏高度控制在 1.6 屏以内。
两个栏位的数据刷新频率需要一致吗？
不必强求一致，但要显式标注。建议高频侧（设备流）以 15s 为刷新周期，低频侧（统计面）取 5min 聚合，并在栏头写明「更新于 xx 秒前」，避免用户误判数据陈旧。
强调色用在哪些元素上最有效？
优先给三类：主操作按钮、当前激活的分栏标签、以及关键数字或阈值线。总量控制在页面面积的 10% 以内。实验显示，把强调色从「整条横幅」收窄到「细高亮 + 按钮」后，关键操作点击率不降反升。
如何保证无脚本时内容也完整可见？
入场动效只用 @keyframes 自动播放，元素默认即为终态可见；折叠交互用 details/summary 原生实现；绝不使用「先隐藏、靠脚本加类显示」的写法，并补充 prefers-reduced-motion 降级。
05 / 场景图集
网格拼图：悬停放大，浏览不打断
四个典型物联网场景以拼图方式排布，鼠标悬停轻微放大 10%，用于快速建立「创新视界」的视觉印象。
06 / 关键数据条
分屏方案上线后的四个可量化结果
数据取自内部可用性测试与灰度观察，均以「改版前 → 改版后」口径统计。
42%告警定位耗时下降，从平均 17s 缩短至约 10s
1.8s桌面端首屏可交互时间目标值，弱网下不超过 3s
9项单屏可承载的关键指标上限，超出即拆分下一屏
0条320–2560px 全区间横向溢出条数，移动端点按区 ≥ 44px