分屏数据编排
同一视口并列两组数据域，左栏叙事、右栏实时；窄屏按 1024px 断点自动叠为单列，不丢信息。
分屏设计 / 智慧交汇
让设备、人员与数据 在同一屏交汇 物联网解决方案网页设计灵感
以 50:50 分屏为骨架、几何线条为母题，把「感知层—网络层—平台层—应用层」四层信息并列呈现。左侧承载叙事与决策指标，右侧用 bento 便当盒承载实时状态，让访问者在 3 秒内读懂设备规模、链路时延与接入协议，而不必滚动整屏寻找答案。
接入设备
128K
在线率 99.3%
端到端时延
86ms
P95 阈值 ≤120ms
协议矩阵
MQTT / CoAP / Modbus TCP / OPC-UA 四协议并存，分屏切换不改布局宽度
01
关键数据条
取值口径：近 30 天滚动均值
99.3%
设备在线率
断连自动重连成功 97.6%
86ms
端到端时延 P95
边缘节点下沉后可压到 42ms
1.8s
首屏可交互时间
分屏双栏并行渲染，较单栏降 34%
4.2min
新设备接入用时
模板化配置，从 18min 缩短
02
六项能力，横向滑动即可对比
6 张 · 每张 ≤300px模块化布局
卡片即模块，统一 --r-md 圆角与 --sh-1 景深；新增一个协议模块只需复制结构，无需重排页面。
动态交互反馈
hover 上移 4px + 景深由 sh-1 升至 sh-2；状态切换 250ms，缓动统一 cubic-bezier(.4,0,.2,1)。
色彩搭配克制
60% 中性深底、30% 降饱和主色、10% 强调色点缀；关键数字才用高亮，避免通屏同一种绿。
边缘协同链路
边缘节点先聚合再上行，单网关承载 2000 点位；链路中断时本地缓存 15 分钟数据补传。
用户体验度量
以任务完成率与操作步数为验收标准：设备查询 ≤3 步、告警确认 ≤2 步、配置回滚 ≤1 步。
提示：可用键盘方向键横向浏览，卡片按 scroll-snap 对齐停靠
03
实用指导清单：分屏 IoT 页面落地 6 件事
可直接照做的参数先定分屏比例再定内容密度
叙事型页面用 55:45，监控型页面用 40:60。左栏正文每行控制在 46–60 字符；右栏卡片间距压到 12–16px，避免两侧留白失衡。
量化：左栏行宽 ≤60ch，右栏卡片 gap 12–16px用 4/8pt 间距节奏统一呼吸感
区块间距 48px、卡片内边距 16px、图标与标题间距 12px；全部走 --sp-* 令牌，禁止各处写 13px、17px 这类魔法值。
量化：间距取值仅允许 4/8/12/16/24/32/48/64为弱网环境设计降级视图
带宽低于 200kbps 时关闭实时曲线，仅保留数值与最后更新时间；图片统一 loading="lazy" 并锁定宽高比，防止布局跳动超过 0.1 CLS。
量化：CLS ≤0.1，首屏资源 ≤180KB告警信息按可行动性分级
只把「需人工介入」的告警放到强调色，其余用中性色；每条告警必须带设备 ID、发生时间与建议动作，避免只显示一句「异常」。
量化：高优告警占比 ≤10%，误报率 ≤3%动效只做一次，且可关闭
文字逐行遮罩上滑用 780ms 一次性播放，错峰 50–380ms；必须提供 prefers-reduced-motion 降级，禁止依赖脚本添加显示类。
量化：单次动效 ≤800ms，同时动画元素 ≤4 个无障碍与点按区检查
正文对比度 ≥4.5:1，按钮最小点按区 44×44px；焦点态统一 2px 强调色描边；装饰性网格线加 aria-hidden，不进入读屏顺序。
量化：触控目标 ≥44px，键盘可达率 100%
04
合作伙伴墙
6 类生态角色模组厂商芯片与通信模组
网关集成商边缘网关交付
云平台方设备接入与存储
系统集成商行业方案落地
数据服务商时序分析与建模
运维服务方7×24 值守响应
05
应用场景展示
四类高密度场景
智慧产线监控
将 32 台设备的运行、节拍与能耗并列显示，异常设备自动置顶，值班人员无需逐屏翻找。
设备 32 台刷新 2s告警置顶
楼宇能耗管理
按楼层分区呈现用电曲线与峰谷电价，把「今日可优化空间」直接换算成金额，决策一步到位。
分区 18 个粒度 15min节能 11%
农业环境监测
土壤墒情、气象与灌溉阀门状态同屏交汇，阈值越界即触发分区灌溉，减少无效用水。
采集点 240 个阈值告警节水 18%
城市停车调度
路侧车位占用率与诱导屏信息双栏并置，运维人员可远程下发费率与引导文案。
泊位 1.2K下发延迟 1.5s周转 +9%
06
工作流程步骤
滚动时卡片依次覆盖堆叠设备纳管与协议适配
导入设备清单后按型号匹配协议模板，MQTT 设备填 Broker 地址与 Topic，Modbus 设备填寄存器映射表。单批 200 台设备可通过 CSV 一次性导入，失败项单独列出原因。
数据建模与指标定义
先定义指标口径再接线：在线率＝在线时长／应在线时长，时延取 P95 而非均值，能耗按 15 分钟粒度聚合。口径写入页面说明区，避免不同角色各算一套。
分屏页面组装与联调
左栏放叙事与关键指标，右栏放实时卡片；用统一令牌控制间距与圆角，联调阶段逐项核对 640 / 1024 / 1600 三个断点，确认无横向溢出与文字截断。
上线观测与体验迭代
上线后跟踪四组指标：首屏可交互时间、任务完成率、告警确认步数、误报率。每周复盘一次，优先修「步数超标」与「误报集中」的模块，再谈视觉微调。
把「智慧交汇」落到你的分屏页面上
带上现有设备清单与三个核心指标，我们按分屏设计规范输出一版可交互原型：先定比例，再排模块，最后校准色彩与动效，一次评审即可进入开发。
智慧交汇物联网解决方案网页设计灵感 · 保留所有权利
分屏设计 / 智慧交汇 / 模块化布局