如何使用8pt柵格系統(tǒng)進(jìn)行UI界面設(shè)計(jì)？怎么應(yīng)用？

保持合理的間距是UI設(shè)計(jì)的基礎(chǔ)，設(shè)置好顏色、排版、間距，是你數(shù)字化產(chǎn)品中的基礎(chǔ)。尤其是間距的設(shè)置，可以獲得更好的易讀性來改善產(chǎn)品的用戶體驗(yàn)，消除了設(shè)計(jì)和開發(fā)時(shí)的猜測(cè)和決策疲勞，推動(dòng)UI的擴(kuò)展性和一致性，通過賦予元素視覺層次來傳達(dá)意義 如果您是設(shè)計(jì)師，您的輸出只會(huì)……看起來更好。

設(shè)置間距系統(tǒng)
當(dāng)用Sketch進(jìn)行設(shè)計(jì)用戶UI界面時(shí)，首先，為您的柵格系統(tǒng)設(shè)置基數(shù)。參考google的Material Design 3設(shè)計(jì)原則，元素之間的所有填充/邊距（有時(shí)需要 4px，如果你需要緊縮的話）使用 8的倍數(shù)進(jìn)行分割：8px / 16px / 24px / 32px / 40px / 48px / 56px ...... 重點(diǎn)是你正在為間距進(jìn)行一致性建設(shè)。

關(guān)于行距垂直的設(shè)置
很簡(jiǎn)單，為了在使用 8pt UI 網(wǎng)格時(shí)保持垂直節(jié)奏，我們使用了以8pt為系數(shù)的柵格（4pt 基線也很好用） 

有什么幫助呢？
基于這樣的元素模板，我們可以快速構(gòu)建一套UI組建規(guī)范或規(guī)則，這些規(guī)則將在整個(gè)產(chǎn)品中擴(kuò)展并保持一致性，節(jié)省時(shí)間和猜測(cè)， 開發(fā)人員也可以通過這些標(biāo)注更好的理解設(shè)計(jì)師的想法。

關(guān)于圖標(biāo)尺寸
使用 SVG 并像這樣設(shè)置，確保你為你的圖標(biāo)加框，因?yàn)樗鼈儠?huì)有不同的尺寸：并且自然使用 8 的倍數(shù)。這些是 64x64，因此適合 UI 網(wǎng)格。無論如何，大多數(shù)圖標(biāo)都是為這些尺寸設(shè)計(jì)的（16x16、24x24、32x32 等）。 如果您需要更改一個(gè)圖標(biāo)并且它在 100 個(gè)不同的地方使用，那么您只需更改這個(gè)符號(hào)即可。

文本元素和行高
關(guān)于行高，確保文本元素落在網(wǎng)格內(nèi)可能會(huì)很棘手。作為一個(gè)廣泛的規(guī)則，讓基本的處理乘以 1.5 倍數(shù)。
結(jié)果如下：
16 點(diǎn) / 24
24 點(diǎn) / 36
32 點(diǎn) / 48
將字體大小乘以您選擇使用頭部的行高（1.5倍行高）

最后，
對(duì)于新產(chǎn)品，創(chuàng)建帶有柵格系統(tǒng)/文本元素/間距的基本設(shè)置（基于UI組件庫設(shè)計(jì)指南）并在創(chuàng)建組件時(shí)添加相應(yīng)的規(guī)則，將提升您對(duì)產(chǎn)品的定位和想法，同時(shí)可以確保與整個(gè)團(tuán)隊(duì)分享并提升整體工作效率。