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

初識(shí)網(wǎng)格

Pinterest

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

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

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

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

看個(gè)例子：

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

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