栅格系统知识点
使用栅格系统很有帮助，它有助于在不同布局之间保持一致性，并加快设计决策的速度。栅格可更精确地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点，以及产品设计师如何在设计工作流中调整栅格。
栅格结构
栅格由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允许不得转载
往期推荐： 辞典精译 | 最迅速上手Figma指南！
辞典说 | 这些设计系统比Material Design还好！快来学习！
• 扫码加辞典酱
•
• 成为学习交流小队一员吧 •
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
