单场景陪伴档
¥3.8万起 / 项目
- 接入设备 ≤ 32 台，覆盖 1 个空间（客厅或门店）
- 分屏首页 1 套 + 响应式断点 3 级（1680 / 1024 / 640）
- 数据刷新 5s 轮询，异常推送延迟 ≤ 3s
- 交付周期 10 个工作日，含 1 次远程调优
服务 / 价格档位三档陪伴式交付，按设备规模与场景复杂度计价
不卖“万能平台”，只卖能被验收的交付物：分屏页面、设备协议适配、看板与陪伴式运维。以下为参考区间，可按季度折算。
多空间协同档
¥11.6万起 / 项目
- 接入设备 ≤ 256 台，跨 3~5 个空间统一编排
- 分屏 + 标签页面板 + 数据可视化看板全套
- 3D 渲染场景 2 套，移动端自动降级为位图序列
- 交互埋点 12 项，转化漏斗可追溯到按钮级
- 交付周期 4~6 周，含 2 次现场陪跑
能力矩阵六项特性，撑起梦幻但不虚假的体验
每项都对应可测量的指标，避免“看起来很酷但没人用”。
50:50 分屏叙事
非对称双栏图文并置，左右信息权重按 1.02:0.98 分配，打破居中大标语套路。
8s 内读懂
梦幻空间氛围
暖金主色 + 冷蓝点缀，靠明度层次而非高饱和堆叠，长时间观看不刺眼。
对比度 ≥ 4.5:1
标签页切换
纯 CSS 锚点式标签，四个业务视角一屏内并列，用户不必来回跳页。
点击减少 41%
响应式设计
1680 / 1400 / 1140 / 1024 / 640 / 380 六档断点，超大屏横向放宽而非留白。
0 横向溢出
3D 渲染降级
场景动画统一走 CSS keyframes，弱网时切 2D 位图，首屏体积压到 380KB 内。
首屏 ≤ 1.2s
陪伴式运维
告警按“谁在家、影响几台设备”排序，而不是按技术栈排序，先安抚再修复。
误报率 < 5%
工作流程步骤从一次入户勘察，到可持续陪伴的看板
时间线叙事式推进，共 5 步，每步都有明确的输入与验收标准。
场景勘察与设备盘点
记录空间尺寸、网络拓扑、设备协议（MQTT / Modbus / BLE 混用情况），输出设备清单表与点位图。要点：为每台设备标注“是否影响居住体验”，用于后续告警分级。
信息架构与分屏切分
把内容拆到左右两栏：左侧放流程与参数，右侧放场景与情绪。确定 3 条用户主动线，避免分屏变成两列无关信息。验收：3 位真实用户能复述主任务。
视觉与色彩搭配定稿
以中性深底承托 60% 版面，暖金主色用于结构与按钮，冷蓝只做激活态与关键数字。梦幻空间靠光影层次营造，不靠高饱和填充。
前端实现与交互设计落位
分屏栅格、标签页、看板图表全部用 CSS 与内联 SVG 实现，禁用运行时脚本依赖；动效统一走 keyframes 并做 reduced-motion 降级。
上线陪伴与指标复盘
上线后第 7 天、第 30 天各复盘一次：看板打开率、告警处理时长、关键按钮点击率。指标不达标则回到第 2 步重切信息架构。
解决方案对比四种常见做法，谁更适合“有温度的物联网”
用同一套分屏体验去衡量，差异集中在响应式、可维护性与用户理解成本上。
分屏梦幻方案：把“理解成本”降到最低
左栏承载设备状态与参数，右栏承载场景与情绪化反馈；标签页在四个业务视角间切换，单页信息量提升约 1.8 倍，同时保持首屏轻盈。适合家庭、康养、连锁门店等需要“看得懂、愿意看”的场景。
| 维度 | 表现 | 说明 |
|---|---|---|
| 首屏理解时间 | 约 8 秒 | 分屏左右对照，减少滚动 |
| 响应式断点 | 6 档 | 1680 至 380 全覆盖 |
| 弱网可用性 | 良好 | 3D 自动降级为位图 |
| 运维可读性 | 高 | 告警按影响面排序 |
数据可视化面板用四个数字说明陪伴是否真的发生
指标口径统一为近 30 天滚动窗口，避免用峰值粉饰常态。
99.95%设备在线率 · 目标 ≥ 99.9%
2.4s告警触达中位延迟 · 目标 ≤ 3s
63%看板周活跃率 · 目标 ≥ 60%
4.6/5用户主观理解度 · 抽样 120 人
看板读法：先看人，再看设备
面板第一屏固定四张卡片：在线率、告警延迟、活跃率、理解度。任何一项跌破阈值，卡片边框转为强调色并在时间线上打点，提醒团队“有一位用户正在等待回应”。
- 在线率低于 99.5%：自动触发网络排查脚本清单
- 告警延迟高于 5s：检查消息队列积压与重试策略
- 活跃率低于 45%：先改信息架构，不加推送打扰
- 理解度低于 4.0：回收分屏文案，删掉术语
应用场景图集同一套分屏语言，落在四个真实空间
所有场景图均按 4:3 统一裁切，避免布局跳动。
实用指导清单5 条能直接抄进需求文档的做法
每条都给出参数或阈值，避免“看情况”式建议。
01 分屏切分
左流程右场景，权重 1.02:0.98
左栏放参数、步骤、表格（宽度占比约 51%），右栏放场景图与情绪反馈。移动端改为上下堆叠，右栏图片固定 16:9，避免首屏被图片吃满。
02 色彩搭配
60% 中性底 + 30% 暖金 + 10% 冷蓝
深底承托大面积，暖金只用于结构线与主按钮，冷蓝仅点亮关键数字与激活态。禁止整屏渐变与高饱和铺底，长时间观看对比度保持 ≥ 4.5:1。
03 交互设计
标签页不超过 4 个，锚点式切换
用纯 CSS 锚点或复选框实现切换，禁用运行时脚本；每个标签标题控制在 8 字内，切换后首屏内容不跳位，滚动位置保持稳定。
04 前端技术
动效全部走 keyframes，默认即终态
缓慢缩放呼吸动画周期 22~26s，错峰延迟 0.6s；元素默认可见，禁止 opacity:0 依赖脚本显隐；同时提供 prefers-reduced-motion 降级，静态呈现同样完整。
05 响应式与性能
六档断点 + 首屏 ≤ 1.2s
断点覆盖 1680/1400/1140/1024/640/380，超大屏横向放宽容器而非留白；图片统一 object-fit:cover 与固定宽高比，单图 ≤ 180KB，3D 场景在移动端降级为位图序列。