在開始之前，我需要先解釋一個問題：

為什么要制作自己的設(shè)計系統(tǒng)

很多團隊一提到搭建設(shè)計系統(tǒng)，就會有人說，網(wǎng)上有很多公開的設(shè)計系統(tǒng)，我們直接使用現(xiàn)成的不好嗎？為什么要費時費力的搭建自己的設(shè)計系統(tǒng)，真的有必要嗎？

首先，網(wǎng)上公開的設(shè)計系統(tǒng)，一般是指該企業(yè)的設(shè)計語言，是該企業(yè)產(chǎn)品的設(shè)計基石。但是這并不適用于所有的團隊，比如，筆者所在行業(yè)是 HMI 行業(yè)，但是網(wǎng)上的設(shè)計系統(tǒng)基本上都集中在 pc 端，那么就有很多的規(guī)則無法在 HMI 設(shè)計中使用，畢竟設(shè)計系統(tǒng)的建立是為了提高效率，不能使用或者不合適的設(shè)計系統(tǒng)很有可能對設(shè)計造成阻礙。

如果對網(wǎng)上公開的設(shè)計系統(tǒng)了解多的話，就會發(fā)現(xiàn)，很多的設(shè)計系統(tǒng)對研發(fā)更加友好，但是并不適合設(shè)計師使用，它更多是一個說明文檔，讓別人看的，但不能用。所以對于一定規(guī)模的團隊來講，搭建自己團隊的設(shè)計系統(tǒng)就勢在必行了。

一、如何搭建設(shè)計系統(tǒng)

1. 搭建重點

要有全局觀，創(chuàng)建的設(shè)計系統(tǒng)要是可維護的，可迭代的，要保證設(shè)計系統(tǒng)的適應(yīng)性。

凡事有度，不要追求大而全，要根據(jù)公司產(chǎn)品，創(chuàng)建合理的設(shè)計資產(chǎn)，畢竟設(shè)計系統(tǒng)為的是更好用，提高效率。

2. 搭建流程

由于設(shè)計系統(tǒng)搭建需要多角色、多部門協(xié)作，如果公司或者團隊無法組建一個完整的設(shè)計系統(tǒng)團隊，那么我們就需要循序漸進，慢慢擴展設(shè)計系統(tǒng)的邊界，讓設(shè)計系統(tǒng)逐漸成長，完善。

一般來講，剛開始搭建設(shè)計系統(tǒng)的是設(shè)計師和開發(fā)人員，以設(shè)計師為主，梳理當(dāng)前業(yè)務(wù)的完整頁面，提煉相同的元素，構(gòu)成初版的設(shè)計系統(tǒng)，并在構(gòu)建期間，和開發(fā)緊密協(xié)作，及時溝通。對設(shè)計出的組件進行代碼化，同步搭建研發(fā)的基礎(chǔ)組件庫。當(dāng)完成以后，可以加入動效規(guī)范、聲效規(guī)范、圖標(biāo)規(guī)范……逐步的去完善設(shè)計系統(tǒng)，最終形成團隊的設(shè)計資產(chǎn)庫。

3. 使用工具

由于筆者是 HMI 設(shè)計師，所以只針對設(shè)計師在用的工具進行簡單描述，其他角色的工具就不進行綴續(xù)了。

對于目前的設(shè)計師來講，用得最多的就是 Sketch 和 Figma 了，Sketch 對于 UI 設(shè)計師來講大都非常熟悉，F(xiàn)igma 更是最近幾年設(shè)計協(xié)同的利器，雖然這兩個軟件都是設(shè)計軟件，但是由于這兩個軟件底層邏輯并不相同，所以在制作設(shè)計師的樣式庫和組件庫時略有不同，如果后續(xù)有必要的話，我會專門出一篇文章來講解怎么用 Sketch 和 Figma 創(chuàng)建 UI 控件組件庫。

二、設(shè)計資產(chǎn)

隨著設(shè)計系統(tǒng)逐步完善，設(shè)計資產(chǎn)也會越來越多，最開始是 UI Kit 和開發(fā)代碼庫。然后慢慢擴展設(shè)計系統(tǒng)邊界，增加其他內(nèi)容?？偟膩碇v，包含以下內(nèi)容：

1. 設(shè)計價值觀及原則
2. 樣式庫
3. 控件組件庫
4. 設(shè)計說明文檔
5. 開發(fā)說明文檔
6. 圖標(biāo)庫
7. 動效
8. 聲效
9. ……

三、設(shè)計語言

