从混乱到秩序
栅格就是你对页面版式的规划
你日常所见的许多页面都有栅格存在。你可能注意不到,但它确实存在,并且支撑着设计内容,建立整体的架构,引导着页面的元素。
栅格是隐形的架构,用于指导你页面上各种元素的放置。栅格不会在印刷成品上出现,但却影响巨大,它控制着文本栏的宽度、照片周围空白的一致、杂志上每页重复出现元素的固定位置。栅格是一系列的辅助线,决定着印刷品的边距,页面元素(大标题、正文、照片等)之间的间距,让你知道如何在空白的页面上放置它们。
在决定是否使用或怎样使用栅格之前,你应该了解栅格的一些基础知识以及创建方法。虽然在印刷成品中看不到栅格,但在构建页面的过程中你还是需要能看见它。
在你的页面版式中可能会设置有“Margin”(页边距)。在屏幕上这些边线可能会显示为浅色的实线或虚线。上、下、左、右的边线在你的页面中部形成了一个盒子。你将以此为基点,建立单元格。通过把页面均分为几个等份,来创建多个单元格。你可以创建可见的网格来辅助页面排版:你的页面排版软件有辅助线的功能,或者你可以在非打印层绘制边线或方块。通常你可以从页面旁的标尺上“拖拽”出一条辅助线,然后放置在需要的地方。
栅格与边距
边距决定页面的外部边界。它们象一个画框一样包围着你的页面内容。四周边距不一定是均等的,但在(同一个出版物内)每一页之间或每一版之间边距通常是保持一致的。在大部分程序中,你在设置页面格式(尺寸规格)的时候就可以设置页边距。在某些程序中,你甚至可以“实时的”在屏幕上拖动边线来调整边距。
栅格与栏空
当你将页面的内部空间(版心)分割为几个均等部分后,每个单元之间的白空间就称为"Alley" (栏空)。栏空的方向是水平的、垂直的、或是两个方向兼
有,取决于你的栅格设置。在某些设计软件中,也称之为白空间或文本栏的"gutter" (内边距)。
栅格与内边距
两页或两版展开时,内部的边距就称为"gutter" (内边距),即中缝两边的边距。在某些排版软件中,两个文本栏之间的间隙也叫做"gutter" 。
栅格单元
栅格单元是你在页面上放置文本和图片的基本坐标。它决定的是“放置”而非“尺寸”。就是说,假如你有一幅比栅格单元大的图片,你一样可以使用它。你可以用栅格单元来帮助你缩放图片尺寸,缩放匹配1、2、3或更多个栅格单元大小,然后将它放置在页面上。
栅格提供了视觉上的条理性
栅格有着不同的应用,但并非适用于任何设计、任何人。杂志和简报之类的出版物几乎都离不开栅格。栅格增添了页面之间的一种连贯性,并且大大加速了设计的进程,设计师不需要每一页都“从草图开始”规划版式和设计。
在一系列独立而有关联的印刷品(如系列海报,或是为某个广告活动或某产品线设计的一系列传单)中,一个共同的栅格有助于统一这系列独立印刷品的整体形象。
在一件印刷品中往往有多个独立元素(本文块、大标题,照片,图表),栅格会帮助你把这些页面元素组织得井井有条。
一以贯之
人往往喜欢有条理的视觉信息
简报、杂志、宣传册、年报、以及书籍等通常包含诸多视觉元素:分栏文本、大标题、照片、插图、引文等等。栅格会帮助设计师在文档中建立页面之间的一致性。 读者会期待页码出现在每一页上的相同位置。一篇文章中的全部文字,即便它覆盖于多个页面,也一样有一致的外观,例如说相同的栏宽,这样可以提升可读性。同样的,读者还往往会期待边栏,说明性的文字,以及其他重复出现的元素出现在页面上的相同位置。
在一个多页文档的全部页面中使用一致的栅格,让设计师更易于提供读者们通常会期待的一致性外观。一个精心设置的栅格系统同样可以引入变化,而不会牺牲可读性和一致性。它同样会加快排版的进程,因为在放置各页面元素的时候,你不必再小心翼翼的“试探”以及“回头看看前面是怎样做的”。
下面的页面范例,显示了如何在一个7列的垂直栅格中进行一份新闻简报的图文混排。注意图一和图二有着一致的版式(但是左右反转了)。文本栏占两个单元格宽度。一个单元格有更多的栏空,用于把正文和边栏分隔开来。页3(图
二中的右页)的版式和前面两页好像没多少共同点,但假如你看看隐藏在页面背后的栅格系统(图三),你会看到这三页采用的都是同一个栅格系统。
图1 左边是7单元栅格的简报
图2 7单元栅格的对开页简报
图3 隐藏于这两个对开页简报之下的7单元栅格
用栅格来统一一系列的独立文档
我们可以有多种方法来为一系列相关文档建立统一的视觉形象。你可能会在全部营销资料上都打上你的标志,或是采用不同颜色的宣传册来标明不同的业务方向。同样的,你也可以使用栅格来统一你的宣传册、销售表格、展示广告、规格表、以及你“营销军火库”中的其他各种元素。
就像我说过的,“在一系列独立而有关联的印刷品(如系列海报,或是为某个广告活动或某产品线设计的一系列传单)中,一个共同的栅格有助于统一这一系列独立印刷品的整体形象。”栅格会帮助你在不同印刷品的相同位置放置重复的元素,同时有助于为图文混排提供一个统一一致的向导。
在图4中,各宣传页中的标题都使用相同的样式,但图片的数量和尺寸却各不相同。图5所示的3单元的栅格帮助统一了这几个单页。这是一个简单明了的范例。
图4 3个宣传册页使用一个共同的3单元的栅格
图5 一个3单元的栅格帮助统一了这一系列包含不同元素的宣传页
一个网格,多种设计
人们常常指责栅格是那些乏味、僵硬的设计的罪魁祸首。其实这并非栅格的错。正确的使用栅格,将会为设计带来创造性的变化。图6显示了同样四幅图片和不同数量的文字在同样一个4x4 的栅格系统中形成的4种截然不同的版式效果。
图6 同一个“乏味的”栅格创造出来的几个不同版式
灵活应变
基于内容选择栅格,或是基于栅格调整内容
正确使用栅格给设计师带来的是灵活性,而不是一成不变。正确的栅格还有助于内容的组织,让观众/读者更容易理解内容。
栅格本身是没有对错的,其实简单的栅格更适合于不同的内容和设计目的。当然,如果你只是盯着一张白纸和标题发呆,那栅格也帮不了你。下面几点可以作为思考的起点,帮助你筹划你的栅格和设计。
内容或页面元素
该出版物主要以文字还是图片为主?是否包含大量的标题、分隔线、插图和引文?
文本
观察文本的数量及其形态——是很长的文章,还是很多篇短文,或是长短混杂。有多少小标题?你会不会采用诸如页眉、水平线、首字下沉之类的视觉引导? 图片与插图
插图的类型或图片的尺寸是否存在相似点?图片能否按尺寸或类型来分组?是否有大量的矩形元素或是众多不规则形态的元素?
复杂度
通常来说,栅格单元数量越大,单元格就越小,设计的可能性也就会越多。然而,过多的可能性可能会破坏栅格设计所提供的那种微妙的统一性。
那么,哪种栅格最适合呢?这里是一些指导方针(记住,我说的是指导方针,不是金科玉律)。
一份包含很多图片的简报、宣传册或是杂志通常需要包含许多小单元格的栅格,这样可以为图片的放置和缩放提供更多可能性。
简报通常包含许多文本,因此常使用一种分栏式的栅格。
1、2、3栏的栅格很常见。每一栏都可以容纳大量的文本,特别是长篇的文章。
4栏或更多的分栏为包含文字、照片和其他图形元素及长短不同的文章的出版物提供了更强大的灵活性。
基于偶数的栅格可能会遭遇过于对称的困扰,假如文本和图形总是占据1-2个单元格的话。
简报不应该受缚于栏框式的栅格。一份简报包含了众多短文,以及“新闻提要”和照片,采用一套6(2x3)、 9(3x3)或是12(3x4)矩形或方形单元格的网格系统会很方便。
栅格不应成为设计的桎梏
栅格有可能让人感觉窒息,但这不是必然结果。
基于栅格的版式设计并非适用于一切案例。
应该让栅格去适应元素的混合,而不是要强制元素去适应栅格。
你无须强制你页面上的元素都限制于单个单元格。在一个5栏的栅格中,5个窄栏的文本恐怕会很难阅读。尝试用两栏文本,每栏占两个单元格,另外一个
空栏,用于放置强调语句、照片、或是作为页面的“呼吸空间”,或是连接大写 (参见前文-关于微调首字母大写)
缩放照片以适合2-3个或更多单元格。你也不必总是占满整个单元格。让照片占满2个或1/2单元格,其余的就留作白空间吧。
栏空与边距也不是不可跨越的禁区。出血的照片就可以超出页边。你也不需要填满每一个小单元格。在5-7栏的栅格单页中,剩余的奇数栏可以在外部提供额外的“缩略图空间”。有各种方式可以在设计中添加白空间,例如保留一些开放单元格便是途径之一。
一个网格不错,两个也许更好
一些出版物会使用混合栅格。如果某页的内容与其他页面相比发生了巨大的变化,那么就很适合用一种与其他页面不同的网格来表现。甚至在同一个页面内使用多个栅格系统也是可以的。
一份文字为主的简报也许在某个页面上会包含众多的照片或插图。那么可以给文本页面采用一种简单的栅格,而多幅图片的页面则可能会需要更复杂的布局。
使用两种不同栅格来将边栏或次级项目与文章主体区分开来。
长短文章在同一出版物中混合出现时可以为它们使用不同的栅格。或是为特别专题和常规内容使用不同的栅格。
不管你用了任何一种栅格,都应该始终如一。让内容来决定你的设计,让栅格成为你的页面布局上的合作伙伴——而不是独裁者。
本系列文章仅仅只是一个概要。如果它有助于你初步了解栅格系统,给你启发,或是激发你去寻找更多的灵感——那正是我所希望的。
从混乱到秩序
栅格就是你对页面版式的规划
你日常所见的许多页面都有栅格存在。你可能注意不到,但它确实存在,并且支撑着设计内容,建立整体的架构,引导着页面的元素。
栅格是隐形的架构,用于指导你页面上各种元素的放置。栅格不会在印刷成品上出现,但却影响巨大,它控制着文本栏的宽度、照片周围空白的一致、杂志上每页重复出现元素的固定位置。栅格是一系列的辅助线,决定着印刷品的边距,页面元素(大标题、正文、照片等)之间的间距,让你知道如何在空白的页面上放置它们。
在决定是否使用或怎样使用栅格之前,你应该了解栅格的一些基础知识以及创建方法。虽然在印刷成品中看不到栅格,但在构建页面的过程中你还是需要能看见它。
在你的页面版式中可能会设置有“Margin”(页边距)。在屏幕上这些边线可能会显示为浅色的实线或虚线。上、下、左、右的边线在你的页面中部形成了一个盒子。你将以此为基点,建立单元格。通过把页面均分为几个等份,来创建多个单元格。你可以创建可见的网格来辅助页面排版:你的页面排版软件有辅助线的功能,或者你可以在非打印层绘制边线或方块。通常你可以从页面旁的标尺上“拖拽”出一条辅助线,然后放置在需要的地方。
栅格与边距
边距决定页面的外部边界。它们象一个画框一样包围着你的页面内容。四周边距不一定是均等的,但在(同一个出版物内)每一页之间或每一版之间边距通常是保持一致的。在大部分程序中,你在设置页面格式(尺寸规格)的时候就可以设置页边距。在某些程序中,你甚至可以“实时的”在屏幕上拖动边线来调整边距。
栅格与栏空
当你将页面的内部空间(版心)分割为几个均等部分后,每个单元之间的白空间就称为"Alley" (栏空)。栏空的方向是水平的、垂直的、或是两个方向兼
有,取决于你的栅格设置。在某些设计软件中,也称之为白空间或文本栏的"gutter" (内边距)。
栅格与内边距
两页或两版展开时,内部的边距就称为"gutter" (内边距),即中缝两边的边距。在某些排版软件中,两个文本栏之间的间隙也叫做"gutter" 。
栅格单元
栅格单元是你在页面上放置文本和图片的基本坐标。它决定的是“放置”而非“尺寸”。就是说,假如你有一幅比栅格单元大的图片,你一样可以使用它。你可以用栅格单元来帮助你缩放图片尺寸,缩放匹配1、2、3或更多个栅格单元大小,然后将它放置在页面上。
栅格提供了视觉上的条理性
栅格有着不同的应用,但并非适用于任何设计、任何人。杂志和简报之类的出版物几乎都离不开栅格。栅格增添了页面之间的一种连贯性,并且大大加速了设计的进程,设计师不需要每一页都“从草图开始”规划版式和设计。
在一系列独立而有关联的印刷品(如系列海报,或是为某个广告活动或某产品线设计的一系列传单)中,一个共同的栅格有助于统一这系列独立印刷品的整体形象。
在一件印刷品中往往有多个独立元素(本文块、大标题,照片,图表),栅格会帮助你把这些页面元素组织得井井有条。
一以贯之
人往往喜欢有条理的视觉信息
简报、杂志、宣传册、年报、以及书籍等通常包含诸多视觉元素:分栏文本、大标题、照片、插图、引文等等。栅格会帮助设计师在文档中建立页面之间的一致性。 读者会期待页码出现在每一页上的相同位置。一篇文章中的全部文字,即便它覆盖于多个页面,也一样有一致的外观,例如说相同的栏宽,这样可以提升可读性。同样的,读者还往往会期待边栏,说明性的文字,以及其他重复出现的元素出现在页面上的相同位置。
在一个多页文档的全部页面中使用一致的栅格,让设计师更易于提供读者们通常会期待的一致性外观。一个精心设置的栅格系统同样可以引入变化,而不会牺牲可读性和一致性。它同样会加快排版的进程,因为在放置各页面元素的时候,你不必再小心翼翼的“试探”以及“回头看看前面是怎样做的”。
下面的页面范例,显示了如何在一个7列的垂直栅格中进行一份新闻简报的图文混排。注意图一和图二有着一致的版式(但是左右反转了)。文本栏占两个单元格宽度。一个单元格有更多的栏空,用于把正文和边栏分隔开来。页3(图
二中的右页)的版式和前面两页好像没多少共同点,但假如你看看隐藏在页面背后的栅格系统(图三),你会看到这三页采用的都是同一个栅格系统。
图1 左边是7单元栅格的简报
图2 7单元栅格的对开页简报
图3 隐藏于这两个对开页简报之下的7单元栅格
用栅格来统一一系列的独立文档
我们可以有多种方法来为一系列相关文档建立统一的视觉形象。你可能会在全部营销资料上都打上你的标志,或是采用不同颜色的宣传册来标明不同的业务方向。同样的,你也可以使用栅格来统一你的宣传册、销售表格、展示广告、规格表、以及你“营销军火库”中的其他各种元素。
就像我说过的,“在一系列独立而有关联的印刷品(如系列海报,或是为某个广告活动或某产品线设计的一系列传单)中,一个共同的栅格有助于统一这一系列独立印刷品的整体形象。”栅格会帮助你在不同印刷品的相同位置放置重复的元素,同时有助于为图文混排提供一个统一一致的向导。
在图4中,各宣传页中的标题都使用相同的样式,但图片的数量和尺寸却各不相同。图5所示的3单元的栅格帮助统一了这几个单页。这是一个简单明了的范例。
图4 3个宣传册页使用一个共同的3单元的栅格
图5 一个3单元的栅格帮助统一了这一系列包含不同元素的宣传页
一个网格,多种设计
人们常常指责栅格是那些乏味、僵硬的设计的罪魁祸首。其实这并非栅格的错。正确的使用栅格,将会为设计带来创造性的变化。图6显示了同样四幅图片和不同数量的文字在同样一个4x4 的栅格系统中形成的4种截然不同的版式效果。
图6 同一个“乏味的”栅格创造出来的几个不同版式
灵活应变
基于内容选择栅格,或是基于栅格调整内容
正确使用栅格给设计师带来的是灵活性,而不是一成不变。正确的栅格还有助于内容的组织,让观众/读者更容易理解内容。
栅格本身是没有对错的,其实简单的栅格更适合于不同的内容和设计目的。当然,如果你只是盯着一张白纸和标题发呆,那栅格也帮不了你。下面几点可以作为思考的起点,帮助你筹划你的栅格和设计。
内容或页面元素
该出版物主要以文字还是图片为主?是否包含大量的标题、分隔线、插图和引文?
文本
观察文本的数量及其形态——是很长的文章,还是很多篇短文,或是长短混杂。有多少小标题?你会不会采用诸如页眉、水平线、首字下沉之类的视觉引导? 图片与插图
插图的类型或图片的尺寸是否存在相似点?图片能否按尺寸或类型来分组?是否有大量的矩形元素或是众多不规则形态的元素?
复杂度
通常来说,栅格单元数量越大,单元格就越小,设计的可能性也就会越多。然而,过多的可能性可能会破坏栅格设计所提供的那种微妙的统一性。
那么,哪种栅格最适合呢?这里是一些指导方针(记住,我说的是指导方针,不是金科玉律)。
一份包含很多图片的简报、宣传册或是杂志通常需要包含许多小单元格的栅格,这样可以为图片的放置和缩放提供更多可能性。
简报通常包含许多文本,因此常使用一种分栏式的栅格。
1、2、3栏的栅格很常见。每一栏都可以容纳大量的文本,特别是长篇的文章。
4栏或更多的分栏为包含文字、照片和其他图形元素及长短不同的文章的出版物提供了更强大的灵活性。
基于偶数的栅格可能会遭遇过于对称的困扰,假如文本和图形总是占据1-2个单元格的话。
简报不应该受缚于栏框式的栅格。一份简报包含了众多短文,以及“新闻提要”和照片,采用一套6(2x3)、 9(3x3)或是12(3x4)矩形或方形单元格的网格系统会很方便。
栅格不应成为设计的桎梏
栅格有可能让人感觉窒息,但这不是必然结果。
基于栅格的版式设计并非适用于一切案例。
应该让栅格去适应元素的混合,而不是要强制元素去适应栅格。
你无须强制你页面上的元素都限制于单个单元格。在一个5栏的栅格中,5个窄栏的文本恐怕会很难阅读。尝试用两栏文本,每栏占两个单元格,另外一个
空栏,用于放置强调语句、照片、或是作为页面的“呼吸空间”,或是连接大写 (参见前文-关于微调首字母大写)
缩放照片以适合2-3个或更多单元格。你也不必总是占满整个单元格。让照片占满2个或1/2单元格,其余的就留作白空间吧。
栏空与边距也不是不可跨越的禁区。出血的照片就可以超出页边。你也不需要填满每一个小单元格。在5-7栏的栅格单页中,剩余的奇数栏可以在外部提供额外的“缩略图空间”。有各种方式可以在设计中添加白空间,例如保留一些开放单元格便是途径之一。
一个网格不错,两个也许更好
一些出版物会使用混合栅格。如果某页的内容与其他页面相比发生了巨大的变化,那么就很适合用一种与其他页面不同的网格来表现。甚至在同一个页面内使用多个栅格系统也是可以的。
一份文字为主的简报也许在某个页面上会包含众多的照片或插图。那么可以给文本页面采用一种简单的栅格,而多幅图片的页面则可能会需要更复杂的布局。
使用两种不同栅格来将边栏或次级项目与文章主体区分开来。
长短文章在同一出版物中混合出现时可以为它们使用不同的栅格。或是为特别专题和常规内容使用不同的栅格。
不管你用了任何一种栅格,都应该始终如一。让内容来决定你的设计,让栅格成为你的页面布局上的合作伙伴——而不是独裁者。
本系列文章仅仅只是一个概要。如果它有助于你初步了解栅格系统,给你启发,或是激发你去寻找更多的灵感——那正是我所希望的。