设计师应该知道的栅格系统基础知识

很长一段时间以前，我都不知道网格是什么，但是听了很多解释后，还是很模糊。后来，我发现很多朋友也有这样的问题，所以我决定分享我对网格系统的理解。首先，我们必须对网格系统有一个基本的了解。我把这四个词分成“网格”和“系统”来分别解释。

关于栅格

grid是从grid演化而来的另一种说法，意思是—— grid，所以不要认为grid有多深多复杂。如果你把它描述成网格，你仍然认为它很难理解吗？事实上，我们都是网格专家，因为当我们几岁的时候，我们接触过许多网格，比如方格书：

另一个例子是飞机网格：

关于系统

我个人理解系统是一种规则。例如，ios有自己的规则：屏幕大小规则、代码语言规则等。如果你想在系统中创建一个应用，你需要遵循它的规则。网格有规则，这就形成了我们所说的网格系统。所以今天的焦点来了。网格系统(规则)到底包含什么？通过研究草图软件中的一些网格设置选项，对网格系统的内容进行了反求，得到了网格系统的六个基本元素。轮廓如下：网格的最小单位，屏幕的总宽度，栏宽，水槽的安全边界，

1. 栅格的最小单位

。最小单位需要首先确定，因为以下所有规则都是基于它的。下图是在草图中设置网格大小的页面：

如果你用的是草图，但是不知道上面的界面在哪里，请出去左转到百度！这里有一个简单的介绍：pc中常用的最小单位是10，手机中常用的最小单位是3、4和5，但这些不是固定的。尽管如此，解决工作中的实际问题是正确的。

2. 屏幕总宽度

作为接口，设计将首先连接到一个尺寸。由于内容是不确定的，我们不能确定高度，但内容区域的宽度可以确定。sketch给我们的默认屏幕宽度是960，这是网页设计：

中最流行的尺寸

3. 列数

仅仅意味着整个界面被垂直分成几列。默认情况下，sketch帮助我们划分为12列。这是网页端常用的划分方法，移动端一般分为6等份。

4. 列宽

当960宽的界面被分成12个纵剖面时，我们很容易计算出每个剖面的宽度是80，而80的宽度实际上包含两个内容，一个是列宽，另一个是下沉，如下图所示：

每个灰色区域就是我们所说的列宽。草图的默认列宽为60:

5. 水槽（间隔）

灰色区域是列宽，所以红色区域自然是下沉(间隔)。

毕竟，界面的内容需要分开，不能堆在一起，所以接收器的功能是更规范地区分内容。当

6. 安全边距

被用作应用程序界面时，我们将设置一个屏幕安全余量，因为当信息被张贴在屏幕边缘时，不仅会影响可读性，还会影响美观。网络方面也将有一个安全边际。它是怎么发生的？或者这张照片：

我们看一下图片，屏幕的最右边是一个水槽，这表明右边有一个安全余量(水槽的宽度)，并且屏幕的左边没有间隙，那么我们可以将最右边的水槽分成两部分，并在最左边放置一个吗？下图：

当然，这是可能的，因为草图已经为我们做了这个设置选项，如下图所示

至于网格的颜色和形式，也可以自己调整，并且有所有的设置选项。这是对网格系统的基本认识和基本六要素。只有彻底理解这些基本概念，网格系统才能得到更好的应用。

举例验证

最后，我们将通过以上解释来验证您是否真正理解这些元素。例如，现在我们将开发一个宽度为1920的网络网格系统。如果使用常用的12列，每列的宽度为1920，12等于160，包括列宽和下沉，我们可以将列宽设置为120，下沉设置为40(列宽：下沉=3: 1)。安全系数是水槽的一半，也就是20。这样一个1920年的网格系统基本上问世了。很简单吗？每个人都必须学会生活和使用，许多价值观是不固定的，例如，12列是不够的，那么16列；另一个例子是柱子和水槽的宽度必须是3: 1吗？不一定，所以不要一意孤行！