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

什么是網(wǎng)格設(shè)計(jì)？

網(wǎng)格是設(shè)計(jì)好任何界面的基礎(chǔ)，可以將其理解為布局的框架。這套框架有助于組織 UI 元素、引導(dǎo)用戶并確定設(shè)計(jì)的各個(gè)部分。

常用術(shù)語(yǔ)

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

技巧 1，正確地選擇列數(shù)

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

技巧 2，了解限制條件

始終以你正在設(shè)計(jì)的設(shè)備屏幕為基準(zhǔn)，了解目標(biāo)用戶的使用習(xí)慣， 利用這些限制并學(xué)習(xí)使用它們進(jìn)行設(shè)計(jì)

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

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

技巧 3，間距保持一致

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

技巧 4，用好網(wǎng)格基線

使用基線網(wǎng)格來(lái)排列內(nèi)容并為文本和布局元素帶來(lái)視覺(jué)一致性。（彩云注：保持文字底部對(duì)齊網(wǎng)格）

額外提示——調(diào)整字體行高以匹配基線網(wǎng)格。

例如：如果選擇 4px 作為基線/網(wǎng)格單位，對(duì)齊文本，需要將字體的 line-height 設(shè)置為單位的倍數(shù)，即行高應(yīng)該是 4、12、32、64 等

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

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

技巧 6，打破網(wǎng)格

將某些元素排除在網(wǎng)格之外，使用這個(gè)分解技巧來(lái)增加價(jià)值并使你設(shè)計(jì)的某些部分能脫穎而出，引導(dǎo)用戶。（彩云注：比如出界的設(shè)計(jì)，或者大小有比較大的對(duì)比）

技巧 7，動(dòng)態(tài)網(wǎng)格

確保你設(shè)計(jì)的布局能適應(yīng)常見的屏幕尺寸、并適配多終端保持體驗(yàn)一致。（彩云注：改布局不改變網(wǎng)格體系，間距那些依然可以保持不變）

技巧 8，靈活運(yùn)用網(wǎng)格系統(tǒng)

沒(méi)有網(wǎng)格的設(shè)計(jì)對(duì)于小型項(xiàng)目確實(shí)是可以的，但對(duì)于相對(duì)較大的項(xiàng)目，使用網(wǎng)格就非常有必要了，甚至是強(qiáng)制的。

學(xué)習(xí)使用網(wǎng)格進(jìn)行設(shè)計(jì)，但也并非生搬硬套，你需要不時(shí)觀察布局，為你的需求找到最有創(chuàng)意的解決方案。