UI设计进阶干货 ！盒模型间距设计指南

引言

互联网飞速发展的进阶距设计这个时代，非常多优秀的干货用户体验团队 ，无私地公开了他们的盒模设计规范 、UI 组件 ，型间供行业有需要的设计设计团队学习和使用。然而尽管拿到这些优秀的进阶距设计设计指导和组件库，依然不一定能够输出非常有品质的干货设计，仔细研究发现
 ，盒模其中非常重要的型间一个原因，我们认为是设计：不同 level 的设计师对“间距”的把握程度不同，拼凑组件输出的进阶距设计界面信息层次和整体性不好 。

>PART 1：UI 间距基本原理

资深 UI 设计师凭借经验和感觉能快速的干货搭建高质量的模块和页面 ，而新手或资历不深的盒模 UI 设计师 ，费了九牛二虎之力搭建出来的型间页面总是显得有一丝不够完美，要命的是可能他们自己却看不出来
。

就拿很简单的一个登录模块 ，下面两个设计稿对比哪一种更为优雅呢？如果你说右边更好，那我们更有必要一起来继续阅读这篇文章了 。

1. 间距与层级关系

在平面设计排版中间距非常影响设计的品质 ，间距太紧，会感到信息拥挤，难以阅读；间距太松
，会显得内容相关度弱 ，版面太空洞 。

一个对象周围的间距越大，就越容易吸引用户的注意力，这是大留白；间距较远的信息区分较大，而间距较小的信息之间联系紧密 。这是间距在人的内心最基础的理解和感受。这一规律在 word 的章节排版体现得最为明显 ：

源自网络截图 https://www.sohu.com/a/396590247_698728

图中 word 排版 ，保障正文阅读的最小行高是最小间距，段落标题与正文间间距稍大，章节标题与段落标题之间间距更大。当然有的 word 排版章节层级更为复杂 ，但也是遵循这一基础规律：间距的大小需根据信息层级由大到小来同等变化，也就是更高层级的信息板块需要使用更宽松的间距
，间距随层级递减而需要相应减小 。当然最低层级的信息为了保障可阅读性应该具备一个最基础的间距
。

在 UI 界面中
，我们同样遵循该规律，通过间距来区分层级关系，可以很好地帮助用户理解界面信息 。

iOS 的扁平化以及 Material Design 推行以信息为主、弱化视觉干扰
，减少一些不必要的线框修饰的设计元素
，合理控制间距区分层级 ，提升视觉美感 。

我们看一个例子，去掉分割线后，利用间距的变化将界面信息层级简化的效果：

去除分割线 ，将信息重新分组，组内间距缩小，组间间距放大 ，更清晰地把信息呈现给用户 ，界面更加整洁美观。连标题与内容之间的分割线也可以略去，标题下方也留有足够的间距来突出标题文字内容 
，还可以一定程度上节约纵向空间。

无论是 web 端还是移动端
，现在越来越多的设计都尽量减少线条对画面的割裂感 ，采用间距控制来把握信息层级关系。但是间距在 UI 界面上不能凭感觉给，应该遵循上面所说的层级关系规律——间距的大小需根据信息层级由大到小来同等变化。

2. 横纵向间距协调感

通常 word 的排版只有纵向间距的考虑，也就是行间距 ，而字符间距是不需要去更改的。但 UI 设计当中，小到一个图标、控件，大到页面布局，都需要兼顾横纵向的间距 ，否则设计效果都不会好看。

在 UI 设计当中，我们运用各种各样的元素、控件进行组合设计，对于间距的控制没有平面的自由度高。如上图左右对比 ，横向的边距与纵向的边距相等或接近时，界面布局会显得更加协调 ，横向间距过大或过小，都显得不自然，这就是横纵向间距的协调感。

在 UI 设计当中的协调感，从一个文字 、一个图标 ，到一个输入框、一个按钮 ，最后形成弹窗、表单、甚至是页面
、产品 ，应该有一个全局统一的高矮胖瘦的感觉
 。

通常为了广泛运用，我们所设计的最基础的图标是方形的 ，产品中运用的文字主体也是方形的，所以在我们最小一级的层级的横纵向间距基本是相同的
。那么以此为基础，将文字和图标放在输入框、弹窗等控件当中 ，也尽量保持统一协调的间距比例。

当我们设计一个长条状的组件，那么其内部左右的横向间距留白会比上下的纵向间距留白更大 ，反过来就不协调 。

3. 间距与文字行高

通常的界面设计当中，一般以文字信息为主，通过不同的布局和图形辅助设计 ，帮助用户更好地理解系统界面  。web 设计当中浏览器中所能识别的最小字号是 12 号字 ，为了保障中长段文字信息的可阅读性 ，通常会给文字排版赋予一定的行高 ，当文字自动换行时会保持一个利于阅读的间距，比如 ：12 号字 18px，14 号字 20px ，16 号字 24px
，20 号字 32px……

