四大基本设计原则

序#

作为现代人，每个人都离不开设计。工作报告要做成 PPT，研究成果要排成论文，活动信息要做成海报，甚至一条朋友圈配图、一篇博客文章，都是在回答同一个问题：我怎样把信息清楚、有吸引力地呈现给别人？ 我在今年六月制作我的个人网站时意识到了这个问题，遗憾的是，我接受过的设计教育很少（附庸风雅参观几次艺术馆和画廊自然不算），至此，我决定痛定思痛去补充一些设计知识。

大模型推荐我：去看一看 Robin Patricia Williams 的《写给大家看的设计书》吧。这本书的英文原名更好理解它讲了什么--《The Non-Designer’s Design Book》--非设计师的设计书。

在这本书中，作者将学院派的美学概念简化成一套极为简洁的设计原则：亲密性、对齐、重复与对比。 学习四个概念自然不能取代专业的设计教育，但可以提供另一种视角去审视我们身边的设计。看到一个令人愉悦的设计时，知道它为什么令人愉悦，看到一个设计不好的页面时，也能指出问题所在。

我在我最喜欢的连锁咖啡店 Peet's Coffee 看完了这本书，除了尝尝他们的新豆子，我也会用我学到的四个新原则去观察他们的设计。

设计原则：亲密性 (Proximity)#

想象一下，你走进一个拥挤的房间。如果两个人站得很近，你会下意识地认为他们认识；如果两个人站得很远，你会觉得他们是陌生人。

这就是 亲密性 在现实生活中的映射。

在设计中，亲密性的核心逻辑非常简单：有关系的元素要放近一点，让人一眼看出它们有关；没关系的元素就别挤在一起，用距离把它们区分开。

当我们看到页面上散落着各种信息时，大脑需要消耗额外的能量（认知负荷）去分析：“这个标题是属于上面这段话，还是下面这段话？”、“这个电话号码是属于谁的？”。

亲密性的作用，就是减少这种认知负荷，让读者一眼就能看懂信息的结构。

让我们看一个具体的例子：peet's coffee 的菜单。

当我们第一次走进这家咖啡店，看到这份菜单时，首先可以判断饮品可以分为三类， 左板用「Our Star Drinks / Classical Beverage」再加横线和较大上下留白，把推荐饮品和经典饮品分成两块。 右板用「More Beverage」单独成一块，也有一条横线把标题和列表隔开。

而底部的「+4 升杯」「+5 加浓」「自带杯优惠」远离饮品列表，是在告诉我们：这是一坨“附加选项”，和某一杯饮品都不直接绑定。

你会发现，我们并没有认真读完所有文案，只是凭借这些“离得近”或“被拉开”的元素，就大概看懂了菜单的结构——这就是亲密性在发挥作用。

既然亲密性能帮用户省脑力、快速理解信息结构，那下一个问题就是： 轮到我们自己做界面时，要怎么有意识地“制造”这种亲密性？

通常可以从几个最简单也最有效的工具入手。

如何建立亲密性#

要在设计中建立亲密性，你可以使用以下几种工具，每一种都能帮你把相关的信息“粘”在一起。

1. 空间距离（White Space）#

这是最强大也最廉价的工具。通过调整元素之间的空白大小，明确告诉用户哪些是一组的。

• 规则：相关的元素距离要近（如 8px），不相关的元素距离要远（如 24px）。
• 技巧：段落之间的间距通常要大于行距；标题与它所属的段落距离要小于它与上一段落的距离。

2. 容器与背景#

当空间不足以区分，或者需要强调某组内容时，可以使用显式的容器（卡片、边框）或背景色。

• 卡片（Cards）：将相关内容封装在一个卡片中，是移动端最常见的做法。
• 背景色：给特定区域添加浅色背景，将其与周围内容区分开。

3. 视觉风格的一致性#

属于同一组的元素，通常拥有相似的字体、颜色或图标风格。这种“长得像”的特性，会让他们在视觉上自动归类。

4. 连接元素与交互亲密性#

除了静态的距离，还可以通过线条、箭头等连接元素，或者交互上的反馈（如 Hover 时整卡变色）来建立更深层的亲密性。

对齐 (Alignment)#

对齐是一个很好理解的概念，汉字自身就是方块字，写得横平竖直总比歪歪扭扭要好看。

