分享Ai创建网格系统 排版技巧 (网格系统)

一般情况，我们在排版时都要为页面增加页边距和网格系统；而有些同学采用拉辅助线的方法，还有些同学会采用手动方法一条条去画线建立网格。这次我和大家分享一个更加方便快捷的方法，让你在Ai中也可以拥有和Indesign中一样的网格系统。

简单分三步：

1、建立任意画板，使用矩形工具创建一个A4（210x285mm）矩形。（提示：描边和填充都要设置为无）

2、选中“矩形”，依次找到菜单栏“对象”-“路径”-“分割为网格”，会出现对应面板，附图流程，一看就懂。

操作之后会出现如上图左侧，很好玩的，建议多试试，到这一步还没完，下面的操作是转变为网格参考线，windows系统快捷键是”Ctrl+5“（也可菜单栏”视图“-”参考线“-”建立参考线“），会变成如下图青色，然后就可以复制使用了。当然，网格辅助线和正常的辅助线一样，可以通过属性面板”显示/隐藏/锁定“等操作。

有没有同学好奇”释放参考线“是做什么功用的？没错，参考线也可以变成图形进行填充和描边的操作，快去试试吧！

版式设计中的网格系统

版式设计作为平面设计的重要组成，可以对视觉传达效果的改善提供重要帮助。而网格系统作为版式设计中最为重要的环节，网格可将版面的构成元素如点、线、面协调一致地编排在版面上。网格系统在实际版式设计中具有比例感、统一感和准确感强烈等特点，伴随着当今时代信息量大而快速传播的要求，网格系统在版式设计中已经越发引得人们的重视。

一、栅格的概念

栅格设计不是简单地将文字、图片等要素并置，而是遵循画面结构中的相互联系发展出来的一种形式法则。它的特征是重视比例、秩序、连续感和现代感。栅格设计成功的关键是，在仔细的计划内，纵横划分版面的关系和比例。当我们把技巧、感觉和栅格这三者融合在一起灵活创造性地进行设计时，就会产生精美大方，令人印象深刻的版面，并在整体上给人一种清新感和连续感，具有与众不同的统一效果。同时，设计工作也因此更加方便。

二、满足不同类型的版式风格

依照不同的逻辑关系，我们可以编排出多种形式的网格，每一种编排形式都会带来不同的感受，它可以是理性的、也可以是带有节奏和韵律的。根据不同的需要设置网格的形式，满足不同的需求。

三、组织关联信息

在版式设计中，主要针对两个内容，一是合理划分空间关系、二是清晰有逻辑的组织编排视觉信息、元素。网格恰好适应了这两种需求。版面内视觉元素复杂繁多，通过网格系统可以很好的将有关联的内容编排到一起，增加他们的关联性。

四、栅格设计是版式设计的基础

版式设计应该遵循建立在栅格基础上的实用原则，而不仅仅只注重创意。具有创意的版式设计，但仔细观察之下，却大多经不住推敲。有时候我们并不缺乏创意，相反，缺少的是严谨。

网格系统设计作为一项艺术性很强的工作，也有其自身的规律性，为此在设计中要结合平面设计的具体特点，科学合理的运用分栏方法以及网格单元将文字、图形、装饰等视觉形象进行合理的设计。同时要结合相应的视觉经验，以及审美规律，如此，才能使网格成为版式设计中的强大助力。

（以上观点部分有所借鉴，仅供参考）。

在网格系统中分割线的作用

在网格系统中分割线的作用如下：

网格在版式设计中，是一种非常重要的并且常用的设计方法，各种设计书籍多有提及，其特点就是运用数字的比例关系，通过网格是设计的辅助工具，用竖直或者水平的分割线对版面进行划分，形成一个基本的骨架。网格线在版面中是隐藏的参考线，并非实体元素。说起设计，首先要提到网格。网格是设计得以成立的基础，设计师在这个骨架里填入丰富的设计元素，给设计带来秩序感和结构感，最终成为一件有血有肉的作品。说到网格，很多朋友都要头疼。其实网格并不是什么神秘抽象的东西。举个很简单的例子，大家小时候刚开始学写字时，都会用到田字格，每一个笔画要写在田字格的什么部位都要非常准确，如果放错了位置，就成了错字。在不写错字的基础上，我们再把笔画之间的比例调整一下，就有了不同的字体，同时也决定了每个人的笔迹。虽然我们现在写字已经都不用田字格了，但实际上，在写的过程中，我们已经不由自主地在纸上画了一个隐形的田字格，字还是在格子里的。

平面设计中的网格系统

为什么要建立这样的网格系统，怎样在网格系统的帮助下快速解决设计中的问题，使设计更具功能性、逻辑性和视觉美感。网格系统的应用意味着：系统化和清晰化，集中精力看透关键问题，用客观取代主观，理性看待创造和制造产品的过程，将色彩、形势、材料进行结合，从建筑角度来驾驭内外空间。网格应用于广告、折页、书籍、空间布置、企业识别系统等领域。

字体样式

书中给出8～72点字的印刷大小，8至12点字最适用于书籍正文。常用的优雅富有艺术性的英文字体有Garamond 、Caslon、Bodoni、Walbaum，Berthold、Helvetica 、Folio、Univers无衬线体可以制作出易识别的版面。Times字体是为《泰晤士报》的印刷尔设计的字体。Helvetica字体共13个字号，在字母“c、e、g、s”的收尾处进行了处理，字母开口更开放，字母“G”更简洁，垂直笔画更简洁、易识别。另一个常用的无衬线英文字体Univers，除了有细体、中等体、半粗体、粗体，还有正体、斜体。

