设计四原则 —— "说不出哪不对"的界面，到底哪不对

本课导读

外行看到糟糕的界面只会说"不好看""不够专业"，但说不出为什么。这个单元的第一课就来解决这件事：对比、重复、对齐、亲密——来自 Robin Williams《写给大家看的设计书》的四条原则，是视觉设计词汇表的最小集。学完你会获得一种"再也回不去"的能力：看任何界面都能说出它哪里对、哪里不对、怎么改。审美难教，但诊断可教——这四条就是诊断工具。预计 35 分钟。

为什么先学"说出哪不对"

设计能力有两层：做出好设计和识别坏设计。多数人以为要先练前者，其实顺序反了——你改不好一个自己都看不出毛病的界面。四原则的价值就是把"感觉不对"翻译成"第 3 行的标签离上一个输入框太近、离自己的输入框太远"这种可执行的句子。

四原则的英文首字母凑成 CRAP（Contrast / Repetition / Alignment / Proximity），好记但顺序是凑的。实际诊断时建议按亲密 → 对齐 → 重复 → 对比的顺序过，从信息结构到视觉层级，由里到外。

亲密：物理距离表达逻辑关系

原则：彼此相关的元素靠近，组成一个视觉单元；不相关的元素离远。读者的眼睛会自动把"挨着的"理解为"一伙的"——这不是习惯，是知觉规律（格式塔的接近性）。

最常见的翻车现场是表单：标签（label）到底属于上面的输入框还是下面的？如果标签与两个输入框距离相等，用户每填一行都要猜一次。修法只有一条：组内间距必须明显小于组间间距——标签离自己的输入框 4px，离上一个字段 24px，歧义瞬间消失。

第二个要点：留白是免费的分组工具。新手想分组就画框、加分割线，页面很快长满线条。老手先用留白分组——留白够用就不画框，框和线是留白不够用时才请出的重武器。

对齐：每个元素都该有一条隐形的线

原则：页面上任何元素都不该随手一放——它的边缘应该与页面上另一些元素的边缘落在同一条隐形直线上。对齐线越少、越强，页面越显秩序；到处都是各自的对齐线，就是"散"的来源。

两条实战纪律：

• 新手爱居中，但居中是最弱的对齐。居中对齐的边缘是参差的，产生不了强对齐线，显得温吞、业余。它只该用在刻意庄重的场合（证书、请柬、着陆页大标题）。界面正文与表单，左对齐是默认答案——一条笔直的左边线是页面最有力的骨架
• 对齐要跨区块。不只是段落内部对齐，页头的 Logo、正文的标题、底部的按钮，能落在同一条线上就落在同一条线上。学径的课程页你现在就能验证：正文、标题、导航共享同一条左边线，通栏宽度约定保证每一屏的内容都挂在同一套网格上

重复：一致性就是学习成本

原则：同类元素长得一样，某种视觉特征（颜色、字重、圆角、图标风格）在全站反复出现。重复带来两样东西：统一感（这些页面是一家的）和可预测性（用户学一次，处处适用）。

反过来说，每一处"不一致"都在向用户收学费：这个页面的按钮是方角、那个页面是圆角，用户就要重新确认"这还能点吗"。学径的百科风改版是一次全站范围的重复原则执行——衬线标题、方角卡片、同一套配色跑遍所有页面，"百科感"正是从这种彻底的重复里长出来的。

红线一条：重复不等于单调。重复的是规则（比如"所有强调都用同一个色"），不是要求所有元素一模一样——在统一的规则里做对比，才是下一条原则的事。

对比：要么相同，要么截然不同

原则：两个元素如果不同，就让它们明显不同。大小、字重、颜色、形状——用哪个维度都行，但幅度要够。最糟的是"有点不同"：标题 18px、正文 16px，读者说不清是设计还是手滑。

对比是层级的引擎。一个页面的信息有主次，主次靠对比表达：

手段	弱对比（无效）	强对比（有效）
字号	18px vs 16px	28px vs 16px
字重	500 vs 400	700 vs 400
颜色	深灰 vs 黑	品牌色 vs 灰
尺寸	主按钮略大	主按钮实心、次按钮只有边框

新手最大的病不是对比过度，是不敢对比——什么都想温和，结果什么层级都立不起来。表现层那句老话在这里有了操作版：什么都强调等于什么都没强调，而"都只强调一点点"同样等于没强调。

案例解剖：拿学径自己开刀

四原则最好的练法是解剖真实页面。以学径课程页为例：

