网格系统的前世今生

网格系统简介&发展历程

网格系统最早运用于平面设计，其风格工整简洁，在二战后大受欢迎，并逐渐成为出版物设计的主流风格之一。

后来网格系统也已经被运用到网页设计中，它以规则的网格阵列来指导和规范网页中的空间布局。网格系统的使用，可以让网页的信息呈现更加美观、易读、严谨和一致，同时也更具可用性。

现在网格系统再次被广泛运用到移动端UI设计中，尤以谷歌 Material Design 的 8 点网格备受推崇。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

为什么要使用网格系统？ 

很多时候你会发现同样是简单的页面排版，自己做得就是没有一些大厂的 App 看着舒服和美观，很有可能就是因为它们有一套基于网格系统的严格布局规范，而你仅仅是基于自己的感觉和一些版式基础去做排版。使用网格来规范你的设计意义不仅限于此：

1.保持设计的一致性，规范性。

2.更好的打造设计的信息层级，确保设计结构的组织分明、结构明晰，降低用户阅读门槛，更好地引导用户。

3.允许按比例设计，便于组织不同元素之间的平衡感和节奏感。

4.网格系统一般都很灵活，这样就可以在需要时自由调整。

5.规则少而明确，这让你设计起来更轻松，在网页和APP中对于开发者也会更友好。

如何用网格系统做版式设计？

网格的划分并没有固定规则，有些人习惯先将内容大致编排完之后再根据版面结构套用网格规范，也有些人习惯事先定好网格架构，并在已有架构下编排内容。下面我们就进一步了解网格系统的组成和分类，以及如何用使用网格来排版。

1.确定版心

版心是指天头、地脚和左右页边距所包裹的区域。设置版心会让版面更具条理性，同时也保证了内容的识别度。常见的版心有如下几种： 

等宽版心：四周天头、地脚、周右边距均等值，多产用于单幅平面版式。

对称版心和非对称版心：一般用于需要装订的页面板式，就不在此展开叙述。

当然也可以不拘泥于以上这些，而是根据自己的需要自由设定。

一般要根据项目的气质调性以及内容多少来确定版心留白大小，版心面积小给人雅致宁静的感觉，版心面积大，会给人热闹、丰富的印象。通常所有的元素都应该在版心内排版，但也不是绝对不能超出版心。在已有规则下，还是可以把部分重要性低的元素放置到版心之外，从而为画面带来动感和张力。

2.划分网格

划分好版心，接下来需要决定项目合适的网格类型。

a.网格的类型有很多，以栏的数目可以分为通栏网格、双栏网格、三栏网格、四栏网格…

通栏网格仅适用于小卡本的版面；一般版面越大，需要分栏数目越多，分栏越多，行文长度也越短、约易读。

如五栏网格就适用于较为轻松、休闲的内容；但如是需要仔细阅读的内容，则要适当减少分栏数量，保证阅读流畅。

b.比例网格是通过运用美学比例（如黄金分割）划分栏宽的；

重叠网格则是在统一版面中重叠使用两种或者两种以上网格形式（但他们的版心、栏间距大多是一致的）。

c.模块网格是现代设计中最常用到的一种网格形式，通过添加横栏来规范元素在版面中的高度和位置，让版面的变化性更强。

3.编排内容

网格结构规划好后，就可以编排版面内容了。版心内的各个要素只要与网格结构相互对齐布置，就会与页面和整体保持一个稳定的比例关系。

对于报纸、杂志、书籍等大量文字的设计，还要做到对齐基线（文字的顶端与网格顶端对齐，文字的底端与网格底段对齐）

而对于少量文字的版面，并不需要规范的过于细致。 但网格也不是排版中的万能药，版面中所有元素的位置大小都要有一个比例依据，具体的编排形式还是要靠审美来决定的。尤其要注意留白也是版面中的元素，不要把所有网格都填满。