8点网格已经流行了一段时间。我第一次意识到这种设计方法是在我看到Google的Material Design设计规范之后开始的。我发现这种设计方法非常适合我的科学设计师，所以这就是你应该使用8点网格的原因。

阅读本文后，您将学习：

1. 8点网格系统的含义

2.为什么要使用8点网格系统

3. 8点网格系统有哪些技能？

什么是8点网格

它是创建一个8点的网格作为一个单元，所有元素大小是8的倍数。

△材料设计规范图像

为什么是8点？

为什么它基于8个点来定义网格而不是6或10？引用Quora的一个问题的答案：

如果使用8，则可以轻松调整大小，而不会使用半像素或四分之一像素。 8/2=4,4/2=2和2/2=1。如果从10开始，你最终会得到2.5像素，然后是1.25（10,5,2.5,1.25和hellip;），你会明白这一点。 8为您提供比10./Sjur O. Sundin更高的灵活性，高级UX架构师/设计经理–加利福尼亚州圣地亚哥/

意思是：如果你使用8作为最小的设计单位，你可以轻松缩小你的设计尺寸，8/2=4,4/2=2,2/2=1。如果从10开始，缩小的网格单位可能是2.5像素，下降1.25像素。

△8次; 8个元素减少了50％

如果您是2x屏幕设计，1x是奇数尺寸。如果要使用偶数尺寸的屏幕（基本上屏幕尺寸均匀），将在对齐位置生成小数点。如果是Double的缩放，这次元素大小产生了一个小数点，我相信你不能承受清洁。

为什么要使用这个系统？

以下是材料设计中的一些设计指南以及Spec的一篇文章中的信息，并结合您自己的经验来说明：

1.更统一的用户界面

当所有元素大小符合相同规则时，您自然会获得更加统一的UI。

△材料设计规范图像

2.减少选择=节省更多时间

也许在设计元素时，或者在定义间隙时，使用8更宽一点，所以你要逐位调整它。但是当你选择间隙为7或8的时候，你做其他事情的时间就会浪费掉，最后效果的差异实际上并没有那么大。

更可怕的是，在你的设计的最后部分，这里有6个，有8个，没有明确的规则集，它会影响你设计元素的大小发展，所以你仔细调整细节请问恢复不太好。

想象一下，你已经与开发达成了默契：如果我的标签在这里小于8，那么你认为它也是8。其他人必须是8的倍数。

3.多平台响应式设计

基本主流屏幕尺寸可在水平轴和垂直轴上至少8维分割。在许多情况下，两个轴都未读。甚至一些平台设计规范（例如Material Deisgn）也特别需要创建基于4pt或8pt的网格，以便整个系统自然地符合此规则。

△目前的主流屏幕解决方案几乎可以被8整除

有些屏幕很难适应这个系统，例如375×尺寸为667的iPhone6，但解决方案也很简单。保持衬垫和尺寸的尺寸。保证金符合规则，剩余空间可以填充块元素。如果某些元素的奇数大小是奇数，则无关紧要，只要它们可以使整个规则符合这组规则。

请记住，您的用户永远不会看到您实际使用的尺寸。

例如，Material Design不会将元素的高度限制为8的倍数，但允许元素的单击范围遵循8点网格的规则。

因此，该系统更多地用于规范自身的设计和开发，节省开发和设计通信时间，提高设计的一致性，并且可能对用户没有太大的了解。

实施该计划的技巧

1.构建网格并对齐网格

几乎所有的设计软件都可以选择“对齐网格”。如果您的设计完全符合此系统，设置适当的网格选项和对齐肯定会对您有所帮助。因此，请确保打开“对齐网格”选项。

△在Sketch

2.确定自己的增量习惯

大多数设计软件都可以调整移动增量值，我喜欢将我的大值增加（保持命令移动的增量）从默认值10调整到8，这样更容易。

△调整草图中的键盘增量

3.快捷方式

许多应用程序都有快捷方式，可以让您在设计时快速移动元素并调整大小。请记住，这些快捷方式与网格相结合，可以大大提高您的效率。

4.创建一个图标框架

△材料设计框架图标

图标通常需要不同的尺寸以保持相同的视觉重量。使用框架设计图标是保持尺寸一致性的简单方法。同时，框架可以有效地确保图标的大小符合网格的规格。还要记住将图标的帧大小设置为8的倍数，并从大图标开始设计。缩放后，请记住调整细节。

5.放大和缩小

如果您继续放大到1600％进行设计，则可能会失去布局的垂直感。相反，如果您以50％缩放率查看UI，则可能会丢失一些重要细节，例如完美像素。因此，请记住经常放大和缩小以查看各种比例的设计。

材料设计规范：https://material.io/guidelines

规范文章链接：https://spec.fm/specifics/8-pt-grid

« 我可以在不离开家的情况下修理手机吗？成千上万的机器使您可以更轻松地修复手机！ | 血腥的飓风是另一年。人们如何开始改变这种状况？ »