写给大家看的设计书：用四大原则看懂 UI 设计

《写给大家看的设计书》最有价值的地方，是把“好看”拆成四个可练习的原则：对比、重复、对齐、亲密性（CRAP）。我想用 UI 设计的语境重新梳理一遍这四个原则，并从“重复”的角度把它们串起来。

1. 对比：让层级说话

对比不是“越强越好”，而是帮助用户立刻分清层级。标题与正文的字号差异、主按钮与次按钮的色彩区别、背景与文字的明度差距，都是 UI 里最直观的对比工具。没有对比，所有信息都会被拉平成一张“同样重要”的海报，用户就会迷失。

在 UI 里怎么用：

• 重要信息用更大的字号或更高的对比度（但别让所有元素都强对比）。
• 交互控件与非交互信息用明确的颜色或形态区分。

2. 重复：把局部好看变成整体可信

重复不是机械复制，而是让系统有秩序、让人一眼识别规则的方式。按钮样式统一、间距规律、色彩层级一致，这些重复构成了“可以预测”的体验。当用户能预测，就会更专注于内容和任务。

在 UI 里，重复最直接的表现就是组件系统：同类按钮、同类卡片、同类状态的视觉风格一致。它不是为了省事，而是为了“把注意力从外观拉回到任务”。

3. 对齐：让视线有路径

对齐的本质是“视觉关系的证据”。当元素被对齐，用户会感到它们有关联；当它们随意摆放，用户就会怀疑逻辑是否成立。UI 里最常见的对齐问题是：模块内部对齐了，但模块之间没有对齐，导致整体看起来松散。

在 UI 里怎么用：

• 让所有卡片、标题、列表都遵循同一条基线或网格。
• 文本行距统一后，再对齐图标、按钮的视觉中心。

4. 亲密性：让信息自然成组

亲密性不是“靠得越近越好”，而是让有关联的内容靠近，让无关内容保持距离。它是把信息组织成“可理解的块”的手段。很多 UI 看起来乱，就是因为亲密性没做好：相关信息分散，不相关元素挤在一起。

在 UI 里怎么用：

• 标题、摘要、操作按钮属于一个任务，就应该形成一个视觉组。
• 不同模块之间用足够的间距拉开，减少误判。

如何用四大原则把页面做得更干净

• 先用亲密性分组：先把信息块组织清楚，再做排版。
• 用对齐建立秩序：建立网格，让元素有一致的落点。
• 靠重复建立系统：把最常出现的元素统一成组件和 token。
• 用对比做强调：最后再决定哪些信息要跳出来。

重复不是限制，而是让差异更有力量

当页面里有清晰的重复，任何一点变化都会变得更有意义。你可以更大胆地使用强对比的色彩、更大的字号、更显眼的动效，因为它们不再是“乱”，而是“被秩序托住的强调”。

设计看起来“高级”的那一刻，往往不是因为加了更多东西，而是因为你把重复做对了。