注：色(se)彩、圖形、排版(ban)、網格等是構成系統四大視覺語言的(de)(de)基礎原子單位，今天來說(shuo)下網格系統在產品設計中的(de)(de)運(yun)用及定義方法。

初識網格

Pinterest

就如上圖所示，我們(men)設計(ji)產(chan)品界面(mian)中離不開網格(ge)(ge)，網格(ge)(ge)讓界面(mian)更(geng)加有節奏且信(xin)息(xi)層(ceng)級(ji)更(geng)清晰，使我們(men)能夠舒適的(de)閱讀及很好使用產(chan)品。

糟糕的網格系統是(shi)無(wu)規則(ze)，無(wu)節奏感(gan)可言，給用戶(hu)呈現(xian)出一種劣質(zhi)的產品

目前產品界面設計的現狀

大家做平面設(she)計的時候應該聽過 Gird System即(ji)網格系統，那么我們在 APP 設(she)計中如何正確(que)使用

看個例子：

左邊和右(you)邊大家覺得那(nei)個間距好些(xie)？粗看(kan)如果不細心的同(tong)學看(kan)不太出多大的區別(bie)，那(nei)么我們看(kan)下他們的網格是如何的（基于 750 設(she)計）

很(hen)多剛入行做(zuo)設(she)計(ji)(ji)的(de)同(tong)學設(she)計(ji)(ji)的(de)界面(mian)就如(ru)同(tong)左邊這樣(yang)毫無規律可言，甚至有些工作幾年(nian)的(de)設(she)計(ji)(ji)師也會出現(xian)同(tong)樣(yang)的(de)問題，沒有科學的(de)去(qu)定(ding)義系統間距，導致界面(mian)設(she)計(ji)(ji)品質(zhi)感低，無規律的(de)去(qu)使用間距，如(ru)何(he)才能提高產品品質(zhi)？