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

什么是網格設計？

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

常用術語

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

技巧 1，正確地選擇列數

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

技巧 2，了解限制條件

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

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

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

技巧 3，間距保持一致

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

技巧 4，用好網格基線

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

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

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

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

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

技巧 6，打破網格

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

技巧 7，動態網格

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

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

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

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