这就是 对齐 在现实生活中的感觉： 当物体沿着一些看得见或看不见的线排在一起时，我们的大脑会自动认为「这里是有组织、有结构的」。

再回到 Peet’s Coffee 的那块菜单。除了亲密性，这块菜单在对齐上也做了不少事： 左板的饮品名称几乎都从同一个起点开始向下排，价格也大致对在一个竖直方向上； 右板的两列饮品虽然分栏，但每列内部的文字起点是整齐的。如果你拿笔在菜单上划线，会发现能画出几条比较清晰的“竖线”和“横线”——这就是对齐线的“强度”：越多元素精确贴在同一条线上，这条线在视觉上就越强，整体秩序感就越足。

找一条线：硬边界与软边界#

要在设计中建立对齐，最简单的原则就是：找一条线，然后把东西挂上去。

当我们使用左对齐或右对齐时，我们实际上是在建立一条看不见的“硬边界”（Hard Edge）。 这条边界非常有力，它像一堵墙一样，视线撞到这里就会停下来，或者沿着它顺畅地滑下去。

• 左对齐：这是最常见、最安全的对齐方式。因为我们的阅读习惯是从左到右，左对齐提供了一个固定的起点，让眼睛不需要每次都重新寻找“下一行在哪”。
• 右对齐：常用于数字、价格或边栏说明。它提供了一个右侧的硬边界。

居中对齐的陷阱#

很多初学者特别喜欢用居中对齐。为什么？因为居中感觉很“稳”，很“正式”，像结婚请柬或者奖状一样。

但是，居中对齐往往是三种对齐方式中最弱的。

为什么说它弱？因为居中对齐没有建立“硬边界”。每一行的起点和终点都在变化，这就形成了一个参差不齐的“软边界”。 这种软边界让视线无处安放，眼睛不得不在每一行开始时重新寻找起点。

建议：

• 标题、短语、强调性的引言，可以居中，这能带来庄重感。
• 长段落的正文，千万不要居中。那会是读者的噩梦。
• 如果你拿不准，就先试试左对齐。

对齐连接“孤岛”#

如果说亲密性是把“在一起”的东西连接起来，那么对齐就是把“不在一起”的东西连接起来。

有时候，页面上的两个元素距离很远（比如一个在左上角，一个在左下角），但只要它们严格地左对齐，它们之间就建立了一条看不见的连线。 这条连线能跨越空白，把分散的组件串成一个整体。这就是为什么好的设计即使留白很多，也不会让人觉得“散”。

看看下面这个例子，左边混合了居中、左对齐和右对齐，视线需要在不同的起点之间跳跃，这种混乱感就是因为缺乏统一的“硬边界”；右边统一了左对齐，建立了一条清晰的左侧视线流，专业感立刻就出来了。

重复 (Repetition)#

想象你逛一家连锁咖啡店： 门口的招牌、店员的围裙、纸杯上的图案、桌上的小立牌，颜色和字体都很像。你不用看 Logo，就知道「这是那家店」。

这就是 重复 在现实生活里的效果： 通过不断出现的相似元素，让你感觉「这是同一个地方、同一个品牌、同一件事」。

在设计里，重复的核心可以先理解成一句话： 把有意识的“相同”用足，让画面变得统一、有记忆点。

你其实早就在用重复： 比如网站所有主按钮都是同一种颜色、标题都用同一号字、所有卡片长得差不多——这些都是一致性。 重复原则要做的，是在此基础上**「再往前推一步」**： 不是只做到「不乱」，而是通过更明显的重复，增强整体的视觉效果，让页面更有趣、更好读。

如果我们再看那块 Peet’s Coffee 的菜单： 两块木板的风格统一、标题用类似的样式、饮品条目的排版也遵循同样的结构——当这些元素反复出现时，你会觉得这不是一堆偶然摆在一起的文字，而是一整套完整的菜单系统。这种「看起来是一家人」的感觉，靠的就是重复。

反过来想一个反例： 如果菜单上的每一类饮品都用了不同的字体、不同的标题样式、不同的分隔线，有的有图标、有的没有，你会觉得每一块都像从别的地方剪贴过来，整张菜单既不好看，也难以快速扫读——大脑要不断适应新的风格，认知负荷被一点点堆高。

如何在设计中运用重复#

那轮到我们自己做页面时，怎么把「重复」用好，而不是弄成单调或乱套？可以从几件小事开始：

1. 先找出现有的重复，再把它放大#

