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

如果你去過紐約，并且在街道上走過，那么你會很清楚地知道如何從一個區(qū)域走到另外一個區(qū)域，如何從一條街道走到另外一條街道，因為整個城市是建立在網(wǎng)格系統(tǒng)之上的。正如同網(wǎng)格的可預(yù)測性幫助當(dāng)?shù)厝撕陀慰投ㄎ晃恢靡粯樱W(wǎng)頁和 APP 中的網(wǎng)格也為用戶和設(shè)計師提供框架結(jié)構(gòu)。由于它們采用一致的參考點，網(wǎng)格為頁面提供了良好的可讀性，并且允許用戶快速抵達(dá)目標(biāo)。

網(wǎng)格定義：網(wǎng)格由行列、內(nèi)邊距和外邊距構(gòu)成，為頁面上的元素和布局提供結(jié)構(gòu)。

網(wǎng)站和界面中阿最常用的網(wǎng)格有 3 種不同的結(jié)構(gòu)：柱狀網(wǎng)格、模塊網(wǎng)格和分層網(wǎng)格。

柱狀網(wǎng)格當(dāng)中，頁面通常被劃分為垂直的列，然后將 UI 元素和內(nèi)容和這些柱狀的列對齊。

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

分層網(wǎng)格則不同，它和前兩者的差異在于，行列的構(gòu)成并非完全均等，同時不同網(wǎng)格區(qū)塊的重要性、優(yōu)先級也不一樣。最重要的元素和內(nèi)容片段占據(jù)了最大的網(wǎng)格。

網(wǎng)格的構(gòu)成

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

網(wǎng)格的使用范例

范例1：分層網(wǎng)格

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

范例2：柱狀網(wǎng)格

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

范例3：模塊網(wǎng)格

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

范例4：打破網(wǎng)格

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

使用網(wǎng)格的好處

使用網(wǎng)格對于用戶和設(shè)計師都是有好處的。

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

更重要的是，網(wǎng)格并非是單領(lǐng)域概念，設(shè)計師和開發(fā)者都在使用這個概念，網(wǎng)格本身是設(shè)計師和開發(fā)者之間溝通的橋梁之一。

正確選擇和設(shè)置網(wǎng)格

如何使用和設(shè)置網(wǎng)格，對于創(chuàng)建優(yōu)質(zhì)的排版和體驗而言，是至關(guān)重要的。

根據(jù)你的需求，選擇合適的網(wǎng)格。

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

花時間好好設(shè)置一下網(wǎng)格。

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

始終將內(nèi)容放置在列當(dāng)中，而不是內(nèi)邊距。

當(dāng)你在網(wǎng)格系統(tǒng)中防止元素的時候，盡量讓內(nèi)容繞開內(nèi)邊距，方便讓內(nèi)容和留白清晰的區(qū)分開。

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

結(jié)論

網(wǎng)格系統(tǒng)不僅為設(shè)計師提供了優(yōu)質(zhì)的布局結(jié)構(gòu)，而且為終端用戶提供了良好的可讀性，讓產(chǎn)品和界面更好地適配各式各樣地屏幕，這才是網(wǎng)格乃至于設(shè)計系統(tǒng)地功能所在。

作者：陳子木