王M辩称：上周末，我和一位大学同学在微信上聊天（打击），现在他是一家上海公司的UED主管。在中间，我们谈了很多关于那里的东西，他说了一句话让我印象特别深刻。

事实上，很多时候，我们觉得我们的作品非常平庸或“看似混乱”。大多数原因是颜色匹配，字体和间距之间的对比不好。这些话很容易说，但很难做到。我学到了很多设计理论，但我仍然做得不好。

颜色匹配和字体的比较一直受到每个人的高度重视。在设计设计规范时，我们首先确定产品的主要和次要颜色。对于文本，不同级别的文本（标题类，正文类，提示类）将选择不同的字体大小和单词颜色，这些将出现在您的设计规范中。但是，我很少看到人们在设计规范中提到间距，因此从这个角度来看，间距经常被忽视。因此，在本文中，我对间距进行了相对简单的总结。

　为什么要使用间距?

我一直认为设计师在做事时必须“真实”。您在设计过程中做出的任何决定都必须问自己为什么这么想。有针对性地进行此操作将减少更少的弯路和更容易的增长。

因此，如果我们想要了解间距甚至更标准化的间距使用，我们必须首先理解为什么使用间距。间距的使用有很多效果，可以吸引用户的注意力，提高内容的可读性，并解释元素之间的关系。实际上，简单来说，间距的作用可以概括为一句话：建立可视化层次结构来简化界面内容，使用户更容易接受。

间距的种类

间距可以从位置分为两种类型，一种间距用于区分不同的内容块;另一个间隔用于区分内容块中的信息。为方便起见，我们在此将其称为：块内的间距和块外的间距。

物体周围的空白越多，吸引的眼睛就越多。

对象周围的空白越多，就越容易吸引用户的注意力。

从信息层次的角度来看，内容间隔越高，内容越大。因为更重要的内容是为了吸引用户的更多关注，为了更好地区分，块内的间隔小于块之间的距离。

以Airbnb为例，因为从信息层面来看，房屋的水平（内容块）远高于其引入信息，因此每个房屋之间的间距大于房间图片，位置，价格间距。

上图中左侧的界面是正常的，右侧的界面已由我处理，因此块内的间距与块外的间距一样大。我们可以清楚地看到右侧的界面会给用户带来问题。他们不知道下面的文字是针对上面的图片还是下面的图片。

当然，我们还可以发现块内的间隔由于其内部信息层次的不同而被划分两次，这意味着块内的间隔不同。

　行间距

间距的使用会对文本易读性产生重大影响。这里文本的间距主要是指单词之间的高度间距，我们称之为行高。如果线路太大或太小，则不利于用户阅读。通常，行高选择为字符高度的30％。

　间距与线条

在文章的开头我们还提到间距的主要功能之一是内容差异化。因此，在内容差异化方面，线条是我们无法规避的主题。因为界面设计中线条的主要功能是完成内容的区分。随着极简主义风格的兴起，去线性化设计也成为一种设计趋势。设计师开始使用间距（白色）来代替线条来完成区分。因此有必要了解间距和线条之间的关系。

对于相同的内容，请使用左侧的线条和右侧的间距。从上图中，我们也可以看到为什么线条被设计师遗漏了。线条的使用将极大地分散用户的注意力，并且整个界面将略微拥挤。

虎扑的界面是有衬里的，但我发现删除线后界面略显凌乱，但用户仍然可以通过间距来区分内容。

实际上，线条和间距不是对立的。在同一个界面中，我们还可以看到线条和间距，而功能则是区分内容。

　　不只是间距

您总结设计元素的能力决定了您的上限。同样的用户提示功能，你只知道对话的单一使用，但是大奶会根据提示的不同强度和用户是否需要操作来选择对话，吐司和小吃吧，从而建立完整的用户提示系统。

出于同样的原因，我们都知道间距可以很好地区分内容，所以实际上，要完成“内容区分”，我们不必使用间距。除了已经说过的线条之外，我们还可以使用颜色匹配，阴影，图案等。

例如，在上面的示例中，信息级别的间距已经很好，但整个界面将更加单调。我们可以引入图标和配色方案来增强不同内容之间的对比度，使整个界面更加明亮。

　慎用间距

虽然这篇文章是关于如何更好地使用间距的，但我个人认为我应该谨慎使用间距。因为如果你想通过放大间隙来完成信息级别的区分，就会有很多空白区域，整个界面会特别清爽。但是老板可能会心烦意乱，这个页面怎么这么空？你懒吗？添加一些内容，让整个界面变满。

当然，这是一个嘲笑。我对间距的禁忌主要是由于页面长度的增加。因为一旦拉开间距，就不可避免地导致界面长度的增加。可以在上一个屏幕上显示的内容需要刷卡才能看到。我们不知道对于用户来说，他们更喜欢刷新界面（更白）或简单操作（不滑动）。

设计师必须将自己的设计融入用户的角色，但不要去“代表”用户。我想通过自己的主观妄想来进行设计。我认为这个界面看起来不错，但它并不一定适合用户。但是，设计人员很少能够参与用户研究过程，因此数据无法支持我们的一些想法。对于大多数设计师来说，这也是一个痛点。

　　总结

间距对于界面设计非常重要。我希望这篇文章能引起所有人的注意，并希望你在阅读之后能获得一些东西。

« 语音交互中的“等待经验” | 交互设计过程（2）：架构设计 »