摘要：總體來看，整個設計系統由和一些相關的組成。主流風格目前業界廣泛使用的包括等等。是對某一類問題解決方案的抽象。這些共同構成了表單數據提交場景下的。是一系列的基礎原件。的基本組成便是。值的可配置化是設計系統客制化的重要組成部分。

設計系統的產生是為了某領域內產品在不同平臺和設備上都保持設計和交互風格的統一。既然是一個系統 ，那必須具有相應的完整性。它為產品設計，產品內容等方面提供相應的指導。總體來看，整個設計系統由Design Principle, Design Language, Code Library 和一些相關的Tools組成。從以下的圖可以更直觀的看到它的組成部分。

目前業界廣泛使用的visual language包括Material Design, Metro Design 等等。可以想象有一個數軸，數軸一端是扁平風格，另一端是擬物風格。目前大部分的設計風格都分布在這條數軸之間。

Google的Material Design是一個使用廣泛的視覺語言(visual language). 統一了google系產品的視覺風格，并且能對其進行一定程度的客制化。

Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.

與Apple先前的擬物化設計不同，Material Design 把設計風格從擬物化的一端往扁平化的方向拉了拉，但卻不是完全的扁平。它保持了物理世界的一些特質和紋理，并從X軸、Y軸、Z軸 三個維度描述一個物體. 在Z軸上的投影模擬了光的照射和基于此形成的陰影, 從而使設計元素有了立體的感覺。譬如Button的設計便是在底部利用shadow使按鈕有略微上浮的感覺從而形成立體感。Card設計也是類似，利用border和shadow使整個Card從屏幕中上浮出來一般。

Material is the metaphor

Materail是一種隱喻。紙張和油墨先于電子屏出現在人們的生活中。中國漢代發明了造紙術，紙張作為書寫材料得以普及，北宋的活字印刷術把文字低成本的放到了紙上，紙張上的信息得以較為廣泛的傳播。如今大量的信息從物理世界的紙張轉移到了電子屏幕上。Materail Design 借用了紙張的隱喻并從傳統的印刷方案中得到啟發，元素具有紋理、質感、陰影、折疊等紙張的特性并且擁有排版、顏色、字體上的規則。點擊元素觸發的水波紋猶如魔法棒施加魔法的過程，等待著水波紋褪去后的驚喜，這大概便是連接虛擬世界和現實世界的魔法。

Design language較為重要的組成部分便是Design Principle, Design Pattern和Design Components這三部分。 Design Principle給出了高級別的抽象，是整個Design language的精神指導，就像某種文化一般，貫穿在設計與開發的所有環節。Design Pattern則是組合Design Components來解決現實中一類問題的規則。交互設計師和產品經理都可以利用這些規則來進行相應的交互和產品上的設計。

Design Principle描述了某個領域內業務形態或者操作形態的一系列規則。它體現的是某種精神，你的產品設計，UX/UI設計等都需要圍繞著這些精神。不同的公司甚至不同的團隊都會有不同的Principle，但是也可能具有相同的Principle。google提出的Meteral Design, 便許多公司都遵從著這套方案，但是也會根據自己的業務做一定的修改，從而形成自己獨有的精神。 例如某通訊公司的Design Principle是：

High Efficiency（高效）

Communicating Authentic（溝通真實）

Build Trust（可信）

Stay Stable（穩定）

在產品及UX設計過程中，都需要去遵循這些原則。一個行為交互是否能應用在產品上，首先要考慮是否符合這些原則。譬如一款通訊軟件，右側列表里是否需要對單聊與群聊分為兩個不同的類別，對于服務于企業的通訊軟件，在企業內部合作過程中，經常會對某個項目或者問題建立一個討論組或者項目組，所以或許對兩個類別進行分類會更高效。這里的考慮便是是否遵守了High Efficiency。

Design Pattern是對某一類問題解決方案的抽象。用GUI程序開發的角度去看的話，它應該是對應于業務組件。既然是業務組件，那么就是針對了某一類具體業務的解決方案。一個具體的交互場景是用戶利用表單來提交數據。用戶的操作無非是：

輸入數據

提交數據

