使用8点网格使UI设计更高效

网格布局设计的目的

建筑设计最重要的因素之一是架构，同样设计界面也需要打好基础架构。设计师通过使用统一的元素、间距、材料设计布局可以保持平台、环境和屏幕大小之间的一致性，提升设计效率、减少决策时间，减少与开发的沟通成本。

为什么用8点网格

避免虚边和半像素

网页设计中如果你用8作为设计的最小步进单位，你可以很方便的缩小的你的设计尺寸，8/2=4,4/2=2,2/2=1。如果你从6或者10开始，你缩小到的网格单位可能是1.5或者2.5像素，再往下是0.75或者1.25像素。会出现虚边和半像素现象，这样你设计的界面就会不精致。

屏幕适配性高

基本的主流屏幕尺寸都至少在横竖一个轴的维度上能被4和8整除。如果用4作为基本步进单位，页面内容会被分割的过于细碎，因此8作为基本步进单位进度合适，既不显得过于细碎，也不会因为间隔太大而显得内容分散，更适合多平台响应。

减少沟通成本

目前使用广泛的前端开源组件库都基于8的基本单位来设计，比如：Ant Design、Matierial Design等。因此如果设计师也使用以8点网格系统，开发可以轻松的丈量8的倍数，开发与设计师对接沟通效率就会很高，页面的还原度也会更高一些。

Sketch设置

在sketch中设置好相应的网格选项，设置网格尺寸为8px，并在“首选项”的“画布”中调整移动增量值为8，这样在设计的时候会方便很多。