本文总结了19条经过验证的视觉设计规则，涵盖色彩、排版、布局与对比度，帮助设计师在每次项目中做出安全而有效的决策，同时鼓励在理解规则后进行有理有据的突破。

视觉设计的安全规则：每次都可放心遵循的实用指南

原文链接：Visual design rules you can safely follow every time

在视觉设计领域，规则往往被视为束缚，但有些规则却像安全带一样——它们不会限制你的创意，而是确保你的设计不会轻易翻车。本文作者Anthony Hobday总结了一系列经过实践检验的设计规则，这些规则可以安全地应用于几乎任何界面设计项目中。当然，如果你有充分的理由打破它们，请便——但在此之前，请先掌握这些规则背后的逻辑。

---

1. 使用近黑和近白，而非纯黑与纯白

纯黑色在色彩搭配中往往产生过高的对比度，显得生硬刺眼；纯白色则容易过亮，造成视觉疲劳。因此，建议使用接近黑（如#1a1a1a）和接近白（如#f5f5f5）的颜色。这一规则是后续所有提及“黑”与“白”的基础。

为什么？ 纯黑和纯白在自然界中几乎不存在，它们会与周围环境产生过于强烈的割裂感，降低界面的和谐度。使用近黑近白能让视觉过渡更柔和，也便于与其他色彩搭配。

2. 为中性色注入饱和度

中性色（黑、白、灰）如果完全不饱和，会显得死板。如果你在界面中使用了某种彩色（比如品牌蓝），那么请在中性色中添加一点点这种色调的饱和度。在HSB色彩模型中，饱和度小于5%即可。这会使得整个调色板显得统一连贯。

实践提示： 比如界面主色调是蓝色，那么灰色背景可以略带一点蓝灰（如#e8edf2），而不是纯粹的#e8e8e8。

3. 重要元素使用高对比，次要元素使用低对比

重要元素（按钮、主要内容、需要用户注意的信息）应该具有较高的对比度，以吸引注意力。相反，结构性元素（如分割线、装饰性阴影）则可以尽量降低对比度，让它们退居幕后。

核心思想： 对比度是视觉层次的指挥棒。有意识地分配对比度，才能让用户的视线有的放矢。

4. 设计的每个细节都要有意识

空白、对齐、尺寸、间距、颜色、阴影——每一处都需要你给出解释。如果别人指着你设计中的任意一角问你“为什么这样”，你应该能给出合理的理由。若做不到，设计就会显得散乱不连贯。对于新手来说，这条规则可以当作一面镜子，提示你去学习那些尚不熟悉的领域。

5. 视觉对齐优于数学对齐

设计软件可以让你做数学上的完美对齐，但人眼的感觉并不总是与数学一致。有些形状的视觉中心与几何中心并不重合，因此需要你通过目测调整，使其“看起来舒服”。这需要练习，但一旦形成习惯，你会迅速提升审美判断力。

常见例子： 圆形按钮中的文字，通常需要稍微上移几像素才能视觉居中，因为数学居中会让文字显得偏下。

6. 字号越大，字间距和行高应越小；字号越小，字距与行高应越大

这条规则适用于所有文本。大字排版如果字距过大，会显得松散；小字如果字距太小，则会拥挤难读。同理，行高也要随字号调整。

具体做法： 例如18px的正文字体，行高1.5倍即可；而36px的标题，行高1.2倍就合适。字间距可以用CSS中的letter-spacing调整，大字号通常用负值或0，小字号则用正值。

7. 容器边框的明度应同时区别于容器和背景

举例：一个深色卡片（容器）放在更深的背景上，卡片周围有1px的边框，那么边框颜色应该比两者都要浅。反之，如果是浅色卡片在浅色背景上，边框应该比两者都要深。绝不能简单采用容器和背景之间的中间明度，否则边缘无法锐利识别。

原因： 边框的作用是勾勒边界，它必须同时与内外两个区域产生对比，才能清晰定义容器的轮廓。

8. 每样东西都应该与其他东西对齐

对齐让用户感知到元素之间的关联性。如果某个元素与任何其他元素都没有对齐，它就会显得突兀，仿佛不属于这个设计。理想情况下，每个元素都应该基于某种逻辑与其他元素对齐。

实践建议： 建立一个基本的网格系统，确保所有元素至少与网格中的一条线对齐。

9. 色板中的颜色应有明显的明度差异

