# 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 (否则结论是假的) 1. **行长按拉丁 0.5em/字算** → 中文每字约 1em, 原判据对中文页面系统性误判 → 改按 CJK 占比加权。 2. **对比度解析不认 `color(srgb r g b / a)`** 且不做透明合成 → 把 9% 色片底当成近黑, 报出 2.65:1 假失败 → 改为格式自适应 + 逐层 alpha 合成到不透明底。修正后才暴露出真实的 3.80/4.36 失败。 ## 边界 - 审计器覆盖可测项 (排版/间距/版面/对比度/图表基本卫生), **不覆盖**主观美学与信息层级合理性; - 图表项检查刻度字号/图例重叠/单位存在, **不检查**图表选型是否恰当 (那属分析方法而非界面); - 100 分 = 九项机器判据全过, 不等同于"通过双模型外审" (外审须用户批准后走 report-ship)。