3種常見網格系統的用法，這篇幫你搞清楚！

編者按：這篇文章出自著名的用戶體驗設計機構 NNGroup，資深用戶體驗設計師 Kelley Gordon 負責撰寫了這篇文章。對于設計師而言，網格系統并不陌生，但是在什么時候用，用什么樣地網格，甚至什么時候打破網格地規則，都是有講究地，這篇文章就簡明扼要的闡述了這個問題。

如果你去過紐約，并且在街道上走過，那么你會很清楚地知道如何從一個區域走到另外一個區域，如何從一條街道走到另外一條街道，因為整個城市是建立在網格系統之上的。正如同網格的可預測性幫助當地人和游客定位位置一樣，網頁和 APP 中的網格也為用戶和設計師提供框架結構。由于它們采用一致的參考點，網格為頁面提供了良好的可讀性，并且允許用戶快速抵達目標。

網格定義：網格由行列、內邊距和外邊距構成，為頁面上的元素和布局提供結構。

網站和界面中最常用的網格有 3 種不同的結構：柱狀網格、模塊網格和分層網格。

柱狀網格當中，頁面通常被劃分為垂直的列，然后將 UI 元素和內容和這些柱狀的列對齊。

模塊網格則是在前者的基礎上進一步在橫向做了拓展，行列交叉構成的網格讓元素和內容可以遵循更小的模塊來對齊，這種模塊化的網格更加適合電商和列表頁，比起柱狀網格更加自由。

分層網格則不同，它和前兩者的差異在于，行列的構成并非完全均等，同時不同網格區塊的重要性、優先級也不一樣。最重要的元素和內容片段占據了最大的網格。

這些網格相關的文章也值得看看：

網格的構成

• 列（Column）：縱向延伸的均分條狀區域，它們占據來網格的絕大多數區域。UI元素和內容絕大多數時候都放置在列列當中，為了適應絕大多數的屏幕，列的寬度通常使用百分比來標識，而非固定寬度值，并且列的數量會有所不同，比如移動設備上的網格通常有 4 列，而桌面網格則時常多達 12 列。
• 內邊距（Gutter）：內邊距是列和列之間的空間，用來將不同的列和其中的 UI 控件、內容分割開的間隙。雖然內邊距通常都是固定值，但是它回根據不同的斷點而有所變化。比如在大屏幕上，內邊距會較大，在移動設備上，內邊距則較小。
• 外邊距（Margin）：外邊距通常只在頁面左右最靠外的區域，由于內容通常不會延伸到邊緣，因此外邊距通常上固定的。外邊距通常按照屏幕寬度百分比來計算，同樣也會隨著斷點而變化。

網格的使用范例

范例1：分層網格

第一個案例來自《紐約時報》的官方網站的設計。這個網站通過分層網格來創造類似傳統報紙的閱讀體驗，在桌面端的大屏幕之下，設計師使用來2個主要的列來構成分層網格，最重要的頭條新聞占據來較大的列，然后其中劃分出二級和三級的區塊分類，它們占據來較小的列和模塊。

范例2：柱狀網格

第二個案例來自維生素公司 Ritual.com，這個網站的設計采用了典型的柱狀網格來創建富有吸引力的視覺體驗，在這個屏幕尺寸之下，四個大小一致的列構建出來基礎的網格結構，而所有的元素都幾乎嚴格地遵循柱狀網格，而內邊距也非常均勻，它們幫助用戶區分不同的去產品，外邊距則是獨立的尺寸，相對內邊距要大很多。

范例3：模塊網格

第三個案例則來自著名的設計平臺 Behance。Behance 采用了模塊化的結構來呈現內容，在桌面的大尺寸界面之下，每行4個模塊，水平方向上的內邊距較大，并且左右方向上的內邊距和外邊距是完全一樣的，和前面一樣，均勻的邊距讓整個頁面在視覺上均勻舒適。

最近無法訪問 Behance 的同學可以看下方的文章來搞定這個問題：

范例4：打破網格

我們最后一個范例來自專門研究 Google Material 的網站 Shrine。這個網站看起來是采用來柱狀網格，但是你仔細看會發現，由的內容欄并沒有遵循網格的框架。這種設計讓整個網站在快速掃視的時候，會比較有挑戰性，有些內容會更容易吸引用戶的注意力，相反有的則非常容易被忽略。只要你有正當的理由，這種打破網格的設計是沒問題的。

使用網格的好處

使用網格對于用戶和設計師都是有好處的。

• 設計師可以快速對齊整合好頁面
• 用戶可以快速掃讀內容，并且可以預測內容的分布和走向
• 一個好的網格很容易適應不同的屏幕尺寸和方向，事實上，網格布局是響應式網頁設計的重要基礎，響應式網頁設計根據斷點來應對不同的屏幕尺寸，比如一個桌面端界面可以有12列，但是移動設備上只有4列。

更重要的是，網格并非是單領域概念，設計師和開發者都在使用這個概念，網格本身是設計師和開發者之間溝通的橋梁之一。

正確選擇和設置網格

如何使用和設置網格，對于創建優質的排版和體驗而言，是至關重要的。

根據你的需求，選擇合適的網格。

多花點時間思考你的網站適合哪種網格布局，如果頁面上有些元素的優先級明顯比別的更高，那么分層網格可能是最合適的布局，比如新聞平臺一類的網站。如果你的網站當中內容的形態大小變化很大，那么請考慮使用基礎的柱狀網格或者模塊網格，因為它們提供了足夠大的靈活性。

花時間好好設置一下網格。

一旦你確定了哪種類型的網格適合你的需求，那么你就要仔細考慮如何進行設置。如果你考慮讓你的內容適配桌面端、 平板、 手機等多種設備，不同屏幕尺寸，那么你需要結合響應式設計的策略來詳細制定列寬度、 內邊距、外邊距的參數。筆記本電腦和臺式機的屏幕內，12列網格足以呈現絕大多數類型的內容，然后隨著屏幕尺寸的縮小，減少網格，設置斷點，優化布局。在 Sketch 和 Figma當中，系統提供優質的預設網格系統，方便你進行設計。

始終將內容放置在列當中，而不是內邊距。

當你在網格系統中防止元素的時候，盡量讓內容繞開內邊距，方便讓內容和留白清晰的區分開。

盡量使用 8px 網格。對于絕大多數的常見設備，以像素為單位的屏幕通常是 8 的倍數，盡量采用 8px 的網格系統，這樣在屏幕響應式變化的時候，更容易處理、

結論

網格系統不僅為設計師提供了優質的布局結構，而且為終端用戶提供了良好的可讀性，讓產品和界面更好地適配各式各樣地屏幕，這才是網格乃至于設計系統地功能所在。