怎么设置行间距为1.5倍-UI 界面中的间距有多重要？

UI设计系列文章

▽

如何在UI界面中营造层次感？ 一个重要的设计元素是间距。 今天我就和大家一起研究一下如何更好的处理间距。 文章主要关注四个方面：APP边距、字间距、行间距、内容块间距。 方面来解释。

1. 利润

外边距是指内容到屏幕边缘的距离，也称为安全距离。

在设计过程中，我们常用的边距有32px、30px、24px、20px等，一般是4的倍数。边距的值可以根据页面内容的紧凑程度来确定。 页面内容可以简洁，可以较大，也可以较小。

如下图所示：左图中的蘑菇租房是生活服务类产品，内容比较简单怎么设置行间距为1.5倍，留出40px的边距，让视觉更透气。 右边的淘宝是一个电商产品，内容非常多。 为了充分利用空间，留有20px的边距。

当图片与屏幕之间的边距为0时，用户的注意力会更加集中在图片上。

如左图所示，同程旅游APP的头部横幅采用了柱状布局。 向下浏览时，视线首先会停留在横幅上，以吸引用户的注意力。 如右图所示，腾讯视频APP的封面图片采用了0边距处理。 由于没有视觉引导的空白，向下浏览时视线会被图片分割。 视觉上更容易吸引用户的注意力，视线停留时间更长。

2. 字间距

2.1. 图文一行组合

（1）文字和图片的左右布局：这种布局风格在我们平时使用的产品中很常见。 标题与副标题相匹配。 对比明显，更能传达信息。 那么标题和副标题之间应该使用多少空间呢？ 是不是更合适呢？

这里以携程、CC Talk、微医、微信的单行文字间距为例。 我们可以看到文本之间的间距大多在20-24px之间。 遵循4的倍数原则，具体尺寸根据自己的产品规格而定。

(2)文字和图片的上下布局：从图中我们可以看到，行间距值大多在16-20px之间。

2.2. 多行图文组合

这种布局多出现在电商产品中吉祥物设计，因为想要在列表页显示更多的信息，吸引用户点击。 值得注意的是，这里需要遵循两个原则：第一是亲密原则，同一组信息要亲密处理，距离要保持较小，不同信息之间的距离可以保持较大。 第二个原理是4的倍数原理，可以看到图中的距离都是4的倍数。

3、行距

3.1、标题行距

多少行距合适？ 从下图可以看出，目前大多数的方法都是将字体大小乘以1.2~1.5倍。

3.2、文字行距

如下图所示，文本行距也是字体大小乘以1.2~1.5倍。

4.内容块间距：

主要有两种类型：外块间距和内块间距。

一般情况下，根据格式塔中的“相似原则”，块内的间距会小于块外的间距，以保证内容块之间的亲密性。 同时，模块之间的间距将被拉宽，使层次结构更加清晰。 如下所示：

总结

1、设计过程中常用的间距：例如最小单位为4px时怎么设置行间距为1.5倍，常用的间距设置为8、16、24等4的倍数。在适配初稿时，面对不同的模型size 时吉祥物设计，4px 网格会转换为整数倍，这样我们的视觉元素就不会因为适应而变形、模糊。

2、从信息层次来看，层次越高，内容之间的距离就越大，因为内容越重要，就越会吸引用户的注意力。 利用亲密度原则可以在视觉上减少用户对文本信息的关注。 成本。

3.你总结设计元素的能力决定了你的上限。 间距可以很好地区分内容。 然后，要完成“内容差异化”，让页面更有层次感，除了间距之外，我们还可以利用线条、颜色、阴影、图标等，各种设计元素的综合运用，可以更好的帮助我们设计页面。

PS：UXD设计研究室交流群将满

欢迎广大读者参与设计交流~

长按下方二维码

【点击查看，给自己加个鸡腿】