有用

演示与视觉06 / 10

留白与网格

留白是设计,不是浪费;间距用 8 的倍数。

  • 学会用时15 分钟
  • 你的收获页面「呼吸」,显得专业
  • 用到的频率每周 2 次
  • 难度入门

01为什么学

没学之前

元素贴边、挤在一起,看着局促。

学会之后

四周留足边距,元素间距统一用 8 的倍数,页面自然整齐。

  • 一条规则,页面立刻高级
  • 设计工具里的网格会更好用

02图解

图解
间距 16(统一)间距 16 边距 40
三个同大小的块,相同间距,左边缘都对齐网格线。

03基本单元4 个

  • 边距四周留白
  • 间距元素之间
  • 网格对齐的参考线
  • 8 的倍数8、16、24、32、48

04怎么用

  1. 页面四周留足边距,不要贴边
  2. 间距只用 8 的倍数8、16、24、32、48
  3. 相关的元素间距小,无关的间距大
  4. 用网格对齐,而不是目测

05速查表

用途间距例子
紧密相关8标题与副标题
同组元素16卡片内部
不同组32–48段落与段落

06套用一次

页面边距 48,卡片内间距 16,卡片之间 24,段落之间 32。

07常见的坑

  • 留白被当作浪费

    删掉一个元素往往比多加一个更好。

  • 间距随意

    先定出 8 的倍数的间距表,所有页面用它。

08自测与练习

先做 10 秒自测,再动手练一下。

间距更适合用哪组数字?

10 分钟小练习

去掉一页上的三个元素,看是否更清晰。

看参考答案
通常越少越清晰。

+配合着学

演示与视觉的全部 10 条