80%的設計師都摸不清，設計系統中究竟用幾種網格？

今天，給大家帶來設計系統中的網格案例。一個設計系統中究竟存在幾種網格間距？用來統一規范我們的設計。正好我之前參加過幾次設計系統構建，因此把一些經驗分享給大家。

分享目錄如下：

• 什么是設計系統？
• 設計系統中用幾種網格？
• 這兩種網格間距如何應用？
• 總結

什么是設計系統？

設計系統是整個產品團隊共同溝通的一種語言，里面包含設計原則、設計規范、模式庫、模板、動效和聲音等，它是打造跨終端產品一致性與統一產品體驗的最佳實踐。對外，可以宣傳品牌價值觀；對內，它減少了設計負擔，加速了設計迭代過程，提高與開發的溝通效率。國內外很多產品團隊都在開始構建自己一套設計系統，除了 Materials design 和 Apple 的設計系統，還包括 IBM、Spotify、Adobe、Antdesign 等等，設計系統的出現也是產品發展的需要，它為公司的各種產品提供了基石和指導。

設計系統中用幾種網格？

從上面圖中，我想大家應該可以看出在設計系統中，一般情況下是兩種網格來規范我們的設計。一個是應用在組件中的網格間距，另外一個是布局中的網格。

為什么要分兩個部分呢？認真思考下，我們在布局時候基本都是大尺度的間距，這樣才滿足我們的設計要求。而組件網格一般使用比較小的一些間距，因為組件本身就是個體小一些，因此在設計組件時，采用小尺度的網格間距。

上圖是組件小尺度網格間距，一般在早期定義組件時使用，用來控制組件的密度。

上圖是大尺度布局網格間距，應用在組件與組件之間布局，因為一個頁面的元素，可以說都是由組件構成的。當然布局網格和組件網格之間有重疊的數字，其實沒關系。組件網格和布局網格他們之間都是基于同一個規則來完成，例如我這邊使用 8 為基準單位來定義。當然你可以使用其他基準數字，根據自家產品適配硬件的要求來定義，沒有硬性的規定，請大家記住。

△ Materials design（組件構成頁面）

這兩種網格間距如何應用？

當我們清楚，在一個設計系統中存在兩種網格尺度時，那么下面就好辦了。用小尺度的網格間距來定義組件，用大尺度網格間距來定義頁面模塊之間的間距。下面我們來看看案例。

上圖，就是我用小尺度完成一些基礎組件，有沒有發現，我一共就使用了 4 個間距。早期定義好應用與組件間距的網格，為后續設計師之間合作帶來更多益處。

布局間距是在組件與組件之間去使用，不會涉及到組件內部的定義。在布局上，使用網格間距也是遵循重復原則，就是減少間距的數量的使用，上面大家也看到了我使用較少的間距完成布局。

總結

在創建一個設計系統時或者做一個產品規范時候，可以嘗試去定義兩種間距尺度來規范設計，兩種尺度可以更好的滿足設計需要。這兩種尺度規則，都是基于一個基準單位來定義。所以它們之間也會有部分數值重復，其實這并沒多大關系，因為重復間距就代表規則的減少，反而更利于規則的簡單。今天算是一個開始，設計系統有關的諸多知識，后面會慢慢與大家分享。

歡迎關注作者微信公眾號：「功夫UX」