為了讓設(shè)計系統(tǒng)可以保持統(tǒng)一性和延展性，那么必須要有一個統(tǒng)一的設(shè)計指導(dǎo)理念，讓每一個使用者可以通過設(shè)計語言，明確我們的設(shè)計目標(biāo)和方向，減少設(shè)計中出現(xiàn)的偏差。所以對于一個設(shè)計系統(tǒng)來講，提煉自己的設(shè)計語言是必要且有效的。

下面可以先看一看一些公開的設(shè)計系統(tǒng)的設(shè)計語言：

1. Microsoft Design

Fluent Design System 組成構(gòu)件的設(shè)計理念就是：Light, Depth, Motion, Material, Scale.

2. Apple Design

蘋果的設(shè)計規(guī)范包括：完整性，一致性，直接操作，反饋，隱喻，用戶控制等幾個設(shè)計原則。

3. Ant Design

Ant Design 設(shè)計價值觀包括自然、確定性、意義感、生長性。

4. Arco Design

Arco Design 基于「清晰」、「一致」、「韻律」和「開放」的設(shè)計價值觀，試圖建立務(wù)實而浪漫的工作方式。

5. TDesign

TDesign 為了在開源體系的基礎(chǔ)上打造具有自身品牌特色且好?的產(chǎn)品，秉承包容、多元、進化、連接的價值觀。

通過對上述公開的設(shè)計語言的學(xué)習(xí)，我想大家都應(yīng)該對設(shè)計語言的必要性和內(nèi)容有一定的了解了，那么在開始進行設(shè)計系統(tǒng)搭建之前，先為你的設(shè)計系統(tǒng)構(gòu)建專屬于你的設(shè)計語言吧。

四、組件庫分類邏輯

接下來我們就進入到設(shè)計系統(tǒng)的具體設(shè)計了，對于那么多的設(shè)計元素，我們該怎么進行分類呢？由于業(yè)務(wù)組件和元素劃分完全取決于不同公司的實際需求，并無定式，所以我這里說的組件庫劃分主要指基礎(chǔ)組件庫的劃分。并且并不一定適合所有團隊。僅供參考。

接下來我們先來看下一些設(shè)計系統(tǒng)的組件劃分：

Ant Design 的組件劃分為：通用組件，布局組件，導(dǎo)航組件，數(shù)據(jù)錄入和數(shù)據(jù)展示組件，反饋型組件、其他組件和重型組件。

TDesign 的組件劃分為：基礎(chǔ)組件、布局組件、導(dǎo)航組件、輸入組件和數(shù)據(jù)展示組件、消息提醒組件。

Arco Design 的組件劃分為：通用組件，布局組件，數(shù)據(jù)錄入和數(shù)據(jù)展示組件，反饋型組件、導(dǎo)航組件和其他組件。

……

這些分類都是非常合理的劃分，所以我們在設(shè)計組件庫時可以參考或者直接使用。不過這里我想提一些不同的意見，因為組件庫的分類主要是為了好用，便于識別，雖然上述的分類標(biāo)準很清晰，但是也出現(xiàn)了過于詳細的問題，那么我們在找一些需要的控件組件的時候，就需要先去思考它屬于哪個分類下，所以需要團隊內(nèi)的成員對組件庫的分類標(biāo)準非常清晰，并且對于每個控件組件的歸類也非常清晰。

在我構(gòu)建組件庫的分類時，為了盡可能的減少使用者的學(xué)習(xí)成本，所以用最簡單的分類方式進行劃分：全局樣式、基礎(chǔ)控件和系統(tǒng)組件三種分類。

通過簡單的進行分類，大家不需要增加學(xué)習(xí)成本，可以更好的找到需要的控件組件，方便調(diào)用，也方便于資源庫的推廣。以上只是我這些年工作的經(jīng)驗之談，僅供參考。

總結(jié)

本篇文章主要是想要和大家講述下具體搭建設(shè)計系統(tǒng)之前的工作，不管是設(shè)計語言還是組件庫分類，都是為了讓我們的設(shè)計系統(tǒng)搭建的更加具有邏輯性。所以還是很有必要的，但是由于筆者是在 HMI 行業(yè)做設(shè)計師的，所以很多內(nèi)容是具有很強行業(yè)特性的，大家不必完全保持一致，可以根據(jù)自己具體的團隊和實際情況進行適當(dāng)調(diào)整。還是那句老話，設(shè)計系統(tǒng)是為了提高效率。所以好用、易用是我們的一切出發(fā)點。