掌握这套网格排版技巧，版式不高级都难

许多人想学习一些关于网格设计的详细经验和方法。

在准备了大量的材料和材料后，我们今天的网格方法文章终于来了。这篇文章太干了，SO，做笔记的小本，准备好~~

第一：什么是网格？

在掌握网格的设计方法之前，我们必须知道什么是网格？为什么会有网格系统？网格系统的存在是为了解决什么样的设计问题？

事实上，说到网格的历史，它可以追溯到文艺复兴时期。为了达到美的极致，艺术家们从绘画中找到了完美的比例分布图，并试图用辅助线实现它 「完美」 构图方法。

△ Masaccio, 'The Tribute Money,' Brancacci Chapel, 1425.

在13世纪，法国建筑设计师 Villard de Honnecourt 结合网格系统和黄金比例，创建这样的图表，固定布局中内容的结构和边距，实现完美的布局。这种方法仍在使用中，大量的杂志排版和书籍排版都可以看到这种方法的阴影。

因此，网格的存在最重要的是解决设计美学的问题。通过网格，混乱的信息可以通过更好的结构受到约束，以确保信息的有效传递，同时充分提高布局设计的美感。

1. 网格的结构

网格实际上是一种结构，通过垂直或交叉构建参考界限。通过这个参考界限，我们可以在一个单一的容器中对齐容器中的内容，以便有序地组织和列出分布。从而实现更好的视觉秩序感，提高阅读效率，增加美感。

由于网格是一种结构，网格本身并不一定可见（少数作品会用网格装饰），但这种结构会反映内容元素的布局，影响信息的布局美感和阅读效率。在确定了网格的边界和约束后，设计师可以根据网格调整约束元素的坐标，以实现理想的布局设计。

环顾我们的生活，其实可以看到很多网格的应用场景。比如我很喜欢的宜家网柜~

然而，目前网格应用最广泛的场景是在书籍和杂志的布局设计中。事实上，网格系统的初衷是解决印刷和制版问题。因此，随着印刷的兴起，网格开始诞生 ，并且演绎得越来越丰富，越来越系统。

2. 网格的制版

网格系统在平面设计中更为常见，尤其是书籍的装订和印刷场景。因此，如果有从事平面设计或视觉相关行业的学生，我建议他们有机会阅读以下书籍。

这本书是瑞士设计师约瑟夫·米勒的–布罗克曼 本文主要介绍了网格在平面设计中的功能和使用方法，旨在为平面和空间的设计师提供实用的工具，使他们在概念、组织结构和设计上更有效 自信地处理和解决视觉问题。

书中的许多方法和布局，基本上都可以现学现用，掌握起来也很方便。

「事实上，大多数设计师不知道也不明白为什么要建立这样一个秩序体系。因此，如果你想合理、功能性地使用网格系统，你必须仔细研究网格的所有原理。只要不太麻烦，任何研究网格的人都会发现，在网格系统的帮助下，他可以更快地解决设计中的问题，使设计更具功能性、逻辑性和视觉美——约瑟夫·米勒－布罗克曼 」

当然，我建议你阅读和浏览纸质版本，这更有利于参考。而且，这本书的纸质版感觉很好。我自己也在东方买了一本书。当我每天无事可做时，我会翻看它，以提高我的审美能力，同时提高我的布局能力。在这里，我还将附上我的购买地址。亲爱的~~

第二：网格的组成部分

在谈到网格的历史后，让我们开始谈谈正式的网格使用方法。

目前，网格设计主要用于海报、书籍、封面等两种场景，另一种是电子设备的屏幕，如 iPhone、iPad、Windows 等，常见于 APP 设计，H5设计及 Web 设计中。

在这些不同场景的网格设计中，会有一些非常常见的基本部件，如边距、宽度、水槽和交叉模块。正是这些基本元素构成了一个复杂的网格系统。因此，在使用网格设计方法绘制图纸之前，我们需要了解每个元素的具体含义和用法。

1. 网格边距

网格边缘距离是指内容外边缘距离容器的空白距离。在纸质设备中，容器是纸张的大小。在界面设计中，容器是设计草案的尺寸分辨率。一方面，这个边缘距离是为了信息不超过安全距离，另一方面，它主要是为了使内容看起来更集中在中心区域，以防止信息过于贴近边缘，不利于阅读。

边距的概念也将用于APP设计中。基于@2x尺寸，很多APP从内容到屏幕的边距都是24px，比如淘宝、支付宝、微博等。但是很多APP都使用32px的边距，比如微信。QQ、知乎等，这个可以截图，缩到750宽度，自行量~~当然，这篇文章后面会详细说明如何更好。

2. 列宽及水槽

除边距外，网格主要由列宽和水槽组成，列宽是每列中间的宽度，水槽是每两列中间的预留区域。列决定了网格的复杂性，而水槽决定了内容的密度。

3. 交叉模块

这是指网格中的交叉区域，实际上是一个空间单元。我们可以直接在这个模块中填充固定的图片或段落。当然，以后也有案例要解释。

基本上，所有的网格，它由上述基本元素组成。正是这些，形成了一个庞大而复杂的网格系统 Gird System

第三：三种常见的网格

在我们的设计中，这三种网格是最常见的，这三种网格也可以满足我们的大部分日常需求。

