## 093丨布局原则：亲密性、对齐、对比、重复

每天5分钟，解决一个商业问题。欢迎收听，《刘润·5分钟商学院》，实战篇。

今天我们来学习产品设计中，几乎每个人都会用到的一个设计原则：布局原则。

今天会用到很多图片，为了能有更感官的认知，建议你边看文稿，边听音频。

什么叫布局原则？

James最近在找工作，把精心准备的简历，发给几家心仪的公司。公司的HR特别忙，于是用15秒扫了一眼简历，什么信息都没得到。

“好乱”，HR心想，于是把简历放入了“日后联系”的文件夹里。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171423525809257435.png)

啊？这也叫“乱”啊？那什么样叫不“乱”呢？

别急，我们先通过四张图，看看到底什么叫“乱”。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171425499397123468.png)

第一张图，显然非常乱。为什么？因为有太多孤立元素。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171426048039588047.png)

第二张图，还是非常乱。为什么？因为有多种对齐方式。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171426312140215469.png)

第三张图，依然非常乱。为什么？因为对比不明显。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171426481401265123.png)

第四张图，绝对更加乱。为什么？因为信息没有分组。

那什么叫“不乱”呢？

罗宾·威廉在他的书《写给大家看的设计书》里说，人们对“秩序”有着发自内心的需求。有秩序的布局，就是让人身心愉悦。打破秩序，杂“乱”无章的布局，就会让人不安、焦虑、排斥。这个“秩序”，就是组织性、一致性、统一性和互补性。

他举了个例子。比如下面这张名片。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171427238284335097.png)

第一，要素之间没分组，缺乏“组织性”；第二，要素之间没对齐，缺乏内在的“一致性”；第三，要素之间没呼应，缺乏“统一性”；第四，要素之间没对比，缺乏“互补性”。

所以，你看着就是不觉得美。

那符合“秩序”应该是什么样子呢？你再看看下面这张重新设计过的名片。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171427517601126384.png)

是不是不觉得“乱”了？

为什么？因为上下的分组、靠右对齐的一致、粗体的统一、大小粗细的对比，暗合了深深埋藏在你心中的“秩序感”。

秩序感，就是一种美感。

我并不打算通过今天的课程，把你变成一名平面设计师，我希望把你变成一名有“美感”的CEO，在看到产品设计时，可以提出有美感的建议。

那我到底应该怎么做呢？你只需要记住这四个“布局原则”：亲密、对齐、重复，和对比。

第一， 亲密。

亲密，就是让逻辑上相关的信息，表现得更亲密一些，比如靠近一些、放在同一个框里面，等等。亲密的本质，是体现“组织性”。

比如下面这个封面设计。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171431046836603938.png)

封面有6行文字，但显然有3个逻辑组。大标题一组，副标题一组，作者和时间一组。但是在这个设计中，6行的间距都是一样的，没有体现出信息的“组织性”。

那有秩序感的设计应该是怎样的呢？比如下面这张图。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171431324565933573.png)

这样的布局，很有条理，更易阅读，也更容易被记住。

第二， 对齐。

任何元素，都不能随意安放，而应该与其他元素有某种视觉联系。这种视觉联系，就是“对齐”。

回到这个封面的布局设计。它不是已经“居中”对齐了吗？

居中对齐，当然比随意安放好。但居中对齐，是一种非常乏味的对齐，你应该慢慢尽量避免使用。试一试“左右对齐”吧，你会惊讶于布局的明显改善，比如下面的修改。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171432161661268493.png)

对齐，也就是那根“看不见的线”，带来了一致性。

第三， 重复。

这款封面的布局设计，还能怎么改进呢？请看下图。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171432427897437965.png)

这个版本修改了什么？1）用绿颜色的箭头，前后“重复”；2）用加粗的字体，前后“重复”。

为什么要重复？重复带来“统一性”，让你进一步看到所有元素间的关联。

但是要记住，一致，并不意味着一样。每个视觉元素，毕竟是有差别的。

第四， 对比。

强烈的对比，能在不同元素间建立一种有组织的层次结构，也就是互补性。罗宾说，“如果两个项不完全相同，就让它们不同，而且是截然不同。”

你体会一下，下面这个加上对比的封面布局设计。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171433078128843558.png)

好了。学习完“亲密、对齐、重复、对比”这4个“布局原则”后，我们看看James重新设计的简历，是不是比原来的版本，有“秩序感”，不“乱”了呢？

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171433385122463246.png)

### 💡 精华要点
- 1. 什么叫做“布局原则”？我们每个人内心，都深深埋藏着秩序感。用具有“组织性、一致性、统一性、互补性”的布局，来建造视觉上的秩序感，能给用户带来巨大的美感。
- 
- 2. 具体怎么做？记住4个原则：亲密、对齐、重复、对比。
- 
- 3. 我们总觉得“美”是微妙的，不可琢磨的。说不清，道不明。但其实，再不可琢磨的东西，依然有底层规律。美有美的规律，爱有爱的规律。万物，皆有规律。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171434572369497610.jpg)

> 刘润
> 你见过哪些充满“秩序感”的布局设计呢？
> 欢迎你在留言区分享，与大家一起，过过招。也别忘了把今天学到的内容，分享给你的朋友，也许能够帮到他。

![图片](https://piccdn3.umiwi.com/img/201802/17/201802171436114801629435.jpg)
