《平面设计中的网格系统》—— 读书笔记

作为排版入门必读书籍之一，用一句话概括就是——“秩序下的理性之美”。

本书旨在教我们如何使用网格，在网格系统的帮助下，更具功能、更有逻辑、更美的方式去解决诸多问题。

一、部分章节内容与思考

1. 使用网格的好处

在视觉设计中使用一个适当的网格，有助于：

a. 用视觉传达的手段，构建基于事实的论证；

b. 系统化、逻辑化地将图文素材构建起来；

c. 用图文手段，让组织方式更具有节奏感、统一感；

d. 让视觉信息的结构更透明、更具紧张感。

以上4点是书中罗列出来的，简单来说，网格让设计变得有秩序，有迹可循，体现了一种专业精神。在设计的前期，先制定一个有逻辑的网格系统，可以更加统一地、即物地、功能性地解决所有相关问题。如今，网格系统不仅在平面设计中影响深远，在UI设计、空间设计等其他设计领域，这个实用的设计工具也越来越受到重视。

2. 纸张的尺寸

DIN一般指德国标准 DIN 476，后来成为国际标准 ISO 216。

中华人民共和国国家标准 GB/T 148-1997《印刷、书写和绘图纸幅面尺寸》中A、B系列也采用了 ISO 216标准。

大多数印刷品都遵循标准化的DIN系统，建议设计师也使用这些最常用的纸张尺寸；

一是这些尺寸，印刷厂比较熟悉，可以减少印刷和裁切方面的误差。

二是这些尺寸，在纸厂有现货库存，印刷厂订购也不会浪费时间。

三是印刷和纸张裁切设备也有一定的标准化尺寸，与DIN系统的纸张格式配套。

通过下图可以观察到，DIN系列的纸张尺寸，上一级总是下一级的两倍。

3. 字体大小单位

pixel=px=像素，是屏幕上显示数据最基本的像素点。

像素点不是自然界标准的长度单位，像素点可以大也可以小，大的像素点组成的画面模糊（分辨率低），小的像素点组成的画面清晰（分辨率高），大家可以想象成像素画，可以更好的理解这个概念。所以，“像素点”的大小是可以改变的，也称为“相对长度”。

point=pt=点，也有人叫做“磅”，是印刷行业常用单位。

（这里需要注意：不要跟像素概念里的“像素点”混淆了）

1pt = 1/72英寸 = 0.3527337毫米，所以，“点”是一个自然界标准的长度单位，也称为“绝对长度”。

这里要引入一个复杂的概念PPI / DPI；

Pixels Per Inch = PPI = 每英寸像素

Dots Per Inch = DPI = 每英寸点数

这部分就不多赘述。

需要了解的是；

分辨率在72PPI 下，文字18px=18pt

分辨率在300PPI 下，文字75px=18pt

简单来说，

当我们的设计只需应用在电子屏幕上时，文字单位设置为“像素”，

当我们的设计需要印刷时，文字单位设置为“点”。

4. 字体样式

书中介绍了一些经典的英文字体，这里推荐一篇灰昼前辈的英文字体推荐文章，里面讲的非常详细。

https://www.zcool.com.cn/article/ZMTc1NDc2.html

5. 栏宽、字号、行距

栏宽：

不仅仅是一个设计或形式的问题，它还涉及文本的易认性。

如果要让读者轻松和舒适地阅读文本，那就不能忽视字号的大小、行的长度和行距。

字号：

A4：主标题24pt、副标题18pt、正文10pt、标注8pt；

以上是在A4纸张中一组比较常规的字号选择，需要注意的是，如果使用不同的字号，那么字号之间应有显著差别，24点的字号就很容易与18点的字号区分开，显得层次清晰。

行距：

一般情况下，英文行距是字号的1.2倍左右，中文行距是字号的1.5倍左右。

6. 边距与版心

版心即页面中主要内容所在的区域，版心的周围始终会有留白的区域，这就是我们所说的页边距。页边距存在的原因有二：首先是技术原因，一般来说页面边缘的1-3毫米，有时多达5毫米会被裁切掉。如果没有适当的边距，会伤及文字本身。（需要裁切的印刷品设计时要预留1-3毫米出血位，喷绘则不用）。其次，页边距的设置也有审美的因素，比例协调的页边距可以提高读者阅读时的愉悦感。

