亲密性是指将有相关性的内容组织在一起，使它们在物理空间上相互靠近，这样内容相互之间就存在很近的亲密性，它们将成为一个视觉单元，而不是多个孤立的元素。

可以看到下面两张图，左图中商品的价格及信息是否让你产生困惑，这个信息到底是属于上面的商品还是下面的？

反观右图，通过合理的间距布局，信息距离上面的图片近，下面的图片远，让你很直观的就会把相同的信息归为一类，这便是亲密性原则的使用

为什么要用亲密性原则

使用亲密性原则的根本目的是实现组织性。尽管其他原则也能达到这个目的，不过利用亲密性原则，只需简单地将相关的内容分在一组建立更近的亲密性，就能自动实现条理性和组织性。在界面中，用户将更容易阅读，也更容易被理解，体验也会更好

例如下面的案例，左图中头像，文字信息布局混乱，我不知道哪个文字信息是属于哪个人的，通过亲密性原则，只需简单的将内容相关的头像+文字信息归为一类，通过间距去分隔，很快我们就能得到一个具有条理性和组织性的页面了

UI界面中用好亲密性原则的技巧

具有相同含义和功能的要素进行整合首先要理解这个界面中不同模块的作用是什么，将关联性高的内容模块靠近放置成一个组，这样在视觉层面上就会自然的理解为这是一个内容，更容易理解

我们一起来拆解下这张页面，左图中将本页分成了4个区域，红色区域我单独拆解出放在右侧，可以发现这块区域是由内容发布人+图文信息+所属社区+该内容互动区域组成。有没有发现什么规律呢？对，这块区域的所有内容都是相关联的元素，因此他们在这个界面中的布局就更为紧凑，目的是利用亲密性原则实现信息的组织性

其实原因很简单，同样是利用亲密性原则，将选中态和未选中态在视觉上做分隔，让用户清晰的感受到差别

2.关联性低的要素要分开

关联性低的要素信息要分开，且不要模棱两可，一定要清晰也明确的拉开间距，明确的表明它们之间是没有关系的

在文章开头的案例就非常适合说明这点，左图中商品的文字和价格信息是属于上图还是下图？由于间距的模棱两可，导致在视觉上难以区分，因此需要像右图中将关联性低的要素彻底分开，拉开明显的间距

3.有意识的观察阅读的视觉动线

在将关联性高的内容模块归为一组的同时也要有意识地注意你归类的这一组内容是怎样阅读的，你的视觉视线怎样移动的：从哪里开始；沿着怎样的路径；到哪里结束；读完之后，接下来看哪里？整个过程应当是一个合理的过程，有确定的开始，而且要有确定的结束。不然一个散乱的视觉动线也会干扰用户的阅读体验，增大理解难度

要小心的坑

1.避免一个页面上有太多孤立的元素。

2.不要在元素之间留出同样大小的间距，除非各组同属于一个模块。

3.不同属一组的元素之间不要建立关系！如果元素彼此无关，要把它们清晰的分开，拉大间距，不要模棱两可

4.不要仅仅因为有空白就把元素放在角落或中央

对齐为什么要对齐

对齐的根本目的是使页面统一而且有条理。其效果类似于马路上的线，将左转，直行和右转的车辆分别对齐在一条道路中

同时“对齐”是排版的一个基本原则，人一看到排列规整的东西，会本能的觉得好看，舒服，专业。因此对图片，文字等页面基础信息进行排版时，将各个元素认真对齐非常重要，这也关乎到对一个设计师的评价，千万不要因为一个像素没对齐而让别人觉得你不够专业

对齐让你的页面变好看

1.对齐使页面具有稳定感和整体感

2.对齐可以凸显页面整洁，专业感

UI界面中用好对齐原则的技巧

1.任何元素都不能在页面上随意摆放，要将内容有关联性的一组信息进行对齐

2.在合适的场景下用合适的对齐方式

左对齐

左对齐在UI界面中非常常用，在视频feed流，社区feed流，电商feed流都十分常用，下图中的爱奇艺和岛的feed流的文字信息都是左对齐布局的

右对齐

右对齐在UI界面中也十分常见，比如标签的布局，一行文字内容的补充或引导点击的入口都是以右对齐居多，下图是懂车帝的两个页面，可以看到右对齐的红色区域是“阅读量”是对左侧内容信息的补充展示；“进圈”则是引导点击的按钮

居中对齐

居中对齐在UI界面中多用于底bar icon和文字的对齐，以及弹窗或对话框的布局中

顶对齐

底对齐

底对齐常用在双列流底部的两组信息上，下图是马蜂窝的两个界面图，可以发现在双列流中左侧的用户信息和右侧的点赞信息呈底对齐的状态

等间距

常用在底bar，头部tab，金刚区的布局场景下使用。下图是马蜂窝和京东金融的金刚区，可以很明显的发现两个产品的金刚区均是遵循等间距的布局原则

为什么要用对比原则

所谓对比，简单来说就是把页面中的一个元素和其他元素相比较的设计手法

就像下图中你之所以会觉得左侧的三栋大厦高是因为有了周围相对低矮房屋的对照，这便是在这张摄影作品中对比原则的使用

使用对比原则可以使页面的信息层级更加清晰，更具美感，做出富有魅力的界面来，因此对比是不可缺少的重要的，同时也是非常基础的设计技巧之一

UI界面中用好的对比原则的技巧

1.明确想要强调的元素和显著差异化处理

要用好对比原则，最重要的一点是要让对比的两个元素差异足够巨大，千万不要模棱两可，设计出一个只比另一个元素大一点的内容来。

我想你在工作中一定遇到过这样的问题，业务方或pm说1.2.3.4这四个模块都非常重要，都要在页面中去凸显，都要占最大的面积让用户看到......

是不是感觉很头大？没关系，你可以平静的告诉他，我能理解这4个模块都非常重要，但是如果我把这4个都突出了，这也强调那也强调，最终的结果是这4个模块都没有突出，就如下方左图一样，4个模块占得面积都很大，但你会看出来哪个是突出的内容吗？显然是没有

因此必须有所取舍，突出一个模块，另3个进行弱化，最终我们可以得到一个凸显的模块，显然是要比4个模块都突出要好很多，就像下方右图一样，模块1在页面中明显大于其他模块，这就是对比原则的使用

2.巧用跳跃率

页面中占比大的模块和占比小的模块之间的比例称为跳跃率，比例越大跳跃率越高，比例越小跳跃率越小

跳跃率高的页面具有强烈的视觉冲击力，对于想要凸显的信息，可以使用高跳跃率的技巧去呈现，对于信息传达室非常有效的方法，下面两张界面均是跳跃率高的页面，可以发现红色区域和蓝色区域的比例大，凸显红线区域的内容

跳跃率低的页面给人以高级感和信赖感，优雅而有说服力，理智而深沉的调性

3.对比的形式

在下图中通过实际案例来让大家更直观的理解

文字大小对比：大标题和小标题的对比

色彩对比：底部按钮橙色和红色的对比，两个按钮的样式虽然一样，但含义和重要程度不同，通过颜色来对比区分

图片大小对比：头部大banner和小图的对比

高密度和留白的对比：红框模块内的高密度信息和大间隔的留白对比