# 设计定律与启发法

> 这些是跨时代跨风格普适的**经典设计定律**。违反这些 ≈ 违反物理规律，用户体验必然差。

---

## 一、Gestalt 五原则（组织视觉）

人脑自动把相关信息"组团"。设计师的工作是**让这个自动组团符合信息结构**。

### 1. Proximity 邻近原则
**距离近的元素 → 被当作一组。**

```
❌ title ──16px── desc ──16px── meta ──16px── (下一块)
   距离都一样 → 搞不清哪些属于一组

✅ title ──8px── desc ──16px── meta ──48px── (下一块)
   同组紧凑，组间宽松
```

### 2. Similarity 相似原则
**样式相似的元素 → 被当作一类。**

- 所有"可点击"用同一种强调色
- 所有"次要信息"用同一种弱化灰
- **禁止**：一个 CTA 是橙色按钮，另一个 CTA 是蓝色文字链接（逼用户猜）

### 3. Closure 封闭原则
**大脑会自动补全不完整的图形。**

应用：你不需要画一个闭合方框来表示"这是一张卡片"——底部一条细线 + 左右对齐 + 内部留白一致，大脑就补全了"卡片"的边界。

### 4. Continuity 连续原则
**眼睛倾向沿流畅曲线/直线扫描。**

应用：
- 左对齐 > 居中（所有文字起点都在同一垂直线上，扫描省力）
- 避免让重要内容跨越明显的视觉断层

### 5. Figure-Ground 图底关系
**对比 = 焦点。**

- 明亮元素在暗背景 → 焦点
- 饱和色在中性底 → 焦点
- **规则**：一屏最多 1 个"图"级别的焦点，其余全是"底"

---

## 二、Fitts's Law 菲茨定律

**到达某目标的时间 ∝ 距离 / 目标大小**

```
T = a + b × log₂(距离 / 目标大小 + 1)
```

翻译成人话：**目标越大 + 距离越近 = 越好点。**

### 应用

| 场景 | 启发 |
|------|------|
| 主 CTA 按钮 | 大（≥ 48px），放在视觉动线终点（右下角/底部） |
| 次要操作 | 可以小一些，但别小于 32px |
| 移动端关键按钮 | **至少 44×44px** hit target |
| 屏幕边缘 | **无限大目标**（鼠标会被挡住），关闭按钮放边角最好 |
| 危险操作 | 故意放远 / 做小，增加操作成本（"删除账户" 藏在二级菜单） |

---

## 三、Hick's Law 希克定律

**选择数量越多，决策时间越长（对数增长）**

```
T = b × log₂(n + 1)
```

### 应用

- **3 选 1** 远比 **7 选 1** 快
- 主菜单项 ≤ 7
- 表单字段能省则省
- 太多选项 → 改用**渐进披露**（先问核心问题，再根据回答展开）
- Apple 官网永远只有 ~5 个导航项

### 反例

Amazon 首页充斥无数选项 → 实际上用户都用搜索框，不看分类。

---

## 四、Miller's Law 米勒定律 (7 ± 2)

**短时记忆容量：7±2 个单位。**

### 应用

- 一组信息 ≤ 5-7 项
- 手机号分段：138-1234-5678（3 组），不是 13812345678
- 导航栏项目 ≤ 7
- 产品 feature list ≤ 5

超过就**分组 + 分层**。

---

## 五、Jakob's Law 雅各布定律

**用户大部分时间花在其他网站上，所以他们期望你的网站行为和其他网站一致。**

### 应用

- logo 放左上、搜索框放右上、主 CTA 放 hero 中间或右上
- 购物车图标在右上角
- 汉堡菜单表示"菜单"
- 表单"提交"按钮放底部

**反常规 = 让用户重新学习 = 摩擦。除非你有强烈的品牌/体验理由，别违反。**

---

## 六、视觉层级四维

想让某个元素"最醒目"，按优先级调：

```
1. Size     大小（最强武器）
2. Color    颜色（饱和度 + 对比度）
3. Weight   字重
4. Spacing  间距（留白 = 呼吸空间 = 重要性）
5. Position 位置（左上/居中/底部各有含义）
```

**规则**：把这几维**叠加**使用（大 + 粗 + 饱和 + 留白多），比只用一维更明确。

### 反例（无层级）

```css
/* ❌ 所有文字都 16px Regular #333 */
/* → 用户不知道该看哪 */
```

### 正例（有层级）

```css
h1    { 48px / 700 / #000 / margin-bottom: 24px }  /* 最显眼 */
lead  { 20px / 400 / #333 / margin-bottom: 16px }  /* 次之 */
body  { 16px / 400 / #555 }                         /* 默认 */
meta  { 12px / 400 / #888 }                         /* 最弱 */
```

---

## 七、F-Pattern vs Z-Pattern 阅读模式

### F-Pattern（长内容 / 文字密集）

- 用户从左上扫到右 → 回到左下 → 再扫右 → 垂直下移
- 适用：博客、新闻、邮件、搜索结果
- **设计启发**：重要信息放**前两行 + 左侧列**

### Z-Pattern（短内容 / 视觉驱动）

- 左上 → 右上 → 左下 → 右下
- 适用：落地页、海报、单页广告
- **设计启发**：
  - 左上 = logo
  - 右上 = 导航 / 次要 CTA
  - 左下 = 副文案
  - 右下 = **主 CTA**（动线终点）

---

## 八、Peak-End Rule 峰终定律

**人对一段体验的记忆由两个点决定：最高潮 + 最后一刻。**

### 应用

- 首次加载要有一个"哇"瞬间（hero 动画、主视觉）
- 结束页 / 提交成功页要有设计感（Stripe 的 ✓ 动画是典范）
- 中间平淡 OK，但**开头和结尾不能平淡**

---

## 九、Aesthetic-Usability Effect 美观可用性效应

**好看的设计，用户觉得更好用，即使实际功能相同。**

这不是说"漂亮皮肤压倒一切"，而是说：**美观是一种功能**。别用"功能至上"为丑陋辩护。

---

## 自检清单

做设计决策时问自己：

- [ ] 相关元素是否用了 proximity（靠近）？
- [ ] 同类元素是否用了 similarity（一致样式）？
- [ ] 主 CTA 是否满足 Fitts's Law（大 + 好到达）？
- [ ] 选项数是否 ≤ 7（Hick + Miller）？
- [ ] 是否违反了 Jakob（用户常识）？违反的话理由是否够硬？
- [ ] 视觉层级是否至少用了 2-3 维（大小/颜色/字重/间距）？
- [ ] F-pattern vs Z-pattern 选对了？
- [ ] 开头和结尾有峰值体验吗（Peak-End）？