學會8pt網格系統，創建超強頁面布局

大家好，我是布萊恩。網格系統在網頁設計中并不少見，但在移動端設計中卻少有人考慮，其實如果能掌握一定的排版布局技巧，制定合理的網格布局規范，設計界面時就可以更高效的產出，減少思考布局的情況。以下是關于網格布局的的分享內容：

在 UI 設計中，網格布局就是一切

好吧，不是一切，別忘了還有顏色的因素，也別忘了還有字體樣式的因素。但如果你把布局網格先做好，你就離搭建出一個更好看且可以正常使用的 UI 界面不遠了。

布局網格如果有一致的、可擴展的間距，可以在設計和開發時幫你消除疑惑。它可以讓你做更少的設計決策，使項目運行得更快。

8pt 網格是網格系統中最常用的一種，讓我在這篇文章中告訴你吧。

究竟什么是點（point）呢？

下文均用 pt 表示

一個 pt 是依據設備的屏幕分辨率測量間距的單位。最簡單的運算解釋就是 1x 屏幕分辨率 1pt = 1px 。

「很久很久以前」，當時的屏幕普遍都是1x分辨率；1pt 等于 1px。然后逐漸出現了視網膜屏（Retina 2x）和超級視網膜屏（Super Retina 3x），計算方法就開始發生改變了。當你為 iPhone X (3x) 屏幕做設計的時候，1pt 就會被每英寸以 3 倍的像素渲染。

舉個例子，如果你有一個 24x24px (1x) 的圖標，當你導出成@2x和@3x的圖片資源時，也就是 48px(2x) 或者是 72px(3x) ，屏幕渲染時它們會分別在視網膜屏和超級視網膜屏下顯示完美。

我一直推薦在 1x 畫板下做設計，然后根據需求導出不同的尺寸 (@2x, @3x 和其他比例)，這可以減少混亂。

為什么是 8pt 呢？

像我在上文提到的一樣，不同的屏幕尺寸和像素密度在持續不斷的增加，這會讓資源產出工作更加復雜。

使用像 8 這個偶數，來定義你設計的界面元素的尺寸，會讓你在適配各種各樣的屏幕更加輕松和一致。

8pt 網格的基本規則是，在你設計的界面元素中，使用 8 的倍數 (8, 16, 24, 32, 40, 48...) 來作為外邊距，內邊距和尺寸的數值。

我在設計 UI 界面時經常會用到 8 的倍數，但在特殊場景時，比如在我要給可顯示范圍有限的屏幕做設計時，我也會用 4pt 。

使用「固定網格」，還是「隨意網格」的方法？

（原文中使用 Hard Grid 和 Soft Grid，直譯成硬網格和軟網格不是很合適）

為了達到設計目的，大部分人會選擇「隨意網格」！

在以前我設計 UI 界面的時候，我也會經常選擇使用「隨意網格」的方法。你只需要測量好各個元素之間是 8pt 的倍數就可以了。

而與之相對的「固定網格」的方法，就是在之前就定義好 8pt 的倍數的固定網格模型里填入元素。但我發現，在搭建界面的時候有點太死板和不切實際了。

圖標與 8pt 網格

當遇到圖標和 8pt 網格的大部分情況下，你會發現大部分圖標尺寸都已經被設計成了 8 的倍數 (16x16, 24x24, 32x32..)

如果你設計的圖標尺寸不是 8 的倍數，就盡量確保你把圖標放入你設計好的控件里，在控件內把圖標縮放到 8 的倍數，這將保證圖標在你設計的UI界面里，展示效果可以保持一致。

文字樣式與 8pt 網格

到使用文字的時候，同時使用文字的 4pt 基線網格方法和布局的 8pt 網格方法，將使你的設計在垂直排布上顯得得更加和諧。

只要將你的文字與 4 的基線網格對齊，就是說要將文字的行高參數定為 4 的倍數(4，8，12，16，20...)

為什么數值是 4 呢？對于我個人而言，我發現在過去使用某些特定字號的時候，使用 8 的倍數會導致文字行間距離得太遠。

在文字中使用 4pt 基線網格可以讓你的設計更精細，帶來更好的效果。

最后

希望以上對 8pt 網格的簡要概述讓你在布局的時候更加自信，更一致，少一點設計疑問，少一點做設計決策。

試試 8pt 吧，你的設計看起來會好看 10 倍的。

更多8pt的使用技巧：

更多網格系統的設計技巧：

歡迎關注作者微信公眾號：「布萊恩學設計」