关于8点网格的落地

相信大家之前也或多或少都听说过8点网格。是不是觉得名字看起来高大上，但是却不知从何将其运用到实际工作中去。这一期我们就聊一下如何在实际工作中使用8点网格系统。

首先我们要明确使用8点网格会给我们带来什么好处，可以从以下两个方面来说。

一、对于设计师

使设计有规律可循，减少决策时间。

下图中明显看出在8点网格系统下的设计更加要有规律。并且在设置间距以及元素大小时，可以采用8的倍数数值尝试。

二、对于团队

设计师与开发人员的沟通也更顺畅

当我们和开发沟通过并达成共识之后我们就不用去一一测量然后去和开发沟通需要移动几像素了。8点网格下，8pt作为最小的单位是和容易察觉的，而且调整起来也有规律性。

另外我们使用8点网格有一个基本前提就是界面框架化（框架化UI教学 

 https://www.bilibili.com/video/BV1wK4y1x7Zu）。

简单点说就是将页面看做是一个个小盒子拼合而成的。简单举个例子如下图

我们所说的8点网格，就是盒子内部元素之间距离保持8的整倍数值，各个盒子的尺寸以及盒子之间的距离也保持8的整数倍数值。当然有一些特殊情况我们需要特殊处理。

大家会发现只要我们做出了界面中的盒子，那么盒子与盒子之间的距离是很好实现的，但是盒子内部如何运用8点网格是很多同学会有困惑的地方。

现在我们来说一下实际工作中如何使用8点网格，一般我们会有两种方法来操作。

一、由外向内

保证盒子的尺寸为8的整数倍数值，内部元素尺寸为8的整数倍数值，无法保证的可以视情况忽略。

二、由内向外

保证盒子内元素尺寸以及元素距离为8的倍数值，盒子的尺寸自然而然就有了，不需要特别注意其尺寸是否为8的整数倍数值。

这两个方法没有绝对的好坏之分，具体的使用还是要在实际工作中多去尝试，找到适合自己项目的方法。

注意

实际使用中有时由于以8为系数，在某些情况下间距或者尺寸的对比过大，为了保证设计的灵活性，我们也会采用4点网格去进行设计。具体的方法与8点网格相同，这需要我们根据我们的实际项目去做调整。

关于元素以及盒子之前的间距数值我们也有一些建议。如果间距保持是8的整数倍数值，并且在相同设计场景下都相同，那么我们的设计将会更富有节奏。

在这里我们建议可以参考斐波那契数列，听起来很吓人，实际很简单。

用文字来描述就是由0和1开始，之后的斐波那契系数就是由之前的两数相加的和。前几个斐波那契系数是：0、1、1、2、3、5、8、13、21

在8点网格下，数列前几位应该是8、16、24、32、40。如下图所示

在4点网格下我们得到的斐波那契数列前几位将会是4、8、12、20、32、52、84。

总结

8点网格（或者4点网格）作为让设计师设计做设计更有规范且能提高效率的工具，需要我们在实践中不断使用不断理解。另外给大家附上本期视频的b站的网址https://www.bilibili.com/video/BV1PK411V7jC