8 点网格

使用 8 的倍数来定义元素的尺寸、填充和边距。

在你开始之前

本指南旨在帮助设计师快速且一致地布置 UI。它对于设计具有固定约束的移动应用程序 UI 尤其有用，但我发现它对于响应式网页设计也很有用。

与许多设计指南一样，这些示例在设计时可能比独立阅读更有帮助。

入门

代码 > 模型

设计应用程序和原型制作工具可让您创建 UI 外观的奇妙愿景。但在数字产品设计方面，模型或原型的唯一目的是向利益相关者和开发人员清楚地传达建议的解决方案。最后，只有开发人员可以在代码中（与资产结合）重现的内容才能投入生产。

现在，您可以在设计工具中创建的几乎任何东西都可以在代码中创建，但是有几个原因——从可用性到发布时间表到性能问题——构建设计可能不切实际。

最重要的是您的设计在用户设备上的代码中如何表现，因此尽可能优先减少构思和编程之间的时间，而不是在 Sketch 或 Photoshop 中的完美布局。

盒子模型

盒模型是一种描述对象尺寸和间距的方法。

它由 4 个组件组成：边框、边距、内边距和元素本身的尺寸。

边框：围绕元素边缘的描边粗细。

大多数设计工具不允许这影响整体间距和尺寸。

Padding：元素边界与其子元素边界之间的空间

边距：元素边界与相邻对象之间的空间

什么是点？

点 (pt) 是取决于屏幕分辨率的空间度量。最简单的解释是，在“1x”分辨率（或@1x）下，1pt = 1px。

在“2x”分辨率（@2x）下，1pt = 4px 因为分辨率在 X 轴和 Y 轴上翻倍，使其宽度为 2px，高度为 2px。

在“3x”分辨率（@3x）下，1pt = 9px（3px x 3px）等等。

@1x

请注意，这里的一切都是“@1x”设计的。@2x、@3x 和所有其他变体的资产可以更容易地从 @1x 资产中派生，而不是从以其倍数创建的设计中派生出来。

例如，要将干净的资源从 @2x 设计转换为 @3x 设计（假设线条粗细为偶数），您需要将图稿缩放至其原始尺寸的 50%（降至 @1x），然后将生成的艺术品缩放到 300%。

另一方面，@1x 设计可以轻松地缩放到任何整数倍 - @2x、@3x、@4x 等。

通过在每个单独的分辨率下工作，可以为图标和精美资产添加更多细节，但这样做的机会相对较少。在大多数情况下，为了速度和方便起见，使用 @1x 是理想的。

使用像素网格

您创建的每个 UI 元素都应与像素网格对齐。这是一个称为像素拟合的概念，它确保您的所有元素在用户设备上都显得清晰且定义明确。

文本在这里有点异常，因为让您的眼睛清楚地阅读字母的独特指标需要一点点抗锯齿，这会使其他形状变得模糊。因此，不要担心字母的每个点都与像素网格对齐。

文本元素

像文本这样的内联元素几乎总是给定界面中最重要的部分，但是像文本大小和行高这样的东西在保持垂直节奏和易读性的同时并不总是像其他元素一样容易地符合相同的 UI 网格。

为您的文本设定基线是在您的设计中发展垂直一致性的一个很好的工具。通过将每行文本的基线定位到等间距的行上，您可以轻松地将所有 UI 元素置于和谐的垂直节奏中。

我喜欢将我的 8pt UI 网格与 4pt 基线网格结合起来。这种配对使数学保持简单明了，同时提供了足够的选项来适应各种文本样式。

大多数平台都有一些基本的指导原则，但打破默认字体可能会导致独特的结果，所以在布局文本时要谨慎行事，然后在布局其他元素时将其用作基础。

8 点网格

基本原理

使用 8 的倍数来定义块和内联元素的尺寸、填充和边距。

当块元素的唯一内容是文本（例如按钮）时，将文本设置为与 UI 其余部分和/或特定平台一致的大小，然后使用填充来确定块元素的大小。在全宽元素的情况下，使用填充来确定高度并使用一致的水平边距来确定宽度。

两种方法

这个系统实际上有两个突出的版本。一种将元素放置到以 8 点增量定义的系统显示网格中（我们将其称为“硬网格”方法），另一种仅测量单个元素之间的 8 点增量（我们将其称为“软网格”方法）网格”方法）。

Hard Grid 方法的主要论点是，通过使用额外的透明背景元素，然后将它们分组为一小组前景元素，您可以在每个元素的基础上跟踪边距和填充，然后将这些容器捕捉到网格，如砖块。Material Design - 一切都已经设计为 4pt 网格 - 自然地符合这种方法。

Soft Grid 方法的论点是，当需要编写接口时，使用实际的网格是无关紧要的，因为编程语言不使用那种网格结构——它只会被扔掉。当您优先考虑获得高质量、可编程的模型集的速度时，绕过 Hard Grid 管理附加层的额外开销，而支持 Soft Grid 更流畅、最小的结构可能是一个优势。这也可能对 iOS 更有利，因为 iOS 中许多系统 UI 元素不是由均匀网格定义的。

为什么重要

一致的用户界面

当您的所有测量都遵循相同的规则时，您会自动获得更一致的 UI。

更少的决定 = 更少的时间

通过删除每 8 个间距选项中的 7 个，您可以减少可用的摆弄量，从而降低编码速度。

多平台设计

不管外形如何，最流行的屏幕尺寸至少在一个轴上可以被 8 整除——通常是两个。此外，一些平台的样式指南（如 Material Design）特别要求使用 4 或 8 点的网格，使该系统非常适合。

有些屏幕的尺寸显然难以调整（iPhone 6 为 375 x 667 点），但解决方案实际上非常简单。保持填充和边距尺寸一致，并减少/增加块元素的大小以填充剩余空间。如果保持网格一致，则可以使用大小奇怪的元素。请记住，您的用户可能永远不会看到您使用的实际测量值。

实施技巧

对齐网格

几乎每个设计应用程序都有一个“对齐网格”选项。如果您使用硬网格方法，它肯定会让您的工作更轻松。无论如何，您需要确保启用了“对齐像素网格”选项（如果可用）。

资源和变量

如果将根文本大小设置为 16，则可以轻松使用 .5rem 增量在 8 点网格上构建布局。

如果您不想这样做，或者不喜欢 rems，您可以使用 CSS 或预处理器间距变量来处理布局，同时保留变量提供的额外可维护性值。

快捷方式

许多应用程序都有快捷方式，可让您动态微调、调整大小和调整增量。我强烈建议学习它们 - 特别是轻推和尺寸调整。

框架你的图标

图标通常需要不同的大小以保持相同的视觉重量。在它们周围放置一个框架，类似于硬网格定义元素大小的方式，这是一种保持测量一致的简单方法，同时允许在定义的参数内发生变化。

放大，缩小

如果你把所有时间都放大到 1600%，你可能会误判你的垂直节奏。相反，如果您总是以 50% 的比例查看 UI，则可能会错过重要的细节，例如像素拟合。经常调整您的变焦以确保您看到的是整个画面。