要确定版心，设计师必须先明确需要设计的内容，以及对整体和细节的展现有一个大概的构思。文本的长短、页边距的大小、版心的大小都是相互影响的。总之，整体、美观的版面离不开优质的页面比例、版心尺寸和字体排印。

7. 版心的结构

版心的大小、位置、组合方式有很多，每项新的设计都有其需要解决的问题，设计师们需要具体问题具体分析，找到适合的解决方式。一般来说，版心都在页面偏上的位置，这是一种比较美观的形式，给人一种轻盈、舒适的感觉；版心位置如果设置得太低，会有往下坠落的感觉。在实际操作中，会遇到各种特殊情况，例如在一些版面中，原本双栏的版心需要与三栏或四栏进行复合使用。这时可以进行拆分后复合使用。

8. 网格的结构

在开始设计之前，我们需要对在设计中可能出现的问题进行研究、梳理。前面准备越充分，后面思路越清晰。例如开本的大小、文本与插图的关系、字体的选择、印刷方式及纸张的品质等。设计师可以通过绘制等比例缩小的草图来尝试解决这些问题。在进行草图绘制时，版面的分栏是需要考虑的要点之一。分栏数量越多，越能制造出丰富的版面变化，相对应的对设计师的排版把控要求也越高。一开始绘制草图，可以多尝试几种布局方案进行比较，放弃一些明显不适合的方案，直至最后只剩下两三个方案，然后将它们放大到1:1的最终尺寸再进行互相比较，直到选出最终方案。在最终方案里面，将网格分割线叠加上去，进行内容的编排，需要注意的是每格中的首行文本必须与格的顶线对齐，而末行也必须与底线对齐。这样的尝试很难一次成功，往往需要我们用数学的方式进行计算（如下图）。

二、如何应用到设计当中

1. 8格网格的图文排版

在许多情况下，8格网格系统的版面足以容纳各种大小的插图。下图图例中，是8格网格系统中的8种图片尺寸，根据实际的工作，设计师可以在同一个页面中将相同或不同尺寸的图片进行图文组合。图例中用红色斜线标示的格可以用于绘画、图片、图表、插图、色块等元素。

即使在最简单的排版中，设计师也需要具备一种良好的判断力，并对图文的结构和节奏保持一个良好的感觉。

网格系统之于设计师，只是一个优秀、有用的工具而已，如何更好的使用这个工具，还需设计师不断的探索。

2. 网格中的照片、插图、色块

在设计中，对照片/插图的质量要求比较高，必须选择清晰的、有统一调性的照片/插图。

如果是多张产品介绍的照片，最好在同一位置、同一角度进行拍摄，保证视觉的统一性。

在实际工作中，照片素材往往不是在同一时间、同一空间进行拍摄，背景难免不统一，此时为了保证统一性，需要对照片素材进行处理，通常的处理方式是：把主体物抠出来，再在下方用一块灰色或者彩色色块作为衬底。如果有网格，衬底则必须与网格对齐，如果没有网格，衬底则必须与字行对齐。

如果在一个带有文本的网格中加一个与网格大小一致的色块，文本的开始和结束都会与色块的边缘重叠到一起，显然这不是一个令人满意的视觉效果。通常的解决方式是：

a. 色块与网格保持一致，文本框向内缩进；

b. 色块向四周延长，超过文本框。

3. 示例

三、写在最后的书评总结

《平面设计网格系统》的作者约瑟夫·米勒–布罗克曼是瑞士平面设计先驱，曾担任IBM欧洲设计顾问，因他的极简主义设计和简洁的排版、图形、色彩闻名于世。本书开篇讲了网格的作用和一些基本概念，接着讲了网格的制作应用和案例演示，包括不同的分栏应用和复合网格介绍等。

网格系统是一个很实用的工具，能很好的帮助我们解决设计中的诸多问题，非常推荐新手设计师阅读本书。