双栏联动滚动
左栏设备列表滚动时，右栏方案卡同步高亮对应能力项，滚动位置误差控制在 ±8px 内；纯 CSS 的 scroll-snap 与固定侧卡配合，避免动效抢戏。
±8px联动同步误差上限
这是一个网页样式设计参考
分屏设计 · 网络奇观
视觉母题
环形放射：让“网络奇观”有中心
环形放射不是装饰，而是信息秩序的可视化：外环是设备域，中环是协议域，核心标语是业务价值。整个物联网解决方案的叙事都围绕这个圆心向外扩散，与分屏设计形成“一横一纵”的双重结构。
- 外环放置设备图标，节点间距 ≥ 24px，避免小屏挤成一团。
- 中环用 1px 实线 + 半调网点过渡，替代大面积高饱和填充。
- 中心标语不超过 14 个汉字，否则环形会被文字撑破比例。
感知 · 连接 · 转化
中心标语锚点
差异化能力
四个不走寻常路的物联网能力
用错落网格承载「分屏设计」的信息双线程，卡片尺寸不一，引导视线按 Z 字自然落点。
协议即插即用
覆盖 MQTT、CoAP、Modbus TCP、OPC UA 等 8 类主流协议，新增协议以适配器形式热插拔，平均接入工时从 3 天压缩到 4 小时。
4h单协议接入工时
边缘预聚合
网关侧先做 10s 窗口聚合，回传数据量下降至原来的 1/6，云端存储成本同步走低。
1/6回传数据量
无障碍分屏
双栏在窄屏自动降为上下堆叠，点按区保持 ≥44px，屏幕阅读器按语义顺序朗读，不因分屏丢失信息层级。
≥44px最小点按区
服务与档位
多数团队选择
按“接入规模”而非“坐席数”计费
物联网项目的成本大头在设备接入与数据留存，所以档位按这两项划线，价格透明可预估。
观察版
按量元 / 千设备 · 月
适合先验证网络奇观的视觉叙事是否带来转化，不做深改造。
- 接入设备 ≤ 1,000 台
- 数据留存 7 天
- 标准分屏模板 3 套
- 基础 API 调用 10 万次 / 月
协作版
按量元 / 千设备 · 月
分屏联动滚动 + 方案对比表 + 自定义配色令牌，可直接用于对外投标演示。
- 接入设备 ≤ 20,000 台
- 数据留存 90 天
- 分屏模板可自定义排版布局
- API 调用 500 万次 / 月
- 含 1 次创意策划评审
私有版
面议含部署与陪跑
本地化部署 + 协议定制，适合对数据边界有硬性要求的工业与能源客户。
- 设备规模不设上限
- 数据留存自定义，可永久
- 专属协议适配器开发
- SLA 99.95% 可用性
实用指导清单
把分屏物联网页做对：6 条可落地要点
以下步骤按实施顺序排列，每条都给了可核对的数值阈值，可直接进设计评审。
-
先切分屏比例，再谈视觉
首屏用
grid-template-columns: 1.18fr 1fr建立非对称双栏；文字栏不得窄于 480px，否则中文行宽跌破 18 字会频繁换行。窄屏（≤1024px）直接降为单列。 -
配色按 60-30-10 落位
中性深底约占 60%（
--bg / --surface），主色青蓝约 30%（图标底、描边、环形装饰），暖橙强调色严格控制在 10% 以内，只用于按钮、关键数字与激活态，避免大面积高饱和。 -
图片统一裁切比例，防布局跳动
所有
<img>放入固定宽高比容器并设object-fit:cover：Hero 用 4/5 与 4/7，卡片用 16/10，场景用 5/4。首屏主图务必加loading与尺寸约束，CLS 控制在 0.1 以内。 -
联动滚动要“轻”，别抢正文
左右两栏同步高亮只做描边与背景色变化，时长 250ms 以内；滚动容器禁用横向溢出，联动误差 ±8px 内视为合格，超出则改用静态并置。
-
入场动效必须“加载即播”
文字逐行遮罩上滑用
@keyframes+animation，错峰间隔 0.1s；元素默认即为可见终态，绝不用 opacity:0 等 JS 类触发，并保留prefers-reduced-motion降级。 -
稀疏数据也要给阈值
设备在线率、回传压缩比、协议接入工时必须给出具体数字（如在线率 ≥99.5%、压缩至 1/6、接入 4h），无量化指标的卖点直接删掉，避免空话稀释可信度。
图文混排特写
一次分屏，两种阅读节奏
左屏看“现场”，右屏看“结论”
传统物联网页面把设备图、参数表、卖点文案堆在同一列，用户需要在滚动中反复切换注意力。分屏设计把“现场证据”与“业务结论”并置，视线横向移动一次即可完成验证，减少 40% 以上的反复滚动。
左屏信息密度3 图 + 6 指标
右屏结论条目4 条卖点
视线横向移动次数≤2 次
首屏停留提升+22%
解决方案对比
自建 / 平台接入 / 分屏定制，怎么选
三条路线的真实差距在“前端呈现”与“协议覆盖”，下表按可核对的维度横向比较。
| 对比维度 | 完全自建 | 标准平台接入 | 分屏定制方案 |
|---|---|---|---|
| 首屏视觉叙事 | 需自行设计，易落回三列卡片 | 模板固定，难以突出差异化 | 50:50 分屏 + 环形母题，可自定义 |
| 协议覆盖 | 按需开发，周期长 | 5～6 类常见协议 | 8 类，支持适配器热插拔 |
| 接入工时 | 约 3 天 / 协议 | 约 8 小时 / 协议 | 约 4 小时 / 协议 |
| 数据回传量 | 全量上报，成本高 | 云端聚合，延迟偏高 | 边缘预聚合，降至 1/6 |
| 询盘转化 | 基线 | +12% | +37% |
| 适用阶段 | 有专职前端与后端团队 | 快速验证概念 | 需要对外演示与投标 |
常见问题
关于分屏与物联网的 6 个疑问
分屏设计会不会让移动端体验变差？
不会。双栏在 ≤1024px 自动降为单列，图文按语义顺序堆叠，点按区维持 ≥44px；分屏只是“大屏时并置、小屏时顺序”的响应式策略，而非固定版式。
左右联动滚动会拖慢页面吗？
联动只做高亮态切换，时长 250ms 以内，不涉及重新布局；同时用 overflow:clip 约束装饰层，避免触发无谓重排，滚动帧率保持在 55fps 以上。
强调色用多少算克制？
按 60-30-10 控制：深色中性底约 60%，青蓝主色约 30%，暖橙强调色不超过 10%。强调色只出现在按钮、关键数字、激活描边与提示条圆点上。
没有真实设备数据，页面会不会显得空？
用“指标 + 阈值”填充比堆图更有效：在线率 ≥99.5%、回传压缩至 1/6、单协议接入 4h、询盘 +37%。这些可核对数字比泛泛而谈更有说服力。
半调网点会不会影响文字可读性？
网点只做背景装饰，透明度控制在 0.14～0.22，并用径向遮罩只保留角落区域，正文所在区域保持纯净底色，确保文字对比度满足可读要求。
如何替换成自己的品牌配色？
只改根类上的令牌变量（--primary / --secondary / --accent）即可，其余组件全部引用变量。替换后仍需维持 60-30-10 比例与分裂互补关系，避免色相冲突。
最新动态
网络奇观实验室的三条进展
版式实验
非对称双栏替代四六栅格
在同一套设备数据下对比测试，非对称分屏的视觉停留时长比四六栅格高出 18%，关键指标被首次看到的概率提升 25%。
性能优化
边缘聚合窗口调到 10s
把聚合窗口从 3s 调整到 10s 后，回传数据量降至 1/6，云端存储成本同步下降，同时把异常告警延迟控制在 2s 内。
设计系统
色彩搭配收敛为三段式
深底、青蓝主色、暖橙强调三段式落位后，团队交付页面的配色返工率下降约 60%，设计评审争议点集中在信息层级而非颜色。
应用场景展示
智慧工厂 · 产能看板
能源监测 · 负荷分析
仓储物流 · 调度建议
城市物联 · 运维优先级
分屏版式在四类现场的样子
同样一套物联网解决方案，在不同场景下切换左屏的证据类型与右屏的结论重点。