作者：網站建設公司 來源：佛山網站建設日期：2020-11-11 瀏覽： 次
色彩、圖形、排版、網格等是構成系統四大視覺語言的基礎原子單位，今天來說下網格系統在產品設計中的運用及定義方法。
初識網格
就如上圖所示，我們設計產品界面中離不開網格，網格讓界面更加有節奏且信息層級更清晰，使我們能夠舒適的閱讀及很好使用產品。
糟糕的網格系統是無規則，無節奏感可言，給用戶呈現出一種劣質的產品
目前產品界面設計的現狀
大家做平面設計的時候應該聽過 Gird System即網格系統，那么我們在 APP 設計中如何正確使用
看個例子：
左邊和右邊大家覺得那個間距好些？粗看如果不細心的同學看不太出多大的區別，那么我們看下他們的網格是如何的（基于750設計）
很多剛入行做設計的同學設計的界面就如同左邊這樣毫無規律可言，甚至有些工作幾年的設計師也會出現同樣的問題，沒有科學的去定義系統間距，導致界面設計品質感低，無規律的去使用間距，如何才能提高產品品質？
如何科學的定義 UI 的中網格系統
定義 UI 網格系統方法很多，如運用8點網格系統、斐波那契數列、某最小原子單位的增量、從底層系統參數化定義間距等，本次就講某最小原子單位的增量去定義網格系統
（1） 首先確定基礎間距原子單位，比如這里我定義最小數值為 6，那么以 6 為基準的去延展系統間距，得到如下間距系統
1、2、6、12、18、24、30、36、42、48、54、60、66、72……、96、192等，這里都是 6 的倍數或能被 6 整除
（2）繼續優化梳理間距得到如下，為何要梳理？如果間距多，過于細碎也會導致畫間距比較亂（以6為基準，前面個數是后面個數的2倍遞增）
1、2、6、12、24、48、96、112
（3） 實戰演示
如右圖所示我界面設計中所用到的間距參數都是前期定義好的間距，然后設計時候就使用定義好的間距，不要在隨意的去增加間距，如果間距不夠用，可以在繼續以6的增量繼續增加間距，靈活運用即可。
其他組件拓展使用演示
上面的案例加上方法實戰大家都清楚了么，上面案例的間距均來自我前期定義好的，其實很簡單，方法要靈活運用，如果間距不夠可以適當增加的，切記勿亂用間距。
總結
在定義間距過程中需要注意的點：
最小原子單位并不是隨意定義的，推薦以下；
間距定義以某一最小原子的增量去定義；
切記勿亂用間距，間距使用得有規律和節奏。
零度飛易提供品牌
一體化IT網站價格規劃書
教育網站設計方案建材網站設計方案機械網站設計方案廣告網站設計方案家居照明網站設計方案環保設備網站設計方案五金網站設計方案電器網站設計方案家具網站設計方案機械網站設計方案
零度飛易網絡科技是國內企業網絡運營服務商，旗下有“零度飛易”建站品牌，“微度”微信平臺開發系統及互聯網網絡推廣，三大業務是零度飛易戰略發展服務；零度是新網、阿里云（原萬網）、360建站等公司的戰略合作伙伴。零度飛易三大品牌產品為500+家廣東中小企業提供過互聯網網絡服務方案。在深圳-鄭州_成都-上海-北京-合肥-佛山-廣州-東莞-江門地區企業提供網站建設、網絡營銷、微信小程序開發、APP開發和域名注冊等網站建設服務。
有一個互聯網項目想和我們談談嗎？您可以填寫右邊的表格，讓我們了解您的項目需求，這是一個良好的開始，我們將會盡快與你取得聯系。當然也歡迎您給我們寫信或是打電話，讓我們聽到你的聲音！
地址：佛山市順德區大良鳳翔商業廣場二座670
業務QQ：378780108
策劃專線：13715431176
E-mail：sale@fslingdu.com
零度飛易是一家專業網站設計,網站制作、seo優化,網站推廣,網站建設的佛山網絡運營公司。零度飛易在