refactoring-ui

重构 UI

视觉设计不是天赋，而是一小组只需决定一次的系统，以及一些用于建立层次感的技巧。这项技能涵盖的就是这些系统和技巧。

业余风格 UI 最大的成因，就是随意挑选数值——这里用 17px，那里用 #3B82F6，悬停状态用 lighten(5%)。始终基于一套刻度进行设计。

---

这些系统——直接使用，不要重新推导

从这些列表中选择。不要发明不在其中的数值。

间距和尺寸

基数为 16px，由它的因数和倍数组成：

4  8  12  16  24  32  48  64  96  128  192  256  384  512  640  768

较小值之间间隔紧凑，数值越大间隔越宽。任意两个相邻数值的差距不得小于约 25%——这样才能让选择一目了然。线性的“4 的倍数”刻度行不通：它无法帮你在 120px 和 124px 之间做出选择。

将其用于外边距、内边距、宽度、高度、图标尺寸、边框宽度——所有空间尺寸。也固定一小组不透明度值（例如 .05 .1 .2 .4 .6 .8），用于禁用状态、叠加层和悬停色调，而不是每次都凭感觉拖动滑块。逻辑与其他刻度相同：决定一次，随处复用。

字号刻度

12  14  16  18  20  24  30  36  48  60  72

不要使用由比例（4:5、2:3、黄金比例）构建的模块化刻度。这些比例会产生小数像素值，在不同浏览器中的取整结果不一致，而且不够密集，无法满足界面需求——精心挑选、以视觉感受为依据的数值更胜一筹。

单位：只能使用 px 或 rem。绝不要用 em。 em 相对于当前字号，因此，1.25em 父元素中的 .875em 会计算为 17.5px——这个数值不在你的刻度中。于是这套刻度便悄然失效。

字重

两种字重就够了：

• 400 或 500——正文和大多数 UI 文本
• 600 或 700——所有强调内容

UI 中不得使用低于 400 的字重。要降低强调程度，请使用更浅的颜色或更小的字号——绝不要使用更轻的字重。

颜色

你需要的颜色远多于五色调色板生成器提供的数量。

• 灰色：8–10 个色阶。 UI 几乎全部由灰色构成——文本、背景、面板、边框、表单控件。三四个色阶总是不够用。从很深的灰色开始，而不是纯黑（纯黑看起来不自然）。
• 主色：5–10 个色阶，一个或两个主色即可。
• 强调色：每种 5–10 个色阶——危险操作用红色、警告用黄色、积极状态用绿色，再加上产品需要区分的其他内容（图表系列、日历事件、标签）。复杂 UI 使用十种颜色、每种 5–10 个色阶很正常。

按从 100（最浅）到 900（最深）命名，基准色阶为 500。

按此顺序构建色阶： 先选 500（对于主色或强调色，应选择适合作为按钮背景的色阶）。然后确定两端——900 通常是文本颜色，100 是背景色调；提示组件会同时用到这两者，因此先设计一个，再从中确定这两个值。接着选择 700 和 300，使它们与相邻色阶之间达到完美平衡，然后用同样的方法补齐 800 600 400 200。

使用 HSL 而非十六进制表示颜色。 hsl(220, 95%, 34%) 和 hsl(220, 65%, 61%) 的关联一目了然；#03369E 和 #507DD7 则不是。

绝不要在运行时生成色阶，例如使用 lighten() / darken()。这样只会让你得到 35 种略有差异的蓝色。

阴影——五个层级

0 1px 3px  hsla(0,0%,0%,.2)   /* barely raised — buttons */
0 4px 6px  hsla(0,0%,0%,.2)   /* dropdowns */
0 5px 15px hsla(0,0%,0%,.2)
0 10px 24px hsla(0,0%,0%,.2)
0 15px 35px hsla(0,0%,0%,.2)  /* modals */

判断时要问“它在 Z 轴上的哪个位置？”，而不是“什么阴影看起来好看？”。越靠近用户，越能吸引注意力。在 :active 状态下缩小按钮的阴影，会让它显得像被按下；而在列表项被拿起并拖动以重新排序时增大其阴影，效果恰恰相反——它会让列表项显得“现在位于同级项目之上”，同时也能直接充当拖动提示。

这五个层级是默认选择，适用于所有场景。references/techniques.md 提供了同一刻度的精细双层版本——大致一致，但具体数值不同（最高一级更重）。设计中阴影较为突出时使用该版本；阴影不突出时使用这里的版本。不要在同一个项目中混用两者。

