想学习网格设计详细经验方法？看这篇干货文章就够啦

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

经过精心搜集了大量素材与资料，今天，我们关于网格技术的文章终于与大家见面了。内容丰富实用，所以，各位记笔记的朋友们，不妨提前准备好小本本哦。

第一：什么是网格？

在深入学习网格设计技巧之前，我们有必要弄清楚，究竟何为网格？为何会有网格系统的概念？网格系统的设立，旨在解决哪些设计方面的问题？

实际上，提及网格的起源，我们需回溯至文艺复兴时代。那时，为了追求极致的美感，艺术家们在绘画领域发现了理想的比例布局，进而尝试运用辅助线来达成所谓的「完美」构图。

马萨乔，《缴纳赎金》，布兰卡齐礼拜堂，1425年。

在13世纪，法国建筑师Villard de Honnecourt巧妙地将网格系统与黄金比例相结合，从而设计出一种图表。这种图表能够确保版面内容与边距的布局达到完美效果。时至今日，这一方法依旧被广泛应用，众多杂志和书籍的排版设计中都能找到它的痕迹。

因此，设置网格的主要目的在于解决设计中的美感难题，借助网格，可以使原本混乱无序的信息得以纳入一个优秀的结构框架之中，确保信息的有效传递，并在这一过程中大幅增强版面的审美价值。

1. 网格的结构

实际上，网格是一种结构，它通过线条的垂直排列或交叉来形成一种参照边界。借助这一参照边界，我们能够在单一的空间内，将容器内的内容依照参照线进行排列，以此达到有序的布局和分布。这样做不仅能够营造良好的视觉秩序感，还能在提高阅读效率的同时，增添美感。

网格作为一种结构存在，其本身往往并不显眼（尽管在少数作品中网格被用作装饰元素），然而，这种结构却会对内容元素的布局产生影响，进而作用于信息的排列美感与阅读效率。一旦确定了网格的边界与约束，设计师便能够依据网格，对内容的位置比例进行细致调整和约束，从而实现一个较为理想的版式设计。

在我们生活的四周，实际上可以发现众多网格的应用实例。例如，我特别钟爱的那款宜家设计的网格储物柜。

不过，当前网格技术最常被应用于书籍和杂志的排版设计领域。事实上，网格系统的产生初衷就是为了解决印刷和制版的相关问题。因此，随着印刷术的兴起，网格技术也应运而生，并且其应用范围和体系也在不断扩展和深化。

2. 网格的制版

在平面设计领域，网格系统应用广泛，尤其在书籍装帧和印刷方面尤为突出。因此，对于那些从事平面设计或视觉相关工作的同仁，我强烈建议，在条件允许的情况下，不妨阅读一下这本著作。

此书系瑞士设计师约瑟夫·米勒–布罗克曼所著，名为《平面设计中的网格系统》。书中详述了网格在平面设计中的应用及其操作技巧。其目的在于向平面及空间设计师提供实用工具，帮助他们从理念、结构组织及设计层面，更加高效、自信地应对视觉问题。

书中的众多技巧和排版设计，大多能够直接学习并立即应用，而且掌握起来极其简便。

实际上，大部分设计师对为何需构建这样的秩序体系既不知情也不明了。因此，若想有效且合理地运用网格系统，深入研究网格的各个原理是必不可少的。只要不觉得繁琐，任何投身于网格研究的人都能发现，借助网格系统，他们能更迅速地解决设计难题，同时使设计作品更具功能性、逻辑性和视觉上的美感。

——约瑟夫·米勒－布罗克曼 」

当然，我强烈建议各位阅读实体书，这样查找信息更为方便。此外，这本书的纸质版触感极佳，我本人也在某东上购置了一本，闲暇时随手翻阅，不仅能提升审美，还能顺便锻炼自己的排版技巧。现在，我还将我的购买链接分享给大家，希望能给大家带来方便吧。

第二：网格的组成部分

讲了网格的历史，接下来咱们就开始讲正式的网格使用方法啦。

