现代版面形式的理性掌控——关于网格设计

文/祝东平

现代版面形式的理性掌控
——关于网格设计

文/祝东平

目前世界上占主导地位的重要版面设计方法、源自20世纪20年代的构成主义、到50年代定型并在世界各地广泛传播的网格设计，是现代平面设计和展览等设计的有效方法，需要正确地认识、灵活地应用、创造性地发挥，才能产生优秀的版面艺术形式。

现代；设计；版面；网格

现代版面形式可谓纷繁，宏观地观察分析，归于理性掌控的网格设计占到了相当的比例，是目前世界上居主导地位的重要版面设计方法。辞典对于网格的解释是：安排均匀的水平线和垂直线的网状物。网格设计，就是在页面上按照预先确定好的网格，理性而有序地排列文字和图片的一种版面设计方法。网格设计也可以叫做网格系统，还有人把它叫做标准尺寸系统、程序版面设计、比例版面设计、瑞士版面设计或者欧洲版面设计。其特征是重视比例感、秩序感、连续感、清晰感、时代感，具有准确性、严密性和科学性。网格设计是以理性为基础的，与以感性为基础的美国自由版面设计成为很好的对比。当真正把技巧、感觉和网格这三者融合在一起时，就能够更好地解决功能、逻辑和美学上的问题。

图1

现代网格设计经历了一个长期发展的过程，其源流可以追溯到20世纪20年代的构成主义。自从德国包豪斯设计学院这个构成主义的中心地解体以后，瑞士的设计师们继承了包豪斯的设计思想，瑞士的设计学校成为现代网格设计主要的实验室。其中最严谨、最锲而不舍地应用网格设计的是巴塞尔美术学校的权威埃米尔•鲁德尔教授和他的学生们。20世纪40年代出版了第一件用网格设计的印刷品，其严谨的文字和图片设计方案、全书统一的版面形式和对于主题朴实无华的表现代表了新的潮流。到了20世纪50年代，网格设计成为较为成熟定型的版面设计形式在世界范围广泛传播。介绍网格的第一本专业书籍是德国1961年出版的《平面设计家的设计问题——网格设计是书籍、报纸、杂志、广告、产品样本、展览等设计的有效方法》，简明扼要及图文并茂地阐述了网格设计的本质和优越性并附有28个应用实例。作者是著名的瑞士设计师、网格设计的积极倡导者约瑟夫•米勒•布鲁克曼。他在总结网格设计的优越性时说：“网格使得所有的设计因素——字体、图片、美术之间的协调一致成为可能。网格设计就是把秩序引入设计中去的一种方法。”

图2

毋庸置疑，网格是设计师的一件非常实用的工具，能够进行有效、快速的计划和组织，帮助我们解决视觉设计中的各种复杂问题。欧洲、美国、日本的设计师受到网格设计很大的影响，使用者越来越多。而在我国，情况就大不一样了，真正认识、了解和使用它的人相对还很少。尽管一些书刊、报纸等出版物或印刷品以及许多网页的设计早就在自觉不自觉地模仿使用，但也只是知其然不知其所以然，有的甚至由于误解而导致错误地使用。

图3

一、网格的形式

网格是建立在水平线和垂直线分割组合的基础上的，垂直线决定了水平方向栏的宽度，水平线控制着垂直方向栏的高度。两个方向的线构成了网格单元的大小和形状，网格单元之间要留有相应的均匀空距。

1.正方形网格

顾名思义，正方形网格就是指网格的基本单元是正方形的。可以说，正方形网格是网格设计的基本形式，可能比黄金长方形或其它一些比例更为重要，它为设计者提供了广阔的施展空间。虽然由于各种原因其外形不够理想，而且在实际应用中也不太可能经常把网格形式确定成完全的正方形，但却有必要了解使用这种网格形式的优越性(图1)。

2.长方形网格

