网格就像将设计粘合在一起的无形胶水。即使每个元素之间存在物理上的分离，也有一些无形的东西将它们连接在一起。
虽然网格和布局系统是设计传统的一部分，但它们仍然与我们生活的多屏幕世界相关。技术设备从根本上改变了我们在日常生活中搜索信息和工作的方式。如今，90% 的媒体交互都是基于屏幕的，人们在手机、平板电脑、笔记本电脑、电视和智能手表上查看内容。多屏幕行为正在迅速成为常态，多屏幕设计已成为企业不可或缺的一部分。作为设计师，我们希望为使用我们产品的人们提供愉快的体验，而网格可以帮助我们实现这一目标。
通过将不同的设计元素捆绑在一起以实现有效的层次结构、对齐和一致性，网格可以帮助设计人员以更少的精力创建更好的产品。如果执行正确，您的设计将显得深思熟虑且井井有条。
在这篇文章中，我整理了很多关于网格的资料，比如：
1.什么是网格；
2.网格简史；
3、网格基础理论；
4、四种布局网格；
5、交互设计中的布局网格；
什么是网格？
用白话来说，网格是由一系列线（垂直或交叉）组成的结构，将页面划分为列或模块。这种结构有助于设计者安排页面上的内容。虽然网格线本身不一定可见（尽管在某些设计中是可见的），但此结构可以帮助您管理要对齐的页面上元素之间的比例。该网格将作为页面布局的框架。将其视为一个骨架，设计人员可以在其上以易于理解的方式组织图形元素（例如文本部分、图片和其他功能或装饰元素）。
网格使设计师能够在设计中构建强大的结构和形式。
网格系统起源于印刷设计，但已应用于许多学科。事实上，如果我们环顾四周，我们会发现我们日常使用的很多东西都是用网格设计的：
网格简史
在我们深入了解布局网格的细节以及如何将它们应用到数字产品之前，有必要先回顾一下基础知识。这些知识将帮助我们更好地设计数字体验。
网格和早期书籍设计
网格与排版系统密切相关。作为一个系统，网格首先用于在纸上排列手写文本，后来应用于手稿排版。从书籍设计的早期开始，网格就帮助设计师安排页面布局并帮助用户进行阅读行为。
英国圣奥尔本斯，十二世纪。
文艺复兴时代，和谐设计
文艺复兴时期的绘画对网格系统的发展产生了重大影响。艺术家们努力创造完美的几何形状，从而产生了居中、对称的画布布局，这是这一时期艺术家作品的标志。
马萨乔，《金钱》，布兰卡奇教堂，1425
到了13世纪，法国建筑师德·弗朗斯创造了一种图案，试图实现“和谐设计”。该图将网格系统与黄金比例合并，以生成基于固定边距比例的页面布局。这种技术至今仍在使用，大多数印刷书籍和杂志的设计师都使用 de 的图案来创建平衡的设计。
de 的绘画仍然是设计书籍封面等印刷品的指导原则。它展示了如何找到平衡来打造优雅的外观
网格和印刷设计
从印刷术兴起（15世纪中叶）到工业革命（18世纪末），书籍是印刷术的主要产出。除极少数例外，字体通常每页只有一列，并且对称地放置在页面上。
文艺复兴时期的书
工业革命与竞争
工业革命标志着印刷品大规模生产的开始。报纸、海报、传单和各种广告等印刷品的兴起对印刷设计师提出了很高的要求。设计师必须解决两个问题：向不同的人群传达不同的信息，允许自然的扫描行为，同时防止不同的部分争夺读者的注意力。
带有广告的报纸页面，法国巴黎，1919 年
瑞士航空
我们今天所知道的网格与瑞士字体设计密切相关。一战期间，保持中立的瑞士成为欧洲各地创意人士的聚集地。由于印刷出版物必须使用三种官方语言——德语、法语和意大利语——设计师需要一个新的网格系统来实现这一目标。像 Jan 和 Bayer 这样的印刷师通过模块化方法解决了这个问题。空白第一次被用作版式中的动态组件，从而导致了复杂网格系统的发展。
网格基础理论
无论您从事图形设计还是网页和移动设计，您都需要了解网格理论的基础知识。
网格剖析
无论简单还是复杂，所有网格都有一些共同的部分：
板面
所谓板面是指设计的面积。在纸质书籍中，页面尺寸是指页面的大小。在网络上，板尺寸是指浏览器窗口的尺寸。
边距
页边距是页面边缘和内容外边缘之间的负空间。
柱子和水槽
在最基本的形式中，网格由两个主要部分组成：柱和水槽。列是网格的构建块。柱之间的空间称为水槽。柱子和水槽一起占据了网格的水平宽度。
模块
模块是由列和行交叉创建的单个空间单元。
四种布局网格
列、模块、通道和边框可以以不同的方式组合以创建不同类型的网格。以下是四种标准的排版网格：
手稿网格。
列网格。
模块化网格。
基线网格。
让我们看看什么时候可以使用它们。
稿件网格
手稿网格（通常也称为单列网格）是最简单的网格结构。它本质上是一个大的矩形区域，占据了格式中的大部分空间。手稿网格适用于连续的文本块。然而，它们不限于文字，也可以使用图片来填充块。
既然有这个名字，人们自然而然地将手稿网格与印刷版联系起来。手稿网格传统上用于书籍中，是呈现连续文本块的绝佳格式化方法。
iA 中的原始网格
多列网格
顾名思义，多列网格有多个列。记住这个简单的规则。您创建的列越多，网格就越灵活。
多列网格对于包含离散信息的布局非常有用。当您使用多列网格时，您可以为不同类型的内容创建区域。例如，您可以使用特定列仅用于说明。
模块化网格
多列网格将页面垂直划分为列，而模块网格将页面垂直和水平划分为模块。列和行以及它们之间的泳道形成单元或模块的矩阵。
当您需要对复杂布局进行更多控制时，模块化网格非常有用。模块化网格为页面提供灵活的格式，并允许您创建复杂的层次结构。网格中的每个模块可以包含一小段信息，或者相邻的模块可以组合成块。
基线网格
基线网格是指导设计中垂直间距的基础结构。它主要用于水平对齐和层次结构。与在设计中使用列和模块作为指南类似，您可以使用基线网格来建立布局的一致性。使用这种类型的网格就像在一张普通的纸上书写一样——网格确保每行文本的底部（基线）与垂直间距一致。这使得基线网格不仅是一个很棒的排版工具，而且当您在页面上布局元素时也非常有用，因为您可以快速检查页面上的某些内容是否缺少一行空格。
基线网格决定了设计的垂直间距。在这里，通过相对于基线网格放置水平参考线来创建模块化网格
交互设计中的布局网格
交互设计改变了我们对网格的思考方式。交互设计是动态的，没有固定的维度。由于人们使用不同类型的设备与产品交互，从智能手表的小屏幕到超宽的电视屏幕，交互设计是流动的，没有固定的维度。使用产品时，人们经常在多个设备之间移动以使用该产品完成单个任务。尽管屏幕尺寸不同，设计人员必须以最直观和易于理解的方式组织内容。实现此目的的一种方法是使用布局网格系统。布局网格更适合交互式设计，因为它定义了设计的底层结构以及每个组件如何响应不同的断点。这种类型的网格在多个屏幕和分辨率上设计起来更快、更容易。
数字产品设计中的网格系统组织页面上的元素并连接空间。网格系统可以通过多种方式提高设计质量（功能和美观）和设计过程的效率。
创建清晰一致的结果
网格是设计秩序的基础。比例、节奏、留白和层次都是直接影响认知速度的设计特征。网格创建并加强了整个界面中这些元素的一致性。有效的网格引导眼睛，使扫描屏幕上的物体变得更容易、更愉快。这对于数字产品尤其重要，因为它们具有功能性，这意味着人们使用该产品来完成特定任务，例如发送消息、预订酒店房间或叫车。一致性有助于观看者了解在哪里可以找到下一条信息或下一步要采取什么步骤。
提高设计理解
人脑在瞬间做出判断。糟糕的设计会让产品看起来不太实用、不太值得信赖。网格通过提供一组有关元素应放置在布局中的位置的规则来连接和增强设计的视觉层次结构。
反应灵敏
随着人们在各种设备和屏幕上体验应用程序和网站，响应式设计不再是奢侈品，而是必需品。这意味着设计人员无法再针对单个设备的屏幕进行构建。多设备环境迫使设计人员考虑动态网格系统而不是固定宽度。使用网格在不同屏幕尺寸的多个设备上创建一致的体验。
加快设计过程
网格使设计人员能够管理 UI 元素之间的比例，例如间距和边距等。这有助于从一开始就创建像素完美的设计，并避免由于不正确的调整而导致及时返工。
使设计更容易修改和重用
与印刷生产不同，数字产品永远不会完成——它们在不断变化和发展。网格提供了坚实的基础，因为当所有内容都适合网格时，可以轻松地重用以前的解决方案来创建新版本的设计。网格是一个骨架，可用于创建完全不同的外观。
轻松协作
网格系统通过提供放置元素的计划，使设计人员可以更轻松地协作进行设计。网格系统有助于解耦界面设计工作，因为多个设计人员可以在布局的不同部分上工作，并且知道他们的工作将无缝集成和一致。
网格是规范的基本构建块
大多数设计项目的实施需要设计师和开发人员之间的协作。对于 UI 设计师来说，最糟糕的事情就是提交一个像素完美的设计模型，却发现它在生产中看起来完全不同。
网格是一个框架，它允许开发人员在代码中预设与列大小相对应的类，从而加快设计人员和开发人员之间的工作流程。这可以防止实施不一致并减少构建网站所需的时间。
布局网格的最佳实践
虽然布局网格可以帮助设计人员在设计中实现一致、有组织的外观并管理元素之间的关系和比例，但在使用网格进行设计时需要注意一些事项。
选择您真正需要的网格
“有多少根柱子？”这是设计师开始研究网格时提出的第一个问题。
许多流行的框架都采用 12 列网格系统。在合理的小数中，数字12是最容易被整除的；可以有 12、6、4、3、2 或 1 个等距的列。这为设计人员提供了极大的布局灵活性。
具有 12 个等宽柱的网格系统既坚固又灵活，并提供了不同的结构组织方式。
虽然 12 列网格是许多设计师的流行选择，但它并不是一种万能的解决方案。选择网格时，请选择具有实际需要的列数的网格。如果您的布局只需要 8 列，那么使用 12 列网格就没有意义。
我如何知道要使用多少列？在决定列数之前，先画出可能的布局草图（纸质草图即可）。这意味着您需要知道屏幕上会显示什么。内容将定义网格，而不是相反。有了草图，您将更好地了解所需的列数。
考虑约束条件
设计网格时，请考虑设计的限制。例如，您的大多数用户可能使用特定类型的设备（例如移动电话）。这意味着所有设计决策（包括网格）都需要考虑此约束。学习在约束下进行设计是一项技能，可以帮助您专注于对用户真正重要的事情。
框架重要的物体
通过赋予重要元素视觉权重来引导用户的注意力。提示：跨多列的项目比仅填充一列的项目在视觉上更重要。
不害怕跳出框框思考
网格列（不是盟友）是每个内容块开始和结束的地方。这条规则简单易行；然而，设计师经常故意打破网格列以增加视觉兴趣或强调某些元素。通过破坏网格中的元素，您可以使它们脱颖而出，因为观众会很快看到破坏的元素并被它们吸引。
打破网格使某些元素脱颖而出。将元素松散地放置在网格上会更加强调它
如果您决定打破网格，请知道自己在做什么。把东西从列中拿出来会破坏视觉层次，影响用户体验。
注意水平和垂直间距。
铺设网格需要注意水平和垂直的节奏，两者同样重要。考虑以下示例中的差异。在第一个示例中，网格的列宽和水平间距是一致的，但垂直间距的变化会产生视觉噪音。在第二个示例中，水平间距（即内容块之间的间距）和垂直间距（列之间）保持一致，这使得整体结构更清晰，内容在视觉上更易于使用。
注意水平和垂直间距。左侧，不同的垂直间距。右侧，垂直间距一致
根据基线网格对齐元素
如前所述，基线网格可用于水平对齐和层次结构。将 UI 设计元素（文本、图像和内容容器）与基线对齐意味着您需要它们的高度是基线值的倍数。例如，如果选择8像素作为基线值，并且想要对齐文本，则需要将字体的行高设置为基线值的倍数，这意味着行高可以是8、16、24、32等请注意，字体大小不必是基线值的倍数，只需行高即可。
优化移动版网格
移动网格的空间有限，使得多列布局不太可行。移动内容通常仅限于一列或两列。在针对移动设备进行设计时，请考虑使用平铺布局网格，其中列和行的高度相同。这将使整个设计呈现方砖的外观。
在移动设备上，用户的屏幕空间有限，在需要滚动之前一次只能看到少量内容。因此，在设计网格布局时，应使图像足够大以便于识别，但又足够小以便用户可以一次看到更多内容。
测试一下
你的网格不是静态的。与设计的任何部分一样，网格应该根据测试结果进行测试和迭代。
综上所述
此时，您应该对网格系统、它们是什么以及如何将它们应用到您的设计过程有深入的了解。对如何使用网格系统的理解将来自实践经验。
引用 Josef 的话说：“网格系统是一种辅助，而不是保证。它允许多种可能的用途，每个设计师都可以找到适合自己个人风格的解决方案。但必须学会如何使用网格”这是一门需要练习的艺术。”
赠送一本书，让大家对网格系统有更深入的了解：
要求仍然和以前一样：
1、本公众号的粉丝；
2、设计人员；
3、获奖者主动联系领奖；
4、抽奖时间：2020年5月1日20:00。 5月2日20:00前未主动领取的，视为放弃。