上一篇文章我們主要講的是設計系統的必要性，接下來我將會繼續用后續的文章詳細講解怎么搭建設計系統，希望可以幫助到有需要的人。

上篇回顧：

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

為什么要制作自己的設計系統

很多團隊一提到搭建設計系統，就會有人說，網上有很多公開的設計系統，我們直接使用現成的不好嗎？為什么要費時費力的搭建自己的設計系統，真的有必要嗎？

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

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

一、如何搭建設計系統

1. 搭建重點

要有全局觀，創建的設計系統要是可維護的，可迭代的，要保證設計系統的適應性。

凡事有度，不要追求大而全，要根據公司產品，創建合理的設計資產，畢竟設計系統為的是更好用，提高效率。

2. 搭建流程

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

一般來講，剛開始搭建設計系統的是設計師和開發人員，以設計師為主，梳理當前業務的完整頁面，提煉相同的元素，構成初版的設計系統，并在構建期間，和開發緊密協作，及時溝通。對設計出的組件進行代碼化，同步搭建研發的基礎組件庫。當完成以后，可以加入動效規范、聲效規范、圖標規范……逐步的去完善設計系統，最終形成團隊的設計資產庫。

3. 使用工具

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

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

二、設計資產

隨著設計系統逐步完善，設計資產也會越來越多，最開始是 UI Kit 和開發代碼庫。然后慢慢擴展設計系統邊界，增加其他內容。總的來講，包含以下內容：

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

三、設計語言

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

下面可以先看一看一些公開的設計系統的設計語言：

1. Microsoft Design

Fluent Design System 組成構件的設計理念就是：Light, Depth, Motion, Material, Scale.

2. Apple Design

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

3. Ant Design

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

4. Arco Design

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

5. TDesign

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

通過對上述公開的設計語言的學習，我想大家都應該對設計語言的必要性和內容有一定的了解了，那么在開始進行設計系統搭建之前，先為你的設計系統構建專屬于你的設計語言吧。

四、組件庫分類邏輯

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

接下來我們先來看下一些設計系統的組件劃分：

Ant Design 的組件劃分為：通用組件，布局組件，導航組件，數據錄入和數據展示組件，反饋型組件、其他組件和重型組件。

TDesign 的組件劃分為：基礎組件、布局組件、導航組件、輸入組件和數據展示組件、消息提醒組件。

Arco Design 的組件劃分為：通用組件，布局組件，數據錄入和數據展示組件，反饋型組件、導航組件和其他組件。

……

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

在我構建組件庫的分類時，為了盡可能的減少使用者的學習成本，所以用最簡單的分類方式進行劃分：全局樣式、基礎控件和系統組件三種分類。

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

總結

本篇文章主要是想要和大家講述下具體搭建設計系統之前的工作，不管是設計語言還是組件庫分類，都是為了讓我們的設計系統搭建的更加具有邏輯性。所以還是很有必要的，但是由于筆者是在 HMI 行業做設計師的，所以很多內容是具有很強行業特性的，大家不必完全保持一致，可以根據自己具體的團隊和實際情況進行適當調整。還是那句老話，設計系統是為了提高效率。所以好用、易用是我們的一切出發點。接下來我們就進入到設計系統的詳細設計階段了，敬請期待！