不少设计者都是以自己直观的比例感觉来划分版面，因而就产生了不同于正方形的各种比例的长方形网格。从总体来看，长方形网格包括水平方向长方形网格(图2)和垂直方向长方形网格两种形式，给页面带来了比较丰富的变化，与正方形网格相比，能适合更多不同风格的内容。

3.单向网格(也叫重点网格)

均匀的水平线和垂直线构成网格。但为了避免勉强的比例和单调的布局，可以只确定水平或垂直单一方向的规矩，加以重点把握，而另一个方向不去约束，是完全放开的任意尺寸，这样就形成了单向网格。例如美术画册中的绘画作品为了保持原貌，不可能像图片那样剪裁，只能按原作比例放大或缩小，而使用单向网格是最理想的。其实常见的版面中分成若干栏的形式就是单向网格(图3)，只限制水平方向而放开垂直方向，可以非常方便灵活地安排图文，既统一而又变化丰富。再就是只限制垂直方向而放开水平方向。

4.书架和晾衣绳

用这两个名词来表述网格形式也许很形象，书架和晾衣绳分别是单向网格中只限制水平方向而放开垂直方向的另外两种表现形式。所谓“书架”就是把图片和文字设计成上面不齐下面齐的版面，而“晾衣绳”正好反过来，是下面不齐上面齐的形式。按这两种原则设计的网格产生了既统一又有变化的格局，如果使重心靠上或者靠下，会给人不同的感觉和联想。

5.大小网格

网格还可以设计成若干大小不一的栏，也就是大小不同的网格。这就有必要增加一些垂直线或水平线，依照比例法则设计出有良好比例的若干宽窄不同的栏。大小网格的功能是多方面的，它能够为几个不同的内容服务，而且主次更加分明。大小网格最简单的形式是一宽一窄大小不同的两栏。一般情况下是大网格即宽的那一栏安排重要的内容，小网格即窄的那一栏配置附属的东西。比如内容是以文字为主的，那就大栏放正文，小栏放图片和说明文字(图4)；如果内容是以图片为主的，则大栏放图片，小栏放文字(图5)。大小网格的数量和尺寸多少为宜，还是完全取决于内容及开本和版心。

图4

图5

图6

6.重叠网格

当遇到繁复多变的内容时，版面设计需要不止一种形式的网格，不同的版面使用不同的网格来解决。但是在可能的情况下，可以把不同的网格重叠起来或者结合在一起，组成一个单一的重叠网格结构。一个组合良好的重叠网格，应该能够满足不同内容的全部要求。例如，目前杂志版面常用的2栏与3栏的组合，就是一种最简单的重叠网格(图6)。3栏与4栏的组合也是一种常见的非常方便实用的重叠网格形式(图7，图8)。

图7

图8

7.网格的突破

任何事物都具有两面性，网格的优点是规矩和约束，但如果处理不当，不能灵活地和创造性地应用网格，就容易使版面显得单调和枯燥，把优点变成缺点。所以为了使过于平静的版面出现变化，可以采用局部突破网格规矩的方法。比如个别图片向外移动半格，也可不按比例放大缩小，还可去掉背景成为脱底的图片，或者把图片的方角改成圆角甚至做成其他形状的图片，与方形的网格产生对比等等。突破的方法很多，目的是使版面变得生动起来。

对于没有使用过网格设计的人来说，最好从简单的网格形式入手进行尝试。随着时间和经验的积累，可以逐步发展到更加复杂的形式。较为复杂的网格针对繁多的内容在实施设计时能够带来更多方便。但是往往设计者在应用熟练后就会摆脱复杂网格的种种限制，只用简单形式的网格从容应对繁杂多变的内容，同样能够收到统一而良好的版面效果。

图9

二、网格的设计方法

正如网格这个名词的解释一样，表面上看似简单，但实际上并非轻而易举。在用网格进行版面设计时，会发生许多意想不到的问题。网格设计成功的关键，前提是对网格有全面和清晰的了解、正确和深入的认识，然后仔细地计划纵横划分版面的关系和比例，灵活地应用、创造性地发挥，才能够产生优秀的版面。这有赖于设计者理性的思维与掌控，同时学习借鉴他人的经验和成功作品的经典之处。

