Clarity Design · 协作产品 UI 设计语言

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

设计原则

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

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

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

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

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

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

等宽

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

矩形

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

矩形变形

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

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

设计过程中，如何去选择元素间距？提供以下推演方法：

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

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

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

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

参考目录