當我們看到一個設計作品的時候，往往會覺得某些作品特別「高級」，但是又說不出高級在哪。一個作品高級，往往是基於細節的優化。今天就介紹一下網格系統，讓你快速提高設計感。
什麼是網格系統？
網格系統，系統英文為Grid Systems，也有人翻譯成柵格系統。
網格系統是利用橫向和縱向的輔助線，把頁面分成一個個的小格子，再以這些小格子為基準，搭建一個更和諧的比例關係，讓頁面整體看起來更加舒服和高級。
利用網格體系的好處：
1. 更加理性的對待設計2. 提高協同的效率3. 減少決定時間網格系統的分類：
在整理網格體系的過程中，大概把網格系統分成3種類型
常規網格漸進式網格水槽式網格1. 常規網格
用途：用於海報、常規web類型網站、畫冊等內容相對簡單的布局。
在設計web端網頁時，可以利用常規網格，控制模塊和模塊之間的距離，讓整體設計看起來更和諧，在做適配的時候，讓適配方案更完美。
2. 漸進式網格
多數用於web端大型推廣頁面、後臺系統頁面，這種例子比較多，最常見的就是我們經常看到的後臺系統。
△ 奧迪的漸進式網格設計
3. 水槽式網格（重點）
多數用於APP、常規web頁面，如官網、3欄式布局feed頁面。
單元格
谷歌的大多數測量都是應用的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這些數值。
這3種是目前看到比較常見的網格系統，利用水槽式網格能快速產出一版電影詳情頁設計稿，效率提升至少一倍，你學會了嗎？
雲和數據作為規模更大、更具影響力的緊缺、核心IT人才生態服務國家級高新技術企業，專注IT職業教育、雲計算、大數據 、電子商務、跨境貿易、網絡安全、AI、VR等領域研究與服務，先後投資建設鄭州、深圳、西安、加拿大四大分中心，下設雲和教育、雲和技術、雲和服務、雲和國際四大事業部。
雲和數據專注於國家緊缺、核心IT人才的培養。秉承「更好的IT學習、更好的就業」教育教學理念，不斷完善和升級教學課程和教學環境，踏實、認真做好教育事業。年培養高端IT技術人才超10000人，累計為企業輸送高端泛IT技術人才超5萬人，其中60%來自於口碑推薦，以八大精品課程為基礎，八大就業基地為依託，一次就業率98%，20%就業薪資超1W，平均薪資8.5K。自2013年起，雲和數據深耕職業教育六年，致力於改變中國高端IT人才培養新標準，引領中國IT人才實踐教學新模式。