摘要：總體來看，整個(gè)設(shè)計(jì)系統(tǒng)由和一些相關(guān)的組成。主流風(fēng)格目前業(yè)界廣泛使用的包括等等。是對某一類問題解決方案的抽象。這些共同構(gòu)成了表單數(shù)據(jù)提交場景下的。是一系列的基礎(chǔ)原件。的基本組成便是。值的可配置化是設(shè)計(jì)系統(tǒng)客制化的重要組成部分。

設(shè)計(jì)系統(tǒng)的產(chǎn)生是為了某領(lǐng)域內(nèi)產(chǎn)品在不同平臺和設(shè)備上都保持設(shè)計(jì)和交互風(fēng)格的統(tǒng)一。既然是一個(gè)系統(tǒng) ，那必須具有相應(yīng)的完整性。它為產(chǎn)品設(shè)計(jì)，產(chǎn)品內(nèi)容等方面提供相應(yīng)的指導(dǎo)?？傮w來看，整個(gè)設(shè)計(jì)系統(tǒng)由Design Principle, Design Language, Code Library 和一些相關(guān)的Tools組成。從以下的圖可以更直觀的看到它的組成部分。

目前業(yè)界廣泛使用的visual language包括Material Design, Metro Design 等等?？梢韵胂笥幸粋€(gè)數(shù)軸，數(shù)軸一端是扁平風(fēng)格，另一端是擬物風(fēng)格。目前大部分的設(shè)計(jì)風(fēng)格都分布在這條數(shù)軸之間。

Google的Material Design是一個(gè)使用廣泛的視覺語言(visual language). 統(tǒng)一了google系產(chǎn)品的視覺風(fēng)格，并且能對其進(jìn)行一定程度的客制化。

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

Material is the metaphor

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

Design language較為重要的組成部分便是Design Principle, Design Pattern和Design Components這三部分。 Design Principle給出了高級別的抽象，是整個(gè)Design language的精神指導(dǎo)，就像某種文化一般，貫穿在設(shè)計(jì)與開發(fā)的所有環(huán)節(jié)。Design Pattern則是組合Design Components來解決現(xiàn)實(shí)中一類問題的規(guī)則。交互設(shè)計(jì)師和產(chǎn)品經(jīng)理都可以利用這些規(guī)則來進(jìn)行相應(yīng)的交互和產(chǎn)品上的設(shè)計(jì)。

Design Principle描述了某個(gè)領(lǐng)域內(nèi)業(yè)務(wù)形態(tài)或者操作形態(tài)的一系列規(guī)則。它體現(xiàn)的是某種精神，你的產(chǎn)品設(shè)計(jì)，UX/UI設(shè)計(jì)等都需要圍繞著這些精神。不同的公司甚至不同的團(tuán)隊(duì)都會有不同的Principle，但是也可能具有相同的Principle。google提出的Meteral Design, 便許多公司都遵從著這套方案，但是也會根據(jù)自己的業(yè)務(wù)做一定的修改，從而形成自己獨(dú)有的精神。 例如某通訊公司的Design Principle是：

High Efficiency（高效）

Communicating Authentic（溝通真實(shí)）

Build Trust（可信）

Stay Stable（穩(wěn)定）

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

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

輸入數(shù)據(jù)

提交數(shù)據(jù)

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

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

Code Libray的基本組成便是Components。 理想狀態(tài)下，代碼中庫Components是實(shí)現(xiàn)了Design Language中的大部分的Design Components和Design Pattern，當(dāng)然在現(xiàn)實(shí)情況下會視情況而定。在開發(fā)基于某個(gè)Design Language的代碼庫時(shí)，需要針對該Design Language建立基本的Foundation, Design token， 最后才在此基礎(chǔ)上開發(fā)相應(yīng)的Components

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

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

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

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

Theme定義了一個(gè)設(shè)計(jì)系統(tǒng)的主題調(diào)，它包含所有的Design token以及一些相應(yīng)的計(jì)算規(guī)則。譬如Button的圓角，顏色，大小會利用Design token進(jìn)行組合，并且當(dāng)鼠標(biāo)懸浮至一個(gè)button上時(shí)，背景色會根據(jù)button原有的色值按照一定的規(guī)則進(jìn)行計(jì)算。

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

const palette: Palette = {
  action: {
    // 將透明度變?yōu)?.8
    hover: (color) => color.setAlpha(0.8);
  }
}

這里定義了primary的顏色，而且定義了一個(gè)hover的規(guī)則，當(dāng)鼠標(biāo)懸浮到一個(gè)button上時(shí)，button的色值的透明度便會變成0.8;

Components主要是組成一個(gè)界面的最基礎(chǔ)元素以及相應(yīng)的Design Pattern。在代碼層面，需要高度的還原Design Language中定義的組件，以及需要符合軟件開發(fā)的規(guī)范。譬如靈活性，魯棒性等。就最常用的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四種屬性，在使用過程中，通過控制這四種屬性來便可以控制組件的形態(tài)。

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