在界面设计中面对排版有些 UI 设计师却总没有头绪，或者做设计全靠感觉，其实我们在排版的时候是有规律可循的。今天品索教育给大家分享排版的四大黄金法则：对齐，亲密性，对比，一致性。不论多么复杂的界面，用这几个原则都能轻松搞定。

一、最基本的原则——对齐原则

对齐原则是最基本也是最简单的一个原则：页面上的所有元素应该是遵循秩序的，而不是随便放置的，有一条看不见的线将它们约束起来。对齐的方式有三种，居中对齐，居左对齐，居右对齐，在一个界面中最好只有一种对齐方式，也就是要么居中，要么居左，要么居右。

其实在对齐原则中还有一条进阶的小技巧：就是尽量少使用居中对齐，因为居中对齐是新手最常用的对齐方式，但是大家已经有点审美疲劳了，会显得页面呆板无趣，我们试试居左对齐、右对齐都更加有设计感。

二、最重要的原则——亲密性原则

亲密性原则就是控制各个元素之间的距离的。在界面设计中，关系越紧密的元素离得越近，这就是亲密性原则。具体在这张名片中，我的名字和我的职位都是我的属性，关系很紧密，它们俩应该离得很近。而我的电话，我的网址和我的邮箱都是我的联系方式，它们三个应该在一起离得更近。座右铭和他们都没什么关系，所以拿出来单独排列。按照亲密性原则重新排列如下：

仔细观察可以发现这张卡片形成了三个区域，有关联的信息聚集在一起，无关联的信息离得很远，整张名片变得更加益读了，只要扫一眼，很容易就可以获取到信息，哪里是名字哪里是联系方式一目了然，不需要再在一群信息里找了。

三、突出重要的内容——对比原则

在界面设计中，需要我们突出重要的内容，让人第一眼就看到。一般情况下，如果一个元素越重要，那么它就越大，字体就越粗，颜色就越明显。假如别人把你的名片和其他人的名片放在一起，想要找到你的话肯定要找你的名字，所以在名片中，最重要的是名字，职位次之，而联系方式作为附加信息往往是更次要的。我们根据对比原则把这些元素的大小按重要程度重新排列：

在上图中，最重要的名字和职业是 16 像素。次要的联系方式是 12 像素的字体，座右铭虽然也不重要，但是作为一句话，为了提高可读性是 14 像素。但是这样的对比度还远远不够，联系方式虽然大小变小了，但是颜色还是太亮，我把它们改成百分之 40 的透明度，这样名字就会显得更亮更突出。还有个问题是 Designer 和名字一样粗，但是它其实没有名字重要，所以我要把它变细来突出名字的重要性。

四、统一性原则——一致性

最后一个原则是一致性原则，在设计中重复的元素要保持一致。比如重复出现的按钮要一样大，重复出现的字体要相同，重复出现的间距要相同。在名片里，出现了多种不同的字体，这是错误的，应用一致性原则我们需要把所有字体统一。有些元素是首字母大写，有些是全部字母都大写，我们需要都统一成首字母大写。（联系方式除外，一般联系方式都是全小写）

最重要的是间距，在这里我们可以自己制定一个规则，我规定最小的间距是 8 像素，其他所有间距都是 8 的倍数。下图中，亲密性最紧密的元素间距我用 8 像素，亲密性远的我用 5 * 8 = 40 像素。然后把它们打包成组，整体离左侧边界也是 40 像素，最后竖直方向居中于画布:

在运用了这四大设计原则后，一张严谨又美观的名片很轻松得就被我们设计了出来，最重要的是我们设计的界面有了理论的支持，再碰到要做界面的时候不会没有头绪无从下手了。其实我们 UI 设计师在做复杂的页面的时候，也是由这些简单的页面组合而成的，只要用好这四个原则，再复杂的界面也能做到心中有底。