當產品業務不斷迭代，設計產出的不確定性越來越高，一套具有包容性和多元化的設計系統，可以幫助設計師將不確定性控制在一定范圍內，從而真正的釋放重復勞動，讓更多的設計者有機會去觸及更好的產品體驗。

為了更深入了解設計系統，接下來的系列文章就來圍繞設計系統來跟大家分享一下。

在深入探討設計系統之前，我們需要先來了解一下設計系統的概念是怎么形成的。

設計系統最早的概念來自于建筑設計領域，著名建筑大師帕拉迪奧（Palladio）在 1570 年出版了「建筑四書」，是最重要和最有影響力的建筑書籍之一。

這本書也是最早的系統性文檔示例之一，帕拉迪奧從古羅馬建筑中汲取靈感，在書中提出了設計和建造建筑物的規則和詞匯，包含了原則和模式，并詳細地說明和解釋了這些建筑物是如何使用的。

《建筑四書》是最早的系統文檔示例之一

例如在樓梯部分就對不同功能的樓梯進行了分類：螺旋樓梯、橢圓形樓梯和直道樓梯。同時描述了不同樓梯應該在什么樣的建筑物及場景中使用，比如螺旋樓梯適用于「空間狹小的位置」因為螺旋樓梯占用的空間比直樓梯少，但螺旋樓梯上樓花費的體力會更多。

在 1919 年包豪斯運動時期，現代主義先驅路易斯沙利文所提出了“形式追隨功能”的著名現代主義設計名言。

他創新來自于把之前的裝飾元素融入到了 19 世界后期新出現的高層建筑里，通過裝飾來強化建筑的豎直分格。這樣的原則才促成了他著名的信條 "形式總是追隨功能"。

以這句話為出發點，他根據每個項目的功能需求，在必然的結構演變中加以模仿，從而將組件與模塊的概念運用在了工業與建筑設計當中。

1975 年發布的「美國宇航局圖形標準手冊」就是現代 style guide 的早期代表作，它提供了顏色、字體、圖形、用法和示例，以及明確的設計原則，直到現在的品牌/樣式視覺規范依然沒有跳出這個范圍。

在現代平面設計史中，從包豪斯設計原則到排版和網格系統，都在圍繞如何通過規則指南去統一“設計語言”。它們對現代平面設計、網頁設計的演變都產生了根本性的影響，同時也為“設計系統思維”建立了雛形。

20 世紀 90 年代中期，在互聯網的早期發展階段，當時的 web 網頁是由 HTML 技術實現的，在這種技術背景下網頁的設計有非常大的局限性，非常限制網頁設計師的設計發揮。

早期網站的外觀更像是經過美化后的 Word 文檔。而各個瀏覽器也是以滿足功能來決定網頁應該是怎么展示的。

隨著越來越多的人使用互聯網和電腦，在 1994 年出現了關于 CSS 的第一個提案。提案很大一部分是在討論頁面應該如何展示、 是否需要考慮用戶是如何瀏覽頁面的，以及關注頁面字體大小的排布等。

這些討論推動了萬維網聯盟（W3C）的成立，并制定了結構化標準語言、表現標準語言等，對互聯網技術的發展網頁交互設計提供了良好的發展的空間。

在 2002 年，隨著 Java 技術的出現，開發可以基于組件來進行頁面，這大大地提高了網頁布局的靈活性。設計師可以嘗試各種有創意性和復雜性的頁面布局，同時也提高了網頁的美觀度和用戶體驗。

在這里就出現了設計系統中的組件概念，每個組件就像是樂高積木，可以通過移動來創建個性化界面。

2005 年，交互設計師泰德維爾撰寫了《界面設計模式》，泰德維爾效仿上文提到的的設計模式概念，總結出交互設計中的“模式”，以現有理論為基礎，將交互設計中經驗性的東西提煉出來并將其系統化。書中收集并分析了很多常用的用戶體驗界面設計模式，幫助大家理解各種交互設計中常用的解決方案。

