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