该复习了做一下本页的 10 秒自测,答对就能把下次复习推后。去自测
01为什么学
没学之前
元素贴边、挤在一起,看着局促。
学会之后
四周留足边距,元素间距统一用 8 的倍数,页面自然整齐。
- 一条规则,页面立刻高级
- 设计工具里的网格会更好用
02图解
图解
03基本单元4 个
- 边距四周留白
- 间距元素之间
- 网格对齐的参考线
- 8 的倍数8、16、24、32、48
04怎么用
- 页面四周留足边距,不要贴边
- 间距只用 8 的倍数8、16、24、32、48
- 相关的元素间距小,无关的间距大
- 用网格对齐,而不是目测
05速查表
| 用途 | 间距 | 例子 |
|---|---|---|
| 紧密相关 | 8 | 标题与副标题 |
| 同组元素 | 16 | 卡片内部 |
| 不同组 | 32–48 | 段落与段落 |
06套用一次
页面边距 48,卡片内间距 16,卡片之间 24,段落之间 32。
07常见的坑
留白被当作浪费
删掉一个元素往往比多加一个更好。
间距随意
先定出 8 的倍数的间距表,所有页面用它。
08自测与练习
先做 10 秒自测,再动手练一下。
间距更适合用哪组数字?
10 分钟小练习
去掉一页上的三个元素,看是否更清晰。
看参考答案
通常越少越清晰。