先观察你现在的作品，是不是已经有一些隐隐约约的重复元素？比如某种蓝色在按钮和链接里都出现了、某种圆角风格在卡片和输入框上都用过。

把这些本来就有的重复**「拉到台前」**，让它们更统一、更明显一点：

• 同一类按钮用完全一致的样式；
• 所有标题层级用固定的一套字号、字重和间距；
• 分隔线的粗细、颜色、样式尽量统一。

通过这种有意识的强化，画面不仅更有条理，也更有“整体感”。

2. 让重复跨页面、跨模块延续下去#

重复不只发生在一个页面内部，更重要的是在你的个人网站、文章、项目详情页之间，沿用同一套视觉语言。 比如：

• 导航栏的样式各页统一；
• 项目卡片在首页和列表页保持同样结构；
• 同一种强调方式（比如某种高亮色或标签样式）在全站用法一致。

这样，当别人从一个页面跳到另一个页面时，会感到「我还在同一个产品里」。

3. 增加有节奏感的装饰性重复#

有时候，重复不一定非要承载具体信息，它也可以只是「让画面更有韵律」。 比如在一份报告里，反复用同一小图标、同一种灰色大号字符、某种有趣的小装饰线条；或者在调查问卷上加入统一风格的小符号、背景纹理。

前提是：它看起来是「有意为之」的，而不是随手乱贴。 当这些装饰性的元素在不同页面、不同位置反复出现时，整体会显得更完整、更有个性。

4. 从一个元素出发，反向构建系统#

有时候你会先不那么清楚整体风格，反而是某个元素先长出来：比如一颗你特别喜欢的按钮、一种很适合你的标题样式。 这时可以反过来问：如果我把这个样式当成“主角”，其他地方能不能围绕它做类似的重复？ 比如按钮的圆角、阴影、用色，再延伸到卡片、输入框、标签上，逐渐搭出一套系统。

5. 重复的不一定是“图案”#

可以被重复的，包括： 留白的方式、对齐方式、字体家族、字号层级、分隔线风格、图标语言、角的形状（圆角/直角）、甚至是某种特定的版式节奏。 只要是你**「有意让它一再出现」**的东西，都可以成为重复的对象。

---

看看下面这个例子，左边的列表每一项风格都不一样，看起来非常散乱；右边通过重复图标风格、字体粗细和颜色，建立了一种强烈的秩序感和专业感。

当你在调页面的时候，可以给自己一个小问题：

如果把页面中的所有元素都当成乐器，哪些是在“反复演奏同一个主题”？哪些看起来像是跑错乐队的？

前者，就是你应该大胆强化的重复；后者，要么收进去、要么干脆删掉。

长远来看，重复原则帮你的，不只是让某一页更好看，而是帮你搭起一整套**「可扩展的视觉系统」**： 每多做一个页面，只要把该重复的东西继续用下去，新页面自然会长得像“同一个家族的人”。

对比 (Contrast)#

想象你在黑夜里看舞台： 整个背景都是暗色，只有主角被一束强光打亮。即使你什么台词都没听见，也会立刻知道——注意力应该给谁。

这就是 对比 在现实里的作用： 通过「强烈的不同」，把重点拉出来，同时帮大脑把信息分层、分块。

在设计中，对比的核心可以浓缩成一句话： 有意识地让“重要的”和“普通的”长得不一样，让信息既好看又好读。

书里提到，对比有两个互相缠在一起的目的：

1. 让页面更有视觉效果 —— 看起来有意思，更愿意读。
2. 帮助信息组织 —— 读者能立刻看出结构、主次和逻辑顺序。

这两个目的必须同时考虑： 如果对比搞得乱七八糟，重点反而被错地方「拉高」了，就会变成错误强调——本来不重要的东西反而在那抢戏。

对比可以从很多维度来做#

你已经从书里看到了一些方式，它们都围绕同一件事：让某些东西和周围「明显不同」。

常见的对比方式包括：

• 大小对比：大标题 vs 小正文；主按钮 vs 小标签。
• 字重／字体对比：粗体 vs 细体；无衬线 vs 衬线。
• 颜色对比：冷色 vs 暖色；高饱和 vs 低饱和；深色 vs 浅色。
• 粗细对比：粗线 vs 细线；粗边框 vs 细分割线。
• 方向对比：水平块 vs 垂直块；大面积横排文字 vs 窄栏文字。
• 间距对比：宽行距 vs 紧凑行距；大块留白 vs 密集信息区。
• 尺寸对比：小图片 vs 大图片；小图标 vs 大视觉主图。

