在界面设计间距也是重要元素之一。合理的间距布局可以使界面更加愉悦，有助于清晰地传递信息，提高用户体验。那么，如何定义和布局间距呢？在本文中，作者总结了间距布局策略。

大多数时候，我们发现他们精心设计的作品总是混乱的感觉，根本，大多数是文本、图形、颜色处理不当，后续优化调整也围绕这些点，这就是为什么设计师在设计规范中，将文本（标题、文本、提示）、颜色（主色、辅助、装饰、渐变使用场景）规范非常详细。

然而，有时即使规范使用得当，仍然没有达到理想的视觉效果。这里需要提到的是，很少有人关注设计规范，很容易被忽视「间距」问题。

优秀的界面设计应体现在每个维度上，间距也是设计中不可或缺的一部分，特别是当界面元素相对密集时，需要正确掌握间距的使用，合理利用间距，可以更有效地向用户传达信息。

文字、图形、颜色是UI设计的三个组成部分，间距是这些元素组合的媒介，如何通过间距给用户带来更舒适的视觉体验是设计过程中极其重要的一部分，那么你所理解的间距是什么，什么效果，如何合理有效地使用呢？作者通过本文进行了整理和总结。

一、间距在UI中的重要性

1. 什么是间距？

间距是指界面元素之间的距离，可以是文本本身、图片、组件、模块或界面两侧的安全距离（如网页宽度为1920px，内容区为1400px，所以安全距离全距离是260px）等。

作为UI设计师，设计界面中的每个元素都需要考虑上、下、左、右和相邻元素的属性，合理调整间距，利用间距之间的规律组织界面内容，确保信息的节奏，给用户一个轻松和预订的浏览体验。

2. 间距的实际作用

间距可以使界面信息更有节奏，提高内容的可读性，也可以通过不同程度的密度来解释元素之间的关系，以吸引用户的注意，所以在控制界面间距时，必须有严肃的心态，任何变化和调整都应该首先考虑为什么，可以给产品和用户带来什么。要做好间距，不仅要停留在视觉层面，还要从多个方面进行思考。

设计师层面：规范的定义间距，不需要考虑每个元素的大小，有效地减少决策和思考时间，提高效率。

开发层面：开发可以根据基本间距来定义变量。从长远来看，虽然不能炼成像素眼，但只有视觉才能看到间距的倍数。例如，基础间距为8px8.使用增量px、16px、24px、32px、48px…等等，基础间距直接用于开发x1、x2、x3…，以此类推，肉眼在发展眼中肯定看不到1px但是可以区分8的区别px不需要每次测量差距，但也可以减少误差，高度恢复设计效果。

用户层面：界面效果有节奏，美观一致，信息的有效传递变得轻松，用户体验可以大大提升。

3. 间距的统一

设计规范的目的是提高设计师的工作效率，高效沟通团队，始终保持设计风格的高度统一。同样，间距也是设计规范中非常重要的一部分。作为规范中的最小单元，如果不遵循统一性，将直接影响界面的整体布局，信息密度严重影响用户的浏览。不仅是设计师，每次面对相同的模块，开发都需要定义不同的间距，这是崩溃的，没有规则可循。

统一的间距可以使界面的视觉效果更有节奏，设计师可以直接重复组件设计一些类似的模块，即使许多人一起完成同一项目或更换成员，也不会导致整个间距不统一APP混乱的风格。

对于开发，如果间距的使用规律明确，即使有小误差，也可以自行纠正，比如使用8px增量，8、16、24…按照倍数规律等。如果有9个间距，开发将更正为8或15，将更正为16。尽管设计师需要小心，尽量不要有这样的小差异，但没有什么是绝对的，统一的间距可以减少设计的差异和与设计师的频繁沟通，进一步提高开发效率。

从上图可以看出，间距不规范，信息就像一锅粥，信息可以自动分组。

二、定义文本间距