2006 年雅虎推出了 Yahoo Design Pattern Library 設計模式庫，模式庫給網頁設計和研發都帶來了效率上的提升，當時的模式庫中包含一些常用的控件和視覺設計說明，以及組件的代碼片段。

在下圖中，我們可以清楚地看到在雅虎的模式庫中提供了組件的開發技術文檔，而模式則提供了如何使用組件的建議。

在 2007 年也出現了像“ui-patterns”這種“模式庫分享平臺”。

用戶體驗領域設計系統的這些早期嘗試，主要是通過收集設計范例來不斷擴展 UI 模式。而模式庫也可以幫助團隊統一內部冗雜的設計語言，提供一致的體驗，減少重復的設計開發工作。

前端工程師 Brad Frost 在 2013 年提出了 Atomic Design（原子設計），一種分層級有條理地創建設計系統的的方法。

感興趣的同學可以點擊鏈接閱讀原子設計這本書： https://atomicdesign.bradfrost.com/chapter-5/

中文版的學習指南：

他從自然界中的化學方程式中受到啟發，原子元素結合在一起形成分子，這些分子可以進一步結合形成相對復雜的生物體，通過這個思維模型我們可以將界面拆解為基礎元素，使用分層的方式來創建設計系統。

原子 Atoms：為頁面構成的基本元素。例如文字、顏色、圖標等。

分子 Molecules：由原子構成的簡單 UI 組件。例如，一個標簽，搜索框，圖標共同打造了一個搜索框組件。

組織 Organisms：由原子及分子組成的相對復雜的 UI 組織，例如商品列表、內容卡片等 。

模版 Templates：將 UI 內容進行布局，形成基礎的頁面結構，也可以稱之為原型。

頁面 Pages：將實際內容（圖片、文字等）進行填充，從而形成高保真頁面。

在 2012 之后陸續出現了一批軟件巨頭的設計系統：像微軟的 Microsoft Design Language、SAP 的 UX3 和 Fiori 1.0、IBM 的 Carbon 以及蘋果推出的 iOS HIG 人機交互設計指南等。

谷歌在 2014 年推出 Material Design 后，設計系統的概念終于成熟了。“iOS HIG” 和 “Google Material Design” 也形成了設計系統界的兩座大山。

在這里值得一提的是，Material Design 中“從目標到結果、從抽象到具體、從整體到局部”的“設計系統性”，是非常值得每位設計師去學習的。

MD 所定義的設計目標是創造一種視覺語言，能夠將經典的設計原則與創新的科學技術結合起來；開發一個能夠跨平臺使用的底層系統，使 Google 旗下的電腦、穿戴設備、電視等設備都可以使用 MD，看看為了這個目標 MD 都做了什么：

• 為了適應不同的屏幕分辨率，規定了 dp 作為基礎尺寸單位；
• 為了適應不同產品內容，采用“卡片式設計”來作為信息組織的方式；
• 為了更容易被用戶理解，從物理現實中學習了諸如質感、投影、加速度、紙張的模擬等隱喻方法。

MD 將這些巧妙的設計總結為“材質即隱喻”、“模仿印刷物”、“有意義的動效”的設計原則。

在 2105 年之后隨著移動互聯網的迅速發展，各大軟件公司相繼發布了自家的設計系統，像 BBC、IBM、Shopify、Salesforce、Gitlab、Airbnb、Uber、螞蟻金服 Ant Design 等。

前不久字節跳動也發布了最新的設計系統：

至此，設計系統越來越被廣泛的應用，設計系統的框架也更加細化和清晰：

設計系統通常作為網站（公共或內部）在線托管，可以把它想象成一個龐大的知識庫。設計系統為公司的各種產品提供了基石和指導，是需要不斷維護和改進的一個有機體。

設計系統涉及到視覺、品牌、交互等大量內容，后續也會繼續來分享設計體系的系列文章，歡迎小伙伴們關注。

歡迎關注作者微信公眾號：「UX實驗室」