目前，网格设计主要应用于两大领域，其一为印刷出版物，诸如海报、书籍、封面等；其二则为电子产品的显示屏，例如 iPhone、iPad、Windows 等，这些在 APP 设计、H5 设计以及 Web 设计中尤为常见。

在这些多样化的网格布局方案中，普遍存在一些基础构件，例如边缘间距、列宽度、排水槽以及相互交织的模块。这些基础构件共同构筑了复杂的网格结构。因此，在运用网格设计技巧进行绘图之前，我们必须先掌握每个构件的详细含义及其应用方式。

1. 网格边距

网格边缘与内容之间的空白，称为边距，它代表内容与容器外沿的间隔。在印刷品上，容器指的是纸张的尺寸；而在数字界面设计中，容器则是指设计稿的分辨率。设置这样的边距，一方面是为了确保信息不会超出安全阅读范围，另一方面则是为了使内容更加集中于中心区域，避免因内容过于靠近边缘而影响阅读体验。

在APP界面布局中，边距这一概念同样重要。以@2x分辨率为例，众多APP在内容与屏幕边缘的距离上，普遍选择了24像素作为标准，例如淘宝、支付宝和微博等应用便是如此。然而，也有一些APP选择了32像素的边距，例如微信、QQ和知乎等。大家可以通过截图并调整至750像素宽度来亲自测量，当然，关于如何更合适地确定边距，文章后续将进行详细阐述。

2. 列宽及水槽

在内容区域的中心部分，除去边距，网格主要由列宽和水槽构成。列宽指的是每列中间的宽度，而水槽则是每两列之间预留的空间。列宽影响着网格的复杂度，水槽则决定了内容的疏密感。

3. 交叉模块

这所指代的是网格内部的交汇地带，本质上是一个空间单元。我们能够将固定的图像或是文字段落直接嵌入到这一模块之中。当然，后续还会提供实例进行详细阐释。

所有网格，其构成要素主要位于上方，这些要素共同构筑起了庞大而繁复的网格系统，即Gird System。

第三：三种常见的网格

在我们的设计方案中，目前这三种类型的网格被广泛采用，并且它们完全能够满足我们日常生活中的大多数需求。

1. 单列网格

在我们当前的设计方案中，最为普遍的布局形式便是这种单一的列式网格。这类网格大多以水平或垂直的方式呈现。以我们现在推送的文章为例，它实际上是由水平式的单列网格构成，而文字与文字之间的间距，则构成了类似水渠的形态。这种布局方式，目前来看，是最为简便的网格设计之一。

实际上，通过调整文字的行间距，我们就能实现对间距的控制，无需额外设置过多信息。只需确保每列之间的距离保持一致即可。

2. 多列网格

多列网格，正如其名，指的是由多列构成的网格，其中存在相互交织的关系。实际上，在创建时列数越多，网格在实际应用中的覆盖范围就越广泛，能够对齐的内容也就越丰富。然而，若处理不当，信息也可能会变得零散。

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

再把线去掉，顺便加点颜色看看，再修饰一下细节~~

实际上操作起来并不复杂，当然，我所展示的仅是随意组合，大家不妨在保存这篇文章之后，找些空闲时间亲自尝试一番——相信你们的作品定会超越我的。

3. 交叉网格

这种交叉网格结构易于理解，它本质上是一种结合了水平和垂直方向的交叉网格。这种网格的节奏感相当出色，非常适合用于海报、杂志封面等设计。此外，在不少应用程序以及网络页面中，这种布局模式同样适用。

比如：

大家应该都领悟了不少吧，我再重申一遍，仅仅是观看是不够的，在此我鼓励大家动手多加实践和尝试，唯有亲身实践，这些知识才能变为你个人的技能！加油，奥利给！

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

在界面设计中，我们如何通过运用网格来规范版式，使设计显得更有序、更有规律、更加赏心悦目呢？实际上，方法并无二致，只是容器类型有所区别而已。

1. 先定边距