文字是UI设计中非常重要的信息元素，虽然大多数设计师更了解文本的属性，但由于其他信息的干扰，在实际设计中总是不能合理使用，这与在线视觉效果的预期有很大的不同。文本的各种间距处理似乎都很简单，但事实上，有很多因素需要考虑，如文本间距、行高、段落等。让我们带你去理解它。

1. 字符间距

字符间距一般是设计工具的默认值，无需调整。当遇到多行文本需要避免头尾标点符号时，工具中的头尾功能可以自动调整字符间距。如果没有此功能，则需要手动调整。这里没有所谓的技能和方法，头尾可以避免标点符号。

此外，在设计卡片和瓷片区域的标题时，有时需要调整字符间距来提高界面的舒适性。间距值自行定义，但相同级别的标题间距必须保持一致。

2. 文字行高

行高是指上框 下边框 品牌大小的高度之和主要针对多行文本。在平面设计中，行高没有一定的标准。如果没有特殊需要，可以使用系统默认行高。

在UI在设计中，文本将有5~6个不同的等级。为了方便用户阅读，一般会设置行高标准，特别是新闻和信息类型的应用本身主要是文本内容，不同的行高会对文本的可读性产生很大的影响。

文字行高一般设置为字号1.2～1.五倍，具体值与字号有很大关系，字越小，行高越大。例如，我们可以设置32个字号px中间值(非绝对)小于或等于32字体，行高为字体大小的1.5倍，大于32的为1.2倍。此外，所有行高也可以直接固定在字体大小的1.5倍。不难发现，字体越大，折叠的概率就越低。想象一下，如果是48px界面还剩下多少空间？

3. 文字段落

移动文本段落间距的重要性UI界面并不明显，更多地反映在网页设计中。需要纠正的是，一些设计师习惯性地在设置间距时敲回车键，这是不可取的，会导致间距过大，内容脱节。

如有必要，必须手动设置段间距。这里没有固定的值和规则，视觉舒适。作者习惯于将段间距设置为字体大小的0.5倍，如30、15、40、20，仅供参考。

三、定义元素/组件间距

没有绝对的标准来定义间距，主要取决于最小单位，如4px、5px、6px、8px没关系。使用哪个值取决于产品本身的定位和内容组织形式。前提是所有间距应遵循最小单位，并根据倍数形成规则。

在设计界面时，我们需要使用间距来建立信息水平，改善浏览体验，表达元素之间的关系，这就是为什么当我们打开新闻和信息时，电子商务应用程序会发现信息非常紧凑，当我们打开工具和社交应用程序时，我们觉得信息相对宽松。间距基础越小，页面越细；基础越大，页面空白越多，使用不同的基础，呈现不同形式的视觉效果。

作者的工作通常是8px作为基数，衍生出8、16、24、32、48、64这6个间距值，完全可以满足绝大多数使用场景。当然，信息较少的页面也会使用120、160、200…其它间距值，如缺失页、登录页等。不难看出以上8px在为基数定义间距值时，没有40、56这两个值，它们不是8倍吗？

我们比较8和16，后者是前者的两倍，间距变化特别明显；但如果比较56和64，后者是前者的1.14倍，间距差异很小。

关键是，设计师在定义间距时需要遵循倍数规则，但也需要跳出僵化的规则来考虑界面美观和用户浏览体验。间距值越大，根据基数跳跃的倍数就越大。事实上，设置字体大小是相同的逻辑（稍后详细说明）。

定义模块间距

从信息水平的角度来看，等级权重越高，间距越大，在现实世界中也是如此。物体周围的空间越大，就越容易吸引人们的注意。

模块间距分为块内间距（同一模块中不同元素或信息组之间的距离）和块外间距（同一页面中不同模块之间的距离）。为了更好地区分信息水平，块外间距将大于块内间距，并保持块内信息的亲密性。

如下图所示，将装饰序列步骤、官方策略和常用服务视为不同的信息模块，每个模块中元素的间距将远小于每个模块。

五、间距的使用技巧和原则

1. 接近性原则

