留白分组 / 设计术语词典

留白与亲近性:用间距说明归属

空出来的地方也在传达信息。留白描述空间,亲近性帮助解释为什么某些元素看起来属于同一组。

组内近、组间远的间距示意图
原创概念示意图,具体数值与情景用于练习。

词条定义

留白 White space / negative space
元素周围或之间没有被主要内容占据的空间。它可以带颜色,并不要求背景为白色。
亲近性 Proximity
在视觉组织中,位置接近的元素更容易被理解为相关的一组;这种线索需要与内容和其他视觉提示一致。

一个具体例子

原创教学示例:卡片里先放展览图片,下面是标题与日期。若图片到标题有32px、标题到下一张卡片只有8px,标题可能被看成下一组内容。可以先把图片与标题的间隔调整为12px,再把卡片之间保留更明显的24px间隙。数值用于展示组内和组间的相对关系,并非通用规格。

把两个概念分清

观察对象描述什么使用边界
留白观察页面边缘、段落周围和卡片之间的空间。留白多不自动等于信息组织好。
亲近性观察哪些元素因距离相近而被理解为一组。同样距离也可能被边框、颜色或标题改变解释。

怎样观察与修改

  1. 为每一段标题、日期与图注写明它归属于哪个内容对象。
  2. 先检查组内距离,再检查组与组的距离,避免两者没有差别。
  3. 暂时去掉边框看分组是否仍能理解;若不能,重新调整间距或增加明确标题。
  4. 放入多行图注重新检查,确保图注变长后不会贴近下一张卡片。

适用情景与限制

适用于表单分区、信息卡、图片说明与段落布局。高密度表格还需要列标题、分隔线等线索,不能只靠大量空白组织复杂关系。

动手练习

画出三张没有边框的活动卡片,只用标题、日期与间距区分。请自己逐项指认日期属于哪张卡片;如果需要来回猜测,就增加更明确的组织线索。

常见问答

留白能用来隐藏重要信息吗?

不应把读者必须完成任务的信息推到难以发现的位置。空间服务于理解,而不是回避内容。

组内间距一定要更小吗?

这是常用的起点,但还要考虑文字大小和视觉重量。比较最终关系,不机械套用比例。