单域接入版
按项目 · 1 个场景域
- 最多 200 台设备 / 3 类协议
- 8 个核心页面 + 1 套色彩令牌
- 响应式断点 3 档，含 380px 兜底
- 交付周期约 3–4 周
这是一个网页样式设计参考 · 独立设计风格 × 潮流网络 × 物联网解决方案
纯静态 / 无脚本
01 / FAQ
常见问题：先解决「看得懂」，再谈「连得上」
以下回答均对应可验收的界面指标，点击标题展开。
设备数量上百时，界面如何不崩不乱？
采用分层收敛：列表默认只渲染前 50 条并提供虚拟滚动占位；分组维度固定为「网关 → 子网 → 设备」三级，单组超过 80 台自动折叠。实测在 1000 台规模下，滚动帧率保持 ≥ 55fps，首屏可交互时间 ≤ 1.2s。
独立设计风格的撞色，会不会牺牲可读性？
撞色只出现在 10% 的面积：按钮、激活态、关键数字与 1px 高亮线。大面积保留中性底色（约 60%），主色（约 30%）用于分区与卡片描边。正文与底色明度差 ≥ 45%，对比度目标 ≥ 4.5:1，长文控制在 46 个字符宽度以内。
响应式设计要覆盖到哪些断点才算够？
四档梯度：≥1600px 放宽容器并增加列数；1024px 收为两列；640px 单列堆叠、导航折行；≤380px 内边距降到 8–12px、按钮通栏、长词强制断行。每个断点都要回归检查横向溢出与 44px 点按区。
动效做到什么程度是「加分」而不是「负担」？
只保留三类：入场错峰抬升（≤ 450ms）、hover 抬升 + 描边发光（≤ 250ms）、状态切换淡入。全部用 CSS 关键帧实现，加载即播放、默认可见；并对 prefers-reduced-motion 做降级，关闭全部位移与动画时长。
如何衡量「用户体验优化」是否真的生效？
盯四个数：设备接入完成率、首屏关键指标可读率、告警确认平均耗时、配置表单一次性通过率。上线前基线对照，目标分别是 +18%、≥ 92%、≤ 25s、≥ 85%。任一未达标先回查信息层级与文案，而不是加更多动效。
模块化布局会不会让品牌辨识度变弱？
不会，前提是模块「骨架统一、皮肤克制」。把等宽字体、全圆角胶囊、描边标题作为固定识别件，把图片裁切比例、卡片层级固化为令牌；变化只发生在排布顺序与拼贴位置。这样既保持模块化布局的稳定，又保留独立设计风格的个性。
02 / PLANS
服务档位：按「接入规模 + 体验深度」计价
所有档位均含色彩搭配规范与响应式回归清单。
多域协同版
按项目 · 3 个场景域
- 最多 2000 台设备 / 6 类协议
- 20+ 页面、数据看板与告警中心
- 交互设计动效规范 + 可访问性验收
- 断点 4 档，含超大屏 1920/2560 适配
- 交付周期约 6–8 周，含 2 轮体验走查
平台化订阅
按月 · 设计系统托管
- 设备规模不设上限，按域扩展
- 组件库与令牌持续演进、季度评审
- 每季度 ≥ 1 次全链路体验指标复盘
- 响应 48 小时内输出方案稿
03 / FEATURE
图文特写：一块看板里的排版布局与色彩搭配
从「一眼看到异常」倒推信息密度与视觉权重。
三区并置：指标 → 告警 → 拓扑
看板遵循固定的视觉动线：左上放关键数字（强调色只点数字本身），中部放告警流（每条限 1 行摘要 + 1 个时间戳），右侧放细线勾勒的拓扑缩略图。用户视线从左上到右下不超过 2 次跳转，异常定位路径缩短约 40%。
色彩搭配上，底色与卡片保持低饱和中性，主色只用于分区标题与卡片描边，强调色只出现在实时数值与告警级别标记上。这样即便同时出现 6 类状态，也不会出现「满屏都在喊」的疲劳感。
8pt间距节奏：4/8 递进，卡片间距 12–16px
3 色状态色上限：正常 / 提醒 / 严重
1 行告警摘要字数上限，超长折叠
2 次首屏到根因的最大点击次数
04 / CHECKLIST
实用指导清单：7 条可落地的体验优化动作
逐条带参数与阈值，可直接进需求评审。
先定信息层级，再选色彩
把页面拆成「背景层 / 结构层 / 数据层 / 操作层」四层，约定每层只允许一种视觉手段。背景层用低饱和中性；结构层用 1px 描边 + 12–18px 圆角；数据层允许强调色小面积点亮；操作层用主色实底胶囊按钮。层级定完再填色，可避免 80% 的返工。
撞色配比卡死在 60-30-10
中性底约占 60%、主色约 30%、强调色不超过 10%。执行方式：把强调色写进一个变量，全站只允许出现在按钮、激活态、关键数字、细高亮线四处；代码评审时全局搜索该变量，出现超过 4 类用法即打回。撞色靠明度差而非提高饱和度。
断点四档，超大屏必须放宽容器
设定 1600px / 1024px / 640px / 380px 四个断点：≥1600px 容器放宽并增加卡片列数，避免中间一条窄柱、两侧大片空白；1024px 收为两列；640px 单列且导航折行；≤380px 内边距降到 8–12px、按钮通栏。每个断点回归检查：无横向滚动、点按区 ≥ 44px、长英文词强制断行。
动效只做三类，且必须加载即播
入场错峰抬升（≤450ms，delay 递增 60ms）、hover 抬升 + 描边发光（≤250ms）、状态淡入。全部用 CSS 关键帧实现，元素默认即为最终可见状态，严禁 opacity:0 等 JS 加类；并在 prefers-reduced-motion 下关闭位移与动画时长。动效只服务「状态变化被看见」，不服务炫技。
数据密度用「可见条数」量化
首屏可见设备条目控制在 8–12 条，告警流 5–7 条，指标卡 3–4 张。低于下限说明空铺浪费，高于上限说明需要分组或折叠。列表滚动保持 ≥55fps；表格在窄屏转为卡片或横向滚动，并显式加提示。
用令牌消灭魔法数值
间距、圆角、阴影、字号、过渡曲线全部收敛为变量：间距走 4/8 节奏，圆角统一为 12/18/24/999，阴影分三级景深，字号用 clamp 做流体缩放。组件只引用变量，禁止写死像素；这样换肤、换断点、换品牌时改动面从上百处降到个位数。
可访问性当作验收项而非加分项
正文对比度 ≥ 4.5:1，大字 ≥ 3:1；所有可交互元素有 :focus-visible 焦点样式（2px 描边 + 2px 偏移）；装饰图形加 aria-hidden；表单错误提示紧贴字段且含修正建议。上线前用键盘走一遍全流程，确保不依赖鼠标即可完成设备接入与告警确认。
05 / SCENES
应用场景：六个真实落地面的界面取舍
瀑布流不等高排布，卡片高度即信息权重的隐喻。
智慧园区能耗监测
分项计量卡按楼层分组，异常支路用强调色细线标记，不改变卡片底色。
指标：异常定位 ≤ 3 次点击
冷链运输温控追踪
地图轨迹与温度曲线共用时间轴，超温段以高亮细带标出，滚动时双向联动。
指标：超温事件识别 ≤ 5s
产线预测性维护
健康度用环形进度 + 数字双表达，剩余寿命按天呈现，避免误读为百分比。
指标：误报率 ≤ 8%
楼宇照明群控
场景预设用胶囊标签横排，单次批量下发上限 500 台，失败项单独成组重试。
指标：批量下发成功率 ≥ 99%
农业环境采集
弱网优先：表单分步保存，断网时本地缓存并在恢复后按序补传。
指标：断网续传成功率 ≥ 97%
边缘网关固件升级
灰度按 5% → 25% → 100% 三阶段放量，任一阶段失败自动回滚并保留日志。
指标：回滚耗时 ≤ 90s
06 / FLOW
工作流程：从需求到上线的五步交付
每一步都有可验收产出，避免「设计做完才发现开发接不住」。
STEP 01
业务走查与指标对齐
拉出 5 类核心角色，记录现有系统里的真实卡点，产出体验指标基线表（完成率 / 耗时 / 错误率）。
STEP 02
信息架构与原型
确定三级设备分组与页面动线，输出关键任务的可点击原型，完成 5 人以上可用性测试并记录问题。
STEP 03
令牌与视觉系统
落地色彩搭配规范、等宽字体层级、圆角与景深令牌，形成可复用组件库，覆盖 90% 以上页面元素。
STEP 04
响应式与动效回归
四档断点逐项验收；动效只保留三类并加载即播；检查无横向溢出、点按区 ≥ 44px、焦点样式完整。
STEP 05
灰度上线与指标复盘
按 5% → 25% → 100% 放量，对比基线表；未达标项回到 STEP 02 重排信息层级，而非叠加动效。
LAYER 01
数据层级
四层结构、每层一种视觉手段，保证 1000 台设备规模下依然一眼可取关键值。
LAYER 02
交互反馈
hover 抬升 2–3px、描边发光 1px，过渡 150–250ms，让每次操作都有明确回执。
LAYER 03
异常可读
告警摘要限 1 行、状态色不超 3 类，异常段用高亮细带而非整块填色。
LAYER 04
可访问性
对比度 ≥ 4.5:1、焦点样式完整、键盘可走通全流程，作为上线硬门槛。