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

初識網格

Pinterest

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

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

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

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

看個例子：

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

很多剛入行做設計的同學設計的界面就如同左邊這樣毫無規(guī)律可言，甚至有些工作幾年的設計師也會出現(xiàn)同樣的問題，沒有科學的去定義系統(tǒng)間距，導致界面設計品質感低，無規(guī)律的去使用間距，如何才能提高產品品質？

如何科學的定義 UI 的中網格系統(tǒng)

定義 UI 網格系統(tǒng)方法很多，如運用8點網格系統(tǒng)、斐波那契數列、某最小原子單位的增量、從底層系統(tǒng)參數化定義間距等，本次就講某最小原子單位的增量去定義網格系統(tǒng)

（1） 首先確定基礎間距原子單位，比如這里我定義最小數值為 6，那么以 6 為基準的去延展系統(tǒng)間距，得到如下間距系統(tǒng)

1、2、6、12、18、24、30、36、42、48、54、60、66、72……、96、192等，這里都是 6 的倍數或能被 6 整除

（2）繼續(xù)優(yōu)化梳理間距得到如下，為何要梳理？如果間距多，過于細碎也會導致畫間距比較亂（以6為基準，前面?zhèn)€數是后面?zhèn)€數的2倍遞增）

1、2、6、12、24、48、96、112

（3） 實戰(zhàn)演示

如右圖所示我界面設計中所用到的間距參數都是前期定義好的間距，然后設計時候就使用定義好的間距，不要在隨意的去增加間距，如果間距不夠用，可以在繼續(xù)以6的增量繼續(xù)增加間距，靈活運用即可。

其他組件拓展使用演示

上面的案例加上方法實戰(zhàn)大家都清楚了么，上面案例的間距均來自我前期定義好的，其實很簡單，方法要靈活運用，如果間距不夠可以適當增加的，切記勿亂用間距。

總結

在定義間距過程中需要注意的點：

最小原子單位并不是隨意定義的，推薦以下；

間距定義以某一最小原子的增量去定義；

切記勿亂用間距，間距使用得有規(guī)律和節(jié)奏。

分享題目：如何用網格系統(tǒng)設計出大師般的APP界面
當前鏈接：http://sd-ha.com/news31/218881.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站策劃、定制開發(fā)、響應式網站、企業(yè)建站、微信小程序、品牌網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)