一、網格系統的組成

在深入了解網格的類型和使用準則前，讓我們先來了解一下網格系統中涉及到的一些基本概念，比如列數、內邊距、外邊距等等。

1、列

列(Column)是網格的基礎，用來表示內容放置的區域。每一列的寬度以百分比而不是固定的數值來衡量，這樣面對不同的屏幕尺寸，可以更靈活地進行設計。

日常設計中，最常使用的是12列等寬的網格系統，適用于大多數的頁面和布局設計中。

2、內間距

內間距(Gutter/Padding)是指每列之間的距離，也被叫做水槽。內間距能為頁面提供呼吸空間，避免內容之間過于擁擠。

3、外邊距

邊距(Margins)是列與邊框之間的距離，邊距繞過內容有上、下、左、右四個方向，在設計中我們可以針對每一側設定和更改邊距。

4、字段或模塊

字段或模塊是行和列的交集。這些模塊是頁面的基礎，所有設計元素都將適合網格中矩形卡片創建的這些空間單元。

5、界面設計與網格

如果說網格在過去對于印刷必不可少，那么今天網格在數字世界中仍是不可或缺的。

網格成為開發數字產品的關鍵工具，為在所有設備上提供最佳的用戶體驗。因此，無論屏幕大小如何，設計師都必須能夠在每個屏幕上通過最佳的方式組織內容。

二、如何在設計中使用網格系統？

網格是具有列、內間距和外邊距的結構系統，其目的是幫助設計師組織界面的內容。

內間距的距離越窄，越會向用戶傳達「這些內容屬于同一組」的感覺。

同理，內間距越寬，看起來越像是不同類型的內容。

需要注意的是，內間距的距離不要太寬，或者比每一列的寬度還寬，容易導致內容之間的留白過大，造成視覺瀏覽上的不連貫。

此外，外邊距的間距遵循與內間距相同的規則。可以靈活調整外邊距，以便在內容和屏幕之間留出合適的間隔。

和內間距一樣，屏幕中的外邊距也不能太寬，這樣會壓縮頁面中內容的展示空間，會讓頁面看起來很局促。

三、使用網格設計的四條準則

網格的使用看起來很直觀，但在UX或UI項目中使用網格系統仍有一些需要注意的規則。

1、將元素集中在每一列中

上面說到，在設計中常用到的是12列網格系統。那么12列網格為什么被廣泛使用呢？主要原因在于12列網格更方便擴展不同的布局形式。

▲ 12列網格可以一行排列兩個內容，各占6列網格；一行排列三個內容，各站四個網格；一行排列四個內容，各占3列網格；一行排列六個內容，各占2列網格。

基本上，常用到的頁面布局形式在12列網格中都可以實現。

▲ 在每個內容之間留出足夠的內邊距。這里需要注意的是，內容的兩側要與每一列的邊緣重合，而不是與內邊距重合。

▲ 當內容居中顯示時，要始終在邊緣留出一點空間，防止頁面被內容填充的過于擁擠。

2、不要將列數作為內容填充

在網格系統下，設計應該填充整個內容的寬度，這樣會讓界面看起來更規范。

不要讓左右兩列沒有填充內容，讓列數作為填充，這樣會導致頁面的外邊距不統一，增加后期的開發成本。

3、可以嘗試脫離網格

在設計中，使用從網格中溢出的圖像或元素也是可以的。

例如我們想填充一個全尺寸的背景色或者圖像，只需將圖像拉到網格之外就可以。在網格和邊距的示意下，開發人員也能夠快速理解界面的尺寸信息。

4、注意內容之間的間距

在網格上放置不同的元素時，確保元素之間的左右間距、上下間距都是一致的，這樣會讓整個界面看起來更規范。

最后

除了能夠改善設計、減輕用戶認知負擔外，網格系統還能提升設計效率。有了網格我們可以快速衡量元素的間距、邊距的精度，簡化設計過程。

另外，在規范的網格系統中，界面布局或內容上的修改也會變得更容易。

慢慢來比較快，希望對你有幫助！