UI设计：网格

一般来说，网格分为4倍网格和8倍网格。而这两种规范在实际设计中是可以混合使用的。在这里，我们以8倍网格作为示例，来对下图进行规范操作。

使用的软件为Figma

我们可以看到，这是一个占了四个栅格的大盒子。其中又包含了两个按钮。我们查看按钮的间距。

可以看到，无论是外边的按钮与按钮之间，还是内部的文字与边框之间，他们的间距都不是8倍。对此，我们进行8倍的间距调整。

可以看到调整后，按钮与外边的大盒子左右间距为8的倍数56，上下间距为8。

文字与按钮左右边距和上下边距都是8的倍数。

这样就做到了规范化间距。

实际上，在稿件的绘制过程中，最需要考虑的是用4或8倍来规范左右间距。对于上下间距，反而并没有那么严格的要求。因为现在大部分的网页都是做自适应布局，这就关系到了竖直方向上内容的拉伸，所以在绘制的过程中可以不对竖直方向的间距做太严格的要求，但水平间距是一定要注意好的。

无论在什么情况下，都应该尽量避免你的稿件尺寸里出现小数点和奇数。