UI设计中容易忽视的细节-间距

色彩、图形、文字是UI设计中的三大构成，间距往往是最容易被忽略的。然而，越是细节，越容易体现出设计师的水平。合理的间距，能够清晰区分界面的层次，更高效地传递界面的信息，给用户带来美感和舒适的体验。

一、什么是间距

间距是界面中各元素之间相隔的距离，分别包括上、左、右、下四个方向的距离，在界面设计中无处不在。合理的间距可以让界面信息更有节奏，提升内容的可读性，通过不同的疏密程度来诠释各元素之间的关系。

二、间距的重要性

设计师层面：在接到一个设计需求时，不用考虑选择哪种间距，根据项目内容的亲密关系，选择合适的间距，提升设计的效率，减少设计师的决策时间。

开发层面：设计师与开发之间沟通更简单，开发人员能够直接按照最小单位递增去写间距，不用每次都进行测量。

用户层面：页面中不同的内容进行疏密排布，信息传递更便捷，提升用户体验。

三、定义间距

1. 文字间距

在设计中，文字的间距有很多因素需要考虑，包含有字间距、行高、段落等。

1） 字符间距

字符的间距是字与字之间的间距，在UI设计中，一般情况下为默认0不做改变。需要注意的是，尽量避免标点或数字英文字母出现在段落的首尾。

2） 行高

字体的行高一般设定为字号的1.2~1.5倍，具体值跟字号有很大的关系。文字越小，行高就越大。我们可以设定字号32px为临界值（非绝对），小于或等于32px的字体，行高为字号的1.5倍；大于32px的字体，行高为字号的1.2倍。（算出来的数值如果是小数，则取临近的偶数）

2） 文字段落

当设计中出现多段落的时，不同段落之间的数值设定也有一定的规律。部分设计师在设置段间距时习惯性多敲一次回车键，这种方式会使段落之间间距过大，内容脱节。

在遇到多段落文字时，一定要手动设置间距。段间距一般为字号的0.5倍或者略大于0.5倍。

四、间距的规则和运用

不同的产品，设计语言不同，表达的内容不同，所采用的间距不一样。

在UI设计中，间距的设定一般会选择一个最小的数字，页面中其他的距离都是根据这一最小基数来定义，最小基数没有绝对的标准，4px、5px、6px、8px都是可以的。选择了最小基数，页面中所有的间距都要以最小基数的倍数呈现。

基数的选择可以根据页面的风格来确定，当页面内容多，需要紧凑型排布时，可以选择小基数（4px）；当页面内容少，信息显示相对宽松时，可以选择大基数（8px）。

以8px为最小的基数，页面中其他的间距都是8的倍数。由于32（8*4）与40（8*5）在视觉上看起来差距不大，所以选择48（8*6），而不是一味地遵循临近倍数关系。当间距数值越大时，根据基数跳跃的倍数也就越大。

在一个设计中，常用间距6个足矣。

1） 重复性原则

页面中，相同内容、相同板块之间的间距相同

2） 亲密性原则

页面的间距根据内容的亲密性变化，亲密性高的内容，间距越小；亲密性低的内容，间距越大

3） 模块内边距小于外边距

在设计的时候，模块与模块之间的间距要小于模块与界面边距的间距。

总结：通过这篇文章可以了解到界面设计中间距的规则，在以后的设计中可以做到拿来即用。有规则的间距，可以使页面更加清晰，层级明确，整体更规整。间距虽然是界面设计中的小细节，但影响着整体的实现效果。资深设计师与新手设计师往往是在这些细节上拉开距离的，做设计要抱有认真，较真的心态。

文章参考链接：

https://www.woshipm.com/pd/4751801.html

http://www.tianhuyun.com/interlocution/714/show

http://www.sucai8.cn/i17530-1.html

https://www.zcool.com.cn/article/ZMTQyNzIwOA==.html

https://www.zcool.com.cn/article/ZMTQ1MzYzMg==.html