SECURE ACCESS
设备接入与身份核验
支持一机一密与双向 TLS 证书，接入失败可回溯到毫秒级日志；单页内直接展示证书有效期倒计时。
这是一个网页样式设计参考
极简 · 半调网点 · 深色青调 · 响应式设计单页设计 / 科技魅影
把物联网解决方案，做成
一页可读、可核验、可信赖的科技魅影
面向设备规模 300 台以上的园区与产线场景：以单页设计承载从设备接入、边缘计算到云端告警的完整链路。首屏 3 秒内说明「谁在用、数据在哪、断网怎么办」，用响应式设计与排版布局把安全感前置到每一次滚动。
99.95%
链路可用性 SLA
<180ms
告警端到端时延
3层
设备—边缘—云鉴权
1.4s
首屏可交互时间
EDGE BUFFER
断网续传与本地兜底
边缘节点本地缓存 72 小时数据，网络恢复后按时间戳去重补传，丢包率控制在 0.1% 以内。
ALERT FLOW
分级告警与责任到人
P0 告警 30 秒内电话触达，P2 汇总为日报；每条告警绑定处理人与闭环时限，可审计可导出。
01 / CHECKLIST
物联网单页落地的 6 条硬清单
把「安全与可信」写进页面结构，而不是写进形容词。以下每条都给出可验证的做法与阈值，可直接交给前端与交付团队对照执行。
-
01
首屏用一段话交代「数据边界」
在 Hero 下方 1 屏内写清数据存于哪、出境与否、留存多久。建议明示：
数据不出园区、留存 180 天、加密 AES-256。用户第一眼判断的是风险，不是功能条目。 -
02
单页只保留 5 个锚点，滚动深度控制在 6 屏内
锚点超过 7 个会让侧栏/顶栏导航失去导航意义。推荐结构：清单 → 档位 → 场景 → 数据 → FAQ；每屏信息量用 1 个主标题 + 3 条要点封顶，避免长页疲劳。
-
03
色彩搭配：60% 深底 + 30% 主色 + 10% 暖金强调
底色用
oklch(0.15 0.03 206)，卡片面用oklch(0.21 0.045 206)，主色青蓝只用于标题线、图标与结构件；暖金强调仅出现在关键数字、激活态与主按钮，面积不超过整屏 10%，避免高饱和铺满带来的廉价感。 -
04
断网、掉线、越权三类异常必须在页面可见
把「异常态」当作卖点展示：断网续传缓存 72 小时、心跳丢失 15 秒判定离线、越权访问 3 次锁定。用户对「出事之后怎么办」的信任，远高于对功能列表的信任。
-
05
图片统一 16:7 或 4:3 裁切，避免布局跳动
所有配图放入固定比例容器并加
object-fit:cover与loading=lazy；建议首图 < 180KB、其余 < 120KB，滚动时避免 CLS 超过 0.1，这是用户体验评分的隐形扣分项。 -
06
响应式设计：1600 / 1024 / 640 / 380 四档验证
超大屏放宽容器到 1400–1680px 并增加瀑布流列数；640px 以下单列堆叠、按钮撑满、点击区不小于 44px；380px 时收窄内边距至 12px 并强制长词断行，杜绝横向滚动条。
02 / PLANS
三档服务：从试点到多园区纳管
价格为单页设计 + 物联网平台接入的打包报价区间，按设备规模与纳管深度分档。含安全基线核对与交付文档，不含硬件采购。
试点接入档
≤ 50 台设备 · 单点验证
¥3.8万起 / 项目
- 单页设计 1 版 + 2 次改稿
- MQTT 接入与设备台账台账初始化
- 基础告警规则 10 条，邮件 + 站内通知
- 交付周期 3–4 周，含 1 次线上验收
- 提供数据流拓扑图与安全基线说明
产线纳管档
50–300 台设备 · 边缘 + 云
¥12.6万起 / 项目
- 单页设计 + 响应式设计全套断点
- 边缘节点部署，断网续传 72 小时
- 三级告警：电话 / 短信 / 工单自动派发
- 角色权限矩阵，操作留痕可导出审计
- 交付周期 6–8 周，含 2 次驻场调试
- 承诺 P0 告警端到端 ≤ 180ms
多园区治理档
300 台以上 · 多云 / 多租户
面议· 按纳管规模阶梯计价
- 多租户隔离与统一身份源对接（SSO）
- 设备影子 + 灰度下发，回滚 ≤ 90 秒
- 链路可用性 SLA 99.95%，季度演练
- 专属交付经理与季度安全复盘
- 交付周期 10–14 周，分三阶段上线
03 / SCENES
五类真实场景的科技魅影呈现
瀑布流不等高排布，让每个场景的侧重点不同：有的强调时延，有的强调留存与合规。所有配图统一裁切，滚动过程不跳动。
智慧园区：一屏看清在线率
把水、电、门禁、环境四类设备汇聚到一个视图，按楼栋下钻。异常设备用暖金描边标记，10 秒内定位到具体点位。
在线率 99.2%下钻深度 3 级刷新 5s
产线预测性维护
振动与温度采样 200Hz，边缘侧先做特征提取再上传，带宽占用下降约 87%，同时保留原始数据 7 天用于回溯。
采样 200Hz带宽降 87%
冷链运输：轨迹与温控双留痕
每 30 秒上报一次温湿度，超限即触发告警并生成不可篡改记录，交接时可一键导出全程曲线用于合规留档。
上报 30s留存 180 天
能源计量：分项到回路
按回路拆分能耗，识别异常用电曲线。试点项目实测发现 3 处夜间空转设备，单月电费下降约 6.4%。
分项 42 路电费降 6.4%
多园区统一治理
统一身份源接入后，运维、班组、外部承包商三类角色分权到按钮级。所有下发与回滚动作写入审计日志，保留 24 个月。
角色 3 类回滚 ≤90s日志 24 个月
04 / METRICS
可被验证的关键指标
以下数值均来自产线纳管档的交付基线，写进合同附件，而不是营销口径。任何一项未达标，按季度复盘机制计费减免。
99.95%
链路可用性
按自然月统计，排除计划内维护窗口
<180ms
P0 告警端到端时延
从设备上报至电话触达的中位时延
72h
边缘离线缓存
恢复后按时间戳去重补传，丢包率 ≤0.1%
1.4s
单页首屏可交互
4G 网络下实测，CLS 控制在 0.1 以内
指标口径随交付文档一并提供，允许第三方复算；数据留存策略默认 180 天，可按行业合规要求延长至 24 个月。
05 / FAQ
上线前最常被追问的 5 个问题
直接给结论与边界，减少来回确认成本。若你关心的问题不在其中，可在下方提交安全评估需求，2 个工作日内回复。
设备数据会不会出园区？能不能只在内网跑？
可以完全内网化部署。边缘节点与平台可部署在园区内网，云端仅作为可选备份通道；若走公网，链路采用双向 TLS 加密，数据落盘 AES-256，出境传输默认关闭，需在合同中显式开启。数据留存默认 180 天，可按合规要求延长至 24 个月。
网络中断时，现场数据会丢吗？
不会丢，最长兜底 72 小时。边缘节点在断网期间本地缓存并继续执行本地告警规则，网络恢复后按时间戳去重补传；超过 72 小时的极端情况会触发本地存储告警，提醒运维导出，避免静默丢数。
单页设计交付包含哪些内容，改稿几次？
含设计稿、切图规范与响应式断点说明。试点档含 2 次改稿，纳管档含 4 次改稿并覆盖 1600 / 1024 / 640 / 380 四档验证；交付物包含色彩搭配令牌表（oklch 值）、排版布局栅格说明与图片裁切比例清单，方便后续自行维护。
300 台以上设备纳管，工期大概多久？
10–14 周，分三阶段上线。第 1 阶段（2–3 周）完成接入与看板；第 2 阶段（4–6 周）完成边缘部署与告警闭环；第 3 阶段（3–5 周）完成多租户权限与灰度下发能力。每阶段结束提供可验收的量化清单。
页面强调色只用了少量暖金，会不会显得不够「科技」？
科技感来自结构而非饱和度。本方案以深青底 + 1px 细线 + 半调网点建立秩序感，暖金只用在关键数字与激活态上，视觉张力来自明度层次与留白，而不是把整屏刷成高饱和色。这样在会议室投影与户外平板上都能看清，也符合安全可信的传达目标。