传统平面排版有四大原则：亲密性、对比、重复、对齐。那界面排版有什么原则呢？今天菜心就来用实例分享一下界面排版中需要注意哪些原则。

大纲如下：

亲密原则

对比原则

平衡原则

相似原则

简洁原则

封闭原则

情感原则

一、亲密原则 

空间上接近的内容，我们更容易将之归类到一组，这就是我们所说的亲密原则。

我们很容易将唐僧、孙悟空、沙僧分成一组，而将猪八戒单独分离出来，因为前三者离的更近。

我们来看下面这张图：

你能分清标题是属于上面还是下面吗？

当你了解了亲密原则后，就知道为什么分不清，这也就是我们学习理论知识的原因，当我们看到错误的设计时，可以说出哪里不对，而不是凭感觉。

那这个原则如何运用到我们界面设计上呢？

看下图：

上图是简书文章列表中的一条，我们在平时工作中也经常会遇到这种信息排版。

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

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

亲密性原则是我们在界面排版中最常用的原则之一，大家一定要牢牢的记住并大量实践，为我们后期的排版设计打下坚实的基础！

二、对比原则

我们经常会遇到界面看着混乱的情况，但又不知道为什么，其实大部分情况都是因为界面内容对比不明显而造成的。

虽然上图符合亲密原则，但似乎看着还是有些凌乱，其中一个很重要的原因就是因为界面信息内容的对比不够强烈，我们不知道该看哪里！

而我们来看一下今日头条的信息排版：

你会发现重要信息和次要信息的大小对比非常强烈，使我们聚焦在主要信息（标题）上，这样看着就不会那么散乱。

看完这个排版后再去解决上面那个散乱的问题，会不会更容易些呢？大家不妨自己尝试排一下，这样会让你的印象更加深刻。

我们平时也要多去研究一些排版，好的排版你需要去分析它为什么好，不好的排版你需要分析它为什么不好，你能否排的更好，只有通过这样不断地刻意练习，你才能扎扎实实的前进。

回到正题，其实关于对比的方式还远不止大小层面，还有颜色对比、粗细对比、形状对比、疏密对比等等，所以大家在进行对比排版的时候，不妨多维度考虑，一定可以找到合适的解决方案。

三、平衡原则

平衡原则是界面排版布局的首要原则，大到整个官网，小到一张图文，都需要我们对视觉平衡有一个良好的把控。

举几个例子：

看上图，我们可以发现，图片下方的文字是左对齐，为了达到视觉上的平衡，设计师将VIP 图标和更新集数放在图片右侧。整个页面看着就会平衡很多。

这里需要注意一点，一些艺术类的海报排版为了达到某些效果，可能会有意打破平衡，但那是特殊的平面艺术设计，而对于我们UI设计来说，在进行界面排版的时候，大多数情况还是要遵循平衡原则，这样才能让用户感觉整个界面更加协调、舒服。

四、相似原则

我们需要对相似的内容赋予相同的属性，例如同一级别的标题文字大小相同，相同颜色(如蓝色等)的字体都可以点击等等。

五、简洁原则

5.1 数字简洁

很多同学有个不好的习惯，就是执行过程中不爱看图层的位置和大小，尤其是位置，如果你的软件没有选择像素自动对齐，这样的坏毛病会导致位置的数值经常出现小数点或者奇数，从而使整个界面元素的间距、位置都不够规范。

5.2 规则简洁

如果你有平面设计的经验，你会很清楚，一张平面设计的字体种类不宜太多、对齐方式不宜太多…..因为规则太过繁琐会让你的设计变得复杂，甚至臃肿不堪。

而界面设计师也是一样的，能用一个规则解决的问题，就尽量不要使用两个。

列表信息上下边距（绿色和蓝色的高度）就可以使用一个规则，如果你非要定为不同的距离，就会增加设计甚至开发的复杂性，从而造成不必要的资源浪费。

5.3 样式简洁

今年有一个流行趋势是“无线化分隔”。将分隔线去掉，这就一种样式上的简洁。

国际版QQ概念稿、今日头条的评论页面都采取了这种简洁的分隔样式，这样的排版方法使整个页面看着轻量、干净、大气，更加突出内容，甚至能够增加用户的欣赏时间。

总结

作为设计师，我们的根本职责还是解决工作上的问题，在实际工作中经常遇到设计原则与其他方面的因素有冲突、或者某两个设计原则互相矛盾的情况，这时候就需要我们去合理的处理矛盾，让工作顺利的进展下去。

遵循原则是好事，但是如果被规则限制死那就不是什么好事了，特殊场景需要特殊处理，不要过度的陷入规则之中而让自己失去创新的能力，设计原则并不是一成不变的，在我们前行的路上，你也可以多总结，多积累，最后沉淀出属于你自己的一份设计原则！