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

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

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

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

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

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

1. 搭建重點(diǎn)

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

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

2. 搭建流程

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

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

3. 使用工具

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

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

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

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

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

三、設(shè)計(jì)語言

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

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

1. Microsoft Design

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

2. Apple Design

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

3. Ant Design

Ant Design 設(shè)計(jì)價(jià)值觀包括自然、確定性、意義感、生長(zhǎng)性。

4. Arco Design

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

5. TDesign

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

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

四、組件庫分類邏輯

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

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

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

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

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

……

這些分類都是非常合理的劃分，所以我們?cè)谠O(shè)計(jì)組件庫時(shí)可以參考或者直接使用。不過這里我想提一些不同的意見，因?yàn)榻M件庫的分類主要是為了好用，便于識(shí)別，雖然上述的分類標(biāo)準(zhǔn)很清晰，但是也出現(xiàn)了過于詳細(xì)的問題，那么我們?cè)谡乙恍┬枰目丶M件的時(shí)候，就需要先去思考它屬于哪個(gè)分類下，所以需要團(tuán)隊(duì)內(nèi)的成員對(duì)組件庫的分類標(biāo)準(zhǔn)非常清晰，并且對(duì)于每個(gè)控件組件的歸類也非常清晰。

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

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

總結(jié)

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