1. 单列网格

事实上，在我们目前的设计中，最常见的是这种单列网格。这些单列网格大多以水平或垂直的形式出现。例如，你现在看到的文章实际上是由一个水平的单列网格组成的。文本和文本之间的距离形成了一条运河。它也是目前最简单的网格。

其实我们可以用文字的行高来控制，不需要设置很多信息。确保每列之间的距离相同。

2. 多列网格

顾名思义，多列网格有多列网格，包括交叉关系。事实上，创建的列越多，你的网格在使用过程中覆盖的范围就越广，可以对齐的内容就越多，但如果处理不好，信息就会越破碎。

根据这个网格，我们简单地安排一些文字，看看效果

然后去掉线，顺便加点颜色看看，然后修改细节~~

其实挺简单的。当然，我只是随意拼凑。收集完这篇文章，朋友们可以抽出时间自己试试~~相信会比我好。

3. 交叉网格

交叉网格也很容易理解。事实上，它是基于水平和垂直领域的交叉网格。这种网格有很好的节奏感，适合海报、杂志和封面版本。这种布局也可以用于一些应用程序和网页场景。

比如：

你明白很多吗？再强调一下，光看是不可能的。在这里，我鼓励你多练习。只有动手，这些知识才能转化为自己的能力！来吧，奥利！

第四：如何在界面设计中使用网格布局？

那么，在界面设计中，如何使用网格来限制布局，使设计看起来更整洁、更规则、更美观呢？事实上，相同的方法只不过是不同的容器。

1. 先定边距

在规划网格之前，我们的第一步实际上是先将内容设置到容器的边距，然后我们才能开始后面的网格设置。

通常在APP设计中，常见的边距是24、32、40.如果这三个单位信息密集，通常使用24个单位，而如果信息相对宽松，工具型产品将使用40个单位。当然，也有很多产品选择了相对中立的32。

△ 图中 ③ 绿色区域为边距，② 水槽是蓝色区域，① 红色区域为边距

在Web或PPT的封面设计中，由于屏幕本身是水平的，我们的边距可以设置得更大，通常是100、200、300不等，这个可以根据个人风格喜好来决定。

2. 确定列数

确定边距后，确定列数是非常重要的一步。定义使用了多少列，这将直接影响页面的信息密度和灵活性。在应用程序设计中，更受欢迎 4-6 在Web设计中，列，10-12 列则是很主流的

在制作PPT或网页时，我最喜欢使用12列，因为它实际上是最灵活的，而且大小不大也不小，只是合适的~~您可以对应以下图片（基于@1x）来确定您的设计草案中列数的数量。

3. 设置水槽宽度

边距和列数确定后，我们实际上需要确定的是水槽的宽度。

在移动设计中，我建议水槽的最小尺寸为16，然后以4为单位向上增加，如16、20、24、28、32、36.这个水槽的宽度可以根据产品的类型来定义。假如你的屏幕信息密度很高，那么我建议使用20、24如果密度很低，整个屏幕上没有内容，可以使用32、36等大水槽边距。

在Web或PPT封面设计中，以8为单位的整加比较合适，比如16、24、32、40、48、56.这种大宽屏的尺寸在定义水槽边距时会更加开放。

sketch自带的工具实际上是列跟水槽可以实现，我们可以很容易地使用这个工具来达到我们想要的效果。在PS中，您可能需要绘制矩形尺寸，然后拉出辅助线。

4. 设计稿按网格调整

网格设置后，我们可以根据网格设置界面中元素的间距和尺寸，并尽可能确保每个元素的垂直间距一致。

网格定义后，其实很简单，就是根据网格，我们来约束内容的边界。我们可以手动控制文本的边距或图片的大小，调整整个页面的和谐程度。

第五：熟练掌握&插件提效

掌握方法后，实际上需要每天收集更多优秀的网格作品，然后练习更多，找到网格排版的感觉。毕竟，只有不断地练习，不断地发现和总结问题，你才能牢牢地掌握知识，提高你的实践能力。

不要完全受到网格的约束

事实上，网格只是一条参考线，不需要完全限制内容。例如，有些文本的长度会超过网格线。事实上，如果你完全参考网格，就会有问题。因此，网格最终仅供参考。不要完全故意约束，以免产生适得其反的效果。

水平水槽的高度需要保持统一

在应用程序设计中，不同信息的高度是不一致的，所以我们很难使用等距网格来限制它，更多的时间是限制模块和模块之间的间距。在大模块和大模块之间的间距中，我们的水槽高度应尽可能统一。

2. 下载网格插件神器

最后，为了方便大家制作网格，我也在这里推荐一些制作网格的插件神器，非常好用，推荐五星指数。

Bootstrap Grid（ Sketch 使用）

可以使用此插件 Sketch 轻松创建自定义网格，不需要那么多繁琐的设置，简单的两步就能完成！

它还支持根据不同的尺寸定制不同的网格参考线~~

flavor（ Sketch 使用）

更多网格设计技巧：

一些文献参考资料

「A Brief History of Grids,」 Lucienne Roberts, Graphics「The Secret Law of Page Harmony,」 Retinart「Responsive layout grid 」Material Design Team「Building Better UI Designs With Layout Grids」

欢迎关注作者微信微信官方账号:「UX小学」