# 设计系统「视觉设计质量」维度尺子 — 2026-06-12

> **性质**：design-review 第三轴尺子（visual-quality / design-critique），内嵌 `skills/design-walkthrough` F1 走查执行器。可复用尺子 + 走查 check 清单。
> **方法**：每条维度落成**可测判定句**（判定问题 + 通过/违例的具体信号），不写"保持层级清晰"这种不可证伪病句；写不出可测判定的标记为「待细化」不滥竽充数。每条外锚成熟理论/DS（Tufte / Gestalt / Material / F-Z pattern / progressive disclosure / 排版层级）。区分「可机检」（喂未来 gate）vs「需 AI/人走查」，呼应执行优先原则。
> **缘起**：mockup design-review 原本只有两条轴——① 系统一致性（D1-D15，外锚 Ant/Element/Polaris/Material/Carbon，见 [`consistency-dimensions-audit-2026-06-12.md`](./retrospection/consistency-dimensions-audit-2026-06-12.md)），② 既有 6-section F1 走查（PRD 覆盖 / 规则合规 / 反模式）。两轴都查"对不对、一不一致"，**没有一条轴查"好不好看、senior 设计师眼里站不站得住"**。已反应式撞到 3 个盲区：字段 parity（→ M52.2）、控件同源 inventory（→ M52.3）、信息密度+强调预算+视觉权重（→ M52.4，源自并行 session BM-1047 V3 Case1）。本尺子把"视觉设计质量"系统化成第三轴，防继续逐个撞。

> ⚠️ **与 M52.4 的关系（勿分叉）**：B3 强调预算 + B4 视觉权重 **不是本尺子新建**——它们的真源是 `mockup-conventions.md` **§M52.4** + `design-walkthrough` **§5.6**（BM-1047 V3 Case1 实证）。本尺子**认领并体系化**它们为第三轴的两条维度，沿用 M52.4 措辞，不另造平行术语。B1/B2/B5/B6/B7 才是本尺子补的新维度。

---

## 第一节 · 7 维视觉质量尺子（可测判定）

