每種類型的網格都有不同的用途，通過了解不同的網格類型幫助我們在設計的時候匹配最合適的網格。
1、 基線網格
基線網格是由等距水平線組成的密集網格，用于確定文本的位置。基線網格通常與分欄網格結合使用，以確保每列中的文本在界面上均勻對齊。
基線網格最簡單的示例是一張劃線紙，準確清晰地展示設計元素的位置。
2、單欄網格
3、分欄網格
這是日常設計中最常使用的網格類型，將一個頁面拆分成多個垂直區域，然后將對象與之對齊。
報紙和雜志的排版設計、網頁和APP的設計都會廣泛使用分欄網格。
4、模塊化網格
5、像素網格
在用Photoshop作圖時，不斷放大畫布，會看到畫布上有密集的像素網格出現。
數字屏幕是由數百萬像素的微觀網格組成的，為了設計的準確性，設計師需要逐個像素地編輯圖像，同時也練就了“像素眼”。小到一個icon，大到整個網頁，都可以借助像素網格來完成。
6、層級網格
層級網格是指按照內容的重要性來組織界面元素，讓用戶能夠按照主次的層級順序瀏覽界面。層級網格主要用在網頁設計中，形式比較自由形式，大多數是結合網頁的內容來確定。
將界面中的內容進行優先級排序，按照層級結構清晰展示內容的優先級，為產品提效。
二、在UX/UI中使用網格的5個技巧
在工作中嘗試使用網格系統時，下面的關鍵要點能幫助我們實現有效、靈活的設計：
1、規劃網格與頁面的關系
2、不要只使用網格設計
當接到一個全新的需求時，很多設計師習慣以常用的網格和欄寬作為標準開始設計。
3、保持設計元素在網格內
網格中每一欄之間都會有間距作為分隔，當頁面中的文本和圖形跨越多欄時，需要保持內容在網格每一欄的邊緣，避免將元素放到間距的邊緣。
4、不要忘記基線對齊
確保基于列的設計中的所有文本遵循一致的基線，這樣可以大大改善頁面的和諧感和組織感。
5、考慮使用8pt網格進行設計
我們的設計必須能保證在各種設備和屏幕分辨率下都能工作并且看起來很清晰。使用基數的倍數的尺寸和間距有助于使設計過渡清晰和系統化。
最后
以上是在UX/UI設計中常見的6種網格類型和5個技巧，希望通過這些內容能讓你對網格系統的應用有更深的認識。
作者：Clippp
轉載請注明：學UI網》在UX/UI設計中使用網格系統的5個技巧
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司