行高和行长

行高与字号成反比，与行宽成正比：

• 小字号文本／宽列 → 1.5 到 2
• 大号标题 → 1 即可

行长：45–75 个字符，即 max-width: 20em–35em。即使周围的容器更宽，这一规则 仍适用于段落——同一内容区域中宽窄不一的布局看起来更精致，而不是更糟。

（em 在这里是正确的——测量值应随其包裹的文本缩放。“永远不用 em”这条规则 适用于字号阶梯，因为 em 会在嵌套中层层叠加。不要“修正”这一点。）

圆角半径

选定一种并保持一致。小圆角＝中性。大圆角＝活泼。不用圆角＝严肃／正式。在同一界面中混用直角和圆角，效果总是更差。

---

流程

1. 从功能开始，而不是从布局开始。 不要设计“整个应用”——在了解产品包含什么之前， 你无法决定用顶部导航还是侧边栏。先设计一个真实的功能（搜索表单、消息编辑框），再让整体框架 逐步成形。

2. 细节留到后面。 初期先忽略字体、阴影和图标。先用灰度工作——这样层级就必须通过间距、 对比度和大小来体现，而不是依赖颜色。等布局奏效后再添加颜色。

3. 不要在低保真阶段投入过多。 草图、线框图和模型都是一次性的——没人能使用应用的静态图片。 它们用于探索想法；做出决定后就放下它们，开始构建真正的产品。

4. 设计最小可用版本，然后动手实现。 采用短周期的设计→编码流程。不要暗示尚未准备好实现的功能—— 比如一个带有附件区域、但暂时无法交付的评论框，会阻碍整个功能。锦上添花的功能可以之后再设计。

5. 通过排除来选择。 从一个范围中挑选数值时，先猜一个你认为合适的值，再与两侧相邻的值比较。 其中两个会明显不合适。如果最外侧的选项胜出，就以它为新的中间值，重新进行比较。

6. 先留出过多的留白，再逐步减少。 一直增加空间，直到内容不再显得糟糕，这只能得到最低限度的留白。 从宽裕的留白开始再逐步收紧，才能得到合适的量。密集型 UI（仪表盘）也完全合理——但应当是有意识的决定， 而不是默认选择。

7. 缩小画布。 在 1400px 的画板上设计小组件，往往会让布局变得松散，因为有太多空间需要填满。 从约 400px 开始，先设计移动端布局，因为这里的限制是真实存在的——然后再适配大屏，只放宽那些确实 显得局促的部分。实际需要的改动会比你预想的少。

---

层级——最能发挥作用的技巧

屏幕上的所有内容都处于一个金字塔中：主要、次要、三级。当所有内容都争抢注意力时，UI 看起来就像一片噪声。这才是让设计看起来「经过设计」的关键——而不是样式。

大小不是一切。 只依赖字号，会让主要内容大得过头，次要内容又小得过头。用字重和颜色来传达强调，同时让字号保持适度。

文本颜色最多三种：

• 深色——主要内容
• 灰色——次要内容
• 浅灰色——三级内容（脚注、版权信息）

这三种颜色都用于真正的正文大小文本，因此都需要达到 4.5:1 的对比度。「浅灰色」指仍能达到此对比度的最浅色调——大致是 9 级色阶中的中间位置，而不是最浅的一端。浅淡的颜色仅用于禁用状态和大号文本。

通过弱化其他元素来突出重点。 当重要元素无法脱颖而出，且没有什么可以再加到它身上时，就弱化与它争抢注意力的内容。淡化非活动导航项；移除侧边栏的背景色，让主要内容显得更突出。

操作： 按层级而非语义设置样式。

• 主要操作 → 实心、高对比度。通常每页恰好一个。
• 次要操作 → 轮廓样式，或低对比度背景。
• 三级操作 → 设置成链接样式。

破坏性操作 ≠ 大红色按钮。如果「删除」不是页面上的主要操作，就将其设为三级操作——然后在确认对话框中把它设成醒目的红色主要按钮，因为它在对话框中确实是主要操作。

标签是最后的手段。 标签：值 会让每项数据看起来同等重要。大多数数据可以通过格式（$19.99、电子邮件地址）或上下文来识别。如果确实需要标签，就把它融入值中（「库存剩余 12 件」，而不是「库存：12 件」），或将其设为明显的次要内容。例外情况：在用户会查找标签的规格表式页面中，应突出标签。

