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