前段時間閱讀了一篇好文腾窝，是來自5key老師發(fā)表的「Design System」系列文章缀踪，受益良多，所以也想分享給熱愛設計的你們虹脯，在此對「Design System」系列文章做了一個摘錄概括驴娃，留存學習～原文地址：https://zhuanlan.zhihu.com/p/31197706

什么是Design System？

可以定義為解決數(shù)字產品生產的整體解決方案循集，包含設計唇敞、內容、工程等多個方面咒彤。

如果大家對Design System感到陌生疆柔，那么說到 Design Pattern、Design Component镶柱、Design Language旷档、Design Guideline 等等這類詞相信大家一定不會陌生。即使對于這些概念并不太清晰奸例，但或多或少都會在設計的過程中受到一些影響彬犯。

說到Design System向楼，也是特別巧，因為樓主前段時間恰巧在進行公司B端產品設計體系的制定谐区，這篇文章猶如及時雨一樣給了樓主很多引導和幫助湖蜕，特別是在Component和Pattern這部分，避免了兩者之間的混淆宋列，同時融入了Design Principle的指導與思考昭抒，讓筆者可以站在一個完整的、全局性的視角去思考設計體系規(guī)范的制定炼杖。

Design Principles(設計原則)

Design Principle灭返，其中文翻譯是設計原則。Principles 是一系列的規(guī)則坤邪、指導以及設計中的注意事項熙含。它是我們構建一套Design System 的起點，用于解決業(yè)務艇纺、用戶體驗中的問題怎静，引導設計往既定（正確）的方向前進。

每一個公司(團隊)黔衡，由于其業(yè)務的特性將可能產出不同的 Principles蚓聘。

以 IBM 的 Carbon Design 為例，他們的 Design Principles 是: 1. Be essential (必要的) 盟劫；2. Be inclusive (包容的) 夜牡；3. Be consistent (一致的) ；4. Be humanistic (人文的) 侣签；5. Be delightful (愉快的)塘装。這是 IBM 對其云產品在整體產品體驗上的定義與要求，也是它們想要傳遞給用戶的感受硝岗。作為設計的基本原則氢哮，它將嵌入到其產品袋毙、設計型檀、開發(fā)、文案等一系列場景中听盖，成為產品的“靈魂”胀溺。

Design Principle可以分為業(yè)務型和抽象型兩類：

1、業(yè)務型：

以 SAP 的 Fiori Design 為例皆看，它強調的基于角色? 仓坞、愉快的、一致連貫的腰吟、簡單和適應的无埃。如果你對 SAP 的業(yè)務有一些了解(甚至是它的用戶)徙瓶，你應該不難解這些關鍵詞對于 SAP 用戶的重要性。這些關鍵詞與 SAP 的業(yè)務特性有著非常密切的關聯(lián)嫉称，甚至說做不好這些點他們的用戶將不會愿意繼續(xù)選擇他們的產品侦镇。

2、抽象型：

相對SAP织阅，Material Design 給出的 Principles 就比較抽象了壳繁，似乎很有道理但似乎又什么都沒說。作為一款操作系統(tǒng)級的語言荔棉，它更多的是提供一個土壤闹炉，卻又不知道下一個新出現(xiàn)的產品會是什么樣。他們更需要的是賦予整個環(huán)境一個完整的世界觀润樱，一個經得起推敲(Material)的世界觀渣触。

Material Design 這類 Design System 很重要，我們需要去學習研究它壹若，不過更多是站在其平臺(iOS 也一樣)進行產品設計昵观。對于 Principles 的研究，我們應該放在這些偏業(yè)務的類型上舌稀。畢竟我們很難(也不一定需要)創(chuàng)建一個世界觀啊犬，但做好一款產品是迫切需要的。

Components 是什么壁查？

它是整個產品設計的基礎觉至，是組成一個界面的最基礎元素，為完成一個基礎操作提供支持睡腿。早在 Web 時代我們就有? Components 的概念语御，輸入框、按鈕席怪、文字应闯、鏈接、下拉菜單... 從網開始出現(xiàn)挂捻，這些元素就已經被大家所認知碉纺、牢記。無論頁面的設計如何變化刻撒，它們基本上都是由這些組件所組成的骨田。

當然，網頁時代的早期我們可用的組件并不多声怔，偶爾出現(xiàn)一些新的形式也都是基于現(xiàn)有的組件組合或變形 來的态贤。所以對于用戶來說記住并理解它們的用途并不太難，這也就為日后的設計的不斷發(fā)展提供了一個可被認定醋火、認知的基礎悠汽。

移動互聯(lián)網時代的到來箱吕，用戶的互聯(lián)網環(huán)境已經逐步遷移到手機。于是對于設計師和用戶大家開始接觸到? 了iOS柿冲、Android殖氏、Microsoft 等新的平臺，開始與這些新的組件打交道姻采。

