今天，給大家?guī)碓O(shè)計系統(tǒng)中的網(wǎng)格案例。一個設(shè)計系統(tǒng)中究竟存在幾種網(wǎng)格間距？用來統(tǒng)一規(guī)范我們的設(shè)計。正好我之前參加過幾次設(shè)計系統(tǒng)構(gòu)建，因此把一些經(jīng)驗分享給大家。

分享目錄如下：

• 什么是設(shè)計系統(tǒng)？
• 設(shè)計系統(tǒng)中用幾種網(wǎng)格？
• 這兩種網(wǎng)格間距如何應(yīng)用？
• 總結(jié)

什么是設(shè)計系統(tǒng)？

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

設(shè)計系統(tǒng)中用幾種網(wǎng)格？

從上面圖中，我想大家應(yīng)該可以看出在設(shè)計系統(tǒng)中，一般情況下是兩種網(wǎng)格來規(guī)范我們的設(shè)計。一個是應(yīng)用在組件中的網(wǎng)格間距，另外一個是布局中的網(wǎng)格。

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

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

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

△ Materials design（組件構(gòu)成頁面）

這兩種網(wǎng)格間距如何應(yīng)用？

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

上圖，就是我用小尺度完成一些基礎(chǔ)組件，有沒有發(fā)現(xiàn)，我一共就使用了 4 個間距。早期定義好應(yīng)用與組件間距的網(wǎng)格，為后續(xù)設(shè)計師之間合作帶來更多益處。

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

總結(jié)

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

歡迎關(guān)注作者微信公眾號：「功夫UX」