想要用好網格系統，這8個小技巧你必須掌握！

Hi，我是彩云。留白和網格是任何設計的基礎，一旦真正掌握并正確使用，網格將幫你設計出可靠且具有吸引力的設計解決方案。所以，今天將分享我在 UI 設計中掌握的網格設計技巧，文章不長，認真看完，定有收獲。

近期網格設計的干貨：

什么是網格設計？

網格是設計好任何界面的基礎，可以將其理解為布局的框架。這套框架有助于組織 UI 元素、引導用戶并確定設計的各個部分。

常用術語

網格（Grid）由網格單元（Grid unit）組成。布局放在網格上，它包含一定數量的列，列的左側和右側都有外邊距（Margin），每列之間都有內邊距(Padding)，也叫水槽。

技巧 1，正確地選擇列數

雖然 12 列 Bootstrap 類似網格是最受歡迎的選擇，但它不是強制性的。選擇網格時，根據設計真正需要來確定用多少列的網格，做到不多不少。（彩云注：可以根據自己的界面主要尺寸來定義列數，常見的可以按 4 的倍數或者 8 的倍數來設置）

技巧 2，了解限制條件

始終以你正在設計的設備屏幕為基準，了解目標用戶的使用習慣， 利用這些限制并學習使用它們進行設計

最常見的屏幕分辨率 (px)

• PC: 1440x1024
• 平板電腦: 768x1024
• 手機：320x640（這里指的是 1x 圖）

技巧 3，間距保持一致

統一垂直和水平間距，使得布局更具吸引力和一致性。

技巧 4，用好網格基線

使用基線網格來排列內容并為文本和布局元素帶來視覺一致性。（彩云注：保持文字底部對齊網格）

額外提示——調整字體行高以匹配基線網格。

例如：如果選擇 4px 作為基線/網格單位，對齊文本，需要將字體的 line-height 設置為單位的倍數，即行高應該是 4、12、32、64 等

技巧 5，利用好框架和顏色

把框架作為一種工具，將用戶的注意力集中在某個布局部分上， 在需要的地方添加額外的視覺重量。（彩云注：比如為凸顯某個數據而改個卡片顏色，在做后臺界面時比較常見）

技巧 6，打破網格

將某些元素排除在網格之外，使用這個分解技巧來增加價值并使你設計的某些部分能脫穎而出，引導用戶。（彩云注：比如出界的設計，或者大小有比較大的對比）

技巧 7，動態網格

確保你設計的布局能適應常見的屏幕尺寸、并適配多終端保持體驗一致。（彩云注：改布局不改變網格體系，間距那些依然可以保持不變）

技巧 8，靈活運用網格系統

沒有網格的設計對于小型項目確實是可以的，但對于相對較大的項目，使用網格就非常有必要了，甚至是強制的。

學習使用網格進行設計，但也并非生搬硬套，你需要不時觀察布局，為你的需求找到最有創意的解決方案。

一些有價值的設計資源和插件

資源：

1. google 網格設計規范 https://material.io/develop/web/supporting/layout-grid;
2. Apple 網格設計規范 https://developer.apple.com/design/human-interface-guidelines
3. Flexbox 網格設計規范 https://www.w3schools.com/css/css3_flexbox_container.asp
4. Bootstrap 網格設計系統規范 https://getbootstrap.com/docs/5.0/layout/grid

插件：

1. Figma 網格設計可視化插件 https://www.figma.com/community/plugin
2. Grid generator 網格設計插件 https://www.figma.com/community/plugin

歡迎關注作者的微信公眾號：「彩云譯設計」