图10

1.构思

与其它形式的设计一样，网格设计是由作品的内容和设计者的思维方式等综合因素共同支配的。网格在形式上是千变万化的，每个设计者都愿意使创作过程适应自己的思维方式、工作方法和个人风格。大致步骤①开始设计之前，要深入了解作品的内容、设计要达到的目的和预期效果以及读者的潜在反应。②把所有的要点提炼到一个初步的设计方案上来，本着形式服务于内容的原则，从多种网格形式中选定一种最适合的，能够适应广泛的视觉资料复杂多变的结构。

图11

2.确定开本和版心

了解并熟悉了手边要设计的全部文字与图片的数量和状况后，对如何进行设计应该有一个总体的和细节的想象，同时也对于文字和图片的整体和局部的安排做到心中有数，能够由此而设计适合的开本和恰当的版心。版心的四周是边白，同时也形成了保护版心的外框。这个空白外框的大小如何确定，是与开本和版心相辅相成的，完全要从内容来考虑。文学书籍的版心四周一般需要留大约2公分宽的空白外框，目的是使阅读时眼睛不受四周不利环境的干扰。而以摄影图片为主的出版物，图片比文字有更重要的作用。为了安排更多或更大的图片，版心尽可能大一些，边白约有8-12毫米就足够了。有的摄影画册甚至可以不要保护版心的空白外框，也就是不留边白，把图片做成出血版，充分利用页面的全部空间。版心在页面上的位置变化，四周的空白多少，都会给人以不同的感觉。除了版心在页面上下左右完全居中的形式外，还可以根据不同的需要将版心做上下左右不同位置的调整。

3．画草图

画草图的目的是为了把握和更容易看清整个设计的面貌，易于迅速和方便地使构思具体化。一般按比例缩小到二分之一或四分之一的尺寸，便于做正稿时成倍放大，也比较节省时间。画草图时应根据版心大小考虑如何分栏和定什么网格的问题。一栏的形式适用于较小的开本和版心，在这里由于空间所限，只有很少的方法去安排和表现大、中、小的图片和文字块。两栏的形式对于文字和图片提供了较多的方法。可以一栏放文字，另一栏放图片(图9)。也可将文字和图片放在同一栏内。再如有两栏8个格子的网格，左栏4个格子放文字，右栏4个格子放图片，且每格有1行和多行图片说明文字的区别(图10)，标题、正文和图片都在网格内。这种两栏8个格子的网格可安排8种不同大小和形状的图片(图11)，能提供足够的方法把各种图片与文字组合在一起。此外，两栏还可继续再分为四栏，使变化更加灵活丰富(图12)，同时，这里也是比较典型的长方形网格形式。三栏的形式对于文字和各种大小的图片在安排时有更多的方法(图13)。三栏的分配方法也可继续再分为六栏。四栏适用于有许多文字和许多图片或者有许多数字、曲线和斜线的统计资料的方案。四栏也可继续分为八栏、十六栏甚至更多的栏。它对于表现统计资料是一种实用的形式。多栏的形式适合于大开本大版心，虽然方便好用，但缺点是字行相对会短一些，因此必须选用较小的字体。具体分多少栏和确定哪一种网格形式，取决于出版物的性质和开本的大小。

三、图片设计

在读图时代的今天，越来越多的出版物、印刷品、展览展示和网页等传播媒介都更加重视图片的应用,设计是图片和文字的综合体。在以图片为主的版面中，图片比文字更为重要，应用网格设计能使大量的图片和文字资料和谐有序地统一起来。

图12

1.图片的选择和剪裁

