鱼先生：设计中的对齐到底是何方神圣？

一招对齐，解决大部分问题

设计法则无论是针对设计小白还是有经验的设计师，无疑都是很重要的基础，特别是针对水平弱的设计师，如果你不怎么会配色、排版等，那么有一点你掌握了，自然也能设计出美观的内容呈现，那就是我们本篇文章的“主角”，版式设计法则之一对齐。

大家听到对齐，首先联想到的就是左对齐、居中对齐、右对齐，看似基础却也总是不被很多设计师所重视，我在设计特训中，讲了版式设计法则，也就是我们都知道的那几个点，重复、对齐、亲密、对比，可大家上交作业的时候仍旧是出现很多的问题。

今天我们就一起来聊一聊设计中的对齐法则，在进入正戏前当然需要现有前戏了，大家看下面的两张画面，A和B你认为那个好？

这个一目了然，肯定是B方案看着比较舒服整齐一些，其实所有的元素都一样，只是B方案运用了对齐法则，那么前戏结束，进入正题。

对齐的3x2种方式

接下来我们来看一看基础的对齐方式有哪些，这里我要提醒一点，大家不要觉得知识很基础，就不去重视，看似基础，但是如何运用自如，还是要在实践上多加磨练才行。

左对齐和顶对齐，方式是一样，不过一个是横排，一个是竖排，左对齐也是我们人眼最舒服的阅读方式。

左右居中和上下居中的运用要根据设计的画面来选择，想图中这两种排版方式，就没有上面的左对齐美观了。

右对齐和底对齐，如同左对齐和顶对齐一样，横排和竖排，而我们设计中大部分运用横排会比较多一些，而横、竖排版的运用要看场景，比如中国风、水墨风，或者一些标题或者海报设计中，竖排也是很简洁美观的。

我们要熟练掌握这些知识，就是为了打破生搬硬套的排版局限性，让我们可以运用自如的去根据场景使用这些对齐方式。

四大元素对齐方式归纳

我们一起来归纳一下，在设计中经常会遇见的四大对齐元素，一个设计作品的组成部分无非就两种：图形图像和文字信息。那么我们从这两大类中去提取和挖掘，可以总结为： 文字对齐、图片对齐、区块对齐、视觉对齐，我们一一来讲解一下。

a、文字对齐

这个很好理解，我们上面也做了案例，就是我们刚才讲的3×2种方式，是非常重要的基础知识，融会贯通之后，便可以开创出更多的设计“武林绝学”。

b、图片对齐

如图我用一个单页画册来直观的举例子，是我的一篇自我介绍，同样的内容，我们看下第一张是图片错乱、参差不齐，包括正文和第一张图片之间也是没有一个顶对齐，所以看上去非常的凌乱，那么第二个对应方案就是做了很好的对齐，所以整体看上去比较舒服和谐。

c、区块对齐

对齐方式都是一样的，区块就是指很多元素组成了一个“团体”，有可能是产品，有可能是其它的元素，那么级别类型一样的，就可以运用对齐保持整体的层级性和视觉呈现美观性，如上图例子，就是同一个产品的三种类型。

我们也看到了，每个区块里面还有单独的元素，比如产品人物、文字介绍、立即购买，这三个元素之间进行了居中对齐。

d、视觉对齐

如上图，你感觉视觉上统一吗？或者说视觉上看起来的时候，他们是不是大小重量一样呢？是不是感觉并不是对齐的，比如感觉圆形和最后的菱形是偏小的，我们继续看。

看我绘制的两条红色参考线，确实是对齐的，那么这个时候我们就要运用视觉对齐去作调整了。

现在看起来舒服多了，我从视觉上去调整了大小，视觉对齐其实就是看上去对齐，就是眼睛去看，所以我们不断地去看作品和学习基础知识，不仅是提高我们的审美和眼界，同时也是提高我们的“设计时之眼”。

继续看红色参考线，真实情况是没有对齐的，但是视觉中是非常舒服的，而我们做设计就是从两个大方向去考虑的，功能性和视觉性，所以遇到以上情况，要考虑视觉对齐，而不是必须要实际对齐却破坏了画面的视觉性，大家千万不要死钻牛角尖，最后得不偿失。

具体案例场景对比

▼

先看下第一个案例，那么这个案例呢，产品是一个圆形，那么我都采用居中对齐，直接机械对齐就可以了，不会牵扯到视觉对齐，那么我们设计的时候，产品何止千万，可定会遇见不是这么方正产品的时候怎么办呢？我们继续看。

那么我们看这个相机的案例，同样我直接采取居中对齐，但是机械对齐之后，看上去总是不舒服，这个不舒服感也就是我们所谓的没有视觉对齐。

那我们继续调整这个画面，用你的火眼金睛去看，整体相机的重心是偏左的，那就好办了，向右移动。

