UI栅格系统怎么用？列数、间距与响应式设置

UI 栅格系统的设置顺序是先定内容容器，再根据阅读宽度选择列数、间距和边距；进入窄屏后重排列数，不把桌面参数等比例缩小。页面区域用栅格、组件内部用自动布局时，可在Pixso 自动布局中继续完成内容适配。

“栅格系统”又名“网格系统”，其原理是运用列、间距与页边距等规则规划版面布局，其风格工整简练，已成为今日出版物设计的主流风格之一。因为其高效的适配性，栅格系统被逐渐应用到网页设计中。

栅格系统源自平面设计，随后被引入界面设计，用于组织文字、图片与页面区域。

设备宽度和使用方式不同，页面需要在多种尺寸下保持清晰。栅格提供对齐和分区规则，具体的换列、重排和内容取舍仍要由设计师与研发一起确定。

1. 什么是栅格系统

网页栅格通过列、间距与页边距指导版面和信息排列。它能为不同宽度提供一致的对齐依据，但不能自动保证内容在所有屏幕上都适合阅读。

如上图所示，栅格系统用规则的网格阵列指导版面布局和信息分布，栅格网络可以协调和平衡版面构成元素之间的关系，让版面更有条理、层级更清楚。尤其是在连续系列的版面设计中，栅格系统通过变换文字排版、图像位置等主要编排要素的方式，有助于保持版面的统一与协调。

如上图所示，栅格最重要的作用就是约束版面，使编排的过程有可遵循的章法，合理的网格结构能够帮助我们在设计时掌握明确的版面结构，这一点在文字的编排中尤为明显。

栅格系统对版面划分要求比较高，经常可以看见有一些千篇一律、呆板而缺乏变化的版面，视觉上显得过于刻板，如果运用栅格系统来参与版面划分排列，就可以通过组合单元格、变化栏目数目或是局部栅格数量的调整，将整个版面润色呈现出一个丰富的效果。栅格系统可以根据版面上信息内容的不同来适当的调整，这也是它的灵活性的体现。

栅格系统的类型

1. 排列式栅格

排列式栅格设计，特点是内容区块的尺寸和间距固定，窗口变窄、当前行放不下时，后续区块换到下一行，逻辑非常简单，但是其问题也很明显，如下图所示：

采用固定宽度区块时，容器变窄可以减少每行数量，并按项目规则决定左对齐或居中。它适合内容结构较一致的列表；文字较长时仍需检查换行和卡片高度。

2. 弹性式栅格

这种栅格系统的间距和页边距是固定的，内容区块尺寸在一定程度下弹性伸缩，以确保填满整个屏幕。间距和页边距可在当前断点下保持一致；区块跨列和混排仍需明确规则。如下图所示：

当页面有不同大小的内容区块混排的情况时，弹性式栅格就可以让内容区块在一定范围内弹性伸缩，不同于排列式栅格，浏览器窗口变化时，区块宽度可以随容器调整；到达最小可读宽度后，仍需换列或重排，不能只依靠弹性伸缩。

3. 定制式栅格

定制式栅格按项目内容和目标屏幕制定规则，可以在不同断点采用不同的容器、列数与间距。

如下图所示：

按项目定制的布局需要分别说明各个目标宽度下的列数、间距和重排方式；适配范围取决于已设计的规则，不能仅凭“定制”判断统一性或可用屏幕数量。

用一个页面算清栅格与自动布局

以一个宽度为 1200px 的内容容器为例，若分为 12 列、列间距为 24px，则扣除 11 个间距后每列为 78px。这是项目中的计算例子，不是通用规范；容器变窄时，可以减少列数或改变卡片跨列数，不能保留 78px 列宽却让内容溢出。

以内容宽度为起点：先扣除左右边距，再选择能容纳主要卡片或文本的列数；间距要让同组内容靠近、不同组内容分开。桌面、平板和手机分别记录容器宽度、列数和间距，不能只写“适配所有设备”。栅格约束页面区域，自动布局负责按钮、卡片和列表内部的排列与尺寸响应。

在 Pixso 中建立多画板栅格，再在组件内部用自动布局处理文本增长和按钮尺寸；交付时把断点、例外和容器规则写进标注，研发不必从截图反推。

2. 交互设计中的栅格系统

栅格为界面提供可遵循的结构，让不同区域保持对齐。新项目应与前端工程师协作，结合业务内容确定容器、列数、间距和断点；已有成熟规范的项目先沿用原规则，再记录确有必要的例外。

栅格系统在交互设计中，是一种专业性的存在，它可使设计有章可循，具有逻辑性，同时也更规范，减少设计中的尺寸计算和无效尝试，让设计师可以将更多的精力放在设计本身，提高设计效率。

栅格系统合理地运用可以提升页面布局的优势，它可以让同类区域遵循一致的对齐与间距规则，使得整个设计更加整洁。特别是对响应式布局，能够使不同设备上呈现的界面更具统一性。

总之，栅格系统的根本目的是保持可读性并合理组织信息层级，对于信息量大的网站可以有效地组织布局，从而达到一致性的视觉效果，希望设计师们可以掌握栅格系统的设计技巧，在网页设计的布局上，呈现出统一协调的视觉效果。