注：色彩、圖形、排版、網(wǎng)格等是構(gòu)成系統(tǒng)四大視覺語言的基礎(chǔ)原子單位，今天來說下網(wǎng)格系統(tǒng)在產(chǎn)品設(shè)計中的運用及定義方法。

初識網(wǎng)格

Pinterest

就如上圖所示，我們設(shè)計產(chǎn)品界面中離不開網(wǎng)格，網(wǎng)格讓界面更加有節(jié)奏且信息層級更清晰，使我們能夠舒適的閱讀及很好使用產(chǎn)品。

糟糕的網(wǎng)格系統(tǒng)是無規(guī)則，無節(jié)奏感可言，給用戶呈現(xiàn)出一種劣質(zhì)的產(chǎn)品

目前產(chǎn)品界面設(shè)計的現(xiàn)狀

大家做平面設(shè)計的時候應(yīng)該聽過 Gird System即網(wǎng)格系統(tǒng)，那么我們在 APP 設(shè)計中如何正確使用

看個例子：

左邊和右邊大家覺得那個間距好些？粗看如果不細心的同學(xué)看不太出多大的區(qū)別，那么我們看下他們的網(wǎng)格是如何的（基于 750 設(shè)計）

很多剛?cè)胄凶鲈O(shè)計的同學(xué)設(shè)計的界面就如同左邊這樣毫無規(guī)律可言，甚至有些工作幾年的設(shè)計師也會出現(xiàn)同樣的問題，沒有科學(xué)的去定義系統(tǒng)間距，導(dǎo)致界面設(shè)計品質(zhì)感低，無規(guī)律的去使用間距，如何才能提高產(chǎn)品品質(zhì)？