| 维度 | 走查判定问题（可测） | 通过 ✅ / 违例 ❌ 信号 | 外锚 | 可机检? | 优先级 |
|---|---|---|---|---|---|
| **B1 视觉层级** | 一屏内能否在 ≤3 个量级上区分 primary / secondary / tertiary？相邻层级字号或字重对比是否达可感知阈值？ | ✅ 主标题与正文字号比 ≥1.25×（type scale 一档以上）且层级数 ≤3；❌ 全屏文字字号差 <1.25× 致层级"糊"，或同屏 ≥4 种竞争性强调（粗/大/彩混用无主次） | 排版层级（modular type scale 1.25/1.333）；Material type scale | **半机检**：字号/字重可提层级直方图，"是否分明"需 AI 判读 | High |
| **B2 信息密度** | 屏内非数据像素（边框/底纹/分隔线/装饰）是否超过传达所需？密度档是否与场景匹配（监控台 compact / 营销 comfortable）？ | ✅ 每元素能答"承载什么信息"，无纯装饰重边框/底纹；密度档单屏统一；❌ Tufte 式 chartjunk（3D 阴影/冗余网格/每行重描边），或同屏混 compact+comfortable 行高 | Tufte data-ink ratio；Material density 三档 | **半机检**：行高/padding 档位、分隔线密度可量；"装饰 vs 信息"需 AI | High |
| **B3 强调预算**（=§M52.4） | 每张卡是否超"响亮额度"：≤1 语义色状态行 + ≤2 灰 hint + 1 主 CTA？评审每新增诉求是否伴随合并/降级？ | ✅ 单卡 ≤1 语义色行、≤2 灰 hint、恰 1 主 CTA；❌ 单卡彩色状态行 ≥2、灰 hint ≥3、或 ≥2 同级实心按钮抢 CTA | emphasis budget；Material one-primary-action；**§M52.4**（源 BM-1047 V3 Case1） | **可机检**：数语义色行/灰 hint/`type=primary` 按钮数 | **High（先上 gate）** |
| **B4 视觉权重平衡**（=§M52.4） | 横向（左右栏/各区块）视觉重量是否失衡：同 lane 兄弟卡信息行数与彩色元素数是否偏离 lane 中位数？ | ✅ 兄弟卡行数/彩元素 ≈ lane 中位数(±1)，左右栏对称或有理由的非对称；❌ 一卡 9行/绿2/灰4 vs 兄弟 8/1/2（BM-1047 实证），或一侧明显压垮无理由 | 视觉重量/balance；**§M52.4** 横向对比处方 | **可机检**：同 lane 算中位数 + 离群报警 | **High（先上 gate）** |
| **B5 留白节奏 + 分组** | 留白是否在"表达分组"（组内紧/组间松，proximity）？同级间距是否走统一节奏（4/8pt grid）？ | ✅ 组内间距 < 组间间距，同级间距取自同一 spacing token；❌ 组内组间间距相同靠分隔线硬撑分组，或同级间距 13/17/22px 非 token 倍数 | Gestalt proximity；8pt/4pt grid | **可机检**：间距 4/8 倍数 + "组内<组间"可数；分组语义需 AI | Medium |
| **B6 可扫描性** | 最高优先级信息（主旨/主 CTA/关键状态）是否落在自然扫描路径起点（F-pattern 左上 / Z-pattern 首落点）？ | ✅ 主 CTA/关键状态在左上或首屏免滚动可见；列表走 F-pattern 左对齐锚点；❌ 主 CTA 沉右下折叠区，关键告警埋第 5 行 | F-pattern / Z-pattern 扫描理论 | **需 AI/人走查**：扫描路径是语义+视觉综合判断 | Medium |
| **B7 渐进披露** | 是否一次性倾倒全部复杂度？高级/低频/破坏性操作是否藏二级（折叠/抽屉/更多）而非首屏平铺？ | ✅ 首屏只暴露高频主路径，低频/高级进折叠/二级，表单分步；❌ 首屏平铺 ≥3 低频高级区块，或破坏性操作与日常同级裸露 | progressive disclosure（Nielsen）；Material expansion panel | **需 AI/人走查**：何为"高级/低频"是产品语义；机器只能查折叠组件存在性 | Medium |

> **待细化候选（本轮不凑数）**：色彩和谐度、动效克制度——目前写不出非主观可测信号，留待有外锚阈值后补。

---

## 第二节 · 维度判定细则 + TVU 语境正反例（视频 SaaS / 监控台 / dashboard）

### B1 视觉层级
判定：截一屏 → 列文字元素字号/字重 → 是否聚成 ≤3 个清晰量级、相邻 ≥1.25×。
- ✅ 频道详情页：频道名 20/600、状态标签 14/500、码率元数据 12/400 灰，三级分明。
- ❌ 监控台所有指标卡标题与数值都 16/600，"在线设备数"和它的标签糊成一团。

### B2 信息密度
判定：逐元素问"承载什么信息" → 数纯装饰像素；确认密度档单屏统一。
- ✅ 设备列表单像素分隔线 + 无底纹行，compact 档全表一致。
- ❌ KPI 卡套双层投影+渐变底+重描边（chartjunk），且 KPI comfortable / 下表 compact 跳档。

### B3 强调预算（=§M52.4，已有实证）
判定：对每卡数「语义色行 / 灰 hint / 主 CTA」三计数超阈即违例；评审轮新增诉求须伴降级。
- ✅ 推流失败卡：1 红"推流中断" + 1 灰"已重试 3 次" + 1"重新推流"主按钮。
- ❌（BM-1047 实证）增生到 2 彩色状态行 + 4 灰 hint + 2 实心按钮抢 CTA → "全是提示≈没有提示"。

