今年因為業務量增大，我所在的公司組織越來越強調“可復制”這個概念了。這不是一個新的概念，對應到設計來說，大概就要提到設計系統這件事了。

很多年前剛聽到這個概念的時候，一直覺得設計系統是個非常高大上和牛逼哄哄的事情，當時 Material Design 剛剛出來沒多久，蘋果的人機設計指南在設計圈稱王稱霸，雖然自己主要做的都是安卓系統，還是認真拜讀了 IOS 的 Human Interface Guidelines。

然后，其實也沒有什么然后了……

你怎么看待設計系統這件事呢?

關于設計系統，有的人會覺得類似于一種玄學，有的人認為它好是好，但容易被束之高閣，放著落灰，有的人認為它對于設計師是一種束縛……另外，還有很多和它相關的概念也經常被混淆：設計語言、設計原則、設計規范、設計風格、設計組件…… 

 圖 1: 設計系統詞云圖

為了理清設計系統到底是什么，我把上面的這些和設計系統經常出現的詞語進行了分類。我認為，它們指出的，應該是基于不同角度對設計系統的解釋。在這些詞語里，有的解釋了設計系統存在的原因：追求效率，保持一致性、避免重復勞動，有助于數字產品形成整體性等。有的解釋了它的組成或者相關聯的內容：設計規范、設計語言、設計原則、設計規范、設計風格、設計組件等。有的解釋了設計系統容易出現的問題：玄學、束縛、高大上，理想化等。

存在原因

存在原因，也就是建設設計系統的目的，正是由于設計系統是為了幫助我們的工作工作更加有效率的一個整體工具，也就注定了設計系統的樣式、組成和運作方式不會一層不變，每個公司都需要自己找出適合自己團隊設計與開發之間最順暢的那個系統。

要知道，雖然設計系統聽起來很酷，但創建一個好的設計系統其實是非常消耗精力的。所以，設計系統的目的一定要清晰并且符合現狀需要。

為什么還要去創建設計系統呢?

我認為，只有對于下面這幾條，你或團隊有強烈的需求，才是生成一個設計系統的好時機。

• 以往的設計內容總是需要被快速重復使用
• 需要釋放設計資源，讓人力更專注于更加復雜和有價值的問題。
• 需要在多個團隊或多個產品之間保持一致性
• 需要幫助初級設計師的產出迅速達到更高級的要求

沒有被需要的設計系統，就是未來束之高閣，等著落灰的一套“玄學”。

組成內容

系統這個詞，是指由相互聯系的要素構成的有特定結構和功能的有機整體。設計系統，自然也是一個整體性的有機集合。 

 圖 2:設計系統的組成內容

1. 設計原則

設計原則是引導設計系統建設的指導思想和戰略方向，基于大量實際經驗提煉的高度理論化概括。

設計原則這個概念并不是為了設計系統才出現的，從完形心理學流派運用過來的格式塔理論所包括的臨近性、相似性、封閉性、連續性等設計原則，還有以“如非必要，勿增實體”為核心的簡約設計原則，來自唐納德諾曼的概念模式、反饋、限制范圍、可感知的預設用途四條設計原則等等。

為了對抽象的設計原則有更具像化的體會，我們再來看看幾個比較有名的設計系統的原則。

• 蘋果公司：美學整體，一致性，直接的操作性，反饋，隱喻，用戶可控
• 微軟公司：自然而然的，符合直覺和有力的，引人入勝且沉浸
• 谷歌公司：材料是一種隱喻，明顯、圖形化和有目的性的，有意義的動效 

 圖 3: 三大設計系統的原則

突然發現就蘋果公司沒給自己的設計系統專門取一個名字啊～

可以發現，雖然三家公司的設計原則各有不同，但幾乎都是從通用的設計原則中提煉優化的。

建設一個設計系統一定需要設定自己的設計原則嗎?

我認為它不是必須的。

雖然設計原則很重要，但在設計系統初期的時候，遵循現有基礎和通用的設計原則來指導建設整個系統也是可以的。總好過隨隨便便從基礎通用的設計原則中拿出一些詞語潤色一下，簡單的堆砌一些高大上的詞語，空泛的放在那里，等著它們逐漸變成別人口中的“玄學”吧?

正因為原則是設計系統高度抽象化的結晶，所以它需要基于大量實際設計經驗再去生成，不然，很難起到指導設計系統達到增加效率的目的。

2. 設計風格和規范

設計風格，是這個設計系統給人形成的一種代表性的圖形印象。設計規范，是用于協調統一性的規則和范式。在 60 年代的《美孚品牌手冊》和 70 年代的 《NASA 圖形使用規范》中，就已經包含“顏色、字體、圖形、用法和示例”等內容。 

 圖 4: 設計規范

