密集地包含有用的信息、图形设计的排版技巧
在我们的日常设计中，文字、图片、形状等小元素都是布局设计的组成部分。 那么我们如何处理它们的布局关系呢？ 今天我们将分享平面设计的布局秘密。 我们一起来学习吧。
注：以下内容充满实用信息，知识点密集，请仔细观看~
今年第二季度，一群朋友聚在一起学习平面设计相关知识。 主要目的是让年轻设计师打下扎实的设计基础。 既然是活动，就必须有一个听起来不清楚但理解后又有意义的代号，于是GDLP“平面设计学习计划”诞生了。
作为一名自学成才的设计师，我结合自己多年工作中的血泪教训，创作了两门充满有用信息的课程，供设计分享。 由于篇幅较长，需要分成两集。 以下为本期内容目录：
平面设计中的版式
平面设计的四大原则
规模和网格
点、线、面的运用
一些小细节提示
01.平面设计的四大原则
平面设计的四大原则在他的《人人设计书》里写得很详细，很多朋友也都读过。
● 现代主义设计先驱Jan说：“对比是平面设计中最重要的元素。” 对比不仅包括我们最熟悉的大小对比，还包括颜色对比（对比色）； 空间对比（清晰和模糊）； 时间的对比（传统与未来）； 表情的对比（凌乱和整齐）等等……
● 重复不是单调的复制。 重复可以利用几个元素来快速传达图片想要传达的信息。 重复也可以形成一种风格，这是品牌设计中使用的符号，也是奢侈品常见的视觉手法。
（新标志去年升级，反复排列形成图案）
● 排列技巧起着视觉引导的重要作用，让画面中的元素找到平衡。 更理论化的是让排列形成一个系统，比如“网格”，后面会详细讨论。
（企鹅书籍封面——网格设计的经典例子）
●“关闭”是英文的直译。 简单来说，就是对元素之间关系的处理。 我们按照一定的逻辑关系来排列画面中的元素。 相关的元素彼此靠近，不相关的元素彼此远离。
《道士下山》海报——黄海，你懂这里的设计原理吗？
虽然这4点是平面设计中最基本的原则，但最简单的东西往往是最“复杂”的。 无论是平面设计还是UI设计都离不开这些基本原则和框架。 这是打好基础的第一步。
02尺度与网格
很多朋友经常使用4原则，但在设计排版一些结构复杂的内容时，往往无从下手或者上下左右移动困难。
这时，借助一些“工具”来搭建框架，就是一种简单、有效、快速的方法。 这里所说的“工具”就是比例和网格。 它在设计布局中的作用非常重要，但非图形专业毕业的设计师可能很少有机会深入了解和使用它们，所以这里我将重点介绍一下。
平面设计中常用的比例有：
●大家都知道黄金分割/黄金比例是0.618。 这个比例常用于标志设计以及其他需要添加更多形而上学背书的设计类型。 最简单的用法示例：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个矩形……
了解了一些比例规则之后，我们就来看看大佬约瑟夫·穆勒设计的海报吧。 不知道大家有没有发现比例的规律呢？
（向右滑动查看答案）
也许有的朋友不知道上面这张海报，但觉得有点花哨，没有效果？ 不，约瑟夫·穆勒——老板其实是《网格系统》的作者。 书中介绍的强大的网格工具可以让平面设计师轻松愉快地面对复杂的书籍、杂志、报纸版面。 书中的观点和方法对于网页和APP的设计也有很多参考价值。
03.点、线、面的运用
关于点、线、面
在基本的图形设计中，您可以将点视为文本或单独的小元素，将线视为文案的句子，将面视为文本的段落，等等。
需要注意的是，点、线、面之间没有绝对的界限。 它们可以通过程度的变化自由变换。 例如下图中，如果B相对于A看，B就是一个面； 如果B相对于C来看，B就是一个点。 E可以看作是更稠密的D； F可以看作是更高的E。
点形成线，线形成面，点是几何图形最基本的组成部分。 许多点聚集在一起可以形成节奏和图案。 网点的密度、重复性、尺度和数量都可以对画面的效果产生关键的影响。
线条具有很强的视觉引导作用。 它是连接任意两点的路径。 表达式可以包括直线、对角线、曲线、实线、虚线等。
脸有一定的长度和宽度。 不同形式的表面可以在视觉上表达不同的情感。 直线面有稳定感和秩序感； 曲面柔和、轻松、活泼； 不规则的表面更加自然活泼。
无印良品的海报是点、线、面最简单运用的经典例子：
04.一些小细节Tips
细节决定成败。 平面设计中有很多值得注意的小细节。 这里将它们分类为提示并列出如下：
● 注意按钮内部顶部和底部的空白区域。 拥有更多的留白可以轻松快捷地让界面看起来更加大气。
● 在软件中（figma等UI设计工具尚不支持），启用头尾回避和间距组合。 可以防止句首出现标点符号，中西文混用时添加半角空格（用figma手动加空格你哭了吗？）。
● 由于中文是方形字体，字符高度一般高于常见的无衬线西文字符。 因此，当中西文本混合时，您可以手动调整西文文本的大小，使中西文本保持和谐的高度。 方法通常是加大西文文字的字体大小，然后利用基线参数将西文文字位置向下偏移。
（手机横过来更容易看到）
● 注意视觉平衡/对齐。 不同形状的元素具有不同的视觉尺寸。 例如，一个可变长度为 400px 的正方形和一个直径为 450px 的圆形实际上在视觉尺寸方面是相同的。
● 背景的深度会影响其观看效果。
●设计长表格列表时，背景色（条纹）分割比线条分割效果更好。 看图你就知道了。
分享完后，我留下了一个关于日历内页设计的小练习，方便小伙伴们在实践中加深对理论和工具的理解。 虽然题目不大，但对于一些接触平面设计较少的插画师和交互设计师来说仍然是一个不小的挑战。 以下是给朋友们的一些练习：
好的记忆力不如不好的写作。 不管你学了多少高深的知识，都不如实际练习那么准确。 同时，在实际操作中，我们也可以举一反三，获得更深刻的理解。 小编就不做过多介绍了，下期再见。
谢谢阅读！
欢迎加入设计专家官方设计交流群。 扫描下方二维码，回复密码“入群”。 有不懂的问题可以在群里一起交流。
//////结尾//////
—
是时候提升自己了
一起来看看豆瓣高分设计书籍吧！
▼