多源数据清洗
把 MES、SCADA、质检仪表的字段统一到同一张宽表，异常值按 3σ 规则标记而非直接丢弃。
- 字段映射表 ≥ 1 份，含 12 类来源
- 缺失值补全率目标 ≥ 98%
清洗耗时≤ 8 min
这是一个网页样式设计参考 · 创意排版 / 大数据分析 / 智造未来
核心能力 / Capability
四块能力，撑起一份读得懂的智造看板
点击标签切换不同关注面。每张卡片都给出可验证的参数区间，方便你在自己团队里照搬或微调。
指标口径统一
良率、节拍、OEE 三个指标先定口径再上屏，避免同一数字在不同看板差 5 个点。
- 口径文档随看板一同发布
- 变更需留痕，保留历史版本
口径冲突0 处
增量同步
按 5 分钟粒度拉取增量数据，避免整表重跑拖垮车间网络。
- 单次同步数据量 ≤ 2 MB
- 断线重连后自动补 3 个周期
同步延迟＜ 90 s
数据血缘可视
每个数字都能点开看来源表与计算式，方便新人自查与交接。
- 关键指标 100% 可追溯
- 血缘图节点默认收起二级
追溯点击≤ 2 次
字重对比 3 级
标题 800、副标题 600、正文 400，靠字重而非颜色区分层级，弱色觉用户也能读。
- 标题与正文字号比 ≥ 2.2
- 行高正文 1.62，标题 1.12
层级识别≤ 1 s
非对称栅格
主图占 7 列、辅图占 5 列，打破等宽三列的呆板，引导视线先看主线再看细节。
- 12 列栅格，间距 16px
- 断点 1024 / 640 各降一档
首屏留白≤ 22%
半调网点母题
用低透明圆点铺底做质感，仅在 Hero 与面板边缘出现，不压正文对比度。
- 网点透明度 ≤ 0.16
- 遮罩向外渐隐 78%
正文对比≥ 4.5:1
手绘线条标注
关键结论下方加一条手绘下划箭头，模拟工程师批注，弱化机械感、增加人情味。
- 线条宽 3px，圆头端点
- 仅用于每屏 1 处强调
强调点1 处/屏
悬停即预览
鼠标停在卡片上浮起 4px 并加一层阴影，让人知道这里可点，无需额外提示文字。
- 位移 ≤ 4px，时长 0.25s
- 阴影从 sh-1 到 sh-3
误点率＜ 2%
渐显错峰入场
卡片依次延迟 60ms 淡入上移，节奏轻快不拖沓，避免整屏同时闪现。
- 总入场时长 ≤ 0.9 s
- 减弱动效时全部关闭
首帧延迟＜ 120 ms
分段吸附
滚动时按区块轻微吸附，方便在车间大屏上用遥控器逐段讲解。
- 吸附强度 proximity，不强制
- 触屏设备自动降级为普通滚动
跳段次数≤ 1 次
焦点可见
键盘 Tab 到任何按钮都有 2px 强调色描边，保证质检员用键盘也能流畅操作。
- 点按区高度 ≥ 44px
- 描边与底色对比 ≥ 3:1
键盘可达100%
应用场景 / Scene
同一份数据，在三种现场各自好用
车间大屏：5 米外也要看清
标题字号放大到 72px 以上，数字用等宽对齐，颜色只保留主色与强调色两级。工人抬头 2 秒即可确认当班良率是否达标。
大数据分析科技感响应式设计
交班手机端：一路划到底
把当班异常按时间倒序排成单列卡片，每张卡只讲一件事：什么问题、影响多少台、建议怎么处理。平均交班时长从 18 分钟压到 7 分钟。
用户体验优化互动元素
周会复盘：先给结论再给依据
页面顶部先放一句结论式大标题，下方再挂图表与明细。会议前 5 分钟即可对齐分歧点，讨论时间更多花在措施而不是找数。
数据可视化网页设计
数据可视化面板 / Dashboard
把 12 类数据源压进一屏
当班数据完整度
四个维度按 5 分钟刷新。条形长度只表达相对量级，具体数值写在右侧，避免读者靠目测猜数。
87.4%
综合数据可用度（目标 ≥ 85%）
7 min交班平均耗时
1 次追溯所需点击
实用指导清单 / Checklist
六条能直接照做的排版与数据规范
先定字号阶梯，再谈配色
正文基准 16px，标题按 1.25 倍递增做 4 级：16 / 20 / 25 / 31px；大屏再整体放大 1.5 倍。任意两级字号比不低于 1.25，否则层级会糊在一起。
留白控制在 20% 上下
首屏空白面积建议 18%–22%。低于 15% 显拥挤，高于 28% 又显得内容不足。用 8pt 间距节奏（8/16/24/32/48）而不是随手填数值。
颜色只用 60-30-10
约 60% 白与浅灰打底、30% 主色承载结构（标题条、按钮底）、10% 强调色点亮关键数字与激活态。强调色面积不超过整屏 10%，一超标就变廉价。
每个数字都要能追溯
看板上任何一个指标，点击 2 次以内要能看到来源表、计算公式与最近更新时间。无法追溯的数字宁可不放，避免会上被追问后无从解释。
窄屏先保可读，再保好看
640px 断点卡片转单列，380px 以下内边距收到 10px、字号下调一档，长英文与设备编号用 break-word 断行。任何视口都不得横向滚动，点按区保持 ≥ 44px。
动效要能被关掉
入场渐显总时长控制在 0.9 秒内、单卡延迟 60ms。用户开启「减少动态效果」时全部降级为静态显示，避免车间里长时间盯屏的人产生视觉疲劳。
工作流程 / Workflow
从取数到上屏，五步走完
对齐问题
和班组长聊 30 分钟，确认他们每天真正要看的 3 个数字。
取数与清洗
按统一口径拉取近 7 天数据，标记异常值并输出映射表。
先画版式草图
用纸笔定出大字标题、非对称栅格与强调点位置，再动手写代码。
多端验证
在车间大屏、办公电脑、手机三端各看一遍，检查断行与溢出。
小范围试用
先给一个班组用两周，收集「看不懂的数字」清单再迭代。