网格系统有多好？谁用谁知道！

本文授权转自：胡晓波工作室 （ID：ziyou-design）

网格规范的设定和应用对于许多设计师来说仍然处于一种尴尬的境地，求而不得，得而不用，用而不精是很多设计师目前的现状。

对于不是科班出身的设计师来说就更是如此，我们对于精确的规范有着天然的敬畏，怕用不好，最后就索性不用。

这和没有驾照就开上上路本质上是没有区别的，其中包含的阅读与印刷上的风险，和酒驾也没有任何的区别。

这极有可能是一个刑事案件。

扯远了...哈哈。

网上也有一些关于网格类的设计教程，是比较全面的介绍，但是我们看了很多教程到最后也还是不会用，反而越看越蒙，越看越觉得水太深，然后就：可以可以，牛逼牛逼，算了算了，撤了撤了。

作为人称夏天里的暖宝宝，冬天里的一把火(这都什么跟什么...)，我们尽量将问题解释的简单一点，其实对于普通的排版需求来说，复杂的网格系统对于我们来说意义不是特别的大，简单且容易上手才是问题的关键。

实际上，在使用网格系统的过程中，大多数设计师都会在不同阶段热爱不同的栏数量，网格第一印象往往给人以呆板不灵活的表现，这个可能也是许多的新手设计师提不起兴趣的原因之一。但这是个很大的偏见。

在使用网格的经验中，有许多的优势。

01.网格使内容秩序，信息传达更有逻辑感。

02.灵活使用网格系统，会让工作效率成倍提高。

03.增强多页面的贯穿性，逻辑性。

04.网格使留白具有合理性。

05.网格也可以成为设计一部分，具有可扩展性的输出。

开始之前，我们还是要进行一下俗套的简单介绍环节，一定要耐心一点，虽然其中有一些复杂的网格我们也用不上，但是了解还是要了解一下的。

那么进行文字与图片的编排之前，我们需要设定一下常规的几个部分。

首先来看天头地脚页边距的设定，常规以5mm一个单位，倍数关系进行设定。注意内页边距的设定要考虑装订的方式和页数，保险起见可以略大一些，防止内容被吃进去。

余下的白色区域就是我们工作区域，俗称的版心。基本上所有的信息都是在版心内完成的，当然了不是绝对的，如不太重要的图片部分可以溢出版心区域，或是页码的放置有时候也可以超出这个区域。

那么在介绍网格几种的分类方法之前，我们简单说一下网格是如何在软件进行设定操作的。

毕竟，我是夏天里的暖宝宝，温暖你的心窝，而你拿着窝窝头，这也不是我的锅...

这里主要介绍两种设定网格的方法，都是AI里的设定方法，毕竟使用AI软件的还比较普遍。

第一种在软件当中可以直接设定，当然了，天头地脚页边距还是需要你自己先画出来（设定色块——显示标尺——拖动参考线）。

我们看到出现了一个面板，里面可以单独设定横纵的栏的数量，并且可以调整“间距”，没错，这里的间距就是我们即将要说的“栏间距”。

可纵向设定，栏的数量可根据需求来设定，这也称为纵向网格，是最常用的网格。具体我们后面用案例来说明。

也可横纵同时设定，这个时候就变成了模块网格，即横纵形成多个模块区域，适用于图文较多的情况。

接下来我们介绍第二种设定网格的方法，当然了，还是在AI软件里来设置。

利用区域文字选项来设定。

我们首先来复制一大段文字。

纵向网格是比较常用的网格形式，从通栏到二三四五栏等等，可以一直分下去，根据不同的排版工作，不同设计师的使用习惯，有人偏爱2,3栏，有人偏爱4，8,16栏等。

模块网格往往会形成许多的模块区域，这里只是简单列举了几种，因此一般文字与图片内容较少的情况较少使用。

比较推荐情况是产品较多时的产品画册与广告宣传单。可以更加秩序又富有变化节奏的呈现版面布局，得到令人满意的效果。

除了这些常见的网格类型，还有复合网格，突破网格等，是一些不太常用的网格类型，这种形式往往需要处理文本与图片的类型以期形成新的组合关系。尤其突破网格，是更具探索性质的网格挑战，这里就不展开来说了。

网格部分的应用领域非常广泛，书刊杂志画册宣传单，网页设计等都有不同的应用。我们只是主要来讲一下画册的应用。

下面我们用案例来详细说明一下。

第一步：我们以宽高420mm×285mm尺寸的画册来进行案例演示。

首先，设定天头地脚页边距，从而确定出版心，明确工作区域。

第二步：我们先演示一下最常见的网格类型，三栏网格。

所以，先确定出一个3栏的网格。

第三步：首先我们需要设计一下基本的文本设置。由于我这里的标题的字号变化较大，是根据栏宽来变化的，所以无太大借鉴意义，我就不单独列出来了。

主要来看一下同样的内容，同样的网格设定之下，排版的方式如何呈现更加丰富的变化。

根据排版方式的不同，页数会增多会减少。设计本身也是一个分配内容的过程。

我们来看第一个方案，这是比较基础的一个排版方式，整体我没有做特别复杂的空间排列关系，只是设定好了所有的字号行距等比较呆板的排列完成。

不杂乱，这是网格带给我们的第一个好处。

我们可以进行下一个版本的尝试，在布局上，我想要尝试更加多变的结构放置。

这个版本的方案是不是更好一些了？

这就是网格的第二个好处，图片的裁切会更具可能性。

第三个方案中，我将图片缩小之后，文字的排放有了更多的空间，如果是以上的两个方案，排不下的文字自然会到下一页，那么会占据更多的页数。

这个方案中尽管信息相对多一些，但是也产生了自然留白，留白所占据的空间也是合理且舒适的，这是网格的第三个优势，自然留白。

第四个方案，接下来我希望设置一个六栏的网格，为文本的长短节奏设定更复杂的变化方式。

因为图片内容较为复杂，所以我们将其作为背景使用，图片是典型的跨页处理，并且溢出版心，文字泽完全在版心内放置，这就保证了信息上的风险。

第五个方案，仍然是在六栏网格的基础上进行排放，这次我选择加了一些色块进去平衡版面。让色块与图片同时置于顶部，左右平衡。

要重点说一下的是，画册的设计往往需要你的布局在一页当中如何展现，读者一次性打开的是两页，所以将两页作为一个整体来设计也是比较稳妥的方案。

而随着能力的精进，最后我们发现整本画册才是一个对象。风格与调性在最初的两到四页就已经完全建立，字号字距段落间距的设定，网格的建立，图片的选择裁切与处理风格等，这些都是在最初就形成的。所以最前面的设计需要更加谨慎一些。

最后看一下最终五个排版方案的效果图区别对比。

为了写这一篇教程，我连续不断差不多喝了十几杯水，不说了，我再喝点水去...

文章转载： 胡晓波工作室 ，版权归原作者所有

https://mp.weixin.qq.com/s/I6H1zbjCSspA6GAFuVcMqg

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编辑 | 梁芊芊

终审 | 苏 菁

点这里，学习更多设计知识！