信息的相关性需要通过每个元素之间的间距来反映。格式塔原理中的接近原则告诉我们，相互接近的物体被认为比相互距离较远的物体更相关。因此，相关元素越接近，用户就越能感知到信息的相关性，并了解整个界面中模块信息的逻辑关系。

2. 用留白强调

很多时候，如果你想让一个元素变得突出，你可以通过增加大小、修改颜色值或加粗来强调，但这并不是突出信息的唯一方法。当所有元素都变得突出时，这意味着没有什么是突出的。

如果要不同程度地突出界面中的元素，留白也是强调信息的一种方式，它可以引导用户关注特定的内容。

3. 使用网格系统

充分利用网格系统（以上详细说明），通过最小间距值增加，使整个界面看起来更加协调。网格系统可以使设计师在元素之间做出更快的决策，无论是迭代还是更换设计成员。

4. 行高规则

这个问题在很多团队中都是严重的伤害，甚至在设计验收中也被直接忽略了。UI在设计工具中，添加文本元素时，会有默认行高。在之前的内容中，有一个行高是字体大小的1.2~1.5倍，笔者认为单行文字的行高是需要手动设置还是遵循默认，但必须与开发保持一致。

行高决定了文本边缘与定界框之间的距离，而开发只能看到定界框与其他元素之间的距离。

1）默认行高

默认行高值将根据一定的倍数自动增加或减少字体大小的变化，需要通知该规则或倍数进行开发，开发将该规则植入代码，以最大限度地恢复设计效果。

此外，在设计界面时，需要计算多组文本元素的上下间距（从文本边缘到定界框的间距） 文字元素间距=实际间距)或手动测量可达到精确状态，如下图所示：

2)手动设置行高

手动设置字体大小，设置行高，确保文本边缘靠近定界框设计过程中调整间距时，无需计算，可根据设计工具的智能提示进行调整。

5. 设置间距值数量

在同一APP在应用程序中，根据最小基数定义的间隔值不容易太多，大多数设计场景通常可以在6个左右满足。例如，8px8、16、24、32、48、64等基数px基数为5、10、15、25、40、60等。

过多的数量会导致界面不同元素和模块之间的间距差异化不够明显，过少的数量不能满足多元素和模块使用场景，也会导致较大的间距跨度。

6. 相邻间距值明显

设置间距值应遵循值越大，增加倍数越大的原则。当相邻间距值的差异较小时，用户很难感知界面中信息之间的逻辑关系。我们需要根据格栅系统中间距值的增加设置更大的间距值，使相邻间距值之间的视觉差异更加明显。

7. 跳出间距的束缚

当界面中的信息密集且间距不足以满足信息的突出性时，最好跳出纯间距规范的束缚，换一种方式。例如，为元素添加背景以聚焦、使用分隔线/色块间隔、调整元素大小等「此消彼长」的道理。

六、结语

如果在处理界面信息级别时，仍然会感到非常混乱，从间距的角度来看，可能会有不同的收获。

虽然一开始始，规范间距的影响很小，但随着团队规模的扩大，界面越来越多，内容越来越复杂，所有内容统一间距规范，无论是构建一致的界面视觉效果，还是开发和设计师，都可以提高用户体验，也可以提高团队的工作效率。

间距是否标准化，决定了界面是否规则，信息传输是否清晰。即便如此，间距也只是解决信息水平的方法之一，不能限制设计师的游戏和思维空间。设计规范的制定有助于项目的有效运行、间距或颜色。设计师仍然需要从实际的用户场景开始，通过不断的思考和经验总结，完善更合理、更符合项目需求的设计规范。

专栏作家

沙漠飞鹰；官方账号：能量眼球，每个人都是产品经理专栏作家。致力于产品需求的驱动和产品体验的挖掘，利用设计手段为观众带来更好的体验，即美观易用。

本文原创发表于大家都是产品经理，未经许可禁止转载。

题图来自 Unsplash，基于 CC0 协议。

本文的观点仅代表作者本人，人人产品经理平台只提供信息存储空间服务。