真正有用的不是记住这张清单，而是随时问自己： 在这张页面上，我想让谁和谁「差得很明显」？

如何在设计中用好对比#

你说在书里没看到太多具体做法，那我们就把它拆成一些实操步骤和习惯，方便你直接用在网站和项目上。

1. 先决定谁是主角，再决定怎么对比#

很多页面对比弱，是因为一开始就没有「主角意识」：

• 这一屏我最想用户看到的是哪一句话、哪个按钮、哪个模块？
• 如果只能让一件东西最突出，那是什么？

先选出 1 个真正的主角，再从尺寸、颜色、位置里选 1–2 个维度做强对比： 比如把主标题比其他文字大两级、加粗；把主按钮用全站唯一的高饱和色；把主视觉放在最显眼的区域，周围给足留白。

一旦主角定清楚，对比就有方向了，而不是“哪里顺手就加一点”。

2. 不要怕「差太多」，怕的是「差一点点」#

新手最常见的问题是：想做对比，但出于谨慎，只做了很轻微的差异——结果既不统一，也不够大胆。

比如：

• 标题只比正文大 2px，看起来像对不齐。
• 主按钮只比次按钮深一点点色，像调错颜色。
• 线条“似粗非粗”，看起来像抖了一下。

一个简单判断：如果你眯起眼睛，看不出谁是重点，那对比就不够。

所以在做对比时，可以有意识地放大一点：

• 字号至少差一个等级（比如 16px → 24px，而不是 16px → 18px）；
• 颜色从浅灰直接跳到接近黑，而不是一堆中灰；
• 按钮从线框直接升级为实心，而不是只是边框粗一点。

3. 用对比来「讲层级」，而不是炫技#

对比的第二个目的，是让信息结构一眼可见：哪是一级信息、哪是二级、哪只是「附带说明」。

你可以针对每一层级，设定一套固定的对比规则，比如：

• 一级标题：最大字号 + 最粗字重 + 上下留白最多。
• 二级标题：中等字号 + 次一档字重 + 比正文多一点间距。
• 正文：统一字号 + 统一行距。
• 辅助信息（时间、标签、脚注）：更小、更浅、更靠边。

这样，用户即使只是扫一眼大大小小、深深浅浅的文字，也能看出整篇内容的结构，不看完也大致知道怎么组织的。

4. 控制对比的「种类和数量」#

对比用太少，页面会平；用太多、太杂，页面会乱。

一个经验：在一个区域内，选 1–2 个主对比维度就好，其他维度尽量保持统一。

比如：

• 你已经用「大小 + 粗细」区分了标题和正文，那颜色尽量都保持在同一色系；
• 主按钮用了颜色对比，形状就别再太夸张，避免和其他按钮完全不像同类。

想象是一支乐队：对比是主旋律，不是每个乐器都在拼命独奏。

5. 避免「错误对比」抢了真正重点的戏#

这一步是很多产品/设计评审时容易漏掉的： 问自己：

• 现在页面上，最抢眼的东西，真的是我想强调的吗？
• 有没有不那么重要的东西，因为颜色太跳、字号太大，反而吸走了注意力？

如：次要按钮颜色比主按钮更鲜艳；装饰性的插图比核心标题还大；广告位对比特别强，把内容挤到角落。 对比的力量很大，但一旦用在错地方，就会直接带偏用户的注意力，这对产品来说是致命的。

6. 与亲密性、对齐、重复配合使用#

对比不是单兵作战，和前面讲的几个原则配合，会更好用：

• 有对比但没对齐，会显得乱；
• 有对比但没重复，会显得像随机噪点；
• 有对比但没亲密性，用户还是不知道哪些东西是一组。

---

看看下面这个例子，左边的卡片所有文字字号、颜色都差不多，按钮也不突出，看起来平淡无奇；右边通过字号、字重、颜色的强烈对比，让主次关系一目了然。

你可以做一个小练习： 在一个页面上，只动三件事：

1. 用对比挑出真正的主角；
2. 用对齐把同层级元素挂在同一条线上；
3. 用重复让同类型信息长得一致、反复出现。

很多时候，仅靠这三件事，页面就会从「能用」变成「看起来很专业」。