在制定规划网格的前期，我们首先要确定内容与容器边缘之间的距离，只有这一步完成并确定了，我们才能着手进行网格的绘制工作。

在APP设计领域，通常我们会遇到24、32、40这三个边距单位。对于信息较为紧凑的界面，24单位较为适用；相对而言，若界面信息较为松散，或产品偏向工具性，则40单位更为合适。当然，不少产品也会选择32这个较为中性的数值。

图中标注③的部分代表边缘区域，②处所示为水槽区域，而①所标记的则是另一片边缘地带。

在进行Web或PPT封面设计时，考虑到屏幕的横向特性，我们可以适当放宽边距，一般选择100、200、300像素不等，具体数值可依据个人审美偏好来决定。

2. 确定列数

确定了边距设置后，接下来关键的一环便是确定列的数量。列数的设定直接关系到页面信息的分布密度和适应性。在APP界面设计中，4至6列的布局较为常见，而在网页设计中，10至12列的布局则更为普遍。

制作PPT或是网页时，我个人的偏好是选择12列布局，这主要是因为它具备极高的灵活性，并且尺寸适中，恰到好处。您可以根据附图（以@1x为基准）来确定您的设计稿件中列数的具体数量。

3. 设定水槽宽度

确定了边距和列数之后，我们接下来要确定的，便是水槽的具体宽度。

在移动端设计领域，我提出一个建议：水槽的最小间距应设为16，然后以4为间隔逐步增加，例如16、20、24、28、32、36等，具体宽度需根据产品特性来决定。若屏幕内容密集，我推荐采用20、24等较小的间距；而若内容稀疏，整个屏幕几乎空无一物，则可选择32、36等较大的水槽边距。

在网页或演示文稿的封面布局中，以8为基数进行倍数增加更为适宜，例如16、24、32、40、48、56等，这样的宽屏尺寸，在设定水槽边缘的开放空间时，能够提供更广阔的余地。

水槽旁边的线条，以及Sketch内置的各种工具，实际上均能完成这一任务。借助这些工具，我们能够轻松地实现预期的效果。而在Photoshop中，可能就需要我们亲自绘制矩形并量取尺寸，随后再拉出辅助线。

4. 按照网格调整设计稿

一旦网格确定下来，我们便可以依据网格来设定界面元素之间的距离和大小，力求确保各元素之间的垂直距离保持统一。

定义完网格后，接下来的步骤其实相当简便，只需依照网格来设定内容的边界。我们可以手动调整文字的边缘距离，亦或图片的尺寸，确保它们与网格尺寸相匹配，进而提升整个页面的协调性。

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

掌握了方法之后，实际上就要在日常中积极搜集众多优质的网格设计作品，同时加强实践练习，去体会网格布局的触感。归根结底，只有通过持续不断地练习，不断发现并总结问题，才能真正牢固地掌握所学知识，并增强自己的实际操作技能。

不要完全被网格约束

网格线本质上仅是一种辅助性的指引，它并非对内容布局施加严格的限制。例如，某些文字可能会超出预设的网格边界，即便严格遵循网格进行排版，也可能引发问题。因此，网格仅作为参考，不应过度拘泥，以免造成事与愿违的结果。

横向的水槽高度需要保持统一

在APP的设计过程中，由于各信息单元的高度参差不齐，我们难以采用等距网格进行规范，通常转而控制模块间的距离。特别是在较大模块之间的间隔中，我们应尽量确保水槽的高度保持一致。

2. 网格插件神器下载

为了便于大家更好地构建网格布局，在此我还向大家介绍几款制作网格的实用插件，它们操作简便，功能强大，值得信赖，评分高达五星。

Bootstrap Grid（ Sketch 使用）

借助这款插件，用户在 Sketch 软件中能够轻松构建个性化的网格布局，无需经历复杂的配置过程，仅需简单操作两步即可完成设置。

还支持针对不同的尺寸，自定义生成不同的网格参考线~~

flavor（ Sketch 使用）

继续浏览有关 网格设计版式设计 的文章