栏宽

栏宽不仅是设计形式的问题，还涉及到文本易识别性。让文体轻松被阅读就不能忽视字号大小、行的长度和行距。对于正常印刷品来说与人眼的距离为30-35cm，字号的设置要考虑到这一距离，并考虑到字间距、行间距。对于读者用户来说，阅读困难就代表视觉传达、记忆过程中质量的降低，行短读起来太累，因为需要不停的换行，行长眼睛需要保持在一条很长的水平线上，眼睛会觉得吃力。所以合适的栏宽至关重要，可以产生令人愉快的阅读节奏，让读者愿意继续关注、阅读接下来的内容。

行距

行距和行长一样需要格外注意。行距太高、太矮也会影响版心，进而影响文章的易读性。行距太矮会削弱阅读速度，因为读者会通过眼睛同时接收上下两行信息，而眼睛无法精准对焦在过分接近的两行字上，所以每一行文本周围都应该留有适当的视觉空白区域。如果读者视觉无法对焦，阅读起来更容易产生疲劳。相反，行距太高视觉很难将两行文字联系起来，文本灰度显得太重，丧失了视觉上的清晰度和平衡感，让人产生无助感。版面中，通常有3种到4种或更多字号组成，针对不同字号的行距分别调整，行距决定版面中的栏宽是否具有阅读性。

页边距

经典排版作品页边距是根据黄金分割或者数学公式精确计算出来的。页边距在版面中所占比例过小，读者会觉得页面过于饱满，在拿起印刷品使手会遮挡不得文字、图片信息，影响阅读。页边距过大，会造成奢侈感，导致文本稀疏，总也读不完的感觉。比较舒服的页边距是由天头-切口-地脚-订口的比例为1.5:2:3:1，但这一比例不适合单页，因为内容呈现少造成成本太高。

页码

页码必须同时满足功能和审美的需求。从心理学上看，页码被设置在版心的中轴线上，版面会显得更稳定；如果页码设置在外沿时显得更生动。无论页码如何设置，只要页码在版心附近，那么必须对齐版心中的文本行。

正文与标题字体

如果想要达到突出标题的目的就必须使用混合字体，标题与正文采用相同字体可以保持字体风格一致。不同字体在进行混合使用时，不能使用风格相近的两种字体，比如：Helvetica不与Univers混合，Garamond不能与Bodoni进行混合使用。在排版设计中使用各种不同字体，这些字体必须能被轻松的识别，不同字号也能提供清晰的层级关系。中等体、半粗体、粗体三种字重灰度有明显的差别，中等体呈现淡灰色，半粗体呈现中灰色，粗体呈现深灰色调。字重和字号上的清晰对比可以上，阅读变得更高效和简单。

版心结构

在确定版心之前，需要明确设计的性质和目的，确定版心类型与尺寸，尽量按照比例绘制草图，这就要求设计师必须掌握各种字体形态及字体比例关系。版面设计不仅需要考虑版心高度和宽度，同时要考虑字号、文本数量、文本、栏数，明确字号、行长、页边距等基础信息才可以进行下一步设计。

网格结构

在设计开始前，需要搞清楚开本、字体、印刷方式、图版率、纸张品质，其中分栏数是需要考虑的重点之一。三栏的分栏方式可以自由变化，缺点是栏宽相对较窄。工作中，报纸采用的栏数较多，书籍最多两栏，不管怎样，栏数的确定要结合内容来确定。

企业形象设计中也需要用到网格系统。

当代书籍等编排设计中要求设计师逻辑、系统地组织版面中的文本与图片：1.标题字号和位置保持一致，应用同一款字体 2.副标题字号一致，与上下文保持相同的距离 3.所有版面中的文本、插图使用统一网格系统 4.所有照片风格一致 5.同类型表格、数据图形、字体、颜色 5.分割段落使用一行、两行、多行，不能使用半行，否则下一行的文本错位不齐。

公司需要使用一套统一的设计形式和色彩系统诠释自己的企业形像，并将这些规范制成VI手册共公司成员参考，在企业形象设计运用网格系统前要考虑到将来与公司相关的所有文件，这些设计法则始终贯通于印刷品、出版物、表单、对外通告、电视媒体传播、展会展览等得到统一呈现。网格设计为所有印刷品的设计奠定了基础，包括所有宣传手册的封面和内页，字体、字号也要保持一致。书中列举一系列公司宣传物料如何利用网格系统的案例。

每个人有不同的学习方式和人生目标，学习是个人修炼的过程，别人的方法不一定适合自己，只有能使自己长时间持续下去的、恰当的方法才是好方法，而不是盲目照搬。

什么是栅格系统

1、栅格系统（grid systems），也叫“网格系统”。栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。

2、栅格系统运用固定的格子设计版面布局，风格工整简洁。

1、概念：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

2、优点：使用栅格设计，可以使网页的信息呈现更加美观易读，更具可用性。

3、原理：通过设置不同的n、i、A值划分网页的区块，实现标准化的灵活设计。

4、局限性：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到遵循栅格了。

1、苹果下浏览器的默认宽度为960px。在 1024 x 768 的分辨率下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，为 960 x 650。可见设计师们都不约而同选择960px的页面宽度。

2、目前大部分大型门户网站的首页宽度为950px/960px。绝大多数显示器都支持 1024 x 768 及其以上分辨率，为了有效的利用屏幕宽度同时保证栅格的灵活度，960就成为网页栅格系统中的最佳宽度（可以实现较多组合）了。当然，随着分辨率的提高，以后可能会流行更高px的页面宽度。

——部分内容整理自网络——