工程师设计及格线：15分钟建立界面视觉秩序

目标：不需要艺术天赋，仅凭一套严谨的「排版规则与约束」，让纯代码背景的工程师在 15 分钟内做出清爽、专业、达到商业及格线的数字界面。 核心信源：Refactoring UI (Adam Wathan & Steve Schoger) [S1]、《写给大家看的设计书》(Robin Williams) [S2]、W3C WCAG 2.2 [S3]。

---

为什么很多工程师写的界面"看着很丑"？

许多工程师认为做出好看的界面需要"美学天赋"，因而对 UI 设计望而却步。然而，界面设计在 80% 的日常场景中不是艺术创作，而是信息与视觉秩序的建立 [S1]。

工程师界面最常见的视觉崩塌通常来自以下几个确定性错误：

1. 间距随意：margin: 7px; padding: 13px; 随手乱填，没有固定的步长体系。
2. 彩色泛滥：试图用黄色、蓝色、绿色来区分每一个模块，导致界面像圣诞树。
3. 层次全靠字号：为了强调某段文字，无限制地放大字号，破坏整体版面平衡。
4. 忽视对齐与亲密性：标签（Label）离上一个输入框比离自己的输入框还要近，视线极度混乱。

只要掌握以下四大工程法则，任何人都能快速做出干净耐看的界面。

---

第一准则：间距系统与 8pt 网格（Spacing Scale）

界面显得凌乱杂糅的根本原因，是元素之间缺乏数学节奏。

1. 采用 8pt / 4pt 间距阶梯

永远不要在 CSS 中写任意偶数或奇数像素。建立一套固定的间距比例尺：

:root {
  --space-1: 4px;   /* 微调整、紧凑组件内部（如 Badge 内边距） */
  --space-2: 8px;   /* 紧密关联元素（Icon 与 Label，按钮内部内边距） */
  --space-3: 12px;  /* 次级分组间距 */
  --space-4: 16px;  /* 标准基础间距（表单项之间、卡片内边距） */
  --space-6: 24px;  /* 独立模块内部间距 */
  --space-8: 32px;  /* 模块与模块之间 */
  --space-12: 48px; /* 页面主要大区块（Section）留白 */
  --space-16: 64px; /* 页面级大呼吸感留白 */
}

2. 亲密性法则的 CSS 几何映射

格式塔亲密性（Proximity）的核心推论：相关元素离得近，无关元素离得远 [S2]。

在表单或卡片排版中，必须满足： $$\text{子元素内部间距} < \text{同组相邻元素间距} < \text{不同组之间的间距}$$

<!-- ❌ 错误示范：Label 居中，或者离上一个表单项更近 -->
<div class="field">
  <input type="text" />
</div>
<!-- margin-bottom: 24px -->
<label>电子邮箱</label> <!-- 用户误以为这是上面输入框的说明 -->
<input type="email" />

<!-- ✅ 正确示范：严格保持 Label 紧贴自己的输入框 -->
<div style="margin-bottom: 24px;"> <!-- 组间距：24px -->
  <label style="display: block; margin-bottom: 6px; font-weight: 500;">电子邮箱</label> <!-- 内部亲密：6px -->
  <input type="email" style="width: 100%; padding: 8px 12px;" />
  <span style="display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted);">用于接收登录验证码</span>
</div>

---

第二准则：灰阶与层级系统（Grayscale & Hierarchy）

1. 扔掉纯黑（#000000）

纯黑在白底屏幕上会产生强烈的视觉震颤（Visual Vibration），极其刺眼。现代界面的正文字色通常使用带微弱冷暖色调的深灰：

• 浅色模式推荐：#1A1C1E（冷黑墨）或 #2D3748（蓝灰黑）。
• 深色模式推荐：#14161A 或 #18181B 作为底色，文字使用 #E8E6E1 或 #F4F4F5。

2. 建立三级灰阶，而不是三种彩色

90% 的页面不需要额外的彩色来传达层级。只需要三档文本灰阶即可建立完美的视觉深度 [S1]：

文本层级	推荐色彩（浅色模式）	适用场景	字重（Font Weight）
主标题 / 核心数据	#1A1C1E (100% 深度)	页面大标题、关键 KPI 数据、主要按钮文案	600 (Semibold) / 700 (Bold)
正文 / 表单内容	#52565C (约 70% 深度)	段落说明、表格内容、输入框内容	400 (Regular)
辅助 / 提示 / 占位	#8A8D93 (约 50% 深度)	时间戳、输入提示、面包屑、表格副标题	400 (Regular)

