不会栅格系统？拿走这篇零基础使用指南！-指天誓日网

前言

在如今多终端、系统多设备尺寸的拿走加持下，多屏设计就成了商业设计中不可缺少的篇零一部分，为了让所用界面的基础视觉表现出统一性和一致性、同时在不同系统及不同尺寸的使用设备上保持良好的用户体验，栅格系统就显得尤为重要，栅格指南它能辅助设计师制定界面排版布局的系统方案，以网格的拿走形式将多元素/内容链接在一起，很好做到多平台、篇零多尺寸的基础适配，让设计美感、使用工作效率都得到很大的栅格指南提升。

一些优秀的系统产品都在使用栅格去规范界面信息的排版布局，虽然它只是拿走传统设计方式的一部分，但只要不嫌麻烦，就可以使用栅格系统解决很多设计布局的问题。不少设计师都知道栅格的重要性，但碍于对其一知半解，以至于在设计中总有些无从下手，本文笔者将从浏览过的大量文章结合自身工作经验对栅格做出系统化的总结，希望能帮助初/中级设计师对栅格有一个更深的认识。

一、栅格的定义及重要性

1. 栅格的来源

栅格的概念来源于平面设计中的"网格"，早在 13 世纪，法国建筑师 Villard de Honnecourt 创作了一张图表，试图实现"和谐的设计" ，这也是继黄金比例之后，第一次将网格与其结合在一起，以此产生固定比例的页面布局。

在 18 世纪工业革命大规模生产的开始，随着报纸、传单等主流印刷品的兴起，设计师们需要解决"将不同的信息传达给不同的人群且能自然浏览、还要防止不同部分争夺读者的注意力"的问题时，栅格的雏形已然显现出来。

20 世纪初，设计师们发现使用网格辅助设计印刷作品，可让排版布局更加清晰、信息传递也更加有效，由此演变成了平面设计中的一种方法。

20 世纪中期，约瑟夫·米勒-布罗克曼著作了《平面设计中的网格系统》一书对设计界影响至今。

由此不难发现，不管是前几个世纪的印刷刊物、还是如今的互联网产品界面布局，栅格都可以作为组织信息的工具，帮助设计师实现一致、和谐的信息布局效果。

2. 什么是栅格

栅格和网格的英文都以"Grid"来表示，其本质是为了给版面提供一个基本设计框架，这也是为实现有组织的设计其中方法之一，在平面设计中称之为"网格"，而在网页/移动端中更多称为"栅格"。

栅格是根据平面中的网格发展而来，通过一定的规律、合理的设置基准线来规范界面中的元素（文本/图像），让每个区域能够相对独立却又能相互关联，形成整个界面，最终呈现出清晰易读的信息布局。

3. 为什么要使用栅格

首先对用户来说，使用栅格能让内容布局具有规律性，通过定义留白、对齐、分割等各种比例关系，不仅能降低用户认知成本，还能让信息的展现更加清晰，有效提升用户的浏览、接收效率。

其次对于研发团队，栅格通过统一的标准规范对设计师进行约束，协同产出一致性的视觉效果，避免了一人一个样式的混乱场面，同时减少了部分细节上的沟通，提高决策及产出效率。在开发过程中，程序员通过有规可循的设计规律，可对部分组件及模块进行封装调用，不仅高度还原设计效果、还能提高开发效率。

另外，在设计 Web 界面时，使用栅格系统能一稿适配电脑、平板、手机等不同的设备尺寸，合理兼容多端、多系统下的自适应效果。

二、栅格系统的组成

栅格系统并没有我们想象的那么复杂，它主要由网格、列、水槽、边距、总宽、容器盒子等组成，只要清楚它们之间的相互关系以及定义即可，下面我们将一一了解：

1. 网格（Gird）

网格（Gird）是由基本单位「单元格」构成，也被称为最小单元格，而栅格则是由一系列规律的网格组成，通常情况下，我们会使用 8 作为作为栅格中的最小单位，以此进行增量。为什么用 8 为基础倍数呢？

首先作为偶数，程序进行单位换算后可被整除，避免像素出现小数点；其次，8 为增量单位既不会显得琐碎、也不会让内容过于分散，当界面中所有元素都以 8 为倍数时，其元素大小、间距都有规可循，之前笔者曾写过一篇「间距」类的文章，感兴趣的伙伴可以去看一下。

2. 列（Column）

列（Column）指的是栅格数量，如 12 栅格有 12 个列、24 栅格就是 24 个列，主要用来对齐内容。通过栅格的列数来控制版面的呼吸感及节奏感，列数越多、内容排版越精细，反之列数越少、内容排版就越疏松。