所以我们在不规则的产品下，要考虑视觉对齐，而不是直接去机械对齐，那么把产品相机向右移动，微调之后画面就变得统一了，视觉呈现行更加美观了。

调整前后对比

▼

虽然是非常简单的一些基础点，但仅仅知道并没有什么卵用，最重要的是大家要多在实践中不断地去运用它，让这样看似基础的技能，变成我们的一种“潜意识习惯”，用不了多久你在设计中，自然会变的得心应手起来。

没有一成不变的规则，设计的变化更是如此，同样的基础知识，也要随着场景的不同而灵活运用。

那我们继续在实战中去体验一下对齐的重要性，擦亮眼睛继续往下看。

以对齐标准开启“鱼找茬儿”

在某些设计场景中，对齐是非常简单又实用的标准校对技能，比如以下这个画面，是特训学员做的一个画册页面，我们看一下这个画面里面的对齐方式，有左对齐还有居中对齐，整个画面显示的有些凌乱，本身是非常简洁的一个画面，那我们用对齐标准来找一找问题，其它的先保持原样不变。

学员发过来原图

▼

▲ 律师画册内页问题案例

用对齐诊断

▼

我们看一下，先不考虑他的图片用图合不合适，左右的蓝色块一高一低，视觉上很不平衡，因为这两块内容等级是一样的，今天主要讲对齐，我们试试用对齐的方式去调整一下，我以对齐的方式来提出四点需要优化的地方：

01、标题采用居中要考虑是不是最好的方式，我们在设计画册的时候如果能够不那么死板当然更好，但是也要考虑场景和整体的视觉呈现性；

02、这个是区块元素之间的对齐，因为我提到这两篇内容等级是一样的，但是这里两个色块，表现的明显是左高右低，我们既要考虑信息重要性的层级，还要把控好整个版面的视觉统一；

03、这个地方的问题是在标题中，我们看一下目前这样的一个排版也是可以，但视觉都被数字Ⅱ所吸引，反而弱化了标题本身的内容呈现，主与辅的关系把控不到位；

04、这个地方我标注是和02里面一个意思，文字之间对齐是否能够让层极重要性保持统一和整体视觉的美观呢？

采用对齐调整四个点

▼

以上只是用对齐的方式，初步做了一下调整，然后整体的视觉呈现已经改变了，大家可以对比一下之前的看一下。

▲ 简单效果展示

再尝试一下其它对齐方式

▼

我们继续用对齐的方式，换一个方式去排版看一下，我们把左右看作一个区块，采用十字均分法，这样区块之间是相互对齐的。

调整完毕之后，整个画面看起来也是非常的简洁、稳重，也比较适合律师事务所的行业属性，当然这个版式还可以从选图、版式上去做很多的调整，这里就不一一讲了，下一次在“鱼找茬儿”里面再与大家细聊。

对齐应用场景实战

我们看以下示范，原图是人物在左边，我考虑到画面对齐的方式，然后左右翻转了图片的角度，这样我就可以采用左对齐的方式去表现。

这里采用左对齐是比较合适的，第一点考虑是人眼从左往右是阅读感最好的，第二点再注意看我画出的红线和黄线，第一张画面中主体人物身体的曲线和文字参差不齐的右边刚好形成了相互呼应，有张有弛。

而第二张画面目前也是采用左对齐，但我们看到左对齐的黄线和主体人物的身体的红色曲线产生了生硬的阻断，破坏了整体画面的运动性，所以右图的排版方式视觉性很差，缺乏美感，不建议这样去排版。

所以我们学习知识的同时，更要学会灵活运用，虽然对齐方式很基础，但我们在运用的时候要考虑场景，更要在实践中强加练习。

那么主体人物在左边的时候，我们调整画面的对齐方式为右对齐，看起来也是可以的，但是阅读感稍逊于第一张，所以对比一下还是左对齐最适合个画面，这就是根据场景化去运用知识。

当然你也刻意多一些尝试，试一试居中、顶对齐等，特别是最开始练习的时候，多尝试一下，你才能够不断的去记忆不同的对齐排版方式，这样你才能很快的熟能生巧。

是不是有点意犹未尽？那么这里面除了对齐，还有很多地方都用到了另一个重要的法则就是对比，那么也是鱼先生下期要和大家去讲解的一个设计法则，大家不要心急哈，产出是很烧脑的，待我喝碗鱼汤再继续，设计法则共六篇，我们下期对比见。

版式设计法则六期持续更新，还有四期分别是亲密、重复、对比、平衡（留白与对齐已更），最先会在笔记圈发布，欢迎大家一起互相学习成长！

今日评论互动话题

你在设计中遇到最大的迷茫是什么？（关注公众号【摆渡鱼生】留言即可！）

学平面设计就找鱼先生▼