8 點(diǎn)網(wǎng)格

使用 8 的倍數(shù)來定義元素的尺寸、填充和邊距。

在你開始之前

本指南旨在幫助設(shè)計(jì)師快速且一致地布置 UI。它對(duì)于設(shè)計(jì)具有固定約束的移動(dòng)應(yīng)用程序 UI 尤其有用，但我發(fā)現(xiàn)它對(duì)于響應(yīng)式網(wǎng)頁設(shè)計(jì)也很有用。

與許多設(shè)計(jì)指南一樣，這些示例在設(shè)計(jì)時(shí)可能比獨(dú)立閱讀更有幫助。

入門

代碼 > 模型

設(shè)計(jì)應(yīng)用程序和原型制作工具可讓您創(chuàng)建 UI 外觀的奇妙愿景。但在數(shù)字產(chǎn)品設(shè)計(jì)方面，模型或原型的唯一目的是向利益相關(guān)者和開發(fā)人員清楚地傳達(dá)建議的解決方案。最后，只有開發(fā)人員可以在代碼中（與資產(chǎn)結(jié)合）重現(xiàn)的內(nèi)容才能投入生產(chǎn)。

現(xiàn)在，您可以在設(shè)計(jì)工具中創(chuàng)建的幾乎任何東西都可以在代碼中創(chuàng)建，但是有幾個(gè)原因——從可用性到發(fā)布時(shí)間表到性能問題——構(gòu)建設(shè)計(jì)可能不切實(shí)際。

最重要的是您的設(shè)計(jì)在用戶設(shè)備上的代碼中如何表現(xiàn)，因此盡可能優(yōu)先減少構(gòu)思和編程之間的時(shí)間，而不是在 Sketch 或 Photoshop 中的完美布局。

盒子模型

盒模型是一種描述對(duì)象尺寸和間距的方法。

它由 4 個(gè)組件組成：邊框、邊距、內(nèi)邊距和元素本身的尺寸。

邊框：圍繞元素邊緣的描邊粗細(xì)。

大多數(shù)設(shè)計(jì)工具不允許這影響整體間距和尺寸。

Padding：元素邊界與其子元素邊界之間的空間

邊距：元素邊界與相鄰對(duì)象之間的空間

什么是點(diǎn)？

點(diǎn) (pt) 是取決于屏幕分辨率的空間度量。最簡(jiǎn)單的解釋是，在“1x”分辨率（或@1x）下，1pt = 1px。

在“2x”分辨率（@2x）下，1pt = 4px 因?yàn)榉直媛试?X 軸和 Y 軸上翻倍，使其寬度為 2px，高度為 2px。

在“3x”分辨率（@3x）下，1pt = 9px（3px x 3px）等等。

@1x

請(qǐng)注意，這里的一切都是“@1x”設(shè)計(jì)的。@2x、@3x 和所有其他變體的資產(chǎn)可以更容易地從 @1x 資產(chǎn)中派生，而不是從以其倍數(shù)創(chuàng)建的設(shè)計(jì)中派生出來。

例如，要將干凈的資源從 @2x 設(shè)計(jì)轉(zhuǎn)換為 @3x 設(shè)計(jì)（假設(shè)線條粗細(xì)為偶數(shù)），您需要將圖稿縮放至其原始尺寸的 50%（降至 @1x），然后將生成的藝術(shù)品縮放到 300%。

另一方面，@1x 設(shè)計(jì)可以輕松地縮放到任何整數(shù)倍 - @2x、@3x、@4x 等。

通過在每個(gè)單獨(dú)的分辨率下工作，可以為圖標(biāo)和精美資產(chǎn)添加更多細(xì)節(jié)，但這樣做的機(jī)會(huì)相對(duì)較少。在大多數(shù)情況下，為了速度和方便起見，使用 @1x 是理想的。

使用像素網(wǎng)格

您創(chuàng)建的每個(gè) UI 元素都應(yīng)與像素網(wǎng)格對(duì)齊。這是一個(gè)稱為像素?cái)M合的概念，它確保您的所有元素在用戶設(shè)備上都顯得清晰且定義明確。

文本在這里有點(diǎn)異常，因?yàn)樽屇难劬η宄亻喿x字母的獨(dú)特指標(biāo)需要一點(diǎn)點(diǎn)抗鋸齒，這會(huì)使其他形狀變得模糊。因此，不要擔(dān)心字母的每個(gè)點(diǎn)都與像素網(wǎng)格對(duì)齊。

文本元素

像文本這樣的內(nèi)聯(lián)元素幾乎總是給定界面中最重要的部分，但是像文本大小和行高這樣的東西在保持垂直節(jié)奏和易讀性的同時(shí)并不總是像其他元素一樣容易地符合相同的 UI 網(wǎng)格。

為您的文本設(shè)定基線是在您的設(shè)計(jì)中發(fā)展垂直一致性的一個(gè)很好的工具。通過將每行文本的基線定位到等間距的行上，您可以輕松地將所有 UI 元素置于和諧的垂直節(jié)奏中。

我喜歡將我的 8pt UI 網(wǎng)格與 4pt 基線網(wǎng)格結(jié)合起來。這種配對(duì)使數(shù)學(xué)保持簡(jiǎn)單明了，同時(shí)提供了足夠的選項(xiàng)來適應(yīng)各種文本樣式。

