4種常見的UI網格系統，一篇幫你搞清楚 ?

Sponsor

界面設計中的網格是一種對齊工具，它由一些橫向和縱向的線組成。網格可以幫助設計師對齊圖形、文字和圖片，建立這些內容的秩序和規則，最終保證設計一致性。網格不僅可以幫助規劃內容和保持頁面一致性，還可以幫助設計師規劃頁面的留白，留出足夠的負空間，使得頁面具有呼吸感。在界面設計中，網格的類型有基線網格、手稿型網格和模塊化網格等。

看一下這個網格是什么？

列寬

列寬是網格系統中的寬度，用來幫助我們定義內容寬度和布局的垂直部分，在界面設計中，網格通常由多個列組成，每個列都有不同的寬度和比例，以便更好地展示和組織頁面內容。

在網格系統中，列寬通常以百分比或像素為單位進行定義。設計師可以根據需要調整每個列的寬度，以便更好地適應不同的屏幕尺寸和設備類型。通過使用網格系統，可以更好地控制頁面布局和間距，從而使頁面更加整齊、清晰易讀。同時，網格系統還可以幫助設計師提高工作效率和減少出錯率。

水槽

是指列與列之間的空白區域，也稱為外邊距或外水槽。水槽可以幫助控制頁面布局和間距，使得頁面更加整齊、清晰易讀。同時，水槽還可以用來設置內容的對齊方式和填充。在某些布局中，設計師可以使用水槽來控制列之間的間距和平衡布局。

在網格系統中，水槽的寬度通常與列寬相關。有些系統會隨著設備寬度的增加而增加水槽的寬度，但也可以保持固定。水槽可以用來容納內容的裝飾元素，如邊框、背景色、圖片等，同時也可以用來分隔內容區域和頁面的其他區域。

邊距

在網格系統中，邊距是指頁面內容與瀏覽器窗口邊緣之間的空白區域，也稱為外邊距或外部水槽。邊距可以幫助控制頁面布局和間距，使得頁面更加整齊、清晰易讀。通過調整邊距大小，可以更好地控制頁面內容與瀏覽器窗口之間的距離，從而更好地適應不同的屏幕尺寸和設備類型。

在網格系統中，邊距通常以像素、百分比或自動等方式進行設置。設計師可以根據需要調整邊距大小，以便更好地適應不同的屏幕尺寸和設備類型。同時，邊距還可以用來設置內容的對齊方式和填充。在某些布局中，設計師可以使用邊距來控制內容區域和頁面的其他區域之間的間距。

分別在 Web、平板和移動屏幕上的 12 列、8 列和 4 列網格（Figma）

現在，一般來說，網站上的網格有 12 列、24列，平板電腦上有 8 列、12列，而手機上有 4 列、6列，但當然可以根據要求和設計師的不同而有所不同。設計中沒有什么是固定的??！

不同的UI網格系統示例

1. 移動界面4列柵格

列網格布局中的低保真線框 (Figma)

網格系統的設定（使用軟件：Figma)

2.基線網格

基線網格是排版中常用的一種對齊方式，它可以使多個段落根據基線進行對齊?；€網格能夠覆蓋整個跨頁，但是不能為主頁指定網格?；€網格與Word中的網格線基本相似，都是用來對齊文本的輔助工具。在排版時，設計師可以根據需要將文本對齊到基線網格，以便更好地控制文本的間距和布局。

Figma 中的基線網格（左），基線網格中的書頁（右）

在 Figma中設置基線網格

設置高度為 8 px 的基線網格 (Figma)

3.模塊化網格

模塊化網格是一種布局，它將內容分成單獨的模塊，這些模塊位于網格中。這種布局與傳統的網格布局不同，因為每個模塊的大小和形狀都是相同的，從而可以創建一個完美的網格設計。這種布局通常被稱為完美的網格設計。

在模塊化網格布局中，每個模塊將整齊地堆疊在另一個模塊的頂部，并水平地坐在另一個模塊旁邊，以創建一致的設計模式。這種布局可以帶來許多優點，包括響應迅速、產品頁面設計、易于使用等。

值得注意的是，在使用模塊化網格布局時，應該注意網格的大小、每個模塊的大小以及負空間的使用，以確保設計的一致性和美觀性。此外，設計師應該利用創造性的技巧來增加模塊化網格的視覺趣味性，以吸引用戶的注意力。

模塊化網格（Figma）

靈活的模塊化網格

排列在網格上的內容（左），移除網格后的內容（右）（Figma）

如您所見，我一次使用 2 或 3 個模塊的組合來為此頁面創建“卡片”。

現在，在 Figma 中設置模塊化網格

在 figma 中設置模塊化網格

落實在產品表現上：

4.分層網格

分層網格是一種由多個網格組成的布局。這種布局通常用于創建具有不同內容和功能的多個區域，從而可以更好地組織頁面內容。

分層網格布局通常由多個不同的網格組成，每個網格都有不同的列數和列寬。這些網格可以水平排列或垂直排列，以便更好地組織頁面內容。通過使用分層網格布局，可以更好地控制頁面布局和內容，從而創建更加有序和易于使用的界面。原理是這樣，但是我們在實際工作當中，沒必要花費大力氣去做這種復雜的分層網格，自動布局可以完全替代這種分層網格。

但是作為一個網格的種類，分層網格給我們的啟發就是模塊有大小，可以根據設計需求進行調整，根據你自己的喜好去調整。

這4種UI網格系統是目前比較流行，使用它可以讓你的內容對齊和更加規范化，今天的分享就到這里，喜歡請分享一下本文哦。

作者：李波

來源：CLD設計研習社（ID：HelloCloud789）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。