當(dāng)然還有一些公司，如airbnb，他們?cè)O(shè)計(jì)體系也是基于8網(wǎng)格為基礎(chǔ)來定義的。看到這，大家是不是很想了解8pt網(wǎng)格到底如何構(gòu)建一套強(qiáng)大設(shè)計(jì)系統(tǒng)？底層邏輯是什么？為何諸多大廠都選擇這個(gè)數(shù)字？下面我們一起來揭曉。首先這里給大家介紹下pt 這個(gè)單位，pt是“點(diǎn)”的意思，一倍圖情況下1pt=1dp=1px，所以8pt（8點(diǎn)）網(wǎng)格系統(tǒng)，我們一般默認(rèn)情況都是基于1倍圖來進(jìn)行設(shè)計(jì)的。大多數(shù)屏幕寬高數(shù)值幾乎都能被8整除如果用數(shù)字8作為設(shè)計(jì)中最小原子單位，可以很方便的縮小畫布的設(shè)計(jì)尺寸，8/2=4、4/2=2、2/2=1。如果從10、5、6這樣的數(shù)值開始，你縮小到的網(wǎng)格單位可能存在小數(shù)點(diǎn)的像素，一般不推薦這樣的數(shù)值進(jìn)行設(shè)計(jì)。第一排使用基于8pt的網(wǎng)格系統(tǒng)，下面一排是基于 5 為單位的網(wǎng)格系統(tǒng)，當(dāng)他們分別適配到對(duì)應(yīng)的倍數(shù)時(shí)候（0.75、1、1.5倍），下面一排就會(huì)出現(xiàn)次像素。如果使用基于8pt的網(wǎng)格系統(tǒng)，幾乎很少遇到次像素的場(chǎng)景。如今，屏幕碎片化時(shí)代，多終端設(shè)計(jì)需求層出不窮，為了能確保多終端適配更靈活，基于8pt網(wǎng)格的設(shè)計(jì)系統(tǒng)已成為諸多設(shè)計(jì)師的共識(shí)。如何將8pt網(wǎng)格貫穿整個(gè)設(shè)計(jì)系統(tǒng)里面？這里首先需要?jiǎng)?chuàng)建一個(gè)基于8pt的網(wǎng)格系統(tǒng)。有了這些數(shù)值，那么下面就可以根據(jù)定義出來的數(shù)值去創(chuàng)建分子組件甚至設(shè)計(jì)最終的頁(yè)面。Google Materials Design 基于8pt網(wǎng)格布局設(shè)計(jì)，下面我們就基于8pt網(wǎng)格系統(tǒng)的規(guī)則，給大家演示如何構(gòu)建基礎(chǔ)層設(shè)計(jì)框架，這部分也是最重要的。
#1.排版
如何將8pt網(wǎng)格應(yīng)用在排版中？很簡(jiǎn)單，只需要將字體行高統(tǒng)一定義基于8pt網(wǎng)格的增量，就是8的倍數(shù)，這樣文字排版就能對(duì)齊到基于8網(wǎng)格的畫布中。
#2.圖標(biāo)
圖標(biāo)的大小尺寸定義，也是需要基于8網(wǎng)格來定義。就像右側(cè)基于8網(wǎng)格的圖標(biāo)尺寸，在排版布局時(shí)候剛好能夠?qū)?yīng)到網(wǎng)格上的。
#3.陰影
如果需要定義陰影數(shù)值，那么陰影也是需要基于8網(wǎng)格系統(tǒng)來定義。
#4.圓角
設(shè)計(jì)系統(tǒng)里面所有涉及到組件圓角值，都要基于8網(wǎng)格來定義。大圓角一般會(huì)用在頁(yè)面級(jí)別的組件設(shè)計(jì)，比如沉浸式浮層或者彈窗等。
#5.柵格布局
包括整個(gè)系統(tǒng)頁(yè)面級(jí)別的布局，都需要基于8pt網(wǎng)格來建立規(guī)則。上圖是web端和移動(dòng)端基于8pt的布局系統(tǒng)，需要確保水槽和邊距是遵循這個(gè)規(guī)則的。
最后，在項(xiàng)目開始的前期，一定要基于8網(wǎng)格系統(tǒng)設(shè)計(jì)，來將原子級(jí)和分子級(jí)的組件基礎(chǔ)打牢。因?yàn)楹笃陂_始大量頁(yè)面設(shè)計(jì)時(shí)，涉及到多人協(xié)作，甚至多團(tuán)隊(duì)。
以上就是一個(gè)8pt網(wǎng)格設(shè)計(jì)系統(tǒng)的大致思路框架，當(dāng)然除了上面這些，一個(gè)設(shè)計(jì)系統(tǒng)里面需要涉及到8pt網(wǎng)格系統(tǒng)還有響應(yīng)式布局等，大家先一步步深入了解學(xué)習(xí)，將這套理念應(yīng)用在項(xiàng)目中，發(fā)揮最大價(jià)值。
最后今天既然講到了設(shè)計(jì)系統(tǒng)，我正巧也找到了iOS15的figma格式的UIKT，是在線版本的，可直接打開。大家可提前研究下iOS 15的一些新的規(guī)則與變化。
領(lǐng)取方式如下：公眾號(hào)后臺(tái)發(fā)送 iOS15 即可獲取當(dāng)前地址
