對於設計師而言，網格系統並不陌生。它不僅能夠對其和組織界面的設計元素，還有助於改善界面的視覺層次，使各元素間的關係變得更加合理、清晰，從而最大限度地減少用戶的認知負擔，以及幫助用戶快速理解內容。

那麼，什麼是網格系統呢?

網格系統(Gird Systems)，即以規則的網格陣列，指導和規範網頁中的版面布局和信息分佈。

在UI設計中，最常用的網格結構不外乎以下三種：

1.柱狀網格(Column Gird)

頁面通常被劃分為2個或以上垂直的列，同時界面中的元素和內容均與這些柱狀的列對齊。

Ritual.com以四個大小一致的「列」構建出一個基礎網格系統，所有元素幾乎都嚴格遵循柱狀網格結構進行布局，方便用戶區分不同產品的同時，還創建出舒適且富有吸引力的視覺體驗。

2.模塊網格(Modular Gird)

在柱狀網格的基礎上做了橫向拓展，行與列交叉構成均等的網格，讓界面中的元素和內容都遵循這些網格進行布局。這種結構適合電商網站和列表，比起柱狀網格亦更加自由。

著名設計平台Behance以模塊網格的結構來呈現內容，讓整個界面在視覺體驗上顯得更加整齊且舒適，方便用戶找到想要的設計案例。

3.分層網格(Hierarchical Gird)

行與列交叉構成非完全均等的網格，導致不同網格區塊的重要性和優先級也不一樣。通常，最重要的界面元素和內容會佔據最大的網格。

在《The New York Times》的官方網站設計中，設計師用兩個不同面積的「列」來構成網格，最重要的「頭條新聞」佔據較大的列，然後其他次要界面內容則佔據較小的列，讓用戶的注意力聚焦於重要模塊中。

4.打破網格(Break Gird)

網格系統雖然能營造出空間上的節奏感和視覺上的流暢感，但過分依賴網格系統，反而會讓整個布局顯得單調、同質化嚴重，因此只要有正當理由，偶爾打破這些看不見線條，未必不是好事!

Shrine網站設計看起來是採用柱狀網格，實際上內容欄並沒有遵循網格的框架。這種設計能在用戶掃視網站時，更容易將他們的視線聚焦於重要內容上。

為什麼UI設計需要運用到網格系統?

對於UI設計而言，網格系統的運用可以使網格信息呈現得更美觀且易用;而對於前端開發來說，網格系統的運用則能讓網頁變得更加靈活與規範。

總的來說，網格系統的作用主要有以下幾點：

1)設計師可以快速對齊和整合頁面

2)用戶可以快速掃讀內容，並且可以預測內容的分佈和走向

3)一個好的網格很容易適應不同的屏幕尺寸和方向。事實上，網格布局是響應式網頁設計的重要基礎，而響應式網頁設計則是根據斷點來應對不同的屏幕尺寸。

最後，如何在UI設計中使用網格系統?

網格的使用看起來非常直觀，但是在UI設計中使用網格系統仍有需要注意的規則，比如：

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

由於12列網格更方便擴展不同的布局形式，因此常用到的頁面布局形式都能透過12列網格實現。

這裡需要注意的是，內容的兩側要與每一列的邊緣重合，而不是與內邊距重合。

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

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

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

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

3. 嘗試脫離網格

在設計中，使用從網格中溢出的圖像或元素也是可以的。譬如填充一個全尺寸的背景色或者圖像，只需要將圖像拉到網格之外就可以。在網格和邊距的示意下，開發人員也能快速理解界面的尺寸信息。

4.注意內容之間的間距

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