解密 Design System

簡介

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

主流風格

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

Material 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 language較爲重要的組成部分即是Design Principle, Design Pattern和Design Components這三部分。 Design Principle給出了高級別的抽象，是整個Design language的精神指導，就像某種文化通常，貫穿在設計與開發的全部環節。Design Pattern則是組合Design Components來解決現實中一類問題的規則。交互設計師和產品經理均可以利用這些規則來進行相應的交互和產品上的設計。

Design Principle

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

• High Efficiency（高效）
• Communicating Authentic（溝通真實）
• Build Trust（可信）
• Stay Stable（穩定）

在產品及UX設計過程當中，都須要去遵循這些原則。一個行爲交互是否能應用在產品上，首先要考慮是否符合這些原則。譬如一款通信軟件，右側列表裏是否須要對單聊與羣聊分爲兩個不一樣的類別，對於服務於企業的通信軟件，在企業內部合做過程當中，常常會對某個項目或者問題創建一個討論組或者項目組，因此或許對兩個類別進行分類會更高效。這裏的考慮即是是否遵照了High Efficiency。

Design Pattern

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

• 輸入數據
• 提交數據

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

Design Components

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

Code Library

Code Libray的基本組成即是Components。 理想狀態下，代碼中庫Components是實現了Design Language中的大部分的Design Components和Design Pattern，固然在現實狀況下會視狀況而定。在開發基於某個Design Language的代碼庫時，須要針對該Design Language創建基本的Foundation, Design token， 最後纔在此基礎上開發相應的Components

Foundation

在創建代碼庫時，首要的即是先要創建Foundation，這便須要與交互設計師進行反覆溝通，肯定基本的佈局，顏色，字體字號等。一旦肯定後，以後組件的開發都會利用Foundation裏定義好的規範來進行。在代碼實操中，Foundation主要會包含Theme和相應的輔助函數。

Design token

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

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

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 <BtnProps> {
  .....
}

export default Button

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

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