有時候我們看一個設計作品、體驗一個APP、或者一個公司的PC官網，就會覺得整個設計看起來很高級，但是又說不上哪里高級，是結構?布局？間距？還是細節？

帶著這個問題，我想從網格系統入手，看能否找到答案！

什么是網格系統？

網格系統，系統英文為Grid Systems，也有人翻譯成柵格系統。

網格系統是利用一系列垂直和水平的參考線，將頁面分割成若干個有規律的列或格子，再以這些格子為基準，控制頁面元素之間的對齊和比例關系，從而搭建出一個具有高度秩序性的頁面框架，能科學的把設計元素合理又不失秩序的安排在頁面中，如naver的shopping網站還有我們看到的很多海報，就是一個利用網格系統很好的例子，在沒有了解網格之前，我們總是感覺這樣的頁面規整、整齊、看起來舒適高級，為什么會傳達給我們這樣的感覺？又是如何分解網格系統并應用在項目中的呢？首先我們先看下大體的網格分類

網格系統的分類？

在整理網格體系的過程中，大概把網格系統分成3種類型

• 常規網格
• 漸進式網格
• 水槽式網格

1. 常規網格

用途：用于海報、常規web類型網站、畫冊等內容相對簡單的布局

怎么定義每個小的網格比例？

一般每個網格的長寬比有以下幾種，比較常用的有

6:9 4:6 8:13 12:18 = 0.618

1：√2 3:4 5:7 7:10 10:14 = 1.414

1：1

相信很多寶寶們看到這些數字比例都蒙圈了，不知道怎么換算

用現在這個1920X1080的比例舉個例子

第一步：我們先在ps里面下載一個guideguide插件（下載鏈接：https://www.jb51.net/softs/664062.html），我們先把列數想好，列數越多布局越緊湊，可根據自己的項目來

第二步：設置列 這個例子是按數列10列來計算的，web端起稿的寬度一般是1920（屏幕占有率相對較高）那么1920÷10=192，那么我們得到了每個格子的寬度是192px

第三步：設置高 高度的話我們如果想用1：√2 這個比例，就用192÷1.414得到135px,寶寶們還記得我們的高度是1080嗎？

第四步：然后用1080÷135得出8行在guideguide里面輸入8就得到了我們想要的一個網格

so，在設計web端網頁時，可以考慮在每個模塊中間融入網格和比例的概念 ，讓模塊跟模塊之間看起來更加和諧，通過固定的靜中有序 ，適配時，我們可以保持這個這個概念，只需要減少列就能得到完美的適配方案

2. 漸進式網格

多數用于web端大型推廣頁面、后臺系統頁面，這種例子比較多，最常見的就是我們經?？吹降暮笈_系統

△ 圖片來自網絡

設定方式：

設定一個最小單位a，加固定個數，或者倍數劇增

1、3、5、7、9 +2得出

2、4、6、8、10 2的倍數

1 、5 、9 1+4 5+4 固定加數

這個頁面的網格就是采用+2模式得出

來看奧迪的設計規范：每個a都可以隨意搭配組合，組成不同的Na

△ 來自奧迪設計官網

3. 水槽式網格（重點）

多數用于APP、常規web頁面，如官網、3欄式布局feed頁面

重點來了，在平時設計APP的時候其實用到的最多的還是水槽式網格系統

那么什么叫水槽式網格系統呢？

先來看下整個水槽式網格的組成部分

單元格

谷歌的大多數測量都是應用的8dp網格對齊，較小的組件（例如圖標）可以與4dp網格對齊。

比如說，最小單位是8px，圖標的占比是3個8也就是24px

△?圖來自網絡

外邊距

外邊距的選擇，一般跟自己的項目希望傳達給用戶的感覺要一致，是高級舒適的？還是豐富緊湊型？無線和web一般要做不同邊距，屏幕越大邊距相對更大一些，有一些國外的網站一套設計體系能兼顧APP和web 兩個端，比如instagram

△?來自谷歌Material Design

當然也要看整體設計要傳達給用戶的感覺是什么？來看2個實際的例子：愛彼迎的邊距為48px，網易云音樂的為32px，設計師在選擇邊距的時候不僅要考慮設計風格還有每個頁面的一致性，是都采用一套網格體系還是特殊頁面可以單獨定義，要提前考慮清楚

愛彼迎首頁選擇大的邊距留白更舒適，而網易云音樂首頁則選用小間距內容更加豐富緊湊

列和水槽

列和水槽，是在做設計之前要定義好，以京東結果頁和pinterest為例

△?來自谷歌Material Design

但是在移動端設計中，列的數量不宜過多，一般是6、8、12因為手機屏幕寬度有限，列的數量越多，頁面就會被分割的越「碎」，在頁面設計時就會越難把控，在WEB端設計中，列數一般會采用12、16、24這些數值

怎么測量

怎么測量一個APP使用了什么樣的柵格樣式？具體數值怎么測量呢？

第一步：我們先下載一個sketch插件flavor（https://www.fancynode.com.cn/flavor），也可采用sketch中的布局，flavor更方便一些，安裝上之后，導入我們需要測量的app截圖

第二步：測量邊距，如圖所示，淘寶頭購物車頁面的邊距是18px（750下）根據模塊之間的劃分，測量出水槽為24px

第三步：實驗列寬的數量，多試幾次，測出剛好卡到元素邊緣的合適的數值，就成功測出一個app的柵格體系了

橫向網格的原理也是類似的

△ 來自谷歌Material Design

建立網格？打破網格

我們在設置網格系統的時候，切記要活學活用，布局時也可以在這個區域就行，不需要所用元素完全卡在網格線上

大的黃色圓圈在網格以內，設計人物的邊緣則可以適當拓展出去，打破網格限制

帶有邊距的常規網格，采用4a布局

水槽式網格體系，馬蜂窩首頁，在頭像區域也沒有完全卡在網格的邊線上

所以在設計的時候也可以靈活運用網格體系，哪些元素可以利用網格體系，哪些可以打破網格體系，根據設計中遇到的實際情況定義

總結

這3種是目前看到比較常見的網格系統，在評價一個好的設計作品時，不防從網格體系來看下這個作品的布局是否符合這幾種形式，也可以在自己的項目中進行練習

利用水槽式網格能快速產出一版電影詳情頁設計稿，效率提升至少一倍

利用網格體系的好處：

1. 更加理性的對待設計

不少設計師在做設計的時候依靠經驗、對設計布局的敏感，或者基于競品這樣的角度去做，如果采用網格系統，一方面從理性的、可觀的，具有數學美感的角度去做出的設計，也讓設計更加有理有據，提高閱讀體驗

2. 提高協同的效率

一個公司里面，會有多個設計師協作，如果有一套成熟的網格體系的話，那么大家就不會每個設計師出一套自己認為合適的設計方案，而是在現有的框架下，更好、更快的完成設計任務，在效率和一致性上能更有保證

3. 減少決定時間

不管你是設計執行者，還是管理者，在設計時有時候就會糾結像素差，運用網格體系，能減少這樣的決策時間，能讓設計師在設計執行上更加明確，有跡可循，也不再糾結于幾個像素，設計管理者也會更能提供有理有據的設計指導，讓設計師更快速理解到設計原則，較少在反復推敲過程中浪費時間 。

讓設計更高級的辦法，快快用起來吧！

關注更多設計思維、UI動效、創意請關注：有愛設計站