最实用的排版教程,“四大设计原则”在实战中的应用

排版中的四大设计原则

在前几期的推送中，我向大家推荐过一本非常实用的书，叫《写给大家看的设计书》，作者是 RobinWilliams，书中讲到了四大设计原则：对齐，亲密性，对比，一致性，这四大原则可以说是排版设计中的黄金法则，不论多么复杂的界面，用这几个原则都能轻松搞定。在接下的教程中我会做一张名片，看看在设计这张简单的名片中是如何运用各个原则的。

首先我们都知道，名片是标示姓名，职位，所属公司和联系方法的纸片，所以名片中首先要有姓名，我的网名是 NEVERGG。我的职位是设计师，也就是 Designer。邮箱是 fzhang@leanclou.com，网址是 www.dribbble.com/zfy，电话是 000-000-0000，最后为了装逼可以加一句座右铭 Be the greatest,or nothing. 这就应该是一张名片中的所有信息了，我把这些信息随便排列了一下，如下如：

最基本的原则，对齐原则

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

现在是不是感觉界面整洁了许多，显得有秩序了？其实在对齐原则中还有一条进阶的小技巧：就是尽量少使用居中对齐，有些同学会有疑问，为什么呢？因为居中对齐是新手最常用的对齐方式，很稳妥，但是大家已经有点审美疲劳了，会显得页面呆板无趣，我们试试居左对齐：

是不是比居中对齐显得更“专业”？

亲密性原则，最重要的设计原则

在小时候学中国画的时候，老师说过这样一句话：密不通风，疏可跑马。这句话是什么意思呢？就是说在画面密集的区域要密得连风都吹不进去，画面空的地方，可以容得下一匹马随意奔跑。

我们做设计的时候也一样，有些大神爱说什么界面的节奏感，韵律感，我们总感觉他是在装逼，但其实真的是这样的，做界面要该紧凑的地方紧凑，该留白的地方留白。

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

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

对比原则，突出重要的内容

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

在上图中，最重要的名字和职业，我用了最大的字体是 16 像素。次要的联系方式我用了 12 像素的字体，座右铭虽然也不重要，但是作为一句话，为了提高可读性我用了 14 像素。

但是这样的对比度还远远不够，联系方式虽然大小变小了，但是颜色还是太亮，我把它们改成百分之 40 的透明度，这样名字就会显得更亮更突出。还有个问题是 Designer 和名字一样粗，但是它其实没有名字重要，所以我要把它变细来突出名字的重要性，如下图：

一致性原则

最后一个原则是一致性原则，在设计中重复的元素要保持一致。比如重复出现的按钮要一样大，重复出现的字体要相同，重复出现的间距要相同。

在名片里，出现了多种不同的字体，这是错误的，应用一致性原则我们需要把所有字体统一。有些元素是首字母大写，有些是全部字母都大写，我们需要都统一成首字母大写。（联系方式除外，一般联系方式都是全小写）

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

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

怎么复杂呢？如果想要细化，思考后可以发现座右铭和其他内容好像没什么关系，所以根据亲密性原则可以把这句话放到名片背面或者旁边。类似这样：

或者这样？再画点三角形装饰一下，然后添加些高斯模糊，都可以，请自由发挥。

今天的教程就到这里了，之所以写这篇教程，是因为很多同学精通了超写实图标，精通了扁平风格插画，但是在界面还有排版这些 UI 设计师工作中最常用的地方却总是没有头绪，或者做设计全靠感觉，其实我们在排版的时候是有规律可循的，按照前人总结的经验会发现做界面其实很简单。接下来的几期推送深度会越来越深，把我做界面的经验都分享给大家。

对了，插播一条突兀的广告！我要开培训班了！

可能一些朋友和群里的同学都知道了，我准备全职做公众号和 UI 设计培训了，目前打算开一个线下小班，第一期只招 5 个名额，全 Mac 教学，一对一辅导，一个月时间，北京线下全天授课包住。从基础的软件操作到进阶的质感表现，交互理论，设计规范，动效展示以及简历的准备和面试技巧我都会全程辅导。今天只是先预告一下，有意向报名的可以加微信 nevergg4 咨询，加满截止，从速。

其实以前我一直挺排斥培训班的，因为好多培训班根本学不到东西，有些同学花一大笔钱去上某内的线下班，去了发现是几十个人坐在教室里一起看视频，能不能学会全看自己造化，这种班上完和不上真的没什么区别。所以为了保证教学质量，先只招五个同学，请大家理解。