前端设计基础：对比、重复、对齐与亲密性
#前端设计#设计原则#CRAP#UI 设计
2026年 7月 11日
颜色、字体和间距只是材料。真正让页面形成整体的，是对比、重复、对齐和亲密性这四条基础原则，也常被简称为 CRAP。
对比：让差异足够明确
如果两个元素承担不同角色，就应该让它们明显不同。主标题与正文、主要按钮与次要按钮、正常信息与警告信息都需要清晰区分。
最常见的问题不是没有对比，而是差异太小：22px 和 24px 的标题、两个几乎一样重的按钮，只会制造犹豫。可以通过大小、字重、颜色、形状和空间建立更明确的主次。
重复：让规则再次出现
相同角色应该重复相同的视觉语言。按钮圆角、卡片边框、标题样式、图标尺寸和间距节奏都应该保持一致。
重复会降低学习成本，也会形成品牌识别。它不是让所有东西完全相同，而是让相同含义使用相同表达。
对齐：建立看不见的秩序
页面中的元素应该与其他元素共享边线或基线。避免每个区块各自选择不同的左边距，也避免在同一个内容块中随意混用左对齐和居中。
当标题、正文、图片和按钮落在共同网格上，即使没有明显分隔线，用户也能感到结构稳定。
亲密性：用距离表达关系
相关内容应该放在一起，不相关内容应该分开。标签要靠近它所描述的输入框，卡片标题要靠近正文，同一组内容的内部间距要小于组与组之间的间距。
亲密性可以把十几个散乱元素整理成三四个容易理解的内容单元。
快速自查
- 页面第一眼最重要的内容是否足够突出？
- 相同组件是否使用一致样式？
- 元素是否落在共享边线和基线上？
- 组间距是否明显大于组内距？
- 是否存在孤立、无归属或似是而非的元素？
这四条原则简单，却足以解释大量“功能没问题，但页面总觉得不对”的情况。
更多真实界面风格与组件参考，可以访问 StyleKit。