一、网格系统的组成

在深入了解网格的类型和使用准则前，让我们先来了解一下网格系统中涉及到的一些基本概念，比如列数、内边距、外边距等等。

1、列

列(Column)是网格的基础，用来表示内容放置的区域。每一列的宽度以百分比而不是固定的数值来衡量，这样面对不同的屏幕尺寸，可以更灵活地进行设计。

日常设计中，最常使用的是12列等宽的网格系统，适用于大多数的页面和布局设计中。

2、内间距

内间距(Gutter/Padding)是指每列之间的距离，也被叫做水槽。内间距能为页面提供呼吸空间，避免内容之间过于拥挤。

3、外边距

边距(Margins)是列与边框之间的距离，边距绕过内容有上、下、左、右四个方向，在设计中我们可以针对每一侧设定和更改边距。

4、字段或模块

字段或模块是行和列的交集。这些模块是页面的基础，所有设计元素都将适合网格中矩形卡片创建的这些空间单元。

5、界面设计与网格

如果说网格在过去对于印刷必不可少，那么今天网格在数字世界中仍是不可或缺的。

网格成为开发数字产品的关键工具，为在所有设备上提供最佳的用户体验。因此，无论屏幕大小如何，设计师都必须能够在每个屏幕上通过最佳的方式组织内容。

二、如何在设计中使用网格系统？

网格是具有列、内间距和外边距的结构系统，其目的是帮助设计师组织界面的内容。

内间距的距离越窄，越会向用户传达「这些内容属于同一组」的感觉。

同理，内间距越宽，看起来越像是不同类型的内容。

需要注意的是，内间距的距离不要太宽，或者比每一列的宽度还宽，容易导致内容之间的留白过大，造成视觉浏览上的不连贯。

此外，外边距的间距遵循与内间距相同的规则。可以灵活调整外边距，以便在内容和屏幕之间留出合适的间隔。

和内间距一样，屏幕中的外边距也不能太宽，这样会压缩页面中内容的展示空间，会让页面看起来很局促。

三、使用网格设计的四条准则

网格的使用看起来很直观，但在UX或UI项目中使用网格系统仍有一些需要注意的规则。

1、将元素集中在每一列中

上面说到，在设计中常用到的是12列网格系统。那么12列网格为什么被广泛使用呢？主要原因在于12列网格更方便扩展不同的布局形式。

▲ 12列网格可以一行排列两个内容，各占6列网格；一行排列三个内容，各站四个网格；一行排列四个内容，各占3列网格；一行排列六个内容，各占2列网格。

基本上，常用到的页面布局形式在12列网格中都可以实现。

▲ 在每个内容之间留出足够的内边距。这里需要注意的是，内容的两侧要与每一列的边缘重合，而不是与内边距重合。

▲ 当内容居中显示时，要始终在边缘留出一点空间，防止页面被内容填充的过于拥挤。

2、不要将列数作为内容填充

在网格系统下，设计应该填充整个内容的宽度，这样会让界面看起来更规范。

不要让左右两列没有填充内容，让列数作为填充，这样会导致页面的外边距不统一，增加后期的开发成本。

3、可以尝试脱离网格

在设计中，使用从网格中溢出的图像或元素也是可以的。

例如我们想填充一个全尺寸的背景色或者图像，只需将图像拉到网格之外就可以。在网格和边距的示意下，开发人员也能够快速理解界面的尺寸信息。

4、注意内容之间的间距

在网格上放置不同的元素时，确保元素之间的左右间距、上下间距都是一致的，这样会让整个界面看起来更规范。

最后

除了能够改善设计、减轻用户认知负担外，网格系统还能提升设计效率。有了网格我们可以快速衡量元素的间距、边距的精度，简化设计过程。

另外，在规范的网格系统中，界面布局或内容上的修改也会变得更容易。

慢慢来比较快，希望对你有帮助！