响应式网格设计：终极指南
我发现使用网格很有帮助。网格有助于保持不同布局之间的一致性并做出更快的设计决策。网格可以更精确地控制不同屏幕尺寸上的对齐和布局。
本文重点介绍了响应式网格最重要的方面，以及产品设计师如何在其设计工作流程中调整网格。
网格解剖
网格由 3 个主要组件组成，包括列、装订线和边距。让我们试着理解他们——
列
列是虚构的垂直块，用于对齐内容。我们以百分比 (%) 或固定值定义列宽。
天沟
排水沟是柱子之间的空间。排水沟有助于分离内容。我们将装订线宽度定义为固定值。
边距
边距是内容和屏幕边缘之间的空间。
我们将边距宽度定义为固定值，它决定了每个屏幕尺寸的最小呼吸空间。
灵活的边距占据在用列、边距和边距组成网格后剩余的空间。
灵活边距根据不同的屏幕尺寸而变化。
如何使用响应式网格设计界面？
内容（图像、文本或 UI 元素）包裹在可见或不可见的父容器内。可见容器具有边框或填充阻挡，而不可见容器具有透明阻挡。
可见的父容器包括卡片、横幅等组件。
不可见的父容器包括文本或功能块等部分。
父容器在列的边缘开始和结束。父容器永远不能在排水沟或侧边距的边缘开始或结束。
父容器内的内容是独立放置的，不一定与列对齐。
立柱结构
用于组成网格的列数称为列结构。
8、12、16 和 20 是响应式布局的一些最常见的列结构。您为项目选择哪种柱结构取决于您的设计要求。
12 列结构是最灵活的。它可以进一步分解以对齐4-4-4或3-3-3-3大小的父容器中的内容。
断点
断点是屏幕尺寸的特定范围，其中布局重新调整为可用的屏幕尺寸以获得最佳布局视图。
列结构、列宽、装订线宽度和边距取决于断点。父容器可以根据不同的断点堆叠或缩放，以重新调整以获得最佳视图。
如果较小的屏幕有足够的可用空间来容纳内容，则列的大小会按比例缩小。如果内容无法容纳在较小屏幕上的可用空间内，则列垂直堆叠。
网格行为
网格可以在不同的断点以三种不同的方式运行。
让我们试着理解他们——
固定网格
固定网格具有固定宽度的列和灵活的边距。固定网格具有固定的内容宽度，在特定的断点范围内不会改变，而灵活的边距则占据剩余空间。
流体或全宽网格
流体网格具有流体宽度列、固定间距和固定侧边距。流体网格具有灵活的内容宽度，可以根据屏幕尺寸从边缘到边缘。
在流体网格中，列要么增长要么缩小以适应可用空间。
混合电网
混合网格同时具有流体宽度和固定宽度组件。
在现代布局中，一些元素完全脱离了网格并在屏幕上边对边对齐。页眉、页脚、全出血可见容器或图像是一些常见的例子。
如果内容宽度大于可用屏幕尺寸，则固定网格会急剧转变为流体网格，以适应屏幕上的整个可用空间以充分适应内容。
如何在原型工具中设置布局网格？
我更喜欢 12 列结构来设计响应式布局。根据您的设计要求，您可以选择任何列结构。无论您选择哪种柱结构，基础都是一样的。
桌面视图
除非不是故意的或者您知道自己在做什么，否则您永远不应该以 1440×900、1600×900 或 1920×1080 等大分辨率进行设计。
1280×800 是可能的最小桌面分辨率。在 1280×800 设计的流式布局和定宽布局都可以简单地适应更大的屏幕，但反向方法变得相当复杂。
所以，让我们从 1280×800 大小的画板开始——
固定宽度布局网格设置
为了设置一个固定宽度的网格，我们使用固定的数值来表示排水沟和列。我推荐 74px 宽的列，32px 宽的装订线和每边 16px 的边距。
74px 宽的列和 32px 宽的装订线导致 1240px 宽的内容宽度（不包括每边 16px 的边距，即 1272px），这利用了最大可用屏幕尺寸。
在不同的断点处，当定宽布局的内容宽度大于当前屏幕尺寸时，定宽网格开始表现为流体网格。
流体布局网格设置
要设置流体宽度网格，我们使用固定数值作为装订线和自动计算的值（以 % 为单位）作为列。
流畅的布局网格利用整个屏幕尺寸作为主要内容宽度，每边留出 16px 的边距。
移动视图
对于移动设备，我们使用流动网格，其中边距和边距具有固定数值。我推荐每边 16px 宽的边距和 16px 宽的边距。
我们可以在 360×640 大小的画板上设计移动界面。
移动设备的屏幕分辨率很小。如果我们以如此小的分辨率显示 12 个单独的列、边距和边距，那么大规模设计会变得非常麻烦。
因此，我们将列合并为一组 3 以创建 4 个粗列，使布局网格保持光滑和方便，以便快速做出对齐决策。
平板电脑视图
我们为平板电脑设置网格的方式与为移动设备设置网格的方式非常相似。我推荐每边 32px 宽的边距和 16px 宽的边距。
我们可以为 768×1024 大小的画板设计平板电脑界面。
您可以选择合并一组 2 列，以创建 6 个粗列，以实现干净方便的网格设置。
Material Design 明确推荐 24 px 的边距和边距。您还可以将这些值用于平板电脑设计。
布局变化
网格布局变化决定了布局的主要内容结构。我们针对不同的布局要求使用不同的网格布局变体。
一些页面级容器包裹主要内容宽度。
用于包装主要内容的页面级容器的数量决定了布局的变化。
让我们试着理解他们——
一栏布局
一栏布局或全宽布局变化是着陆页和引导页面最受青睐的风格之一。
我们可以合并 12 列以创建单列父容器，也可以将 12 列分配到父容器组中。
但是所有内容都只包含在一个页面级容器中。
两列布局
两列布局有两个页面级容器。通常，与另一个相比，一个页面级容器共享更多的列权重。
在两列布局中，列分布在 9-3 或 8-4 父容器中以创建主要内容宽度。
带有单个侧边栏的界面是两列布局的一个很好的例子。
三列布局
三列布局具有三个页面级容器。与其他两个页面级容器相比，一个页面级容器共享更多的列权重。
在三列布局中，列分布在 3–6–3 或 2–8–2 父容器中以创建主要内容宽度。
带有两个侧边栏的界面可以是三列布局的一个快速示例。
固定宽度的侧边栏布局
固定宽度的侧边栏布局功能有点不同。
侧边栏宽度在一组断点范围内是固定的，剩余空间由固定宽度或流体宽度容器占据。
带有固定侧边栏的仪表板是固定宽度侧边栏布局的完美示例。
网格开发移交
首先，我们需要了解在原型工具中设计布局和编码有显着差异。
在代码方面，我们可以合并列或堆叠它们。
我们可以合并 12 列以创建单列布局，或者我们可以将 12 列分配到一组堆叠或平行组中，以创建用于不同布局变化的父容器。
在使用现代原型设计工具设计布局时，您始终需要确保您的开发人员了解您在台式机、移动设备和平板电脑上使用的列宽、间距和边距。
开发人员使用相当流行的框架，如 Bootstrap、Zurb Foundation 等，其中列、边距和边距值根据标准化方法有很大不同。
但是，我们可以在流行的响应式框架中使用粗略的解决方法轻松自定义这些值，以便在不同的屏幕尺寸上实现最佳布局。
随意尝试不同的列结构、列、装订线和边距值，以找到最适合您的。
但是，是的！如果您在紧迫的期限内更多地关注快速交付，请使用推荐的数值，并像专业人士一样征服网格游戏。
谢谢你！
你已经到达了最底层！我很感激！
来源：https://prototypr.io/post/responsive-grid-design-ultimate-guide