有了設計風格和設計規范并不一定就能讓使用這個設計系統的產品建立統一的品牌調性，只有當設計系統具有了一定辨識性的設計風格，并在設計規范指導下進行長期的設計產出后，才能夠讓使用這個設計系統的產品形成統一的品牌調性。

3. 設計組件和模式

對于設計系統里，我們最熟悉和常用的應該就是設計組件了，也就是 UI kits，包括輸入框、按鈕、文字、鏈接、下拉菜單等等。是組成界面的最小元素和這些元素的常用集合體。 

 圖 5: UI kits

設計模式，比元素更復雜一些，是完成任務所使用的一些基礎的、常用的交互方式，是可以解決問題的小型設計方案。比如 Material design 里的 Confirmation and acknowledgement，它提供的就是為機器在執行操作之前向用戶確認的一系列設計方案。 

 圖 6: 設計模式

簡單點來說，設計組件就是一些元素，主要給設計師用的，設計模式就是一些交互方式，主要給研發工程師看的。由于兩者很相似，如今更多的會把兩者合起來看。

2013 年，前端工程師 Brad Forst 將原子理論運用在界面設計中，形成一套設計系統后，設計組件得到進一步擴展，可以形成比原來最初出現設計模式這個概念時更高層次的集合體，例如，大到幾個完整的頁面及其包含的交互方式，也可以成為某個設計系統的其中一個組件。

當然，由于各個產品的需求、場景和定位等不同，越大的合成組件將會越復雜。 

圖 7: 原子設計理論

4. 內容資產

在某些設計系統的定義里，可能會把內容資產作為設計規范的一部分，但我這里想強調的是其作為資源的一部分。

由于設計系統是一個有機的整體，在它不斷的服務于各產品線的同時，也一定會需要不斷填充不同的內容，比如應用里使用的圖標、字體、插畫、模型等等，這些內容積累下來，也應該成為這個設計系統的一部分，如果有其他的應用或產品需要，就可以直接取用，從而提高整體的工作效率。

內容資產比較常見的有圖標庫、字體庫和音效庫，分別提供了多種圖標、多種字體和多種音效可以給不同的產品或應用使用。隨著插畫風格、三維風格的留下，未來必然還會出現隸屬于某個設計系統的插畫庫、模型庫，以及在產品里經常使用的文案集合。 

 

圖 8: 內容資產

5. 工具、流程

這兩塊主要是針對設計系統適用的具體環境，在協同性要求下我認為需要納入設計系統的內容。簡單的舉例來說，就是如果使用藍湖做自動化標注，就團隊統一使用藍湖，而不是有的人使用藍湖，有的人使用摹客。

6. 設計語言和設計方針(guidelines)

還有兩個經常提到，但我剛才畫的設計系統圖示里沒有提到的概念。

設計語言：語言，是一個能夠達到相互交流的符號系統。人類學家索緒爾認為，語言能反映出多變言語活動背后的穩定規律。所以，我認為這里的設計語言，應該等同于設計規范，是設計規范另一種表述。

設計指導方針(Design Guidelines)：按照中文翻譯理解，我認為它是說明、介紹設計系的文檔，沒有包含在設計系統內。

常見問題

最后，設計系統的詞云圖里出現的玄學、理論化、落灰、空中樓閣……這些都是創建設計系統時很容易遇到的一些問題，尤其是實用性最高的設計組件，更是首當其沖。之前我組織我們團隊的設計師做復盤性質的workshop，單就設計系統的設計組件部分，大家就提出了20多條問題。 

 圖 9: 設計組件復盤 workshop

綜合來說，設計系統常見的問題有三類：

1. 定義性問題

設計系統從大的框架性定義到具體設計組件的定義都不是件一蹴而就的事情，它從 0 開始，每一次的更新和迭代，對于當前的團隊來說都需要是既關鍵又有效的。關鍵是指設計系統當前定義下來的內容是后面的產品線經常性使用的，有效是指這些定義確定下來的內容是可以使用現有的資源去完成的，即以現有團隊的能力、時間和設備是可以完成并達成其效果的。

2. 使用性問題

目錄不清晰，文檔說明不全，包含資源不完整，這些都是使用時的問題。如果把設計系統看作一個產品，讓用戶(設計師或研發人員)覺得好用，才是它不會被束之高閣的解決方法。

3. 協作性問題

不知道有更新，收不到反饋，不了解使用者的情況……協作性的問題催生了市面上諸如藍湖、摹客、墨刀、Codesign以及很多設計軟件的云服務功能等。

雖然現在市面上有非常多優秀的設計系統可以參考，但正如在存在原因中提到的，由于它是為了幫助我們自己所在的團隊更有效率的工作，終究還是需要靠自己基于實際情況去做變化。