栅格系统知识点 

使用栅格系统很有帮助，它有助于在不同布局之间保持一致性，并加快设计决策的速度。栅格可更精确地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点，以及产品设计师如何在设计工作流中调整栅格。

栅格结构 

栅格由3个主要组件构成，包括列、槽和边距。

列

列是虚构的垂直块，用于对齐内容。我们用百分比（％）或固定值定义列宽。

栅格中的列

槽

它是列与列之间的空间，有助于分隔内容，我们将槽的宽度定义成固定值。

栅格中的槽

边距

边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值，该值决定每个屏幕尺寸的最小空间。弹性边距指的是列，槽和侧边距组成栅格后剩下的空间，它会根据不同的屏幕尺寸而变化。

栅格中的页边距和灵活边距

如何使用栅格设计界面？

信息内容（图像，文本或UI元素）常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区，而不可见内容块则不具备，多数是透明底。可见的父级内容块包括卡片，横幅等组件。

卡片形式的可见内容块

不可见的内容块包括文本或功能按钮。

内容块应与列的边缘对齐，避免与槽边缘对齐。内容块中的信息是独立的，不一定非要与列对齐。

内容块的列对齐

列结构

用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构，设计师可以根据设计要求选择具体结构。

8/12/16/20列栅格结构

12列结构是最灵活的，它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。

响应点 

当屏幕尺寸到达响应点，那么页面布局也会有对应更改，以实现最佳的布局视图。列结构，列宽，槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放，以重新调整获得最佳视图。

栅格缩放和堆叠

如果较小的屏幕具备足够空间来呈现，其实缩小比例就能展示完整了。如果屏幕实在是太小，就会垂直堆叠成一列。

栅格的呈现类型 

栅格有3种呈现形式，一起来看下吧！

固定栅格

固定栅格有固定宽度的列以及页面边距，且固定的栅格具有固定的内容块宽度，该宽度在响应点范围内不会出现变化，并且页面边距会占据剩余的空间。

固定宽度栅格

流动或全宽栅格

流动栅格列的宽度是不定的，但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度，该宽度根据屏幕大小来变化。流体栅格中，列会随着可用空间变大或是缩小。

流动栅格

混合栅格

混合栅格同时具有流动宽度和固定宽度。在现代布局中，一些元素会完全脱离栅格。常见的例子比如页眉，页脚，或是出血的图片内容块。

混合栅格

如果内容块宽度大于可用的屏幕尺寸，则固定栅格会转变为流动栅格来适应屏幕。

如何在原型制作工具中设置栅格系统？

电脑视窗

不要以1440×900、1600×900或1920×1080等高分辨率进行设计。1280×800是电脑端内最小的分辨率，以1280×800设计的流动与固定宽度的布局都可以适应更大的屏幕。

固定宽度栅格设置

要设置固定宽度的栅格，我们对槽和列都应固定好数值。建议设置列宽为74px、槽宽32px以及16px的边距。

固定宽度栅格设置

列宽74px、槽宽32px可以生成1240px的内容块宽度（不包括两端的16px侧边距），最大化的利用了可用屏幕尺寸。在不同的响应点，固定内容宽度大于当前屏幕尺寸时，则固定宽度栅格开始变为流动栅格。

流动栅格设置

要设置流动宽度栅格，对槽使用数值，对列使用自动计算的值（以％为单位）。

流体布局栅格设置

流动栅格利用整个屏幕尺寸作为主要内容的宽度，每侧留出16px的侧边距。

移动视窗

在移动端使用流动栅格，槽和页边距的宽度推荐设置成16px。因为移动设备的屏幕分辨率较小，若再分成12个独立的列、槽和边距的话，设计起来也会很麻烦。

移动端的流动栅格设置

因此，我们将3列中的每列合并以创建4个粗列，从而使布局栅格既简洁又方便，快速对齐。

平板视窗

平板设置栅格的方式与移动设备非常相似，推荐槽宽和边距分别设置为32px与16px，可以在768×1024大小的画板上为平板设计界面。

平板电脑流动栅格设置

将12列优化成6列，让栅格清晰明了，谷歌的材质设计曾建议使用24px宽的槽与页边距，实际应用时，不妨都试下看哪个效果更好。

布局样式

栅格布局的变化决定了主要内容的结构，针对不同的布局要求，使用不同的栅格系统，而页面中的内容块数量决定了页面布局的变化。

单列布局

单列布局或全宽布局，是着陆页和首页最受欢迎的风格之一。还可以合并12列来创建一个单列内容块，也可以将12列分配到父级内容块中。

一级页面常应用单列或全宽栅格布局

双列布局

该布局有两个内容块。通常，其中的一个内容块会占据比较多的区域进行信息展示。

在双列布局中，列要么分布在9–3或8–4父级内容块中，其中的一个组合列区域，用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。

三列布局

三列布局具有三个内容块，主要内容块占据最大的展示区域，在三列布局中，列分布在3–6–3或2–8–2父级内容块中。

固定宽度的侧边栏布局

固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定，剩余空间由固定宽度或流动宽度的内容块占用。

侧边栏固定布局

移交开发 

在原型工具中，设计布局和编码有很大的不同。代码可以合并列或将其堆叠，比如合并12列以创建单个列布局，或将12列分布到一组，用来创建不同布局变化的内容块。在原型设计工具中设计布局时，你需要确保开发人员清楚了解电脑端，移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap，Zurb Foundation等开发软件，其中对栅格值的设置会有出入。

自定义栅格

设计师可以多尝试不同的栅格值设置，以找到最适合自己的呈现形式。如果交付开发的时间非常紧急，请使用文中建议的数值，更保险也不会出错。

／End. 

相关引用

-翻译自原文
https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892
-图片、GIF来自网络；封面动图 by Ariel Wollek
-未经UX Pedia允许不得转载

UX辞典