[译文] 8pt栅格系统 - 2. 如何使用

这是该文下半部分，如果看起来有疑惑请移步上半部分。

8pt栅格

基础理论

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

当块元素的唯一内容是文本时（如按钮），通常应将文本尺寸设置为与界面其它部分/特定平台规范一致。

如果是通屏宽度的元素，使用内边距来确定元素高度（最小高度）和上下外边距来确定宽度。

两种方式

8pt系统实际上主要有两个版本。一是将元素放到8pt删格中（称之为“硬删格”），另一种方式是仅测量元素之间的距离是8pt的多少倍（称之为“软删格”）。

硬删格的要点是将透明的背景切分为前景元素，然后只要关注每个元素的外边距和内边距，并将它们像砖块一样放到栅格上。Material Design（使用4pt删格）就符合这种方法。

硬栅格

软删格的要点是，当用代码编写界面是，不可能真的使用删格，因为程序语言不适用这种结构（恐怕会被丢弃）。因为快速达到高质量、可编程的模型是最优先的，相比需要管理额外层级的硬删格，结构更流畅、轻量的软删格也许更有优势。像iSO这种界面元素没有被删格限制的系统可能更喜欢这种删格版本。

软删格

为什么重要

界面统一

当所有尺寸遵循同一规则，界面自然而然就能更加统一。

减少做决定的次数 = 缩短时间

使用8pt删格就好比在以往每8个尺寸选项中，减少了7个。你减少了无足轻重的东西，那么编码时间也会下降。

多屏设计

无论形式如何，大部分屏幕尺寸至少有一条边可以被8整除（通常不止一条），并且有些平台的设计规范（如 Material Design）本身就是4pt或8pt删格的。

有些屏幕的尺寸很难使用栅格（iPhone 6 的375*667pt），但是解决方式其实非常简单。只需保持原有的内边距和外边距不变，减小每个块元素本身的尺寸来填充多余的空间即可。为了保持栅格的统一，可以有一个元素的尺寸与众不同。基础你的用户可能永远看不到你所用的测量方式。

最常见的屏幕分辨率

如何使用

吸附到网格

几乎每个设计应用程序都有一个“对其删格”选项。如果你使用硬删格方法，这个功能一定会使你的工作更容易。如果的话，请确保“对其删格”功能已开启。

Rem单位和变量

如果你将基本文字尺寸设为16，那么就可以以0.5rem（rem是一种css尺寸单位）为基础构建8pt删格。

如果你不想这么做，或者不喜欢rem单位，你可以使用CSS或预处理器来处理布局，同时保留变量的可维护性。

定义你的栅格

大部分设计工具允许你设置你自己的“大微调”值。我使用一个叫 Nudge.it 的程序，我将我的 Sketch 设计从10改成了8。这个很简单的应用程序能够让你的整个工作流程更加快速容易。

快捷键

许多应用程序都有快捷方式，方便快速微调、修改尺寸并适应栅格。我推荐大家去学一学（尤其是微调和尺寸适应）。

给图标增加框架

图标通常具有不同尺寸，这样才能保持相同的视觉重量。使用统一的框架围绕它们，类似硬删格那样，同时允许它们在框架内自由变化。

放大缩小

如果你一直将页面放大到1600%，你可能会对视觉节奏有些误判。相对的，如果你一直用50%的尺寸看你的页面，你可能会错过重要细节，例如像素拟和（pixel-fitting）。所以要经常调整缩放尺寸以确保你看到了完整的视角。

原文：https://spec.fm/specifics/8-pt-grid