此文意在幫助設(shè)計(jì)師快速而統(tǒng)一地完成界面布局。尤其對(duì)尺寸固定的移動(dòng)界面有幫助，但對(duì)響應(yīng)式web設(shè)計(jì)也有幫助。與一般的設(shè)計(jì)指南相比，此文更適合一邊設(shè)計(jì)一邊閱讀。

1. 設(shè)計(jì)入門

代碼>原型

設(shè)計(jì)軟件和原型工具讓你創(chuàng)造界面看起來最好的樣子。但是對(duì)于數(shù)碼產(chǎn)品，原型的目的是向老板和開發(fā)者進(jìn)行清晰的方案溝通。最后，只有開發(fā)者的代碼，能夠讓這個(gè)方案成為產(chǎn)品。

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

不論如何，最重要的是你的設(shè)計(jì)能通過代碼在用戶的設(shè)備商運(yùn)行。所以應(yīng)該優(yōu)先考慮在使用Sketch和Photoshop時(shí)，盡可能縮短在思考方案與編程之間的時(shí)間。

Box模型

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

邊框

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

內(nèi)邊距

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

外邊距

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

什么是pt

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

在“2×（2倍）”分辨率下，1pt=4px，因?yàn)槠聊环直媛适荴和Y坐標(biāo)相乘的結(jié)果。

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

1倍分辨率（@1×）

請(qǐng)注意，這里的所有東西都是以1倍分辨率設(shè)計(jì)的。因?yàn)槠渌稊?shù)的分辨率可以很容易地從1倍分辨率計(jì)算獲得。

例如，如果想要從2倍分辨率轉(zhuǎn)化到3倍分辨率（假設(shè)線條的粗細(xì)是偶數(shù)），你需要將設(shè)計(jì)稿縮小到原來的50%（來獲得1倍分辨率），然后再擴(kuò)大到300%。

1倍分辨率設(shè)計(jì)則能夠很容易地被放大到任何倍數(shù)。

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

使用像素柵格

你創(chuàng)建的每個(gè)界面元素都應(yīng)該對(duì)齊像素柵格。這個(gè)概念一般被成為像素?cái)M合，它確保所有元素在用戶設(shè)備上顯示清晰明確。

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

文本元素

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

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

我喜歡將我的8pt界面柵格和4pt基線柵格合并使用。這種配對(duì)保持了數(shù)學(xué)上的簡(jiǎn)單清晰，又提供了足夠的選擇余地來適應(yīng)多種文字風(fēng)格。

大部分平臺(tái)（Android、IOS等）的設(shè)計(jì)指南有基礎(chǔ)原則，但如果設(shè)計(jì)師從默認(rèn)字體開始打破一些東西，能夠獲得更加獨(dú)特的結(jié)果。所以可以在排布文本時(shí)做一些處理，然后將之做外排布其它元素的基礎(chǔ)。

?2. 如何使用

8pt柵格

基礎(chǔ)理論

使用8的倍數(shù)來定義塊元素（block elements）和和內(nèi)聯(lián)元素（inline elements）的尺寸、填充和邊距。

當(dāng)塊元素的唯一內(nèi)容是文本時(shí)（如按鈕），通常應(yīng)將文本尺寸設(shè)置為與界面其它部分/特定平臺(tái)規(guī)范一致。

如果是通屏寬度的元素，使用內(nèi)邊距來確定元素高度（最小高度）和上下外邊距來確定寬度。

兩種方式

8pt系統(tǒng)實(shí)際上主要有兩個(gè)版本：一是將元素放到8pt刪格中（稱之為“硬刪格”），另一種方式是僅測(cè)量元素之間的距離是8pt的多少倍（稱之為“軟刪格”）。

硬刪格的要點(diǎn)是將透明的背景切分為前景元素，然后只要關(guān)注每個(gè)元素的外邊距和內(nèi)邊距，并將它們像磚塊一樣放到柵格上。Material Design（使用4pt刪格）就符合這種方法。

硬柵格

