设计自检清单

改完一版页面、准备收手之前，从头到尾对一遍这 8 个维度。不用懂代码，每条都配了能直接看到的正反例。对照着看，就能说出哪里不对、该怎么改，再把那句话抄给 Agent 去执行。它是一份验收单。

8 个设计质量维度

1. 层级与重点（Hierarchy & Emphasis）

核对清单：

• 每个屏幕上，是否有一个明确的主操作 / 主内容？
• 3 秒一瞥，能不能看出什么最重要？
• 次要元素是否被明显压低（更浅的颜色、更小的字号、更细的字重）？
• 视觉层级是否和用户目标一致（用户最需要先做的事，最显眼）？
• 在数据展示里，标签是否次于数值？
• 是否避开了"什么都一样重要"这个陷阱？

常见修法（这些话可以直接抄给 Agent）：

• 加大各级标题之间的字号 / 字重对比
• 降低次要元素的分量（更浅的颜色、更细的字体）
• 主要与次要文字的字号差至少拉到 1.5 倍
• 多用"压低别人"，而不是把主元素做得更吵

2. 间距与布局（Spacing & Layout）

核对清单：

• 留白够不够？（拿不准就再加一点）
• 相关的元素是否被清楚地分到一组？
• 组与组之间的间距，是否明显比组内（1.5 到 2 倍）更大？
• 间距是否遵循一套统一刻度（4px / 8px 为基）？
• 内容宽度是否利于阅读（不要铺满整个屏幕）？
• 有没有"暧昧的间距"，既不像一组、又不像分开？

间距刻度（4px 为基，看看它们到底差多少）：

元素之间留多大空，决定它们看起来多相关：

常见修法：

• 加大卡片 / 容器内部的内边距（多数页面都太紧）
• 加大区块 / 分组之间的间距
• 用 max-width 把内容宽度限制并居中
• 用一套间距刻度，别随手挑数值

3. 排版（Typography）

核对清单：

• 字体家族是否在 3 种或更少？
• 字号刻度是否层级清楚、互相分得开（别 14px、15px、16px 这样堆）？
• 正文每行长度是否受控（45 到 75 个字符）？
• 行高（line-height）是否与字号成比例？
• 全大写文字是否调过字间距？
• 是否用字重（而不只是字号）来建立层级？
• 对齐是否合适（段落左对齐，居中只用于短文字）？

行长（line length）对比，下面是同一段说明：

常见修法：

• 把字号收敛到一套定义好的刻度
• 正文行高提到 1.5 到 1.6
• 给文字容器加 max-width 来限制行长
• 用字重（不只是字号）来制造层级

4. 颜色（Color）

核对清单：

• 配色是否克制、有意图（不是一堆随机颜色）？
• 文字对比是否达标（WCAG AA：正文 4.5:1、大字 3:1）？
• 灰色是否带一点冷暖色调（而非纯中性灰）？
• 去掉颜色还能不能看懂？（色盲用户能理解吗？）
• 语义色是否一致（红=错误、绿=成功……）？
• 每种颜色的深浅档位够不够（主色 8 到 10 档、灰 8 到 10 档）？

一条灰阶（带一点暖调，比纯灰更自然）：

对比度：彩色背景上别用灰字，色相不对会显脏。

语义色用法（同一个意思永远同一个颜色）：

常见修法：

• 给每个色相做出 8 到 10 档完整深浅
• 给灰色加一点冷暖色调
• 提高彩色背景上文字的对比度
• 在靠颜色传达的信息旁，加一个非颜色的指示（图标 / 文字）

5. 深度与立体（Depth & Elevation）

核对清单：

• 阴影是否用得有目的（不是全有、也不是全无）？
• 阴影大小是否对应合理的高度层级？
• 是否有视觉分层（背景、表面、浮起元素三层）？
• 是否用两段式阴影来显得更真实？
• 是否避免了过多边框（改用阴影 / 间距 / 背景色区分）？

定一套 3 到 5 级阴影（由轻到重），统一使用：

常见修法：

• 定义一套 5 级阴影系统并一致使用
• 把边框换成淡阴影或背景色差异
• 给浮动元素（下拉、弹窗、提示）加阴影
• 统一光源方向（光从上方来）

6. 组件模式（Component Patterns）

核对清单：

• 常见 UI 模式是否用对（表单、导航、弹窗）？
• 表单字段是否有标签、有校验？
• 导航是否好找、一致？
• 可交互元素是否有清楚的 hover / focus / active 状态？
• 手机上点击目标是否至少 44×44px？
• 弹窗是否用得恰当（本该是一个页面的内容别塞进弹窗）？

可交互元素要有状态反馈（这是同一个"预约"按钮的三种状态）：

常见修法：

• 给所有可交互元素加 hover / focus 状态
• 能用可见导航就别用汉堡菜单
• 修正表单标签位置（放在字段上方，不要并排）
• 补上合适的错误提示与校验状态

7. 一致性（Consistency）

核对清单：

• 相似的元素是否全程样式一致？
• 间距系统是否一致地应用？
• 图标风格是否一致（要么全描边、要么全实心，同样粗细）？
• 颜色用法是否一致（同一颜色永远是同一含义）？
• 圆角值是否一致？
• 整体是否保持同一种"性格"？

常见修法：

• 盘点所有相似元素，统一它们的样式
• 建立并遵循一套设计 token 系统
• 统一图标风格（描边 vs 实心、粗细、大小）
• 圆角只挑 2 到 3 个值，只用这几个

8. 打磨与收尾（Polish & Finishing）

核对清单：

• 空状态是否设计过（而不是一片空白）？
• 加载状态是否设计过（骨架屏，而非只有一个转圈）？
• 错误状态是否有帮助、有设计？
• 默认元素是否被美化（自定义项目符号、引用样式）？
• 是否用彩色强调边 / 装饰添了点性格？
• 整体感觉"做完了"，还是到处是粗糙的默认样式？

加载状态：骨架屏比单纯转圈更有"做完了"的感觉。

常见修法：

• 空状态配上插图 + 行动按钮（CTA）
• 加载用骨架屏
• 替换浏览器默认样式的元素（复选框、单选框）
• 给卡片、提示框加彩色强调边

打分指南（Review Scoring）

每个维度打 1 到 5 分：

优先级指南：

快速诊断速查表

说不清"哪里不对"时，对照左边那句感受，就能定位到要查哪个维度：

卡住或拿不准分该打几分，就把页面截图发给你的 AI 老师（Agent），问："按这 8 个维度帮我自检这一页，哪几条最该先改？"