UX/UI設計中常見的6種網格類型和5個技巧

Sponsor

網格是設計中組織布局的系統?；ヂ摼W之前，平面設計師對印刷材料(書籍、雜志或海報)使用網格布局?，F在，UX/UI設計師仍然廣泛使用網格布局，因為它們是界面設計(網頁、移動APP)的基礎結構。

網格不僅能直觀地組織設計元素，還能作為一種工具，通過增強可讀性、明確信息架構和提供響應性設計框架來改善用戶體驗～

??六種網格類型

每種類型的網格都有不同的用途，通過了解不同的網格類型幫助我們在設計的時候匹配最合適的網格。

1)?基線網格

基線網格是由等距水平線組成的密集網格，用于確定文本的位置?；€網格通常與分欄網格結合使用，以確保每列中的文本在界面上均勻對齊。

基線網格最簡單的示例是一張劃線紙，準確清晰地展示設計元素的位置。

2) 單欄網格

單欄網格是最基礎的形式，用來確定文本在頁面中的位置，多用于書籍、雜志等以文字為主的版面設計中。

3) 分欄網格

這是日常設計中最常使用的網格類型，將一個頁面拆分成多個垂直區域，然后將對象與之對齊。

報紙和雜志的排版設計、網頁和APP的設計都會廣泛使用分欄網格。

4) 模塊化網格

模塊化網格是柱狀網格的擴展，采用垂直方向的列并添加水平的行。相交的行和列創建“模塊”，可用于管理內容較為復雜的界面或者海報設計。

5) 像素網格

在用Photoshop作圖時，不斷放大畫布，會看到畫布上有密集的像素網格出現。

數字屏幕是由數百萬像素的微觀網格組成的，為了設計的準確性，設計師需要逐個像素地編輯圖像，同時也練就了“像素眼”。小到一個icon，大到整個網頁，都可以借助像素網格來完成。

6) 層級網格

層級網格是指按照內容的重要性來組織界面元素，讓用戶能夠按照主次的層級順序瀏覽界面。層級網格主要用在網頁設計中，形式比較自由形式，大多數是結合網頁的內容來確定。

將界面中的內容進行優先級排序，按照層級結構清晰展示內容的優先級，為產品提效。

??在UX/UI中使用網格的5個技巧

在工作中嘗試使用網格系統時，下面的關鍵要點能幫助我們實現有效、靈活的設計：

1) 規劃網格與頁面的關系

在《平面設計網格系統》這本書中，作者強調網格在頁面中的位置以及頁邊距的設置對網格的功能和美感有很大影響。合適的頁間距和留白會讓頁面看起來更舒服。

2) 不要只使用網格設計

當接到一個全新的需求時，很多設計師習慣以常用的網格和欄寬作為標準開始設計。

雖然常用的網格系統設計起來更熟悉，但花時間弄清楚當前的項目實際需要什么樣的網格，以及是否有其他需要考慮的因素也同樣重要。這樣做能夠避免我們被困在一套網格標準中，限制設計的發揮。

3) 保持設計元素在網格內

網格中每一欄之間都會有間距作為分隔，當頁面中的文本和圖形跨越多欄時，需要保持內容在網格每一欄的邊緣，避免將元素放到間距的邊緣。

4) 不要忘記基線對齊

確?；诹械脑O計中的所有文本遵循一致的基線，這樣可以大大改善頁面的和諧感和組織感。

在數字設計項目中，基線對齊很容易被忽視，但它可以很好地平衡設計，對齊后頁面會有更舒服的視覺效果。

5) 考慮使用8pt網格進行設計

我們的設計必須能保證在各種設備和屏幕分辨率下都能工作并且看起來很清晰。使用基數的倍數的尺寸和間距有助于使設計過渡清晰和系統化。

現在通常使用8pt網格，這樣無論是矢量設計還是基于像素的設計，都可以在視網膜屏幕上完美縮放。

最后

以上是在UX/UI設計中常見的6種網格類型和5個技巧，希望通過這些內容能讓你對網格系統的應用有更深的認識。

作者 | Clip
來源公眾號 | Clip設計夾

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。