无论是排版还是配色，都要对比明显，字大字小都要明显，间距要拉就拉开，配色颜色要正。最怕那种中庸的，是最没有气质的。
其实很多时候，我们觉得自己的作品非常的平庸或者“看起来特别模糊”，大部分原因就是配色、字体和间距的对比没有做好。
配色和字体的对比一直都很受大家的重视。在制定设计规范的时候，我们首先会确定产品的主色调和辅助色。对于文字来说，不同级别的文字（标题类、正文类、提示类）会选择不同的字号和字色，这些都是会出现在你的设计规范中。然而很少看到有人在设计规范里提到间距，间距经常会被我们忽视。那么这篇文章里我就对间距做了一个比较简单的总结
为什么要使用间距
首先我们要明白为什么要使用间距：间距的使用有很多作用，可以吸引用户注意力、提升内容的可读性、阐述元素之间的关系。其实简单来说，间距的作用可以归纳成一句话：建立视觉层级来简化界面内容，让用户更容易接受。
间距的种类
间距从种类上我们可以分为两种，一种间距是用于区分不同的内容块；另一种间距是用于区分内容块内的信息。为来表述方便，我们在这里城其为：块内间距和块外间距。
从信息层级的角度来说，级别越高的内容间距越大。因为越重要的内容就要吸引用户越多的注意力，因此为了更好的进行区分，块内间距都是小于块外间距的。
块内间距因为其内部信息层级的差异会进行二次区分，也就是说块内间距也不都是一样的。
行间距
间距的使用会对你的文字易读性产生很大的影响。这里文字的间距主要是指文字之间的高度间距，我们称之为行高。行高过大或过小都不利于用户阅读。一般来说，行高选择为字符高度的30%是恰到好处的。
间距与线条
在文章开头我们也提到了间距的一个主要作用就是内容区分。那么说到内容区分，线条是我们无法绕开的一个话题。因为线条在界面设计中主要功能就是完成内容区分。而随着极简主义风格的兴起，去线化设计也开始成为设计的一个潮流。设计师开始使用间距（留白）来取代线条来完成区分。所以弄懂间距和线条之间的关系是非常有必要的。
同样的内容，左边的使用线条，右边使用间距。从上面这个图，我们也可以看出线条受到设计师冷落的原因。线条的使用会极大的分散用户的注意力，整个界面会会稍显拥挤。
虎扑的界面是有线条的，但是我发现把线条去掉以后用户还是能够通过间距来很好的区分内容。
其实线条和间距并不是对立的关系，在同一界面中，我们也会同时看到线条和间距，而且功能都是为了区分内容。
不只是间距
你对设计元素的归纳总结能力决定了你的上限。同样的用户提示功能，你只知道单一的使用dialog，然而大牛们却会根据提示强度的不同和是否需要用户操作来选择dialog,toast和snackbar，从而建立一套完善的用户提示体系。
同样的道理，我们都知道间距可以很好的区分内容，那么其实要完成“内容区分”，我们不一定非要使用间距。除了已经说过的线条，我们同样可以使用配色，阴影，图案等。
例如，上面这个例子中，其实间距已经很好的完成了信息层级的构建，但是整个界面会显得比较单调。我们可以引入图标和配色来强化不同内容之间的对比，而且使整个界面更加明亮。
慎用间距
这篇文章虽然是写如何更好的使用间距，但是对于间距的使用，我个人还是觉得要慎重一点。因为如果你要通过放大间距来完成信息层级的区分，那么会出现大量的留白，整个界面也会显得特别清爽。但是老板可能会不爽，这个页面怎么这么空？你是不是偷懒了啊？再加点东西进去呗，让整个界面充实起来。
当然这算是调侃，我对于间距使用的忌讳主要是来自页面长度的增加。因为一旦你的间距拉开势必会造成界面长度的增加，以前一屏就可以展示的内容你现在需要滑动才能看完。我们不知道对于用户来说，他们更偏爱清爽的界面（多留白）还是简单的操作（不要滑动）。
文章来源：微信公众号王M争
网友评论