过去的一年里，我和身边很多宝宝都经历了我们人生的 Quarter Life Crisis。 如果你没有这种经历——那么恭喜，要么你还很年轻，要么…… 总之你很幸运。如果你也有过或正在经历这样一个阶段，那么或许我目前尝试在做的一些事情，能为我们搭起一只友谊的小船。
如果你硬要问人生危机跟网格啥关系，那我也只好给你发俩飞吻了😘😘
• • •
😈👶💯📚
第 1 科：如何与设计师交朋友
*答案见文末
注：此文为 @恶童百科 译文，原文 "Specifics 001: The 8-Point Grid"，作者为 Bryn Jackson。本文图片均来自原作者，译文仅作学习用途。转载烦请注明原文及作者：）
恶童译文 • 8pt 网格基本指南 (The 8-Point Grid)
如何使用本指南
本指南旨在帮助设计师更快、更系统地布局界面。它对于有固定约束的移动设备 app 界面尤其有效，而我自己认为它对响应式网页设计也有帮助。
和多数设计规范一样，相比纯粹阅读，在实践操作中运用以下范例会更有帮助。
准备阶段
代码实现比设计原型更重要
Code > Mockups
如今的设计软件和原型工具都能让你创造出任何狂拽炫酷吊炸天的 UI。但是，对于产品设计来说，一个设计或原型的唯一目的应该是向股东和程序员清楚地阐述一个解决方案。毕竟，只有那些能被程序员用代码和素材重现的部分才能成为最终的产品。
当然，如今你也可以用代码实现几乎任何你能设计出来的东西，但由于可用性、发布周期、性能问题等种种原因，一个设计仍然有可能无法被实现。
然而实际上，你的设计在用户设备上表现如何，这才是最重要的。所以，应该尽可能多地去减短由构思到开发之间的时间，而非一味追求在 Sketch 或 Photoshop 里做出一个完美的 UI。
什么是 Points?
What are Points
一个 point (pt) 是一个用来在不同分辨率显示屏幕上丈量间距的单位。🙄️ OK 说人话：在 1x 分辨率下 (@1x)， 1pt = 1px。
在 2x 分辨率下， 1pt ＝ 4px。这是因为 X 和 Y 轴上的分辨率都翻倍，也就是长和宽都翻倍，面积就是4倍。
在 3x 分辨率下， 1pt ＝ 3px*3px = 9px。以此类推。
@1x
请留意，这里列举的素材都以 @1x 设计，并且相较 @2x，@3x，我们更容易由 @1x 的素材导出 @2x、@3x 等倍数分辨率的素材。
举个栗子🌰 ：假设要从一个 @2x 的线条粗细为偶数的设计稿来生成完美像素的 @3x 的素材，那么你需要首先将原设计稿缩小到 50%，即 @1x，再将缩小后的设计稿放大到 300% 来获得 @3x 的素材。
也就是说，@1x 的设计更能轻易通过放大来获得完美像素的倍数分辨率的素材。
当然，你可以给每个分辨率都重画一遍 icon 以便丰富细节，但这种机会并不常有。大多数情况下，用 @1x 设计是方便快捷的理想选择。
盒子模型
The Box Model
盒子模型是一种描述物件尺寸和间距的方法。它由4个部分组成：边框(border)，边界(margin)，边距(padding)，和元素自身的尺寸(dimensions)。
边框 border ：元素边缘描边的厚度。绝大多数设计工具选择忽略边框厚度对整体尺寸和间距的影响。
内边距 padding ：元素和其子元素之间的间距。（恶童注：例如文字和边框的间距。）
外边距 margin ：元素和相邻物件的间距。（恶童注：外边距为元素周围生成额外的空白区，此区域通常是指其他元素不能出现且父元素背景可见的区域。）
在现代设计当中，所有物件都有一个边框。它们绝大多数是以这个边框为基础来度量间距和尺寸的。因此，接下来我们会边框结合盒子模型来描述设计当中的定位。
像素网格的使用
Using the Pixel Grid
你设计的每一个 UI 元素都应当对齐像素网格。这其实就是所谓的 pixel-fitting，它保证这个元素能在用户的设备上面清晰准确。
文字则是另有一套独特的渲染方式，它刚好相反地是通过消除锯齿 (anti-aliasing) 的方法去模糊某些元素边缘，从而让文字用肉眼看上去是清晰准确的。因此，你大可不必斤斤计较是否每个文字都都对齐像素网格啦。
文本元素
Text Elements
像文本这样的内嵌元素常常是一个界面里面最最重要的组成部分，然而，正是这些内嵌元素的变量 –– 如字体大小、行高等 –– 往往较难和其他元素顺应同一 UI 网格以保证纵向节奏及易读性。
文本基线的应用会非常有利于为你的设计建立纵向一致性。你可以通过将每一行文字的文本基线都对齐一组均匀间隔线，来达到文本元素和其他元素整体上和谐的纵向节奏。
我喜欢将 8pt UI 网格和一个 4pt 基线网格结合起来用。这个组合既保证了整体网格系统的简单和干净，又能为各种文本样式提供足够多的选择。
许多平台都一些基本的设计指导原则，然而当你修改默认字体时常有意料不到的结果的出现。因此，谨慎地布局你的文字，然后再用它作为基础去布局其他的元素。
8pt 网格
基本原则
The Basic Principle
简单来说就一条，无论是块元素的大小、内边距、边框还是内嵌元素，都用8的倍数去定义。
对像按钮这种只有文本的块元素，文字大小可以跟随这个平台的其他元素设置，然后用内边距来定义块元素的大小。如果是全宽元素，则可以用内边距去控制高度，以及一个统一的水平外边距来控制宽度。
两种方法
Two Methods
这个系统目前主要有两个版本。其中一个版本是将元素逐一放置在一个以 8pt 为单位的系统显示网格上，我们称之为硬性网格。另一个版本则仅仅是用 8pt 的倍数去度量元素间距，我们称之为软性网格。
关于硬性网格，一个主要论据是，通过给不同元素增添透明的背景网格，并创建小群组使之成为前景元素，你可以轻而易举地以元素为单位来追踪它们的内外边距，还可以像砌砖头一样去堆砌容器。而以 4pt 网格为基础来设计的 Material Design 自然而然是完美适配硬性网格的。
而软性网格的一个主要论据则是，当你开始用程序实现一个界面时，由于网格系统并不适用于编程语言，于是它在这失去了意义 –– 并会被理所当然地扔到一边。当你的首要任务是创造一套高质量、可实现的设计稿时，绕开硬性网格繁复的图层管理，采用软性网格流动、简约的结构，会对项目有很大帮助。它同时也对 iOS 项目更有利，因为 iOS 的许多系统 UI 元素都不是基于一个均匀的网格来设计的。
为什么重要？
统一的UI
Consistent UI
显而易见地，当你使用同一标准去度量所有元素的时候，你的 UI 自然会更加统一。
更少的决策，更高的效率
Fewer Decisions = Less Time
以边距为例，不难想象，当你排除了众多不一定靠谱的边距选项的时候，你也避免了在那些选项之间摇摆不定浪费时间的可能性，既而缩短了你用程序实现它们的时间。
多平台设计
Multi-platform Design
绝大多数的屏幕尺寸 –– 不论高矮胖瘦 –– 都能至少在一个轴线上被 8 整除（当然，通常是两个轴线都能整除的）。此外，一些平台的设计规范（例如 Material Design）还特别呼吁大家使用 4pt 或 8pt 网格，这更使它成为天作之合。
有一些屏幕尺寸则明显比较难搞（聪明的你一定知道我在说拥有 375 x 667 points 这种神经病一般分辨率的 iPhone 6 🙄️ ），不过咱也有招治它。你可以保持块元素的内外边距不变，然后通过增减块元素的大小来让它刚刚填满多余的空间。不必担心那些奇怪大小的元素，只要它们都跟从网格。记住，你的用户恐怕这辈子也不太可能看到你具体用了什么网格来度量。
实战小贴士
对齐网格
Snap To Grid
几乎所有的设计软件都有 “Snap to Grid” 这个选项。如果你正在使用硬性网格，那么勾选它会另到你的工作轻松很多。然而无论如何，当有 “Snap to Pixel Grid” 这个选项的时候，切记要勾选它。
REMs 及变量
REMs & Variables
如果你的根元素文字大小为16，那么你可以很容易地以 .5rem 为增量，在 8pt 网格上创建布局。
当然，如果你不想那么做，或是纯粹用不惯 rem，那你也可以用 CSS 或是预处理器间距变量来搞定布局，同时保有变量带来的额外的可维护性。
建立你的网格
Define Your Grid
绝大多数设计软件也都让你调整你的 “大微调” 值（恶童注：通常 “小微调” 为1个单位，而 “大微调” 为10个单位）。我用 Nudg.it 这个 app 将 Sketch 的 “大微调” 由10改成了8。这个 app 非常简单却可以让你的工作流程大幅简化，同时工作效率大幅增高。
快捷键
Shortcuts
许多软件都有快捷键，让你随时随地对元素进行微调、改大小、或是调整增量。我强烈建议大家学习这些快捷键 –– 尤其是微调和改大小的快捷键。
给 icon 添加外框
Frame Your Icons
我们经常需要将一组 icon 调整成不同大小以得到同样的视觉权重。给 icon 添加外框就好比用硬性网格来元素大小，它是一个保证度量标准统一简单方法，而同时它也允许在参数一定的情况下的变化。
放大，缩小
Zoom In, Zoom Out
如果你全程将画布方法至1600%，那么你很有可能会在纵向节奏上判断错误。反过来，如果你一直以50%来检视 UI，那你大概会忽视很多细节问题，例如 pixel-fitting。别忘了经常地调整缩放来保证你既窥其全貌、又不遗漏任何细节。
*说到这里，你一定会问，究竟要怎样才能和设计师交朋友？聪明的你一定猜到了其实我也不知道。不如就将此文转给你身边的设计师，让TA自己来告诉你答案：）
作者 Bryn Jackson，Twitter @uberbryn。
原文链接：http://spec.fm/specifics/8-pt-grid
译者 Paprika Xu，Twitter @paprikaxu。
译文链接：http://www.paprikaxu.com/8point-grid （👇 点击『阅读原文』可抵达）
🙅 处女翻，多拍金砖💰
不用我教你也懂得长按👆图片扫码关注的啦
p.s.
恶童是一些真实的人为了在真实的人生里探索『自我边界』、『舒适圈』以及『冒险』而创造的一次实验。说白了就是东搞搞西搞搞，完了交流感想。开篇是一片译文，以后也还会有其他领域、话题的译文。但我们并非译林。抛砖引玉，形式只是形式。
p.p.s.
恶童终于出街了，宝宝做好了阅读量为1的心理准备。但如果你一路看到了这里，那你应该是真(挺)爱(闲)。不如发条微信过来，告诉本宝你的意见，谁知道本宝回不回呢。（一定回）。