当颜色的明度（brightness）有明显区分时，它们不仅能靠色相区分，也能靠明暗层次建立秩序。这促使色板中的颜色不会互相“打架”，而是形成清晰的层级。

技巧： 在HSB模式下，确保你的色板中每个颜色的B值（明度）有梯度差异，比如80%、60%、40%等。

10. 中性色饱和度应统一使用暖色或冷色，不要混用

如果你用暖色（如橙、红）为中性色注入饱和度，那就全部用暖色；如果选择冷色（如蓝、绿），就全部用冷色。混用会导致色板整体感觉不协调。

示例： 左侧错误示范：背景用暖黄灰，前景用冷蓝灰；右侧正确：背景和前景都使用暖灰调。

11. 度量尺寸应遵循数学关系

元素间距和尺寸应基于某种缩放比例，例如8px的倍数。这有利于设计在视觉上保持连贯。水平与垂直网格基于同一套比例，也能帮助图片等元素确定合适尺寸。

常见系统： 8px、4px、12px等是常见的基数，网页设计中通常采用8的倍数搭建间距体系。

12. 元素应按视觉重量排序（三角法则）

如果一行或一列中包含多个元素，且它们的视觉重量不同（比如两个按钮和三个链接），应该以三角形式排列：最重的元素排在最前或最外，最轻的元素排在最后。这符合人的阅读与浏览习惯，使序列更令人满足。

细节修正： 如果元素靠右边缘排列，那么最重的元素应最靠右边缘（即最外），而不是最左。

13. 水平网格建议使用12列

12列网格可以轻松划分成1、2、3、4列，灵活性强。它是最流行的栅格系统，适合绝大多数布局需求。

14. 间距应从高对比点之间测量

当你在设计元素之间的空间（比如两个区块之间的垂直间距设为100px），这个距离应该从上一个高对比的边缘到下一个高对比边缘来计算。因为人眼基于对比来感知边界，所以间距自然落在对比点之间。

举例： 白底上的黑色段落，间距应从一段文字的最后一行像素到下一段的第一行像素；如果其中一个段落有黑色背景，则间距需要将背景块的边界也计算进去。

15. 离用户更近的元素应该更亮

屏幕上元素模拟近景时应处理得较亮，这与现实中物体离眼睛越近受光越强一致。无论是亮色还是暗色模式，这条均适用。

做法： 比如卡片悬浮时，不仅增加阴影模糊，还可略微提高卡片亮度。

16. 阴影模糊值应为其距离值的2倍

例如，一个元素阴影在Y轴上偏移4px，模糊值应设为8px。当元素“靠近”用户时，还应降低阴影的不透明度。这是因为靠近光源的物体，其投影边缘更模糊且颜色更淡。

17. 简单置于复杂之上，或复杂置于简单之上

不要让复杂碰复杂。如果背景是丰富多彩的渐变，那么前景文字就应该简洁；如果前景是复杂图形，那么背景就应该干净。简单配简单容易显得平淡；复杂配复杂则视觉混乱，很难驾驭。

18. 容器与背景的明度差应控制在特定范围内

基于对约100个优秀网站的调研：暗色界面中，容器与背景的明度差（HSB中的B值）应控制在12%以内；亮色界面则控制在7%以内。这样可以保持柔和而清晰的层次。

调研依据： 作者检查了这些网站中容器与背景的明度差，得出的数据支持了此建议。

19. 容器的外部留白应大于等于内部留白

容器内部的元素之间称为内边距（inner padding），容器内部元素与容器边缘之间称为外边距（outer padding）。外边距应比内边距大或相等。因为容器内部的元素彼此关联度更高，而容器本身是承载它们的框架，因此需要更多空间与外部区分。

20. 正文字号保持在16px或以上

16px是浏览器的默认字号，低于此值文字易读性变差，因此正文安全线是16px。在16px以上，字号越大越易读。如果你在写代码，也请遵循此规则。

---

总结：规则是拐杖，不是枷锁

这20条规则并非绝对真理，但它们基于人类视觉感知、常用设计实践和大量案例分析，可以显著提升设计的一致性和可用性。作者强调，“如果你有很好的理由打破它们，那就去做”——真正的设计师知道何时该遵循规则，何时该创造例外。

对于刚入行的设计师，这些规则是实用的起点；对于老手，它们则可以作为自查清单，帮助您发现容易忽略的细节。设计不只是审美游戏，更是关于感知与沟通的学问。

原文链接： https://anthonyhobday.com/sideprojects/saferules/