间距

为设计师设置界面元素中的间距与尺寸提供指导,减少决策成本。同时也方便工程师理解其中的原理。该指南包含了容器间距、横向间距以及纵向间距,适用于元素、组件以及页面布局的设计。

设计原则

明确的关系

通过间距差异,准确表达信息与信息之间的关系:内容越相关,间距越小。

舒适的节奏

通过间距差异,准确体现信息间的主次关系,同时传递给用户既符合逻辑又舒适的信息读取节奏感。

间距尺度表

间距尺度的定义,跟设计系统中文本紧密关联,也就是 text-based-size。同字体规范,间距同样以 16 px(1 rem)作为对照单位,以 4 px 作为起点及最小增长单位。

尺寸增长前期整体节奏慢,以 1-5 倍增长,信息间关系紧密;尺寸增长后期节奏变快,以斐波那契数列方式增长,信息间关系松散。

类型

类型 说明
容器间距 容器与内容间距
横向间距 多为行内间距,元素与元素;控件与控件之间的水平方向的间距。
纵向间距 多为内容模块与模块之间的垂直方向的间距

01. 容器间距

容器间距以盒子模型为基础,分 2 大基本类型:等宽、矩形。

等宽

间距 适用于
XXS,XS,S 页面中的独立模块,比如列表
M,L 模态、气泡等独立容器

矩形

左间距 常用比(宽/高) 适用于
S 2:3 页面中的独立模块,比如列表
M 2:1 / 4:3 / 4:1 模态、气泡等独立容器

矩形变形

在特定场景下,右边间距可 - 4 px,以达到视觉上的特定效果。比如表单场景中,右边通常为箭头,缩小后的间距让界面更加平衡。

02. 横向间距

03. 纵向间距

逾越间距规范的场景

间距规范在特定场景下并不适用,此时不需要严格按照间距规则来设计,根据实际规则自动生成间距即可。

  • 栅格:优先考虑栅格规范,再考虑间距规范。

  • 居中:间距往往由容器实际大小决定,因此不受间距规范限制。

  • 自适应:可能会按比例缩放间距。

如何使用间距规范

  1. 明确类型:根据自己需要的间距类型,去寻找具体尺寸

  2. 推演关系:参见间距关系推演示例

  3. 整体微调:根据肉眼感受,整体调整最终效果

间距关系推演示例

设计过程中,如何去选择元素间距?提供以下推演方法:

  1. 找到该组件中,最重要的元素,并设定为基准点。

  2. 整理其他元素与基准点的相关性

  3. 设定最相关元素的间距,并以此类推其他元素的间距

Toast 为例,所有元素中,标题最重要,因此设定标题为基准点。描述、图标、操作与标题的相关性等级分别为:①②③

设定 ① = XS,那么② = S,③ = L;然后去对应的横向间距尺度表、纵向间距尺度表中查找对应宽度即可。

备注:该方法提供思路,并非定死规则。

Q&A

间距规范的设计依据是什么?

跟整个设计系统的网格、字体规范密不可分,无论是起始值还是增长的最小单位;间距值增长速度,在不严格遵守数学公式的情况下,往往是实践中沉淀的经验。在间距设计时,有以下两个原则:

  • 有限数量为前提,宁少勿多,保证实操性。

  • 易于记忆,使用时大脑负担轻。

参考目录

Priyanka Godbole(2017), https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c

Carbon Design, https://www.carbondesignsystem.com/guidelines/spacing/

Nathan Curtis((2016), https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62

https://ether.thescenery.co/spacing/?source=post_page---------------------------

Sebastiano Guerriero(2018), https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9