5月30日干货密集！平面设计排版秘籍大公开，速来学习

干货密集，平面设计的排版秘籍

5 月 30, 2020 发表于: 视觉设计.

Sponsor

在我们日常设计里，文字是版式设计组成部分，图片是版式设计组成部分，形状是版式设计组成部分，各种细小元素是版式设计组成部分，那么我们要怎样处理好它们的排版关系呢，今天将分享平面设计的排版秘籍，一起来学习哦。

注意：下方干货满满，知识点密集，请大家静心观看～

第二季度，拉了一帮小伙伴，共同学习平面设计知识，这般做，最主要的目的在于，让年轻设计师脚踏实地夯实设计基础。既然是活动，那必然得有个代号，此代号听起来高深莫测，细细琢磨后又觉甚有道理，如此一来，GDLP「平面设计学习计划」便应运而生。

依靠自我学习掌握设计的我，综合历经多年于工作期间所积累的饱含惨痛教训，好不容易憋出了两个装满丰富实用知识和经验的课程用于开展设计方面的分享，鉴于篇幅相对较长，所以需要分成上下两集才能够完整说完，以下便是本期的内容目录：

平面设计中的排版

比例的运用，是平面设计四个原则之一，网格的使用，也是平面设计四个原则之中的内容有关于点线面的运用，是平面设计四个原则里涵盖的要点需注意一些小细节，这同样属于平面设计四个原则范畴 tips01、平面设计的四个原则

围绕平面设计的四大原则，于RobinWilliams所著的《写给大家看的设计书》之中已阐述得极为详尽诸多，小伙伴之中不少人都阅读观看过 。

现代主义设计的先锋Jan Tschichold讲过，“对比是平面设计里头最为关键的要素”。对比不但存在我们最为熟知的大小方面的对比，而且有颜色方面的对比（撞色），空间层面的对比（清晰与模糊），时间范畴的对比（传统与未来），表现形式的对比（杂乱跟整齐）等等 。

存在这样一种情况，重复并非单纯单调的复制，重复能够借助少数的元素，非常快速地去传达画面需要传达的信息。重复还能够去形成一种风格，当把这种风格运用在品牌设计当中的时候便成为一种符号，而运用在奢侈品领域也是常用的视觉手法。

去年，Burburry 进行了升级，新的logo是通过重复排列从而组成图案的。

排列手法具备一个颇为显著的作用，那就是视觉引导，它能够促使画面里的元素寻觅到平衡，从更具理论性的角度来讲，它能够达成排列构建起一个系统，就像“网格”这样，关于这个后续会予以详尽阐述。

