ux-aesthetics-audit

视觉美学审查技能

此技能的工作方式（请先阅读）

这是一项评估型技能——它审查现有作品，不负责生成内容。它会自动运行，旨在由生成型技能作为验证步骤调用。它是代码库的视觉质量支柱：生成 UI 的技能（pricing、login-signup、dashboard、onboarding、组件技能）会将工作交给它，以确认作品没有变得杂乱或破坏层级结构。

它负责视觉构图。为避免重复，它会有意将以下两项交由其他技能处理：

• 色彩对比度，以及任何无障碍问题（键盘、屏幕阅读器、替代文本）→ 无障碍审查。此技能评判的是视觉对比度、强调和协调性，而非 WCAG 比率。
• 可用性、流程和交互逻辑 → 启发式审查。此技能评判的是作品看起来如何，而非运作方式。

范围纪律。 直接调用时（用户指定了此审查），只审查这一项关注点——不要纳入其他关联审查。只有当编排器（ux-design-review）或生成型技能依据 docs/orchestration-policy.md 调用它时，它才会与其他视角一同运行；此时它属于Tier B — 可选（如果设计系统已定义视觉协调性，则不执行）。明确指定的范围始终优先。

---

此技能与默认行为的区别

默认情况下，视觉反馈往往含糊且主观——“让它更简洁”“增加一些间距”“看起来有点杂乱”——既没有原则，也没有严重程度，更没有修复方案。此技能要求：

1. 每项发现都指出被违反的原则（层级、强调、邻近性等）。
2. 根据问题是否影响浏览和理解，还是仅影响润色来评定严重程度。
3. 提供具体的修复方案，而非泛泛而谈。
4. 明确检查是否过度设计——这是生成器最需要发现的问题，也最容易由“更多最佳实践”导致。

它不是品味审查：应标记会损害浏览、理解或感知质量的原则违规，而非个人风格偏好。

---

评估框架——检查内容及违规表现

逐项检查，并标明原则、严重程度和修复方案。

1. 视觉层级与视线流动

用户应当有一个明确的视觉起点，并沿着内容获得清晰的浏览路径（通过大小、字重、颜色、间距和位置引导）。层级通过动势、对比和比例来实现。

出现以下情况时应标记： 没有明显的视线落点；主要操作不是最突出的元素；所有元素的视觉权重都相同；阅读顺序与布局相冲突。

• ❌ 三张卡片、三个“主要”按钮、一张大幅主视觉图和一条横幅同时争抢注意力——用户不知道该看哪里。
• ✅ 一个占主导地位的焦点（主要操作／关键信息）；其他内容都退居其次。

2. 强调与对比

强调让一个元素成为焦点（冯·雷斯托夫效应）。对比是元素之间的差异——力求至少有两个维度的对比（大小＋颜色、形状＋位置），并用中性元素搭配醒目的强调色，让视线有所停留。

出现以下情况时应标记： 所有内容都被强调（结果就是没有重点）；只有一个维度的对比且不明显；高饱和度颜色无处不在，缺少中性色来缓和视觉张力（“旺卡巧克力工厂”配色）。

• ❌ 每个部分都使用明亮的强调色 → 视觉噪声，没有焦点。
• ✅ 整体以中性色表面为主，只为关键操作保留一种强调色。

3. 间距与留白

留白是呼吸空间，不是浪费。被动 留白用于分隔组内元素；主动 留白则有意突出某个元素。你不会注意到被动留白，“直到它少得不够用”。

标记以下情况： 空间拥挤，内容紧贴边缘；相似元素之间的间距不均或不一致；或者 反过来——空白过多，导致内容显得彼此脱节、漫无目的。

• ❌ 表单字段和标签挤在一起，没有呼吸空间 → 让人感到紧张，难以浏览。
• ✅ 间距宽裕且一致，将相关项目编组，并为视觉焦点留出空间。

4. 对齐与网格

元素应沿共同轴线排列，或遵循共享网格。对齐能营造结构清晰、专业、平和的观感。

标记以下情况： 边缘参差不齐，元素偏离网格，边距或槽宽不一致，标题未与列结构对齐。

• ❌ 标签左对齐，输入框居中，按钮偏离轴线。
• ✅ 使用一套一致的对齐规则；只在有意为之时打破规则。

5. 分组与邻近

相关项目彼此靠近；不相关项目彼此分开（格式塔邻近原则）。相似性（共享的形状、尺寸或颜色）能让重要性相同的项目形成整体。

标记以下情况： 相关项目相距甚远，或被边框隔开，而不相关项目却挤在一起；重要性相同的项目（例如一排卡片）样式不一致。

• ❌ 字段的辅助文本离下一个字段比离自身更近。
• ✅ 用间距体现分组；一排卡片采用一致的样式。

6. 一致性与重复

重复使用元素（颜色、形状、字体、间距）能营造统一感和易于理解的节奏。颜色系统应经过审慎设计——用一种蓝色，而不是三种近似的蓝色。