3. 水槽（Gutter）

水槽（Gutter）是指列与列之间的间距，通过留白以实现界面中的信息元素分割及版式呼吸感。水槽的宽度对设计风格会存在一定影响，水槽越大留白就越多、其呼吸感就越好，反之留白就越少、内容也会变的较为紧凑。

4. 边距（Margin）

边距（Margin）是指界面内容到屏幕边缘的距离，主要用来控制核心内容的展示边界，所以是禁止放置任何内容的（部分浮窗、返回顶部按钮、右侧吸附边栏除外）。边距值的大小会直接影响到栅格区域空间，这点大家自行理解即可。

5. 栅格总宽（Container）

栅格总宽（Container）是指所有列加所有水槽再加上两侧边距的总和，即整个栅格系统的总宽度。

6. 容器盒子（Col-n）

容器盒子（Col-n）是指布局信息的版面区域，通常设计师在设定好基础栅格后，会根据实际情况去定义一块内容需占用几个列的宽度并形成容器，后续在设计过程中，会将文字、图片、按钮等元素约束在限定的容器宽度以内形成复用组件，最终组合拼装成完整的设计方案。

三、栅格系统制作流程

1. 设计栅格宽度

在设计 Web 端界面时设计师需要先根据实际使用场景确定好布局后，再来设定栅格区域，如下列布局：

屏幕宽度并不等于栅格的宽度，大多数情况下，我们会基于 1920、1440 这两个尺寸来定义设计稿的宽度，但真正放置信息内容的区域并非设计稿尺寸，需要做到多平台、多尺寸显示器的适配，通常会将栅格宽度定义在 1024px~1400px 之间。例如：常见的 1024px、1200px、1280px、1400px 等，可满足绝大多数主流显示器，如果栅格宽度超过 1400px，在很多笔记本电脑上浏览页面时，会出现左右滚动条，体验非常不友好。

2. 选择栅格列数

① 12 栅格

12 列栅格很常见，一些业务信息分组较少的商业网站、门户网站等使用的就是 12 栅格，它能够被 2、3、4 、6 整除，很容易满足信息较为复杂的等分布局场景。另外，针对不对称布局的容器组合也能将信息体现的很和谐，如双栏布局使用 4+8、3+9 栅格，三栏布局使用 2+8+2 、3+3+6 栅格等，变化较为灵活。

② 24 栅格

24 列栅格适合信息量大、分组多且多样复杂的使用场景，很多视觉区域较大、需要精细化布局的 B 端 Web 设计采用的就是 24 栅格，相比 12 栅格，有更多的区域划分空间，其布局的灵活性也更强。

需要注意的是，24 栅格因列的数量比较多，很多时候列宽无法被精准整除，不过相差的像素数值极小，往往无法被用户肉眼觉察，无伤大雅。栅格本身的目的就是为了保持视觉效果的协调与统一，并非为了死磕某个像素，特殊情况区别对待即可。

③ 5 栅格

5 列栅格一般用在移动端设计中，因设备屏幕的横向空间有限，所以很少使用，例如：针对"金刚区"的 5 图标（一行）、10 图标（两行）的规范化排版。如果想进一步追求后续的灵活性、避免奇数的不便，也可将 5 列栅格拆分成 10 列，布局、视觉效果基本能保持一致。

其实在实际设计中，设计师们大多会使用间距来规范界面的排版与布局，相比 5 列栅格会更灵活、更便捷。

3. 定义水槽与边距

水槽就是列的间隔，其定义方式可以延用间距系统的制定标准，以 8px 为最小单位进行推导，如 S=8px、M=16px、L=24px、XL=32px 、XXL=40px、...等，这样更容易保持视觉的一致性，最终到底使用哪个值没有绝对的要求，这还需要根据产品的调性及设计风格来决定，水槽的数值越大，页面的留白间隙就越多。

当我们确定好内容区宽度、水槽宽度及数量后，计算出列宽（上述有提到不一定整除）并将整体进行居中显示，两侧即自动形成边距。

四、栅格与响应式的结合

1. 自适应与响应式

① 自适应

自适应布局是为了让网页内容根据不同终端来自行适配布局，设计师需要制定好同一设计稿的变化规则，程序员在开发时创建多个布局，对不同的终端分别提供一套独立的前端代码，系统就能自行判断当前访问的是 PC 端、平板还是手机。我们可以做一个测试，对自适应网页窗口的宽度进行调整，就会发现每经过一个断点时，页面的元素位置就会发生改变，呈现出不同的布局效果。需要明确的是，当窗口宽度未达到下一个断点之前，元素不会随着窗口的调整而变化。