但是用戶在進行這兩個步驟時，會出現數據校驗，包含校驗規則，校驗失敗和成功的提示, 提交數據前的確認對話框，提交數據后的反饋（成功或者失敗提示）。這些共同構成了表單數據提交場景下的Pattern。簡而言之，Design Pattern就是利用基礎組件解決某一類問題的方案。

Design Components是一系列的基礎原件。就web領域來說，它可能是瀏覽器上的輸入框，按鈕，復選框，彈出框等一系列的不帶有具體業務的基礎組件。而對于一個組件來說，需要定義它在不同交互操作時的不同表現的規范。拿最常見的組件Button(按鈕)來說，它在點擊(active)， 鼠標移到它的上方(hover)， 禁用(disabled)時的具體表現，包括顏色變化，動畫效果等都需要在Design Components里進行詳細的定義，這樣才能說一個Design Component是完整的和可用的。

Code Libray的基本組成便是Components。 理想狀態下，代碼中庫Components是實現了Design Language中的大部分的Design Components和Design Pattern，當然在現實情況下會視情況而定。在開發基于某個Design Language的代碼庫時，需要針對該Design Language建立基本的Foundation, Design token， 最后才在此基礎上開發相應的Components

在建立代碼庫時，首要的便是先要建立Foundation，這便需要與交互設計師進行反復溝通，確定基本的布局，顏色，字體字號等。一旦確定后，之后組件的開發都會利用Foundation里定義好的規范來進行。在代碼實操中，Foundation主要會包含Theme和相應的輔助函數。

Design token是設計尺度的固化，它描述了在這個設計系統中的顏色，字體，邊框等一系列設計規格的所有可能取值。Design token與計算機語言里的枚舉的概念有些類似，在用代碼實現的一套組件的過程中，可以將Design token 分為名稱和值兩部分。名稱一旦定下來，便不可改變，值則可以根據需要進行配置。譬如可以用如下代碼描述一個字體的Design token

// 定義名字
interface FontSize {
  small: string;
  medium: sting;
  large: string;
  xlarge: string;
}
// 定義值
const fontSize: FontSize = {
  small: "12px";
  medium: "14px";
  large: "16px";
  xlarge: "18px";
}

在上面的定義中，我們規定了在一個設計系統中字體大小的取值只有四種: small, medium, large, xlarge, 在用代碼來實現的組件庫中，字體的大小只能取這四個類型，每個類型對應于一個特定的值。值的可配置化是設計系統客制化的重要組成部分。得益于這些token的建立，各個角色對遵循于此設計系統的產品在設計上能達到一定程度的共識。

Theme定義了一個設計系統的主題調，它包含所有的Design token以及一些相應的計算規則。譬如Button的圓角，顏色，大小會利用Design token進行組合，并且當鼠標懸浮至一個button上時，背景色會根據button原有的色值按照一定的規則進行計算。

interface Palette {
  ...
  primary: #ffffff;
  action: {
    hover: Function;
  }
}

const palette: Palette = {
  action: {
    // 將透明度變為0.8
    hover: (color) => color.setAlpha(0.8);
  }
}

這里定義了primary的顏色，而且定義了一個hover的規則，當鼠標懸浮到一個button上時，button的色值的透明度便會變成0.8;

Components主要是組成一個界面的最基礎元素以及相應的Design Pattern。在代碼層面，需要高度的還原Design Language中定義的組件，以及需要符合軟件開發的規范。譬如靈活性，魯棒性等。就最常用的Button來說，如下是一種定義組件的方法:

interface BtnProps {
  variant: "round" | "plain";
  size: "small" | "medium" | "large";
  color: "primiry" | "secondary";
  loading?: boolean;
  children: any;
}

class Button extends Component  {
  .....
}

export default Button

這里主要定義了Button組件的variant,size,color,loading四種屬性，在使用過程中，通過控制這四種屬性來便可以控制組件的形態。

這便是一個Design System的主要組成部分。當然在實際開發過程中，可能會遇到很多跨角色溝通，跨team合作等溝通合作的問題，也會遇到很多軟件質量和設計上的問題，這些都是在構建一個Design System時需要解決和考慮的。