按上图中我们以同等的纵向间距为 8px 来排版这些文字时，他们之间实际的间距 ，人眼所能感受到的距离其实是青色矩形块所表示的间距，他们远比 8px 要大，而且各不相同。

我们的原子级控件、组件中 ，均以文字为主，包括了行高的考虑，所以在组件使用时，不是那么容易控制好间距的协调感。

如同下图中 B 端常见的一些基础的信息板块 ，组件之间的拼装 ，几乎没有见到有相关的指导。不同的设计师在页面实施时可能把间距处理得不一样 ，同一个设计师，在不同批次的设计当中也有可能不一样，并且前端实现出来之后很难肉眼检视是否 100%还原 。

4. 间距与盒模型

为了一定程度上解决 B 端产品中常见的这个问题 ，也为了提高效率 ，减少设计师在这种间距审美上的纠结，同时也考虑到前端能更好的理解我们的设计 ，做到高度还原 ，我们需要理解前端经典的“盒模型”概念。

设计与前端在“盒模型”上达成一致
，才能对应赋予盒子准确的内间距和外间距，才能保障设计的准确还原。当设计也把信息拆解成一个个的盒子时 ，就能记住相同层级的盒子应该赋予的间距。

在“盒模型”中
，所有的内容之间只存在 2 种关系：包含和并列，我们界面中也是如此。

如下图 ，页面标题和它下方模块中的内容属于包含关系 ，下方模块中，一级标题 1 和一级标题 2 属于并列关系。

从开发的角度来看
，所有界面内容都可以按这 2 种方式去实现：

①包含关系

开发通常按下图的方式实现包含关系，内容从属于标题，考虑到排版的整齐性 ，通常内容的 padding 距离要与标题的 padding 一致 。

当然这里如果标题与内容板块之间有明显分隔 ，如下图，标题盒模型就有另一种形态，此时标题文字到分隔区域之间多一个 padding 距离 。

②并列关系

开发实现并列关系可以如下图，两块内容并列 ，不做标题设定，则通常内容之间会采用 margin 处理距离 ，margin 值与其父级的 padding 值接近
。

这两种方式的设计与实现
，都围绕信息内容所占据的视觉区域，遵循间距与层级关系最基础的原则，通过相对协调的间距来处理信息层级 。整个产品界面的信息层级都能以这两种关系进行相互嵌套实现。

>PART 2 ：我们的间距规范

1. 界面层级的梳理

在 UI 设计界面中每一个间距的设置是有逻辑的
。首先我们需要了解内容是什么，他们之间的关系是什么，然后利用间距层级递进的方式来规整页面信息  ，从而得到有节奏感
、有呼吸感 、能让用户快速理解的页面。

如下图
，根据内容的层级关系，最高层级的间距为 64，层级从大到小 ，间距也同时递减
，遵循了间距与层级关系的基本原理。

有关内容的层级关系，请参阅 https://www.uisdc.com/ui-cheat-sheet-spacing  ，图取自此文

所以我们在设计时需要优先梳理出界面的信息层级 ，才能相应设计不同的间距来引导用户浏览界面。

2. 层级间距的基准设定

在 B 端设计中，我们通常定义最小单位为 4px 的网格系统，以 4 的倍数为基准来规范间距
。一般我们以 14 号字为基础正文字号，来定义按钮、标签 、输入框等原子组件 ，然后使用这些组件进行界面设计
。

按照上文中“盒模型”的介绍，我们可以把界面中的元素都封装到“盒子”当中，赋予他们 padding 和 margin 值来控制间距 。

从图中可以看出，在左边包含关系中，内容盒模型内边距 padding 跟标题的 padding 保持协调一致，而右边并列关系中，两个并列子级之间的外边距 margin 与父级的内边距 padding 保持协调一致。

所以不管包含还是并列关系 ，间距的控制都与父级的内边距 padding 相关。而这个父级的内边距由什么决定呢?

左图中标题所处的层级是父级 ，它包含下面的内容子级。标题的 padding 大小其实由标题的文本高度决定（上文 2.2 和 2.3 中介绍的纵横向间距的协调感与文字行高的关系），标题字号越大，对应标题盒子的 padding 值需要更大
，标题字号越小 ，则 padding 值越小 。

右图中 margin 向 padding 看齐
，而 padding 由其父级的 padding 决定 ，这就是嵌套（他总需要有一个父级包含着这个盒子） 。

反过来，两个并列的内容子级里也可以有包含关系的嵌套盒模型，如下图
 。两个或两个以上包含关系的盒子并列时，其父级如果没有标题，意味着这是一个空盒子，padding 为 0，那么理论上并列的子级之间的 margin 值应该也为 0 ，所以两个并列内容之间的间距为 padding 值 x2。