大多數(shù)平臺(tái)都有一些基本的指導(dǎo)原則，但打破默認(rèn)字體可能會(huì)導(dǎo)致獨(dú)特的結(jié)果，所以在布局文本時(shí)要謹(jǐn)慎行事，然后在布局其他元素時(shí)將其用作基礎(chǔ)。

8 點(diǎn)網(wǎng)格

基本原理

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

當(dāng)塊元素的唯一內(nèi)容是文本（例如按鈕）時(shí)，將文本設(shè)置為與 UI 其余部分和/或特定平臺(tái)一致的大小，然后使用填充來確定塊元素的大小。在全寬元素的情況下，使用填充來確定高度并使用一致的水平邊距來確定寬度。

兩種方法

這個(gè)系統(tǒng)實(shí)際上有兩個(gè)突出的版本。一種將元素放置到以 8 點(diǎn)增量定義的系統(tǒng)顯示網(wǎng)格中（我們將其稱為“硬網(wǎng)格”方法），另一種僅測(cè)量單個(gè)元素之間的 8 點(diǎn)增量（我們將其稱為“軟網(wǎng)格”方法）網(wǎng)格”方法）。

Hard Grid 方法的主要論點(diǎn)是，通過使用額外的透明背景元素，然后將它們分組為一小組前景元素，您可以在每個(gè)元素的基礎(chǔ)上跟蹤邊距和填充，然后將這些容器捕捉到網(wǎng)格，如磚塊。Material Design - 一切都已經(jīng)設(shè)計(jì)為 4pt 網(wǎng)格 - 自然地符合這種方法。

Soft Grid 方法的論點(diǎn)是，當(dāng)需要編寫接口時(shí)，使用實(shí)際的網(wǎng)格是無關(guān)緊要的，因?yàn)榫幊陶Z言不使用那種網(wǎng)格結(jié)構(gòu)——它只會(huì)被扔掉。當(dāng)您優(yōu)先考慮獲得高質(zhì)量、可編程的模型集的速度時(shí)，繞過 Hard Grid 管理附加層的額外開銷，而支持 Soft Grid 更流暢、最小的結(jié)構(gòu)可能是一個(gè)優(yōu)勢(shì)。這也可能對(duì) iOS 更有利，因?yàn)?iOS 中許多系統(tǒng) UI 元素不是由均勻網(wǎng)格定義的。

為什么重要

一致的用戶界面

當(dāng)您的所有測(cè)量都遵循相同的規(guī)則時(shí)，您會(huì)自動(dòng)獲得更一致的 UI。

更少的決定 = 更少的時(shí)間

通過刪除每 8 個(gè)間距選項(xiàng)中的 7 個(gè)，您可以減少可用的擺弄量，從而降低編碼速度。

多平臺(tái)設(shè)計(jì)

不管外形如何，最流行的屏幕尺寸至少在一個(gè)軸上可以被 8 整除——通常是兩個(gè)。此外，一些平臺(tái)的樣式指南（如 Material Design）特別要求使用 4 或 8 點(diǎn)的網(wǎng)格，使該系統(tǒng)非常適合。

有些屏幕的尺寸顯然難以調(diào)整（iPhone 6 為 375 x 667 點(diǎn)），但解決方案實(shí)際上非常簡(jiǎn)單。保持填充和邊距尺寸一致，并減少/增加塊元素的大小以填充剩余空間。如果保持網(wǎng)格一致，則可以使用大小奇怪的元素。請(qǐng)記住，您的用戶可能永遠(yuǎn)不會(huì)看到您使用的實(shí)際測(cè)量值。

實(shí)施技巧

對(duì)齊網(wǎng)格

幾乎每個(gè)設(shè)計(jì)應(yīng)用程序都有一個(gè)“對(duì)齊網(wǎng)格”選項(xiàng)。如果您使用硬網(wǎng)格方法，它肯定會(huì)讓您的工作更輕松。無論如何，您需要確保啟用了“對(duì)齊像素網(wǎng)格”選項(xiàng)（如果可用）。

資源和變量

如果將根文本大小設(shè)置為 16，則可以輕松使用 .5rem 增量在 8 點(diǎn)網(wǎng)格上構(gòu)建布局。

如果您不想這樣做，或者不喜歡 rems，您可以使用 CSS 或預(yù)處理器間距變量來處理布局，同時(shí)保留變量提供的額外可維護(hù)性值。

快捷方式

許多應(yīng)用程序都有快捷方式，可讓您動(dòng)態(tài)微調(diào)、調(diào)整大小和調(diào)整增量。我強(qiáng)烈建議學(xué)習(xí)它們 - 特別是輕推和尺寸調(diào)整。

框架你的圖標(biāo)

圖標(biāo)通常需要不同的大小以保持相同的視覺重量。在它們周圍放置一個(gè)框架，類似于硬網(wǎng)格定義元素大小的方式，這是一種保持測(cè)量一致的簡(jiǎn)單方法，同時(shí)允許在定義的參數(shù)內(nèi)發(fā)生變化。

放大，縮小

如果你把所有時(shí)間都放大到 1600%，你可能會(huì)誤判你的垂直節(jié)奏。相反，如果您總是以 50% 的比例查看 UI，則可能會(huì)錯(cuò)過重要的細(xì)節(jié)，例如像素?cái)M合。經(jīng)常調(diào)整您的變焦以確保您看到的是整個(gè)畫面。