标题与分割线

一、亲密原则

在空间上接近的内容，我们更容易把他们归为一组，就是亲密原则。

如下图：

亲密原则

我们很容易就可以把唐僧、孙悟空、沙僧归为一组，而把猪八戒分离出来，因为前三者里的更近。

再比如下面这张：

示例

示例中，左边的图：我们无法去分清标题是属于上面还是属于下面的。右边的图：我们对信息进行了分类。这样的展示就更加的直观。

上述中在界面中的应用：

信息分割

我们在平时工作中也经常会遇到这种信息排版。首先我们需要清楚，上图的内容有三个：上分割线、内容区和下分割线。此时我们可以判断，内容区内的所有间距一定小于内容区与分割线的间距，因为根据亲密性原则，有关联的内容会离的更近，内容区的内容相对分割线来说，就是关联性比较强的，所以它们的间距就会相对较小。

这样的间距规律还可以让我们清晰的区分开每一条信息，不会导致信息干扰。

二、对比原则

先来看一张图：

示例2

图示例2，虽然运用了亲密原则。但是看起来，是不是显得有点混乱。

我们再来看这张图：

示例2

从示例1，和示例2的对比中我们就不难发现，如果我们把主标题与次信息的大小对比强烈一些，这样我们首先聚焦的是主信息的内容，然后才是次信息的内容，这样的话，看起来就不会那么的凌乱。界面的层次也区分来了。

那我们在工作中的应用：

示例3

在原先的版式中，主标题与内容区分不来，主要信息没有体现出来。

示例4

调整后：把主标题基础信息与名称进行了更加强烈的对比之后，我们首先聚焦的就是主要信息，然后才是内容。

而在实际应用中，分割线的使用也是要有区分。如下图：

示例5

在示例5中，我们可以看到系统配置的分割线与批量收费的分割线并没有办法给我们一个很好的信息层次划分。

示例6

示例6中，调整过后，我们把批量收费客户配置的分割线进行的弱化，这样界面中信息的主次关系就拉开了。

排版中，颜色对比、粗细对比、形状对比、疏密对比等等，每一个元素之间的一些小细节，都影响着视觉上的美观。