当以 14 号基准字号的组件来进行设计时，我们发现最小的层级的 padding 为 20px 与组件的内间距设计最为协调。

当我们设计 14 号标题的上一层内容时 ，相当于在它的外层再套一层盒子
，设定一个更大的字号 16 和更大的 padding24px。我们直接嵌套发现
，出现两层盒模型的 padding 值直接叠加，导致空间浪费，并且缩进后的文字排版并不美观。

其实按照上文中“盒模型”的嵌套规则 ，16 号标题的内容子集 padding 值应该为 0 ，直接整个嵌套标题 14 号包含关系的整个盒模型。而直接这样嵌套时发现两级标题并没有左对齐，此时需要将父级标题的 padding 调整为 20px。如下图中的效果，通过标题字号也能区分出层级 ，节省了直接嵌套的空间浪费
。

所以我们定义 14 号和 16 号的标题文字，都可以用 padding 为 20px 的间距来进行控制。

在反推过程中，我们发现两个并列内容之间的间距为 padding 值 x2，即 20x2=40，这个间距过大，浪费了太多空间，适当的调整为 32px 后，显得更为协调
。所以当并列的两个盒模型同时有 20px 的内间距留白时 ，并列盒子之间留白距离要适当缩减为 32px（20×2-8） 。

在业务复杂的 B 端产品中，层级往往会超过 2 级，这时该怎么办呢?

3. 盒模型嵌套底板空间循环

我们发现 ，当一个模块空间中出现超过 3 个层级时，再用左对齐的方式，用户的理解难度会变得很大（如下图） ，虽然下图中通过了多种方式来解释层级关系，如分割线
、不同大小的标题、嵌套框 ，但是整个看上去依然不太理想 。

心理学家 SusanWeinschenk 说过：人在识别物体时会寻找规律。所以我们要尽量创建规律来帮助用户快速解读信息。

盒模型的嵌套其实就如同套娃，每层都具备自己一个独立的空间
，循环的嵌套。于是我们尝试着采用了更换底板背景来区分嵌套的空间 ，并限制单个底板空间中出现的层级不超过 2 级，超出则更换嵌套底板，那么嵌套后间距及标题参数则可以重新循环。按照这种规律设计出的结果
，非常富有简单清晰的节奏感
，用户理解起来更加容易 。

若嵌套后只有一层标题时，三级标题优先采用小号标题（14 号），因为它看起来更加协调。

当然这种嵌套也不是无限的 ，一个页面中出现三个底板的嵌套基本上已经达到了极限，再多时就需要考虑从业务角度去梳理信息层级 ，通过页面的层级来表达复杂的信息关系。

4. 丰富层级的灵活运用

通过盒模型嵌套底板空间循环的方式，我们可以使用相同的间距来解决信息层级区分设计，并且很容易的保障前端的高度还原。但是 B 端复杂的系统中，往往上述两种标题不足以覆盖全部的场景，我们通常用于包含关系中的标题层级 ，还有 Tab 选项卡，根据基准的 20px 间距 ，和 14、16 号两种尺寸的标题字号
，我们扩展出 3 种尺寸的标题（大 、中、小）和 3 种 tabs（大尺寸线条型、中尺寸线条型
、胶囊型）。设计使用时层级由高到低，依次使用，不允许跨级。

大标题（20 号）用于概括整体页面 ，页面中只会有一个
，它的行高（32px）和视觉看到的字高（26px）相差了 6px ，根据上方基准 padding 为 20px，那么横纵向的间距会不太协调，我们将左右和下方的 padding 值微调成 24px 后不协调感得到改善。

注意：同一层级容器内，线条 Tab-Bar 不能出现 2 个 ，容器嵌套时允许出现 2 个

5. 总体规则导出

总结一下规则（以 14 号字为基准）：

1. 梳理清晰全局的信息内容 ，统一遵循“盒模型”包含和并列关系，基准间距统一为 20px；
2. 当并列的两个盒模型同时有 20px 的内间距留白时 ，并列盒子之间留白距离要适当缩减为 32px（20×2-8）；
3. 采用盒模型循环底板嵌套进行层级设计 ，单个底板只允许两层层级，超出时采用嵌套更换底板。注意：若嵌套后只有一层层级时，三级标题优先采用小号标题（14 号）；
4. 3 种标题与 3 种 Tab 根据层级由高到低，依次使用，不允许跨级。20 号大标题为页面标题，它的子级左右下方的 padding 值为 24
   。

>PART 3 ：总结回顾

上述的方式是基于我们产品的特性分析得出的，它的目的是为了减轻设计师在设计过程中对间距的纠结 ，同时提升整体产品的可读性和一致性 ，当然不能以一概全。

接下来我们会进一步地在更多的产品和场景中去验证使用，并继续深入研究其中的规律
。

参考文章：

1. https://blog.prototypr.io
2. https://www.uisdc.com/ui-cheat-sheet-spacing

碧野青风