此文意在幫助設計師快速而統一地完成界面布局。尤其對尺寸固定的移動界面有幫助，但對響應式web設計也有幫助。與一般的設計指南相比，此文更適合一邊設計一邊閱讀。

1. 設計入門

代碼>原型

設計軟件和原型工具讓你創造界面看起來最好的樣子。但是對于數碼產品，原型的目的是向老板和開發者進行清晰的方案溝通。最后，只有開發者的代碼，能夠讓這個方案成為產品。

現在，幾乎你在設計工具上做的所有東西都可以用代碼創造出來，但是總有些因素讓設計方案很難實施（可能是可用性、加載時間、展示效果等）。

不論如何，最重要的是你的設計能通過代碼在用戶的設備商運行。所以應該優先考慮在使用Sketch和Photoshop時，盡可能縮短在思考方案與編程之間的時間。

Box模型

Box模型是一種描述物體尺寸和空間的形式，其包含四種信息：邊框、外邊距、內邊距和元素本身的尺寸。

邊框

元素邊邊緣輪廓線的粗細。大部分的設計工具不允許其影響整體的空間和尺寸。

內邊距

元素與其包含的子元素之間的空間。

外邊距

元素邊界與其相鄰物體之間的空間。

什么是pt

pt（point的縮寫）是一種與屏幕分辨率相關的空間度量單位。最簡單的解釋就是在“1×（1倍）”分辨率下，1pt=1px。

在“2×（2倍）”分辨率下，1pt=4px，因為屏幕分辨率是X和Y坐標相乘的結果。

在“3×（3倍）”分辨率下，1pt=9px，如此類推。

1倍分辨率（@1×）

請注意，這里的所有東西都是以1倍分辨率設計的。因為其它倍數的分辨率可以很容易地從1倍分辨率計算獲得。

例如，如果想要從2倍分辨率轉化到3倍分辨率（假設線條的粗細是偶數），你需要將設計稿縮小到原來的50%（來獲得1倍分辨率），然后再擴大到300%。

1倍分辨率設計則能夠很容易地被放大到任何倍數。

可以在各個分辨率分別添加圖標等細節，但是這種做法并不常見。大部分情況下，為了速度和方便，在1倍分辨率工作是最理想的。

使用像素柵格

你創建的每個界面元素都應該對齊像素柵格。這個概念一般被成為像素擬合，它確保所有元素在用戶設備上顯示清晰明確。

文本在這方面是個例外，為了能夠清晰閱讀需要一些反鋸齒效果來讓形狀有一定模糊度。所以不要擔心文字的每個點都對其到柵格上。

文本元素

像文本這樣的段落元素幾乎永遠都是界面中最重要的部分，但是像文字尺寸和行高這些東西卻不像其它元素一樣，能夠在保持縱向節奏和可讀性的情況下，輕易地遵從界面柵格。

使用基線確定文字底部是提高縱向統一性的好方法。通過排布每行文本的基線，可以很容易地讓所有的界面元素處于和諧的縱向節奏中。

我喜歡將我的8pt界面柵格和4pt基線柵格合并使用。這種配對保持了數學上的簡單清晰，又提供了足夠的選擇余地來適應多種文字風格。

大部分平臺（Android、IOS等）的設計指南有基礎原則，但如果設計師從默認字體開始打破一些東西，能夠獲得更加獨特的結果。所以可以在排布文本時做一些處理，然后將之做外排布其它元素的基礎。

?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），但是解決方式其實非常簡單。只需保持原有的內邊距和外邊距不變，減小每個塊元素本身的尺寸來填充多余的空間即可。為了保持柵格的統一，可以有一個元素的尺寸與眾不同?；A你的用戶可能永遠看不到你所用的測量方式。

最常見的屏幕分辨率

如何使用

吸附到網格

幾乎每個設計應用程序都有一個“對其刪格”選項。如果你使用硬刪格方法，這個功能一定會使你的工作更容易。如果的話，請確?！皩ζ鋭h格”功能已開啟。

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

譯者：雨涵_Zoe

譯文地址：http://www.jianshu.com/p/80c1ae9ffe84

本文由 @雨涵_Zoe 授權發布于人人都是產品經理，未經作者許可，禁止轉載。