如何让你的设计看起来更有说服力？试试网格系统!

关注▲Clip设计夹后台回复“进群”加入设计成长群

设计夹的第117篇文章分享

大家好，这里是设计夹，今天为大家分享的是「网格系统」。 网格系统在设计前期作为确定界面布局和规范的重要方法，经常在UI/UX设计中用到。 除了能够对齐和组织界面中的设计元素外，使用网格系统还有助于改善视觉层次，让界面中的信息层级关系更加合理、清晰，从而最大限度地减少用户的认知负担，帮助用户快速理解内容。

✅通过了解网格系统的组成、网格系统的创建方法和使用准则等内容，系统了解网格系统在设计中的应用，让我们的设计有理有据，更具说服力！

网格系统的组成

在深入了解网格的类型和使用准则前，让我们先来了解一下网格系统中涉及到的一些基本概念，比如列数、内边距、外边距等等。

1) 列

列(Column)是网格的基础，用来表示内容放置的区域。每一列的宽度以百分比而不是固定的数值来衡量，这样面对不同的屏幕尺寸，可以更灵活地进行设计。

日常设计中，最常使用的是12列等宽的网格系统，适用于大多数的页面和布局设计中。

2) 内间距

内间距(Gutter/Padding)是指每列之间的距离，也被叫做水槽。内间距能为页面提供呼吸空间，避免内容之间过于拥挤。

3) 外边距

边距(Margins)是列与边框之间的距离，边距绕过内容有上、下、左、右四个方向，在设计中我们可以针对每一侧设定和更改边距。

4) 字段或模块

字段或模块是行和列的交集。这些模块是页面的基础，所有设计元素都将适合网格中矩形卡片创建的这些空间单元。

5) 界面设计与网格

如果说网格在过去对于印刷必不可少，那么今天网格在数字世界中仍是不可或缺的。

网格成为开发数字产品的关键工具，为在所有设备上提供最佳的用户体验。因此，无论屏幕大小如何，设计师都必须能够在每个屏幕上通过最佳的方式组织内容。 如何在设计中使用网格系统？

网格是具有列、内间距和外边距的结构系统，其目的是帮助设计师组织界面的内容。

内间距的距离越窄，越会向用户传达「这些内容属于同一组」的感觉。

同理，内间距越宽，看起来越像是不同类型的内容。

需要注意的是，内间距的距离不要太宽，或者比每一列的宽度还宽，容易导致内容之间的留白过大，造成视觉浏览上的不连贯。

此外，外边距的间距遵循与内间距相同的规则。可以灵活调整外边距，以便在内容和屏幕之间留出合适的间隔。

和内间距一样，屏幕中的外边距也不能太宽，这样会压缩页面中内容的展示空间，会让页面看起来很局促。

使用网格设计的四条准则

网格的使用看起来很直观，但在UX或UI项目中使用网格系统仍有一些需要注意的规则。

1）将元素集中在每一列中

上面说到，在设计中常用到的是12列网格系统。那么12列网格为什么被广泛使用呢？主要原因在于12列网格更方便扩展不同的布局形式。

▲12列网格可以一行排列两个内容，各占6列网格；一行排列三个内容，各站四个网格；一行排列四个内容，各占3列网格；一行排列六个内容，各占2列网格。

基本上，常用到的页面布局形式在12列网格中都可以实现。

▲在每个内容之间留出足够的内边距。这里需要注意的是，内容的两侧要与每一列的边缘重合，而不是与内边距重合。

▲当内容居中显示时，要始终在边缘留出一点空间，防止页面被内容填充的过于拥挤。

2）不要将列数作为内容填充

在网格系统下，设计应该填充整个内容的宽度，这样会让界面看起来更规范。

不要让左右两列没有填充内容，让列数作为填充，这样会导致页面的外边距不统一，增加后期的开发成本。

3）可以尝试脱离网格

在设计中，使用从网格中溢出的图像或元素也是可以的。

例如我们想填充一个全尺寸的背景色或者图像，只需将图像拉到网格之外就可以。在网格和边距的示意下，开发人员也能够快速理解界面的尺寸信息。

4）注意内容之间的间距

在网格上放置不同的元素时，确保元素之间的左右间距、上下间距都是一致的，这样会让整个界面看起来更规范。

最后

除了能够改善设计、减轻用户认知负担外，网格系统还能提升设计效率。有了网格我们可以快速衡量元素的间距、边距的精度，简化设计过程。

另外，在规范的网格系统中，界面布局或内容上的修改也会变得更容易。

慢慢来比较快，希望对你有帮助！

---

设计夹将分享的资源整理成一份清单合集，直接在公众号后台回复对应关键词即可免费领取，这份清单会不断更新，建议大家收藏起来随时查看。

领取方式：

1）在看&转发让更多小伙伴看到这篇文章 2）公众号后台回复资源获取高清素材清单

添加微信,邀你进设计成长群

---

Tips:这里会持续更新设计干货，包括但不限于交互日记、设计法则、答疑解惑、读书笔记…感兴趣的同学可以扫码加入，一起成长！⬇️⬇️⬇️

文章合集

致2021：设计文章合集

致2020：设计文章合集