• 亲密：课程卡内部，标题与元信息（课型、时长）紧贴成一个单元；卡与卡之间留白明显更大——组内 < 组间
• 对齐：导航、标题、正文共享左边线；通栏网格让每一屏都挂在同一套竖线上
• 重复：衬线标题 + 无衬线正文 + 方角 + 同一套配色，每一页都在重复同一套规则
• 对比：大号衬线标题与小号无衬线正文，字族、字号、字重三个维度同时拉开——这是"截然不同"的教科书做法

下次你觉得某个页面"不对劲"，按这个顺序过一遍，多数时候 30 秒内就能定位病灶。

✍️ 练习

练习 1：诊断一张报名表单

某活动报名页：居中的大标题下面，姓名/邮箱/公司/职位四个字段等距排列，每个标签和上下输入框距离相同；提交按钮和"取消"按钮并排、同样大小、同样颜色；页面左侧有一段活动介绍是左对齐，右侧表单整体居中。用四原则各开一条诊断（共四条），并给出修法。

✅ 参考答案

• 亲密：标签与上下输入框等距 → 每行都要猜标签归属。修法：标签贴近自己的输入框（如 4px），字段之间拉开（如 24px）
• 对齐：左侧介绍左对齐、右侧表单居中 → 两套对齐系统打架，无统一骨架。修法：表单也左对齐，与介绍共享或平行一条对齐线
• 重复：（本例信息不足，合理答案示例）确认字段样式、按钮圆角、字体全页一致即可
• 对比：提交与取消同大小同颜色 → 主次不分，用户要读字才知道点哪个。修法：提交用实心品牌色，取消降为描边或纯文字链接——一屏只有一个最强对比

练习 2：四原则找茬

打开一个你每天都用的 App（微信、支付宝、你公司的产品都行），任选一屏：四条原则各找一个执行得好的例证和一个违例（找不到违例就说明为什么它做得好）。写进笔记——这个练习做过五次之后，"设计师之眼"就长出来了。

✅ 参考答案

开放题，自查三点：① 例证是否说出了具体元素 + 具体维度（"设置页每个分组内条目紧贴、组间有大留白"合格；"整体很和谐"不合格）；② 违例是否给出了修法；③ 是否发现了"违例其实是刻意设计"的情况（比如刻意打破对齐制造视觉焦点）——能识别"故意破格"说明你已经在用规则思考，而不是背规则。

📝 随堂测验

随堂测验0 / 5 题正确

1. 表单里标签与上下两个输入框距离相等，违反的是哪条原则？为什么？

A对比——标签不够醒目B重复——标签样式不统一C亲密——物理距离没有表达逻辑归属，用户每行都要猜标签属于谁；修法是组内间距明显小于组间间距D对齐——标签没有左对齐

2. 为什么说'居中是最弱的对齐'？

A居中对齐的两侧边缘参差，产生不了强对齐线；界面正文与表单默认左对齐，居中留给刻意庄重的场合B居中在技术上难以实现C居中已经过时了，是旧审美D居中只能用于英文排版

3. '标题 18px、正文 16px'的问题在于？

A标题应该用 20px，这是行业标准B违反对比原则——要么相同要么截然不同，'有点不同'既建立不了层级，还像是手滑C字号太小，可读性差D没有问题，微妙的差异更高级

4. '重复'原则带来的两样东西是？

A省设计工时和省开发工时B统一感（这些页面是一家的）和可预测性（用户学一次处处适用）——每处不一致都在向用户收学费C品牌曝光和视觉冲击D单调和乏味，所以要谨慎使用

5. 诊断一个页面时，推荐的四原则检查顺序是？

A按 CRAP 缩写顺序：对比→重复→对齐→亲密B先看对比，因为它最显眼C顺序随意，四条独立D亲密→对齐→重复→对比：先理信息结构，再立视觉层级，由里到外；对比预算最后花在刀刃上

本课小结

• 四原则是诊断工具：把"感觉不对"翻译成可执行的修改句
• 亲密：组内间距 < 组间间距；留白是免费的分组工具，画框是重武器
• 对齐：每个元素都要有隐形的线；左对齐是界面默认，居中最弱
• 重复：一致性就是学习成本，重复规则而非重复元素
• 对比：要么相同要么截然不同；一屏只有一个最强对比；不敢对比是新手最大的病
• 诊断顺序：亲密 → 对齐 → 重复 → 对比

下一课把四原则里最大的一块——文字——单独拎出来：排版与间距系统。界面的 90% 是文字，字号为什么不能拍脑袋、8pt 网格到底在网住什么，下一课见。