先定信息骨架，再画线条
把物联网能力拆成「感知—连接—平台—应用」四层，官网首屏只讲一条主线：设备如何接入、数据如何被看见。每层用一条 1px 分隔线区隔，禁止在同一视觉层级塞入超过 3 个信息块。
层级 ≤ 4首屏模块 ≤ 3栅格 12 列
数码纪元 · 极简线条艺术
智慧画布：把物联网的复杂，压成一条干净的线
面向企业官网与运营后台的 IoT 解决方案：以极简线条艺术组织信息层级，用线性图标与网格布局替代厚重装饰，让访问者在 30 秒内看懂设备接入、数据流转与业务闭环。响应式设计保证从 320px 手机到 2560px 大屏的同一套叙事节奏。
端到端时延 P95
86ms
首屏可交互
1.2s
486个
已接入的线性图标语义节点
99.9%
设备在线率目标（季度口径）
10s
可视化面板数据刷新间隔
32项
首页可核验的体验指标
01 / GUIDE
落地实施清单：把极简线条艺术做成可交付体验
适用于企业官网 + IoT 运营后台线性图标统一 1.4px 描边
全部图标采用同一描边宽度与 24×24 画布，圆角端点保持一致；同一区块内图标尺寸只允许两档（16px / 22px）。混用面性图标会让极简风格瞬间破功。
描边 1.4px画布 24×24尺寸 2 档
用留白替代装饰，控制密度
区块间距按 24 / 32 / 48 三级节奏推进，卡片间距保持 12–20px；正文行高 1.62、标题行高 1.12，靠排版层级而非色块区分主次。
行高 1.62卡片间距 12–20px留白 ≥ 内容
动态数据可视化做减法
仪表盘只保留 1 个主指标 + 3 个辅助指标，柱状图最多 7 根，刷新间隔 10s，避免高频重绘造成视觉噪声。数值使用等宽数字，防止跳动错位。
刷新 10s柱 ≤ 7 根tabular-nums
响应式断点与触控尺寸
按 1600 / 1024 / 640 / 380px 四个断点收敛：大屏卡片由 3 列增至 4 列，窄屏单列堆叠；所有可点击元素最小 44×44px，表格窄屏转横向滚动而非压缩文字。
断点 4 档点按 ≥ 44px无横向溢出
验收：三项硬指标
① 首屏可交互 ≤ 1.2s；② LCP 图片全部 lazy 加载且固定宽高比，布局零跳动；③ 对比度 ≥ 4.5:1，键盘可遍历全部交互元素。
TTI ≤ 1.2sCLS ≈ 0对比度 ≥ 4.5:1
避坑点：不要把强调色铺成大色块。本方案中强调色只出现在编号、激活态标签与关键数字上，总面积控制在页面的 10% 以内，其余交给中性底色与 1px 细线。
02 / FEATURE
线条化场景特写：从设备接入到业务闭环
图文混排 · 折角翻页母题
把「看不见的数据流」画成一条可读的线
在数码纪元语境下，用户体验的核心不是炫技，而是让非技术决策者在 30 秒内理解系统价值。我们用线性图标描摹设备、网关与云端，用 1px 连线标注数据流向，用网格布局保证任何屏幕下阅读顺序一致。
- 设备接入：单网关支持 2,000 个测点，接入配置模板化，上线耗时从 3 天压缩到 4 小时。
- 数据可视化：主指标一屏可见，趋势折线粒度 5 分钟，异常点用强调色描边而非填充。
- 告警闭环：从触发到工单派发平均 42 秒，处置结果回写设备档案，形成可追溯链路。
- 交互设计：标签页切换不打断阅读，动效时长控制在 150–250ms，避免干扰核心信息。
03 / DATA
动态数据可视化面板：一屏看懂运行状态
纯 CSS 图表 · 加载即播放近 7 日设备接入量（千台）
数据刷新 10s · 采样 5min86ms
端到端时延 P95，满足工业现场 < 100ms 要求
99.9%
设备在线率季度目标，低于阈值自动生成工单
42s
告警触发到工单派发的平均耗时
- 在线率：99.9% 目标，按小时聚合，掉线超 90s 计入异常。当前 99.94%
- 接入耗时：模板化配置后单设备平均 4 小时上线，批量导入支持 500 台/次。较人工缩短 82%
- 固件升级：灰度分批 5%→30%→100%，失败自动回滚，窗口期 22:00–06:00。
- 采样粒度：默认 5 分钟，关键指标可降至 10 秒，存储按 90 天热数据 + 2 年冷数据分层。
- 数据完整率：≥ 99.5%，缺口自动补齐并标注来源，避免图表出现断点误导判断。
- 可视化响应：10 万点折线首帧渲染 < 300ms，缩放交互保持 60fps。
- 首屏可交互：≤ 1.2s，图片全部 lazy 并预留宽高比，CLS 接近 0。
- 信息获取效率：目标用户在 30 秒内说出 3 项核心能力，可用性测试通过率 ≥ 85%。
- 操作成本：从首页到「预约评估」不超过 2 次点击，表单字段压缩至 5 项以内。
04 / COMPARE
解决方案对比：三种接入路径怎么选
按规模 / 时延 / 成本三维度| 方案 | 适用规模 | 端到端时延 | 单点年成本 | 体验侧重 | 推荐标记 |
|---|---|---|---|---|---|
| 边缘直连 | ≤ 200 台设备 | 35–60ms | ￥28–45 | 低时延控制、本地闭环 | 优先 |
| 网关汇聚 | 200–5,000 台 | 60–120ms | ￥18–32 | 统一协议、集中运维 | 推荐 |
| 云端全托管 | ≥ 5,000 台 / 多地域 | 120–260ms | ￥10–20 | 弹性扩容、快速上线 | 按需 |
线性图标体系
统一 1.4px 描边与圆角端点，48 个语义节点覆盖设备、网络、平台与应用层。
一致性评分 ≥ 95%动态数据可视化
主指标一屏可见，柱状图不超过 7 根，刷新 10s，异常用强调色描边而非填充。
首帧 < 300ms网格布局
12 列基准栅格，卡片间距 12–20px，任何断点下阅读顺序与信息优先级保持一致。
断点 4 档响应式设计
1600 / 1024 / 640 / 380px 四级收敛，大屏放宽容器，小屏单列堆叠无横向溢出。
320px 起可用交互设计
标签页切换、卡片悬停与数字滚动均为轻量动效，时长 150–450ms，不打断阅读。
动效 ≤ 450ms企业官网承载
解决方案、案例与预约入口在同一叙事线内，从首页到转化不超过 2 次点击。
转化路径 ≤ 2 步
05 / SCENES
应用场景图集
线条风格统一 · 图片懒加载
智慧工厂
产线设备状态 1s 级刷新，异常自动派单，停机时长下降 17%。
楼宇能耗
分项计量到楼层，峰谷策略自动执行，月度能耗下降 9.6%。
远程运维
远程诊断覆盖率 92%，现场出勤次数减少约三分之一。
交付清单预览
- 接入路径与协议选型建议
- 官网信息架构与栅格草图
- 线性图标规范（描边 / 尺寸）
- 体验验收指标与阈值表