平衡字重与对比度。 实心图标在视觉上很重，会压过旁边的文本——可以调浅图标颜色来弥补。反过来也成立：当 1px 边框使用柔和颜色时太不明显，但加深颜色后又显得太刺眼，就保留柔和颜色并改为 2px。对比度太低时增加字重；字重过强时降低对比度。

视觉层级 ≠ 文档层级。 语义标记和视觉权重是两个不同的决定。章节标题通常是标签，而不是标题——h1 使用 16px 也没问题；有时内容本身已足以表达意思，因此标题完全可以在视觉上隐藏。

---

硬性规则

偏离这些规则会导致特定且明显的问题。

1. 绝不要在彩色背景上使用灰色文字。 灰色文字配白色背景可行，因为它会降低对比度；灰色文字配彩色背景只会显得脏。降低不透明度的白色看起来褪色且像是被禁用，还会让图案透过字形显现。应手动挑选与背景色相同的颜色，再调整饱和度和亮度。
2. 字号比例绝不要用 em。 使用 px 或 rem。
3. 绝不要在运行时生成色阶。 提前定义好。
4. 绝不要为不该缩放的元素设置百分比宽度。 侧边栏使用固定宽度；主区域使用弹性布局。为元素设置 max-width，只有在屏幕确实更小时才缩小——登录卡片在中等屏幕上不应该比在大屏幕上更宽。
5. 绝不要让元素跨断点按比例缩放。 大元素必须比小元素缩小得更快。例如，14px 移动端正文旁边放置一个 2.5em 的标题，计算结果是 35px——大得离谱；它在移动端应该是 20–24px。同样，按钮缩小时，其内边距也应按比例收紧，而不应跟着字号一起缩放。
6. 组与组之间的间距始终应大于组内间距。 这是解决“哪个标签对应哪个字段”、项目符号列表过于拥挤，以及标题看起来与错误段落相连等问题的方法。间距含糊是功能性错误，不只是难看。
7. 绝不要只用颜色传达信息。 加上图标、形状或文字提示。对于图表，应通过对比度（同一种颜色由浅到深）区分数据系列，而不是通过色相——色盲用户能可靠地辨别明暗，却不太能辨别色相。
8. 最低对比度要求： 普通文字为 4.5:1。3:1 的宽限仅适用于大号文字，WCAG 将其定义为常规字重 24px 或粗体 18.66px——不是 18px。除非文字确实达到这个尺寸，否则一律按 4.5:1 处理。白色文字配彩色背景未达标时，应反过来：在浅色底色上使用深色文字（参见 references/systems.md）。此外，非文字内容也适用 3:1（WCAG 1.4.11）：如果边框是识别控件的唯一依据——例如输入框轮廓、复选框边缘——它就需要与背景达到 3:1 的对比度。仅用于分隔内容的细线则不需要。这是两种不同的令牌，不应混为一谈。
9. 绝不要让图标远离其预期尺寸进行缩放。 一个 16–24px 的图标放大到 48px 会显得笨重且缺乏细节。把它放进彩色圆形中。

---

参考资料

assets/tokens.css — 一套完整且已验证对比度的 CSS 自定义属性，可作为上述内容的起点：包括间距、字号、字重、边框宽度、固定的不透明度比例、包含 9 个色阶的冷灰色阶、包含 9 个色阶的主色、三组强调色、五种阴影层级、一个语义角色层（--surface、--text-primary、--action……），以及一个深色模式代码块，只覆盖这些角色。直接复制后调整色相，无需根据本文重新推导色阶。在组件中引用语义角色，而不是原始色阶——深色模式正是借此生效。两种模式下，每一组文字与表面颜色的对比度都已验证为 ≥4.5:1，每种功能性边框都已验证为 ≥3:1；刻意低于阈值的色阶（禁用状态、装饰性分隔线、仅适用于大号文字的色阶）按标准豁免，并在代码中附有注释。

在相关任务中加载以下资料：

• references/systems.md — 从零构建调色板：选择基础色、保持浅色端与深色端的饱和度、色相旋转、暖色／冷色灰，以及在不让颜色显得难看的前提下达到对比度要求的两种替代方法。
• references/diagnose.md — 症状 → 修复对照表。任务是改进现有 UI 而非构建新 UI 时，务必先加载。
• references/techniques.md — 深度与光照模拟、双层阴影、基线对齐、字间距、突破默认组件形状，以及处理用户上传的图片。