_design_audit_20260826.md 2.8 KB
windscada 界面设计审计 (2026-08-26; 机器实测, 非主观打分)
审计器 scripts/_audit/design_audit.js — 在真实页面上读计算样式打分, 九项:
排版三项(字号阶梯收敛/字族/数字等宽) · 行长(CJK 按 1em/字) · 间距栅格(偶数) ·
版面两项(零横向溢出/点击目标≥24px) · 对比度(WCAG AA: 小字4.5:1 大字3:1, 半透明按父底合成) · 图表(刻度字号/图例重叠/单位轴标)
终判: 全页面 100
| 面 | 浅色·桌面 | 暗色·桌面 | 平板768 | 手机375 |
|---|---|---|---|---|
| 总览 (静态双翼) | 100 | 100 | — | — |
| 问题总览 | 100 | 100 | — | — |
| 可靠性概览 | 100 | 100 | — | — |
| 性能分析 (19图) | 100 | — | — | — |
| 故障统计 (2图) | 100 | 100 | — | — |
| 控制性能 | 100 | 100 | — | — |
| 单问题页 (5图) | 100 | — | — | 100 |
| 静态台页 (4图) | 100 | 100 | 100 | — |
起点 84 → 终点 100。逐项修的是真问题, 不是放宽标准:
| 扣分项 | 实测 | 修法 |
|---|---|---|
| 点击目标 | 57/64 <24px | 表内/正文台号链接改 inline-flex 小片, min-height 24px min-width 34px |
| 间距栅格 | 115 处非偶数 | 全部落偶数 (9→8, 5→6, 3→4, 11→12, 13→14), 卡片间距内联值改类 .mb |
| 字号阶梯 | 8~10 档 | 收敛到 6 档: 10.5 眉标/表头 · 11.5 次要 · 12.5 正文表格 · 13.5 页签 · 17 标题 · 23 KPI (图内刻度 9.5→10) |
| 行长 | 1 段超舒适区 | 正文 max-width:44em (中文 ≈44 字/行) |
| 图表 | 季节图图例重叠 | >2 系列的图例移到图下 HTML 行 (色条+名), SVG 内不再挤; 季节图补单位"条/月"+轴标+参考级图注 |
| 图表 | 台页图无标题识别 | 台页图容器 .fig h4 → 全站统一 .card h3 (真的不一致, 顺手统一) |
| 对比度 | 色片 3.80/4.36:1 | 浅色态语义色加深至 AA: ok #2F7A44→#1F6234 · warn #B0620F→#8A4A08 · bad #B3352B→#98281F · info #3D5080→#2F4068 · unknown→#54606D |
审计器自身也修了两个 bug (否则结论是假的)
- 行长按拉丁 0.5em/字算 → 中文每字约 1em, 原判据对中文页面系统性误判 → 改按 CJK 占比加权。
- 对比度解析不认
color(srgb r g b / a)且不做透明合成 → 把 9% 色片底当成近黑, 报出 2.65:1 假失败 → 改为格式自适应 + 逐层 alpha 合成到不透明底。修正后才暴露出真实的 3.80/4.36 失败。
边界
- 审计器覆盖可测项 (排版/间距/版面/对比度/图表基本卫生), 不覆盖主观美学与信息层级合理性;
- 图表项检查刻度字号/图例重叠/单位存在, 不检查图表选型是否恰当 (那属分析方法而非界面);
- 100 分 = 九项机器判据全过, 不等同于"通过双模型外审" (外审须用户批准后走 report-ship)。