平面设计排版秘籍大公开！四个原则+点线面使用技巧
干货密集，平面设计的排版秘籍
5 月 30, 2020 发表于: 视觉设计.
Sponsor
在咱们日常的设计里头，不管是文字，还是图片，亦或是形状等诸多细小的元素，均是版式设计里的构成部分，那么我们该如何去妥当处理它们之间的排版关系呢，今天会分享平面设计的排版秘籍，一块儿来学习呀。
注意：下方干货满满，知识点密集，请大家静心观看～
今年第二季度，拉了一群小伙伴，一起学习与平面设计相关的知识，最主要的目的，是让年轻的设计师扎实地打好设计基础。既然这是个活动，那就一定要有个听起来不明觉厉，明白后又觉得很有道理的代号，于是乎，GDLP「平面设计学习计划」诞生了。
依靠自学掌握设计的我，综合历经多年工作沉淀下来的，兼具痛苦与经验的深刻教训，绞尽脑汁憋出了两个满满当当全是干货的课程用于展开设计方面的分享，鉴于篇幅相对较长，故而需要分作上下两集才能够完整说完，以下便是本期内容的目录：
平面设计中的排版
指的是平面设计存在着四个原则，比例以及网格，点线面要进行使用，还有关于它们的某些小细节，tips01、平面设计的四个原则。
对于平面设计的 4 大原则，于 RobinWilliams 所著的那本《写给大家看的设计书》之中已然有所提及，并且写得可以说是相当详细了。有不少的小伙伴都已经看过这本书了。
现代主义设计的先驱Jan Tschichold讲过，“对比是平面设计中最重要的元素”，对比不只有我们最为熟知的大小的对比，还有颜色的对比，也就是撞色，又有空间上的对比，即清晰与模糊，还有时间上的对比，这是传统与未来，更有表现形式的对比，为杂乱与整齐等等……
快速传达画面欲传达信息，凭借少数元素，这并非单调复制，而是重复。重复能凝塑一种风格，将其施用于品牌设计即为一种符号，此乃奢侈品惯用视觉技艺之道。
去年，burburry进行了新logo升级，该新logo由重复排列的方式组成图案。
排列手法具备一种颇为显著的作用，那便是视觉引导，它能够促使画面里的元素寻觅到平衡，从更为理论化的层面来讲，是使得排列构建起一个系统，像“网格”这般，关于这个后续会予以详尽阐述。
(企鹅图书封面 – 用网格设计的来排列的经典案例）
「亲近」是英文直接翻译过来的，简单去理解的话，说的就是元素跟元素之间关系的处理，我们将画面里的元素依照一定逻辑关系去排列，关联的元素相互之间靠近，无关的元素相互之间远离。
「道士下山」的海报，是黄海所创作的，在这儿对于设计原则的运用，你都弄清楚了吗？
即便这4点属于平面设计里头最为基础的原则，然而最简单的事物常常是最为“复杂”的，不论是平面设计，还是UI设计，都无法脱离这些基础原则框架，这可是打好基础的首要步骤。
02比例和网格
众多小伙伴常常会运用4原则，然而在针对一些结构繁杂的内容进行设计排版之时，常常处于不知如何着手的情况，或者是在上下左右移动调整时陷入纠结之中。
在这个时候，借助某些「工具」去搭建框架，是一种简单有效且快速的办法。这儿所讲的「工具」即是比例和网格，它于设计布局里的作用是极为重要的，但是并非平面科班毕业的设计师，或许很少会有机会深入了解并使用它，所以在这儿要重点多讲一些。
平面设计中常用的比例有：
大家都清楚黄金分割、黄金比例，也就是0.618 ，该比例在诸如logo设计等这类需要增添更多玄学来加以背书的设计类型当中较为常用。有个最简单的用法例子：b等于a乘以0.618 ，此处的a、b指的是线段长度、圆的大小等任意尺寸单位。
常常在摄影构图里被运用的三等分以及九宫格，鉴于其简单且易于理解，便不再作过多的介绍。
听上去颇为厉害的斐波那契额数列，实际上就是黄金比例的数学近似版本，其数列规则是，后一个数字乃是前2个数字相加所得的和，具体而言就是0，1变为1，1与1相加得2，2与1相加为3，3与2相加是5，5与3相加得8，8与5相加为13，13与8相加是21，21与13相加为34，34与21相加得55，55与34相加为89，89与55相加是144，144与89相加得233…
了解了这个数列后，那究竟该如何具体运用它呢？最为简单的做法便是依据数列绘出参考线网格以此作为排版的参照依据。
听起来极其怪异的最后一个√2矩形，事实上它就是我们平常最为常见的A系列纸啦，像A2、A3、A4等等这些。
它的构成方式为，首先画出一个正方形，接着连接其对角线，随后把对角线以一个端点为圆心进行画圆旋转，当转到与正方形的一条边重合之际，由此构成了√2矩形的长边，而正方形的边则成为了√2矩形的短边。
“小知识”;进一步进行延展，接着连接 √2 矩形的对角线，使之旋转，通过重合构建出更长边所对应的矩形便是 √3 矩形。按照这样的方式类推，还能够有 √4 矩形，√5 矩形，√6 矩形……
知晓了某些比例规则之后，咱们来瞧瞧 Josef Müller-Brockmann 这位大佬所设计的海报。不清楚你是否察觉到了一些比例方面的规律呢？
（右滑查看答案）
也许有的小伙伴在面对上面的海报时，会处于不太明白其中道理的状态，然而却觉得它有点过于花哨，好像没什么实际作用呢？事实并非如此， Josef Müller-Brockmann 这位大佬实际上就是《网格系统》这本书的作者，书中所介绍的极为强大的网格工具，能够使平面设计师在面对复杂的书籍排版时，做到轻松应对，在面对杂志排版时，同样能够轻松处理，面对报纸排版时，也可以处于轻松愉快的状态。书里面所阐述的观点以及方法，对于网页设计而言，有着诸多的参考价值，对于 APP 的设计，同样具备不少可供参考的价值。
03、点线面的使用
关于点线面
于基本平面设计里，你能够将点视作一个文字，或者单独的小元素，线是一句文案，而面呢，是一段文字等等。
需要关注的是，点、线、面相互之间，不存在绝对界限，它们能够凭借程度的改变自由变换，比如像下面的图，从 A 的角度看 B，B 属于面，从 C 的角度看 B，B 属于点，E 能够被视作更为密集的 D，F 能够被视作更高的 E。
由点构成线，线再构成面，点此为几何里最为基础的构成部分。诸多的点聚合一处能够组成韵律以及图案，点的疏密状况，重复情形，规模大小与数量改变均会对画面效果造成关键影响。
具有很强视觉引导性的线，是连接任意两个点的路径，其表现形式有直线，有斜线，有曲线，有实线，还有虚线等等。
面存在有其自身特定的长度以及宽度，不同形态的面这种情况，在视觉方面能够表现展露多种不同的情感，直线形状的面具备稳定以及秩序之类的感觉，曲线形状的面显得柔软、轻松且活泼，不规则的面则会愈发自然生动。
无印良品的海报就是点线面运用最简化的经典案例：
04、一些小细节 tips
成败由细节所决定，平面设计之中存在着诸多值得予以留意的细微之处，在此将其归纳为Tip并罗列出来：
按下注意按钮，其内部处，要有上下留白，留白数量多，如此这般一来，能够以简单且快速的方式，让界面看上去更具大气之感。
软件里头，sketch以及figma等UI设计工具，目前还不支持开启避头尾与间距组合，这样能够避免标点符号处于句首位置，在中西文混排之际，会增加半角空隙，那些用sketch、figma手动加空格的人，你哭没哭呢？
由于中文属于方块字，故而其字符高度通常比常见的非衬线西文字符要更高些。所以在进行中西文混排之际，能够手动去调整西文大小，以使中西文维持在一个和谐的高度之上。其做法一般是增大西文的字号，接着运用基线参数向下偏移西文位置。
（手机横过来看比较清楚）
留意视觉平衡以及对齐情况，各个不同造型的元素具备不一样的视觉大小，比如说，存在一个边长为400px的正方形，还有直径是450px的圆形，在视觉大小方面，实际上它们是相当的。
背景的深浅会影响对其的方式。
以设计长表格列表而言，背景色（条纹）进行分割，相较于线分割，会显得更好，只要看看图，便能够知晓了。
留下了一个日历内页设计方面的小练习，是在分享之后产生的，目的在于使得小伙伴们能够在实际操作当中，进一步加深对于理论以及工具的理解。尽管题目规模不大，然而对于那些平时较少接触平面设计的插画师、交互设计师而言，这也是一项具备一定难度的艰巨挑战。以下呈现的是小伙伴们提供的一些练习成品：
纵然学习了数目众多的高深知识，然而那都比不上通过实际练习所领悟到的正切，毕竟好记性是比不上烂笔头的。并且在实际练习这个过程当中，我们能够做到举一反三，进而实现更深入的理解。小编就不再讲述那些大道理了，咱们下期再见。
作者 | 流利说设计团队
来源 | 流利说设计团队（id:LLS_Design）
请小编喝杯咖啡吧！