平面设计中的网格系统

网格，或是说栅格系统，是做版式设计、平面设计、Web 设计的重要工具。网格设计是一个平面设计师必须拥有的设计意识和能力，通过对网格的研究可以发现，在网格系统的帮助下，能够更快地解决设计中的问题，并让设计更具功能性、逻辑性和视觉美感。

排版是设计中至关重要的一部分，有很多刚入门的设计师并不了解网格系统，也不会利用网格系统来校准元素在画面内的位置，让画面更加平衡。网格系统为什么这么好用呢？因为它可以制造层次感，模块化地管理元素。而且，合理地利用网格系统，并不会让画面千篇一律，还会让画面更加有条理，更可以让内容更易读，有更好的体验。

首先我们通过一些实例来看看网格是如何实现这一效果的：

在 1960 年代，瑞士的现代主义平面设计海报、宣传单中，就大量使用了网格来组织信息元素。进入信息时代后，随着 Web 的兴起，由于网页设计与平面设计、版式设计有很强的相似性，网格也被大量应用在了 Web 中。网格的好处，就是在于给予一种规约，令排版者可以较为方便的组织标题、列表、段落、图片等元素，保持版面元素之间的一致性，协调正负空间。

（图片摘自现代主义设计师 Massimo Vignelli 的 The Vignelli Canon 电子书）

网格的类型许多设计师都会在网格系统上开始一个新的设计。不同的人有不同的习惯，有人喜欢12列的网格，有人则喜欢16列网格，还有人喜欢24列的网格等等等等。在网页设计中，网格系统是十分常见的，响应式网页设计的推广。

例如12或24列的网格，可以在这个基础上衍生出很多不同的排版方案。你可以在24列中的一列里宽度上排列内容，也可以是12列中的2列，还可以用8列分栏中的3列来摆放一个元素，甚至还可以是6列分栏中的4列等等，完全依据个人的喜好。

虽然网格系统是一个限定，但是可以灵活的运用，这使得你的设计可以有很高的延展性，通过匹配不同的组合，就可以做出完全不同的排版来。是时候抛弃对称布局了，感受一下下面的案例，你可以利用同一个网格系统创造出各式各样的排版。

从上面的例子中我们可以看出，设计中的排版可以有多种选择。有些设计师或许会觉得网格系统会局限住将他们的思维和画面的结构。但事实上，网格结构的选择和组合几乎可以说是无穷的。

而且网格系统的应用非常广泛。下面是一个网格系统的实例：导航横跨了整个宽度，主要内容大概占用了60%的宽度，侧边栏占用了剩下的40%；在下面一个版块中，左边60%的宽度被三等分。可以看出内容和内容之间留足了空间，阅读起来很舒服。

下面这个网站则是简单的三栏布局，这给了图片足够的空间，并且把大段的文字打散成一个一个小板块。这样的布局也十分适合贴广告。

不过，虽然用网格组织、排版信息相当方便，通常创建网格本身却是一件十分令人头痛的事情。通常的做法是：吭哧吭哧地在纸上算，计算网格的大小、间距等等，算到天昏地暗；然后吭哧吭哧地拉参考线……所幸现在许多软件中的功能可以将你从计算中解放出来。

InDesign中的网格系统网格系统起源于传统的印刷设计，在印刷介质中，网格系统的辅助作用很强，为印刷而做的网格系统也十分简单。通常在InDesign中就可以完成。不过也可以在AI中建立网格开始设计。

下面是一个InDesign网格的案例。利用5列分栏布局，其中三列来显示主内容，其他两栏作为副内容，还要注意一下文章的标题。网格系统是作为一个参考，我们在实际案例中并不一定非得完全丝毫不差地去强行匹配，就像下图中的页码23，也没有完全填充某一个分栏，只是利用分栏找了个合适的位置而已。

Illustrator中的网格系统

在Illustrator中，创建网格的过程有一点小小的不同。不是在创建文件的时候来创建网格，而是在创建新的文件之后，选择文字工具，然后创建一个文本框，这种方法独特的地方在于你要先确定页边距，然后再把文本框放进精心设置的网格系统中。

在顶部的菜单中找到“类型”，然后选择“区域类型选项”。这里将会出现一个对话框，这个对话框和之前在 InDesign 中看到的十分类似，只有几个不同之处，比如可以沿着分栏新建一行之类的功能。所以，你可以用这个工具做垂直、水平或是混合在一起的网格系统。在这里一样要对于“Gutter”设置保持高度关注。在AI中，你可以通过预览来检查刚刚创建的网格，在“选项”菜单中，可以决定文本框里的文字是水平的还是垂直的，由此产生的设置如下图所示，大家可以感受一下。

网格系统的应用意味着：系统化和清晰化 ，在你的设计中使用网格可以让你更有逻辑地进行你的设计工作，并且网格系统可以更好地组织画面中的信息，让重要的元素更加鲜明，让设计有更好的结构，带来更好的体验。

更多艺术留学、作品集制作等专业资讯，请关注微信公众号：UBAT作品集

返回搜狐，查看更多