第 1 章 · 设计原则：对齐、对比、重复、亲密性
考点梳理
1.1 设计原则 4 种（“必懂”）
| 原则 | 内容 | 典型场景 |
|---|---|---|
| 对齐 | 元素对齐/居中 | “整洁/秩序” |
| 对比 | 大小/颜色/粗细 | “强调/层次” |
| 重复 | 元素重复/统一 | “一致性/品牌” |
| 亲密性 | 相关元素靠近 | “分组/关联” |
记忆锚：“对齐/对比/重复/亲密性”（“4 种”，每种 1 行）。
1.2 对齐（“2 种”）
| 类型 | 内容 | 典型场景 |
|---|---|---|
| 元素对齐 | 左/右/上/下/居中（“5 种”） | “整洁/秩序” |
| 网格对齐 | 网格/列/行（“3 种”） | “布局/排版” |
记忆锚：“元素对齐/网格对齐”（“2 种”，每种 1 行）。
1.3 对比（“3 种”）
| 类型 | 内容 | 典型场景 |
|---|---|---|
| 大小 | 标题/正文/注释（“3 种”） | “层次/强调” |
| 颜色 | 主色/辅色/点缀（“3 种”） | “品牌/情绪” |
| 粗细 | 粗体/常规/细体（“3 种”） | “强调/层次” |
记忆锚：“大小/颜色/粗细”（“3 种”，每种 1 行）。
1.4 重复（“2 种”）
| 类型 | 内容 | 典型场景 |
|---|---|---|
| 元素重复 | 图标/按钮/颜色（“3 种”） | “一致性/品牌” |
| 风格重复 | 字体/圆角/阴影（“3 种”） | “统一/品牌” |
记忆锚：“元素重复/风格重复”（“2 种”，每种 1 行）。
1.5 亲密性（“2 种”）
| 类型 | 内容 | 典型场景 |
|---|---|---|
| 相关元素靠近 | 标题/正文/图片（“3 种”） | “分组/关联” |
| 无关元素分开 | 模块/区块/页面（“3 种”） | “层次/清晰” |
记忆锚：“相关靠近/无关分开”（“2 种”，每种 1 行）。
1.6 实操（“设计 1 个页面”）
设计流程（“4 步”）：
① 需求（"目标/用户/场景"）
↓
② 线框（"布局/结构"）
↓
③ 视觉（"颜色/字体/图标"）
↓
④ 输出（"切图/标注"）
记忆锚：“需求/线框/视觉/输出”（“4 步”，“顺序不能乱”）。
🧠 记忆工具箱
口诀速记
- 设计原则：“对比重复亲密”（“4 种”，每种 1 行）；
- 对齐：“元素网格两种”（“2 种”）；
- 对比：“大小颜色粗细”（“3 种”）；
- 重复：“元素风格两种”（“2 种”）；
- 亲密性：“相关靠近无关分开”（“2 种”）；
- 实操：“需求线框视觉输出”（“4 步”）。
场景锚点
- 设计原则想象"“化妆”"：你不是"模特"（不需要"被化妆"），你是"化妆师"（“化妆”）——“对齐/对比/重复/亲密性”是“化妆师”的“4 种语言”（“整洁/强调/一致/分组”）。
⚠️ 易错提醒
- 设计原则"4 种"：“对齐/对比/重复/亲密性”（每种 1 行，“必懂”）——“搞混 = 丢分”；
- 对齐"2 种"：“元素对齐/网格对齐”（每种 1 行）——“搞混 = 丢分”；
- 对比"3 种"：“大小/颜色/粗细”（每种 1 行）——“搞混 = 丢分”；
- 实操"4 步"：“需求/线框/视觉/输出”（顺序不能乱）——“漏步骤 = 丢分”。