标记以下情况： 同一组件在屏幕不同位置样式各异；近似重复的颜色、圆角或阴影本应统一为一个设计令牌；重要性相同的按钮看起来却不一样。

• ❌ 三种略有差异的灰色和两种按钮圆角，毫无缘由。
• ✅ 使用一小组一致的样式，并反复应用。

7. 字体层级

通过字号、字重、样式、颜色、大小写来构建层级——但这些手段最多使用约 3 种，标题层级保持在 2–3 级，正文文本设为 ≥16px。文字颜色应谨慎使用。

标记以下情况： 标题同时使用超大字号 + 粗体 + 彩色 + 全大写 + 斜体；标题层级超过约 3 级；正文过小；太多文字使用颜色。

• ❌ 标题又超大、又粗体、又红色、还全大写 → 杂乱刺眼，像在喊叫。
• ✅ 仅用字号 + 字重即可清晰区分层级；颜色只用于一种强调色。

8. 深度与层级

阴影表示高度，并吸引视线关注浮起的表面（卡片、模态框、FAB）。统一的光照方向和明确的高度层级，能让深度关系清晰易读。

标记以下情况： 同一屏幕上的阴影方向各异；每个元素都有阴影（导致高度失去意义）；卡片及其内部按钮/图标都叠加了阴影。

• ❌ 卡片有阴影，按钮有阴影，图标也有阴影 → 视觉浑浊，没有真正的层级。
• ✅ 每个表面只设一个高度层级；所有阴影的光照方向一致。

过度设计检查（贯穿全局）。 完成八项检查后，退一步审视：是否有多个互相争夺注意力的焦点？强调色是否超过几种？是否叠加了阴影？字体样式是否超过 3 种？是否存在与任务无关的装饰元素？如果屏幕显得繁杂，请指出哪些原则被过度应用——这是信号生成器所依赖的具体信号。

---

严重程度评级

严重程度	含义
Critical	层级崩塌——没有明显的焦点／主要操作不够突出，或杂乱程度严重到用户无法判断重点。视觉设计未能发挥作用。
Major	重点相互争夺、组件样式不一致、间距局促或不均、>3 种字体样式、阴影冲突／叠加——减慢浏览速度并损害感知质量。
Minor	润饰问题——比例略有偏差、存在一处小的不一致，或某个元素对比度微妙，容易被误认为是错误。

根据对浏览、理解和感知质量的影响评级，而不是看修复方案有多主观。注意美感－易用性效应：精致的外观能让用户更宽容地接受轻微的易用性问题，但绝不能以“看起来不错”为由，纵容层级混乱。

---

审查输出格式

## Visual Aesthetics Audit — [Screen / Component]
Context: [platform · primary task / focal action, if known]

### Critical
- [Issue] — what's wrong → fix. (Principle: …)
### Major
- …
### Minor
- …
### Working well ✓
- …

**Overdesign verdict:** [clean / borderline / overdesigned] — the 1–3 over-applied principles to pull back.
**Top 3 priorities:** the highest-impact fixes.

结尾给出过度设计的判断和按优先级排列的前 3 项——调用该生成器时会据此采取行动。

---

如何做好审查

1. 明确背景——平台以及屏幕的主要任务／焦点操作。只有明确最重要的内容是什么，才能判断层级。
2. 服务于任务，而非装饰。 每个元素都应有与其视觉权重相匹配的价值；指出那些会与内容争抢注意力的装饰。
3. 不要以个人品味评判。 指出会妨碍浏览、理解或质量的原则性问题，而不是标记你个人偏好的不同风格。
4. 明确进行过度设计检查——这是价值最高的输出，也是生成器调用此技能的原因。
5. 将对比度比例／无障碍问题交由无障碍审查处理，将易用性／流程问题交由启发式审查处理；不要在此重复分析。

---

常见的应做与不应做

❌ 不应做	✅ 应做
“让界面更简洁／不那么繁杂”	指出过度应用的原则 + 具体修复方案
把每个小问题都视为同等重要	按对层级／浏览的影响评级；指出优先级最高的 3 项
让所有内容都突出	只保留一个焦点；其他内容都弱化
只使用一种较弱的对比维度	使用多个对比要点 + 一个中性锚点
到处使用强调色	以中性色为主；强调色留给关键操作
在标题上叠加大号、粗体、彩色和大写	≤3 种字体样式；设置 2–3 级标题；正文字号 ≥16px
卡片、卡片内的按钮和图标都加阴影	每个表面只使用一个高度层级；光照方向保持一致
重新分析 WCAG 对比度或键盘问题	交由无障碍审查处理
指出主观的风格偏好	只指出会给用户带来影响的原则性问题

---

来源课程（Uxcel）

• 13 Core Visual Design Principles
• Visual Design Analysis
• Positive & Negative Space in Design
• Contrast in Design Composition
• Typographic Hierarchy
• Elevation & Shadows in Design Systems
• Establishing Relationships in Design Composition