(企鹅图书封面 – 用网格设计的来排列的经典案例）

对于“亲近”，它是英文的直接翻译，要是简单去理解的话，这指的是元素跟元素之间关系的处理，我们会依照一定逻辑关系去排列画面中的元素，关联的那些元素彼此之间相互靠近，而无关的元素相互之间彼此远离。

《道士下山》海报，黄海制作，这里对于面对设计原则的运用你都看清楚理解了吗？

这4点属于平面设计最基础的原则范畴，然而最简单之物常常是最具“复杂性”的。平面设计也好，UI设计也罢，均无法脱离这些基础原则框架，这可是打好基础的首要步骤 。

02比例和网格

诸多小伙伴常常会采用4原则，然而于设计编排某些结构繁杂的内容之际，常常无从着手，且会在上下左右移动时陷入纠结。

这时候，借助一些「工具」来搭建框架，是个方法，这个方法简单有效且快速。这里说的「工具」，是比例和网格。它在设计布局中的作用非常重要。但非平面科班毕业的设计师，可能很少有机会深入了解使用。所以这里重点多说一些。

平面设计中常用的比例有：

大家都清楚黄金分割，也就是黄金比例，其为0.618 ，该比例在诸如logo设计等那些需要增添更多玄学来作背书的设计类型里较为常用 。有个最简单的用法例子 ，b = a * 0.618 ，在此处a、b所指代的是像线段长度 、圆的大小等任意尺寸单位 。

摄影构图里，三等分使用得较为频繁，九宫格运用得也较多，因其简单且容易理解，所以就不多做介绍了。

斐波那契额数列，听起来是颇为厉害的，则其实际上乃为黄金比例的数学近似版本，数列规则是，后一个数字是前两个数字相加所得的和，也就是，其具体呈现为，0，1，1，2，3，5，8，13，21，34，55，89，144，233 …

清楚知晓这个数列之后，那究竟具体该如何进行使用呢？最为简单的方式便是依据该数列绘制参考线网格从而将其作为排版的参照依据。。

最后一个，被称作√2矩形的，听起来十分奇葩，然而，它实际上就是，我们平常最为常见的，A系列纸，也就是A2、A3、A4等 。

其构成方法为，首先画一个正方形，接着连接该正方形的对角线，随后以对角线的一个终点作为圆点进行画圆旋转，当旋转到与正方形的一边重合的时候，构成√2矩形的长边，而正方形的边就是√2矩形的短边。

「小知识」：去进一步延展，接着继续连线 √2 矩形的对角线，而后进行旋转，让其重合从而构成具有更长边的矩形就是 √3 矩形，照这样以此类推还能够有 √4 矩形，√5 矩形，√6 矩形 ……

知晓了些许比例规则之后，而后让我们去瞧一瞧 Josef Müller-Brockmann 大佬所设计的海报，不清楚你能不能瞧解得出来一些比例方面的规律呢？

（右滑查看答案）

有的小伙伴或许对上面海报不明白其中厉害，却觉得花哨没什么用？并非如此，Josef Müller-Brockmann 这位大佬是《网格系统》作者，书里介绍强大网格工具，能让平面设计师面对复杂书籍、杂志、报纸排版时轻松愉悦，书里观点方法对网页、APP 设计有诸多参考价值。

03、点线面的使用

关于点线面

在基础的平面设计里，你能够将点、当成一个文字、或者单独的小元素，线、是一句文案，然而面、却是一段文字等等。

需留意的是，点、线、面相互之间，不存在绝对的界限，它们能够借助程度的改变进行自由变换，比如像下面的图，B 相对于 A 而言，B 是面，B 相对 C 而言，B 却又是点，E 能够被视作更为密集的 D，F 能够被看成是更高的 E 。

在几何里，点是超级举足轻重的基本构成本分，点能够形成线，线能够构成面，好多有着聚集特性的点能够组合成韵律以及展现图案式样，点所具备的疏密度、重复度、规模还有数量，不同这般多样化的变化，都能够对画面最终呈现的整状况产生关键到极致的影响 。

线具备很强的视觉引导性，它是连接任意两点的路径，其表现形式有直线，有斜线，有曲线，有实线，还有虚线等等。

面具备一定的长度，面拥有一定的宽度。不同形态的面，能够在视觉层面表现出不同的情感。直线形的面，具有稳定感，直线形的面，具有秩序感；曲线形的面，显得柔软，曲线形的面，呈现轻松，曲线形的面，充满活泼；不规则的面，会更加自然，不规则的面，会更为生动。

无印良品的海报就是点线面运用最简化的经典案例：

04、一些小细节 tips

成与败由细节所决定，平面设计当中存在着诸多值得予以留意的微小细节，在此处将其归纳成为 Tip 并罗列一番：

留意按纽之内，上方与下方均留出空白，留出的空白较多，能够以简单且迅速的方式，使界面看上去更大气 。

软件中的sketch，还有figma等UI设计工具，目前尚未支持开启避头尾以及间距组合，这样做能够防止标点符号处于句首位置，在中西文进行混排之际，还可增添半角空隙，借助sketch、figma手动添加空格的你，此刻是否感到无奈呢？

由于中文属于方块字，因而字符高度通常比常见的非衬线西文字符要更高。所以在进行中西文混排时能够手动调整西文大小，以使中西文维持在一个协调的高度上。做法一般是加大西文的字号，接着运用基线参数向下偏移西文位置。

（手机横过来看比较清楚）

关注视觉平衡方面的对齐情况，不同造型的元素具备不同的视觉大小，举例来说，有一个边长为400px的正方形，还有一个直径为450px的圆形，实际上它们在视觉大小上是相当的。

背景的深浅会影响对其的方式。

在进行长表格列表设计之时，背景色（条纹）这种分割方式相较于线分割而言，会显得更好一些，只要去看一下图就能够知晓这一点了。

分享之后，留了个小练习，内容是日历内页设计，目的是让小伙伴们，在实战当中，加深对理论以及工具的理解。虽说题目不大，可是对于一些，平时接触平面设计较少的，插画师、交互设计师而言，也是个不小的挑战。下面是小伙伴们的一些练习作品：

比好记性更具优势的是烂笔头，纵使学习了数量众多且高深的知识，却都比不上经由实际练习而领悟到的精准程度为正切值角度的那种情况。与此同时，在实际进行练习的这个过程当中，我们还能够做到触类旁通，进而达成更为深入的理解。小编所要表达之处便不再过多阐述那些大道理了，咱们下期再见 。

作者 | 流利说设计团队

来源 | 流利说设计团队（id:LLS_Design）

继续浏览有关 平面设计排版秘籍 的文章