軟刪格的要點(diǎn)是，當(dāng)用代碼編寫界面是，不可能真的使用刪格，因?yàn)槌绦蛘Z言不適用這種結(jié)構(gòu)（恐怕會(huì)被丟棄）。因?yàn)榭焖龠_(dá)到高質(zhì)量、可編程的模型是最優(yōu)先的，相比需要管理額外層級(jí)的硬刪格，結(jié)構(gòu)更流暢、輕量的軟刪格也許更有優(yōu)勢(shì)。像iSO這種界面元素沒有被刪格限制的系統(tǒng)可能更喜歡這種刪格版本。

軟刪格

為什么重要

界面統(tǒng)一

當(dāng)所有尺寸遵循同一規(guī)則，界面自然而然就能更加統(tǒng)一。

減少做決定的次數(shù) = 縮短時(shí)間

使用8pt刪格就好比在以往每8個(gè)尺寸選項(xiàng)中，減少了7個(gè)。你減少了無足輕重的東西，那么編碼時(shí)間也會(huì)下降。

多屏設(shè)計(jì)

無論形式如何，大部分屏幕尺寸至少有一條邊可以被8整除（通常不止一條），并且有些平臺(tái)的設(shè)計(jì)規(guī)范（如 Material Design）本身就是4pt或8pt刪格的。

有些屏幕的尺寸很難使用柵格（iPhone 6 的375*667pt），但是解決方式其實(shí)非常簡(jiǎn)單。只需保持原有的內(nèi)邊距和外邊距不變，減小每個(gè)塊元素本身的尺寸來填充多余的空間即可。為了保持柵格的統(tǒng)一，可以有一個(gè)元素的尺寸與眾不同?；A(chǔ)你的用戶可能永遠(yuǎn)看不到你所用的測(cè)量方式。

最常見的屏幕分辨率

如何使用

吸附到網(wǎng)格

幾乎每個(gè)設(shè)計(jì)應(yīng)用程序都有一個(gè)“對(duì)其刪格”選項(xiàng)。如果你使用硬刪格方法，這個(gè)功能一定會(huì)使你的工作更容易。如果的話，請(qǐng)確?！皩?duì)其刪格”功能已開啟。

Rem單位和變量

如果你將基本文字尺寸設(shè)為16，那么就可以以0.5rem（rem是一種css尺寸單位）為基礎(chǔ)構(gòu)建8pt刪格。

如果你不想這么做，或者不喜歡rem單位，你可以使用CSS或預(yù)處理器來處理布局，同時(shí)保留變量的可維護(hù)性。

定義你的柵格

大部分設(shè)計(jì)工具允許你設(shè)置你自己的“大微調(diào)”值。我使用一個(gè)叫 Nudge.it 的程序，我將我的 Sketch 設(shè)計(jì)從10改成了8。這個(gè)很簡(jiǎn)單的應(yīng)用程序能夠讓你的整個(gè)工作流程更加快速容易。

快捷鍵

許多應(yīng)用程序都有快捷方式，方便快速微調(diào)、修改尺寸并適應(yīng)柵格。我推薦大家去學(xué)一學(xué)（尤其是微調(diào)和尺寸適應(yīng)）。

給圖標(biāo)增加框架

圖標(biāo)通常具有不同尺寸，這樣才能保持相同的視覺重量。使用統(tǒng)一的框架圍繞它們，類似硬刪格那樣，同時(shí)允許它們?cè)诳蚣軆?nèi)自由變化。

放大縮小

如果你一直將頁面放大到1600%，你可能會(huì)對(duì)視覺節(jié)奏有些誤判。相對(duì)的，如果你一直用50%的尺寸看你的頁面，你可能會(huì)錯(cuò)過重要細(xì)節(jié)，例如像素?cái)M和（pixel-fitting）。所以要經(jīng)常調(diào)整縮放尺寸以確保你看到了完整的視角。

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

譯者：雨涵_Zoe

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

本文由 @雨涵_Zoe 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。