原始拍摄的图片往往由于构图等因素不够完美，因此图片的选择和剪裁对于加强其表现力至关重要。除强调完整的构图外，图片视觉性的强弱度常依观看者的兴趣不同而产生差异，规律性的倾向是按以下的顺序，人物→动物→静物→景物。比较特殊和罕见的状态如仰视、俯视或者借助光学设备拍摄的微观和宏观的图片，常会收到不寻常的效果。同一张图片，经过有意剪裁之后会改变视觉性的强度。一般是这样的顺序，眼睛→脸部(头部)→上半身→全身→场景或其它背景配合的全身。图片的外形除正规的正方形和长方形外，还可以变化成各种外形，如圆角、圆形、椭圆形和不规则形等或者去掉背景，以更加强调和突出主体形象，与常规图片产生很好的对比。特别要注意的是，需要印刷的图片必须保证足够的尺寸和像素以达到最佳效果。

图13

2.图片的组合

经过仔细选择和剪裁的图片就可进入组合阶段。按照图片的类别进行组合排列，把不同构图方向(横、竖)、不同大小尺寸的图片有目的和有变化地顺序配置。有必要提醒的是，要充分考虑图片对于版面空间作用的基本形式法则的应用。空白在版面上很重要，它不仅衬托重要的图片使其增强表现力，缜密组织空白还能够提高版面的整体质量和深度。图片若是运动着的画面，应尽可能把它们的运动方向引向两页的中间，有空间透视的画面也应当把消逝点引向对页中间的装订线。仰视拍摄的图片尽量放在页面上部，俯视的画面则应放在下面，以便与读者的视角取得一致。对于主要的图片应给予优先的考虑，其尺寸可比其它的大，安排在版面的中心部分，与周围的图片形成强烈的对比。需要出血的图片要把3毫米的切口计算进去。但是美术画册的绘画作品为保持其完整应尽量不出血。需要重点提到的是内容连续的一组图片，能够表现一个活动的过程，相当于连环画，也叫做图片故事。从表现一个事物来说，要比单张的图片清晰得多，并且这种类似电影静帧的效果给画面加入了时间的因素。图片的说明文字应比正文小一点，一般放在靠近图片或者易于找到的地方。

结语

网格设计从诞生到不断发展的几十年来，确实解决了印刷品设计许多方面的难题。除了为书籍、报纸、杂志、网页、多种宣传品以及展览展示带来了新的设计方法、改变了传统的版面设计面貌外，在一些内容纷繁的印刷品中，例如年鉴、大百科全书、产品目录、符号系统等的设计中起到了有力的助手作用。德国著名书籍艺术家汉斯•彼得•维尔堡教授在《发展中的书籍艺术》一书中说：“毫无疑问，网格设计是符合功能主义的，是形式服务于内容的，我们不得不对它刮目相视。”分析网格设计的利与弊，摆出它的优点和缺点，目的是让设计者摆脱网格框框的约束和限制，灵活地和创造性地应用网格。正如瑞士著名设计师约瑟夫•米勒•布鲁克曼主张的：“网格体系应成为一个助手，而不是框架，它允许有各种各样的使用方法，而且每个设计师都可以寻求一种接近个人风格的方案。但是他必须学会怎样使用网格，这是一种艺术，需要实践。”版面设计是众多因素的复杂结合，包括设计者的爱好、才能、知识、修养和经验以及对作品内容的理解和读者情况的了解等等。适合多内容、具有多功能用途的网格设计，形式是多种多样的。对于网格特别是有些比较复杂的重叠网格，需要进行仔细的研究和分析，然后才能够创造性地和得心应手地去驾驭它，从而创作出变化丰富、效果生动的版面艺术作品。

祝东平 (中国人民大学艺术学院设计系主任 教授)

Zhu Dongping (Department of Art＆Design of College,Renmin University of China Department Head＆Professor )

The Rational control of Modern Format's Form——On grid design

Zhu Dongping

The grid design which was originated from the 1920s'constructivism, then stereotyped and spreaded to all over the world in the 1950s plays a dominant role in the world of format design. It is an effective way of modern graphic design as well as display design. The excellent format design form requires not only to be well understood but also diversiform usage and the spark of creativity.

modern; design; grid; graphic

book=40,ebook=55