[譯文] 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）。所以要經常調整縮放尺寸以確保你看到了完整的視角。

原文：Spec

轉發此文請註明來源和作者，並告知本人