事實上這些元素并沒有發(fā)生太大的變化雅采，它們很多只是基于屏幕大小和可觸控的新特性發(fā)生了進化。 我們所看到的那些組件在不同平臺上的差異性更多是源于系統(tǒng)平臺本身以及它們的設計理念差異慨亲。這個現(xiàn)狀給設計師帶來了更多的麻煩婚瓜，我們在設計產品的同時還需要更多的關注不同操作平臺的組件差異性，以順應 不同用戶的使用習慣刑棵。當然巴刻，隨著行業(yè)的不斷發(fā)展我們所面臨的麻煩會更多，我們現(xiàn)在所能看到的 VR設備蛉签、線下實體以及我們還未看到的新的形式都會讓 Components 不斷的進化胡陪，也變得更復雜。

Patterns 是什么碍舍？

相對于 Components柠座，Patterns 要處理的事情會更復雜一些耗拓。它的目標是為完成一個任務提供基礎操作诀浪，是解決一系列問題的全局解決方案拙寡。

舉一個直接的案例鸵鸥，在 Material Design 中有一個叫做 Confirmation &Acknowledgement (確認與知會)的 Pattern。簡單來說當用戶在App 中執(zhí)行了一個操作垮抗，我們需要給予反饋盟庞，告知用戶器瘪， 這個 Pattern 要解決的問題就是為這一系列場景提供一套設計解決方案经瓷。

Components 與 Patterns 之間的差異

1. Components 相對穩(wěn)定爆哑，是整個 System 中的基礎物料(磚、瓦舆吮、泥)揭朝，是解決單點問題的基礎元素。大家對它是具備基礎認知的歪泳；Patterns 則是解決一類問題的整體解決方案萝勤，有多種的可能性;

2. 從工程角度來說 Components 也是相對穩(wěn)定的露筒，Patterns 是基于這些相對穩(wěn)定的 Components 組合而成的;

3. Patterns 具備領域的差異化呐伞，不同的領域它所關注的點以及設計的處理形式都存在著差異;

4. Patterns 更加的復雜，不只是界面慎式，也可以是流程伶氢、手勢趟径、甚至是透過視覺、動效癣防、方案傳遞出的一種氣質蜗巧。

Design Language

一套設計理念更像是一個世界觀，它最終需要落地在一種 Language 上便于大家理解蕾盯、交流幕屹，Material Design 就是一個太好的案 。從真實世界的觀察到數(shù)字世界中的模擬级遭，Material Design 很好的解釋了其設計理念的由來望拖、論證其合理性。

「Design System」這本書中也有提到一套 Design Language挫鸽，把 Component 比作名詞或動詞说敏、Style 比作形容詞，組成一個短語(Pattern)丢郊。這套基于語言推導出來的 Design Language 通過 Conversation(會話)很好的構建了另一套世界觀盔沫。將 Language 比作世界觀，也就說明了創(chuàng)建它本身的難度枫匾。所以我并不認為一套新的 Design Language 的創(chuàng)建是件容易的事情架诞，它需要體現(xiàn)出設計理念，要經得起大家的挑戰(zhàn)干茉。

Develop Library

Develop Library 是 Design System 中的設計工程化侈贷，也是 System 必不可少的重要一環(huán)。設計和工程的同步才有可能保障產品設計中的一致性和效率等脂。

有很多“Design System”是基于 Pattern俏蛮、Component 等文檔型，準確的說應該是 Guideline上遥。 只有將設計模式再落地到工程環(huán)境中才能稱之為 System(如 Carbon搏屑、Lightning、MailChimp)粉楚。隨著設計的更新迭代辣恋，工程師進行 Library 的更新迭代以確保整個系統(tǒng)及其衍生的產品穩(wěn)健的更新、服務模软。

Design Guideline

最后我們再來說說 Guideline伟骨。在基于 Design Principles 創(chuàng)建出服務于自身業(yè)務的 Pattern(Component)、除了 Language? 便于大家理解和交流燃异，我們還需要一系列的文檔輔助生態(tài)中的用戶(團隊內携狭、外)正確的使用它們創(chuàng)建滿足要求的產品體驗，這就是 Guideline 的目標和意義回俐。

最典型的案例也來自 Material Design 逛腿。在 Guideline 中它描述了某個Component 或 Pattern 的定義稀并、使? 法、最佳實踐单默，甚至還有 do 和don’t碘举，幫助設計師更有效的使用 Guideline 輔助設計。

對于 Guideline 業(yè)內似乎并不刻意去區(qū)分它的意義搁廓，可能會導致大家對于它和Pattern引颈、 Component 甚至是 Language 之間的混淆。從使用角度來說 Guideline 也許可以包含(代表)那些其他概念境蜕，但從邏輯角度出發(fā)我們依舊需要清楚它的目的以及何時出現(xiàn)线欲。

在明白了這些理論后，我們還需要多多實踐汽摹，就像樓主給公司B端產品做設計體系一樣李丰，有機會能在工作中去運用這些知識，發(fā)現(xiàn)不足逼泣、錯誤趴泌，然后去改進和吸收正確的方式，我想只有切身體會和經歷拉庶，這些知識才會變成你的知識嗜憔，載入到你的知識庫里，然后一直受用～