⚠️ 无障碍硬指标：任何正文与背景的对比度必须满足 WCAG 2.2 AA 级基线 ≥ 4.5:1（大文本 ≥ 3:1）[S3]。

---

第三准则：CRAP 四原则的工程化落地

Robin Williams 在《写给大家看的设计书》中提炼的 CRAP 四原则，是工程师走查界面的四把标尺 [S2]：

1. Contrast（对比）：强弱分明，禁止半死不活

• 如果两个元素不同，就让它们截然不同。
• ❌ 反模式：主按钮用 #3B82F6，次按钮用 #60A5FA（用户分不清谁是主操作）。
• ✅ 正确做法：主操作用高反差实心按钮（Solid Button），次操作用描边（Outlined）或幽灵按钮（Ghost/Text Button）。

2. Repetition（重复）：一致性就是信任感

• 重复意味着界面在遵守系统规则：同一层级的主题色、统一的卡片边框（如 1px solid rgba(0,0,0,0.08)）、统一的圆角（border-radius: 4px 或 6px）。
• 页面中严禁同时出现胶囊圆角、直角、8px 圆角多种割裂风格。

3. Alignment（对齐）：消灭任何随意的像素孤岛

• 每一个元素都必须与页面中的其他元素有一条看不见的对齐线。
• 文本与表单左对齐；数字表格内容一律右对齐（便于小数点纵向比对）；操作列居中或右对齐。
• 避免文字居中排版——居中只适用于简短的 Slogan 或空状态插图标题；超过 3 行的文本居中会导致左边缘凹凸不平，增加阅读眼动成本。

4. Proximity（亲密性）：用间距表达逻辑分组

• 把相关的项归结到一起，把无关的项用留白拉开。留白不是空白，留白是最高级的视觉分组工具。

---

第四准则：交互五态完备性（Interactive States）

工程师构建的组件往往只有“默认态”，一旦上线就会显得僵硬。任何可交互控件（按钮、链接、输入框、卡片）必须提供完备的 5 态反馈 [S1]：

/* 现代按钮五态标准范式 */
.btn-primary {
  /* 1. Default 默认态：清晰的视觉线索与可供性 */
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

/* 2. Hover 悬浮态：亮度变化（加深或提亮 5%~10%） */
.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

/* 3. Active 激活/按下态：轻微下沉或进一步深色 */
.btn-primary:active {
  background-color: var(--color-primary-active);
  transform: translateY(1px);
}

/* 4. Focus-visible 键盘聚焦态：无障碍生命线！切勿 outline: none */
.btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 5. Disabled / Loading 禁用与加载态：明确告知不可操作，阻断点击 */
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

---

15 分钟及格线自查速查表

检查维度	自查问题	合格判定
间距	页面上的 padding / margin 是否全为 4/8 的倍数？	必须全中固定比例尺
色彩	页面上的彩色（非灰黑白）是否控制在 1-2 种（主品牌色 + 必要的功能警示色）？	严禁彩色泛滥
文本	是否只用了 1 个字体家族，并且字阶档位不超过 4 档（如 14, 16, 20, 24px）？	层级靠字重与灰度区分
对齐	左边缘对齐线是否存在锯齿状偏移？表格数字是否右对齐？	视线垂直流动平滑
反馈	按钮鼠标放上去有变化吗？点击有反馈吗？加载中有骨架屏或 Loading 吗？	状态完备，多赫蒂时限内反馈

---

信源合集

编号	来源	层级	出处 / URL	取用日期	核心贡献
[S1]	Refactoring UI	L4 权威著作	refactoringui.com (Adam Wathan & Steve Schoger)	2026-09-10	8pt 网格、灰阶三级体系、通过设计做减法
[S2]	《写给大家看的设计书》	L4 权威著作	人民邮电出版社 (Robin Williams)	2026-09-10	经典 CRAP 四原则（对比、重复、对齐、亲密性）
[S3]	WCAG 2.2 规范	L0 国际标准	w3.org/TR/WCAG22/ (W3C)	2026-09-10	文本对比度 4.5:1 / 3:1 硬指标基线