### B4 视觉权重平衡（=§M52.4）
判定：同 lane 取每卡信息行数/彩元素数算中位数，离群 >±1 报警。
- ✅ 三状态卡（CPU/带宽/丢包）各 ~4 行 + 1 状态彩点，横向齐平。
- ❌ 四卡里一张塞 9 行 + 2 彩标 + 4 灰 hint（兄弟 8/1/2），视觉"砸"下来。

### B5 留白节奏 + 分组
判定：测组内 vs 组间间距（应组内<组间）；同级间距是否同 spacing token / 4-8 倍数。
- ✅ 推流设置：视频参数组内 8px、与音频参数组间 24px，proximity 成立。
- ❌ 字段间距 8/13/17/8 乱跳，组内组间都 12px，只能靠分隔线硬撑分组。

### B6 可扫描性
判定：标主旨/主 CTA/关键状态位置 → 是否在 F/Z 起点 / 首屏免滚动。
- ✅ 直播控制台左上即"开始直播"主 CTA + 直播状态徽标。
- ❌ "信号丢失"告警埋第 5 行中段灰字；"停止推流"沉右下折叠区。

### B7 渐进披露
判定：数首屏平铺的低频/高级区块；查破坏性操作是否与日常同级裸露。
- ✅ 频道创建 3 步向导，高级转码默认折叠。
- ❌ 单屏平铺基础设置 + RTMP 鉴权 + 转码梯度 + "删除频道"红按钮全裸同级。

---

## 第三节 · 哪些维度可抽成机器 probe（喂未来 gate）

按"能机检就上 gate"执行优先原则：

| Probe | 抽取信号 | 判定 | 成熟度 |
|---|---|---|---|
| **B3+B4（先做）** | 每节点子树：语义色文本行数、灰 hint 行数、`type=primary` 按钮数；同 lane 兄弟节点信息行+彩元素数 | 单卡 ≤1语义色/≤2灰/1CTA；lane 中位数离群 >±1 → FLAG | 阈值已在 §M52.4 定死，可直接脚本化（建议 `scripts/audit-emphasis-budget.mjs`，B3+B4 共用计数器，与 D1-D15 同批）。**注意：与既有 §M52.4 / §5.6 走查层对齐，不另造** |
| B5 间距节奏 | 元素间距集合 | 全 ∈ {4,8,12,16,24,32...} 且区分"组内<组间" | 间距好查；分组语义需 AI |
| B1 层级（半） | 文字字号/字重直方图 | 聚类 ≤3 且相邻 ≥1.25× | 几何可量，是否真分明留 AI |
| B2 密度（半） | 行高/padding 档位数、分隔线密度 | 单屏密度档统一 | 装饰 vs 信息需 AI |
| B6 / B7 | — | — | **不上 gate**：扫描路径与"高级/低频"是产品语义，纯走查 |

> B3/B4 的机检若做，应与 D16 `audit-mockup-binding-fidelity`（绑定保真）并列为视觉质量 gate；违例只 FLAG 不硬 block（视觉质量含主观成分，给 AI/人复核）。

---

## 第四节 · 如何接进 F1 走查（design-walkthrough）

第三轴 7 维作为 F1 走查 report 固定 check 行接入，**复用既有层不另起炉灶**：

- **B3 + B4 已在位**：`design-walkthrough` **§5.6 强调预算 + 视觉权重横向对比（M52.4）** 已是 B3/B4 走查落点——本尺子正式认领，沿用 M52.4 措辞，**不分叉**。
- **新增 `§5.7 视觉设计质量（第三轴 B1/B2/B5/B6/B7）`**：补齐 5 条，每条一行 check，沿用既有 report verdict 表格格式（`✅ / ❌ <assessment>`，行尾标维度号）。
- **执行顺序**：F1 走查跑三轴 = ① 系统一致性（D1/D2/D6/D9/D13，§5.x）→ ② 6-section 既有走查 → ③ 视觉质量（§5.5 M52.3 反馈 inventory + §5.6 M52.4 B3/B4 + 新 §5.7 B1/B2/B5/B6/B7）。