巧用Grid System网格系统全面升级你的交互界面设计，快速打破界面设计迷茫感！
交互设计本身有其需要遵循的秩序，很多同学在做设计的时候，打开软件但是并不知道应该从何入手。文字框的位置在哪里？按钮的尺寸应该多大？设计的标题放在哪里？Grid System网格系统就是你开始这一些所需要的基本知识。
网格是设计的骨架，它们可以创建设计的各种布局，帮助你进行有序的界面设计并组织设计的内容。无论是创建手机端的页面，还是基于PC端创建网页将图像和文本结合在一起，使用网格系统都将来帮助你做出优秀的设计决策，并为用户创造良好的体验。
Apple Developer Human Interface Guidelines
包括Apple在内的一线交互公司，都以网格系统作为基本原则，建立了自己的设计规范。使用网格可以消除随机决策，设计师可以确切地知道如何将元素放置在正确的位置，使得徽标、菜单项、标题、正文、图像以合适的比例出现在其正确的位置上，而不是将元素放置在随机的位置。这将有助于加快设计师的设计过程，以及提高作品的美观程度。
在探讨当今网格如何影响交互界面设计之前，让我们深入了解一下网格来自何处，以及如何使用网格的历史。网格对于组织排版至关重要，它们首先用于组织手稿版式的类型，从早期的手稿页面看一下这种传播的组织性如何。
早期手稿设计
快速发展的工业革命和大规模生产需要，催生了大量印刷的报纸、海报、广告和其他印刷材料。
《纽约时报》 1914年7月29日的报纸
在20世纪，像Jan Tschichold和JosefMüller-Brockmann这样的设计师开发了新的网格系统，这些系统如今已成为我们今天所称的“瑞士风格”或“国际印刷风格”。
Grid System网格系统书籍
这种体系下，设计师引入了带有大量空白的模块化作为版面设计的基本原则，而今天这种方法也在逐渐被沿用到数字产品的界面设计中。当然也需要根据数字产品的特性和呈现方式进行一定的调整。
网格有助于为数字设计赋予形状和层次结构。没有它们，你将不知道在何处放置元素。网格系统可以帮助我们来创造良好的用户体验，以便用户知道如何浏览网站并找到他们所需要的东西。
网格在响应式设计方面也有帮助。尽管登录页面的桌面体验可能会使用多列网格来实现跨文本图像设计，但设计必须足够灵活以将其精简到界面上的几列中。
响应网页在PC端和手机端的差异
交互界面设计中有5种常用的网格类型。有些在网页设计方面比其他的要好，下文我们将重点介绍这五种常用的界面网格。
基线网格的示例
Baseline Grid是由文本所在的位置定义的，本质上它是基线之间的间距。该网格有助于为读者创造良好的体验，尤其是在有大量文本需要阅读的地方。
对于书籍布局之类的印刷设计而言基线网格必不可少，同样在网页设计中考虑基线网格也至关重要。考虑一下行之间的间距如何影响首页的可读性，如果文字太紧，用户可能会放弃并完全离开你的网站。基线网格有利于创造良好的空间平衡。
稿件网格的示例
Manuscript Grid是所有书籍，报纸和杂志的基础。它也被称为单列网格，它是最简单的网格结构之一，适用于大量连续的文本和图像块。它是页面内的一个大矩形区域，留白布满了图面的周围，就像文本的边框一样。
列网格的示例
Column Grid有助于分解文本，照片和插图。对于网站，你可以选用2到16列中的任意一种标准对页面进行分割。你可以将文本和图像仅放在一列中，也可以跨多列。列之间的间隔称为Gutter，它们之间的大小应相同。
装订线是列之间的空间
非对称列网格的示例
模块化网格的示例
Modular Grid和Manuscript Grid有很多相似之处，但Modular Grid拥有行的分割而有所不同。你会发现报纸和杂志相当多地使用Modular Grid来组织内容，同理它们也可以在网站或应用程序设计中使用，例如在需要大量陈列内容和文字的网页。
看看Everlane如何使用模块化网格来组织其牛仔布选择。
网页设计中的模块化网格示例
YouTube主页是正在使用的模块化网格的另一个示例。当他们使用左侧的侧边栏来获取诸如趋势和订阅部分之类的常见链接时，所有视频内容都被组织到一个4列模块化网格中，以最大化用户在滚动观看内容时可以浏览的视频数量。
YouTube主页是模块化网格的示例
分层网格的示例
Hierarchical Grid最常见于Web设计中，这些网格的目的是按重要性顺序排列元素。它们可以稍微灵活一些，仍然使用列、行和模块来帮助组织。首先将最重要的对象放在页面上，然后围绕它们创建一个网格，从而有机地创建它们。
与新闻和媒体相关的信息类站点，倾向于使用这种类型的网格来帮助吸引对某些文章的关注，并发布更多内容。让我们看一下《纽约时报》如何在其首页上使用分层网格的示例。
网页设计中的分层网格示例
在Figma这个界面设计软件中，建立自己的网格体系将变得非常容易。首先需要建立一个Frame而后选中Frame，点击右侧的Layout Grid，即可根据自己的需要建立对应的网格，Figma提供了三种网格模式：Grid、Columns、Rows。
如何在Figma中创建列网格
在这里你可以根据自己的喜好自定义网格，可以调整多少列、装订线宽度、列宽、甚至选择是否要将其作为将来的Web设计项目的默认网格。
现在你已经了解了什么是网格，不同类型的网格以及如何创建自己的网格，下面让我们了解一些如何在设计中最佳使用它们的技巧。
·设计之前先考虑一下网格
研究完成后，甚至可能在纸上探索了一些低保真线框，并为网页创建了网格。这是一个简单的步骤，一旦创建了它，你就不必为随后的所有页面再次考虑它。在开始设计之前，请先考虑网格而不是将其放到最后并尝试使你的设计适合网格。
·不要害怕在需要时打破网格
新设计师可能会受到使用网格的限制，但你不应该这样做。创建网格后，可以将其断开！使用网格的次数越多，你就越会意识到它是一个指南，它实际上将帮助你更快地进行更好的设计。
·不要害怕空格
平衡空白或负空间在Web设计中很重要。不必觉得有必要在目标网页设计中填满每个角落。考虑在内容的各个部分之间留有较大的页边距和适当的间距，以使用户在滚动浏览网站时可以呼吸和暂停。
·尝试使用960网格系统
960网格系统是通过提供基于960像素宽度的常用尺寸来简化Web开发工作流程的一项工作。有两种变体：12列和16列。
960网格遵循以下结构：
总宽度为960px，最多使用12列，每列60像素在每列的左侧和右侧使用10px的间距，总装订线间距为20px，总内容区域为940px
如果我们用 Google Trends 搜索一下这些关键词，就会发现Design System的关注热度是最高的。大家都想搞清楚 Design System 是怎么回事，希望用它来提升自己产品的整体质量、效率。
对于 Design System 不同的团队依据自己的需求都有着自己的定义，这也是为什么各 System 所包含的内容有所差异。在我的理解来看既然叫做 System 它就应该是更为完整、体系化的，所以我会将它定义为解决数字产品生产的整体解决方案，包含设计、内容、工程等多个方面。
Google 对于 Material Design 的定义是：
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.
这是一个想法复杂的系统工程、一个完整的世界观。本次讲座我们将从基础开始讲解如何完成自己设计专属的Design System创建，从而建立设计的规范语言，帮助同学们高效完成设计方案。