近年來，“設計系統”一詞逐漸受到國內外的廣泛關注與使用。許多企業內部也開始嘗試建立與開發屬于自己的設計系統，希望以此來提高產品迭代的連續性和團隊協作的有效性。而設計系統不僅是一個“可共享與復用的系統”，它還是組件化和系統化思維的體現，因此，從這一思維入手了解設計系統，或許可以得到一個更全面的掌握。

早在1919年“設計系統思維”就以蘊含在一些設計理念當中了。例如，在1919-1933年的包豪斯運動（The Bauhaus Movement）時期，由路易斯沙利文所提出的“形式追隨功能”（Form Follows Function）理論，提倡了與其過分追逐浮夸裝飾設計，設計師們應該更注重功能上的實用與簡潔，從而將組件與模塊的概念運用在了工業與建筑設計當中。這一信條在建筑，藝術、工業設計、平面設計、室內設計、現代戲劇等多重領域中都產生了深遠影響。

如今，這一原則也為今天的產品和頁面設計上也具有一定的指導性意義。例如，在面對繁雜的產品信息內容時，頁面設計除了需要重視質量與美觀之外，還要關注形式與功能上的塑造，像頁面的比例、網格系統和色彩理論等。

直至1950-1960年，瑞士風格（Swiss Style），又稱國際主義設計風格（The International Typographic Style）將網格系統的概念進行了再一步的推導，并且強調使用干凈、易讀與客觀的無襯線字體。實際上，這兩個在藝術史上的關鍵時期，都在圍繞如何通過模式和元素應遵循的規則指南去統一“設計語言”。它們對現代平面設計、桌面排版以及網頁設計的演變都產生了根本性的影響，也為“設計系統思維”建立了雛形，并為之后設計系統的誕生進行了鋪墊。

設計系統如何得以發展

01 個人電腦和網絡的興起

在互聯網的早期發展階段，對設計來說是充滿局限性的。早期網站的外觀更像是經過美化后的 Word 文檔。Web 是由 HTML 構建，CSS 也尚不存在，各個瀏覽器以滿足功能需求為重心，來決定網頁應該是被如何展示的

這一切在 1990 年代中期開始發生轉變。越來越多的人開始使用個人電腦和互聯網，Web逐漸成為電子出版業的首選之地，但HTML風格上的局限性又再次限制了網頁設計師的發揮。對于這一問題，在1994年發布了關于CSS的第一個提案。提案的大部分提議是在討論頁面應該如何被展示、 是否需要考慮用戶是如何查看頁面的，以及關注頁面字體大小的排布等。這些討論推動了萬維網聯盟（W3C）的成立，有效促進了Web技術的互相兼容，并制定了結構化標準語言（XHTML和XML）、表現標準語言（CSS）和行為標準（W3C DOM、ECMAScript等），對互聯網技術的發展和應用起到了基礎性和根本性的支撐作用。這也為交互設計提供了成長的沃土與良好的發展的空間。

02 網絡開發中的技術進步

隨著Web的發展，人們逐漸開始注重更好的用戶體驗。但是即使采用CSS，早期在Web上進行設計依舊是有限的。因為Web的排版布局是利用表格而進行開發的，所以在使用HTML和CSS自定義布局設計時變得很難控制，如同僅使用Word文檔中的數據單元格來實現復雜的界面設計。

直到2002年，“無表格網頁設計“（Tableless Design）開始流行起來，設計師可以有機會嘗試各種有創意性和復雜性的頁面布局。但是，許多網站還是逐頁構建的，頁眉、頁腳和菜單等元素需要被復制并粘貼到每一頁。如果需要更改任意一頁上的某些內容，設計師則必須轉到其他頁面進行相同的修改。但是隨著網站的復雜性和規模上的與日俱增，如何對網站的性能、可擴展性和可維護性上進行優化升級也成為了需要解決的難題。而JavaScrpit的出現與應用，在某一程度上解決了上述問題，并改變了構建網站的方式。JavaScript允許開發人員構建組件而不是整個頁面。在這里也出現了設計系統中提到的組件概念，每個組件就像是樂高積木，可以四處移動從而重新構思并創建任何界面。這讓整個網站的創建變得更方便、更快捷，也讓公司能夠以更短的迭代周期進行創新和交付。

03 技術對于商業上的影響

互聯網的迅速發展使購買個人電腦的人數有了質的提升。根據美國勞工部的一份報告，1990 年至 1997 年間，美國的計算機擁有率從 15% 上升到 35%。計算機從被人們視為一種奢侈品，到開始轉變為生活的必需品。這讓企業逐漸意識到新興信息技術產業市場的潛力，伴隨著互聯網進入繁榮時期，諸多互聯網企業如雨后春筍般涌現。這趟“技術快車”使企業對數字化產品快速迭代的需求急劇上漲，也加重了開發時間上的緊迫感。許多企業需要開始利用組件化和系統化思維去探索相對應的策略，以達到在快節奏下的降本、提質、增效和提高企業競爭力。

04 開發架構從“瀑布模型”到“敏捷方法”的轉型

傳統的軟件開發是建立在“瀑布模型”之上，從系統需求分析到產品上線與之后的運維迭代，每個階段都會產生循環反饋。如果有信息未被覆蓋或者途中出現問題，最好需要“返回”上一階段進行適當修改。所以，從構思到任務分發最長可能需要數年時間。“瀑布模型”更多是基于在“用戶準確知道自己想要什么”，“開發人員能夠完全理解用戶表達”和“需求在研發過程中不會發生變化”而使用的，如同“開弓沒有回頭箭”一般，難以把控或即使“掉轉船頭”。而由于“瀑布模型”本身的特性，公司內部團隊之間也會缺乏協作與溝通，產品需求像水流一樣從設計人員傳遞到開發人員，不太可能出現反復溝通的情況。2001年，一種強調人（和文化）并且致力于改善開發和運維團隊之間的協作的開發方法——“敏捷開發“誕生。這使團隊成員能夠快速交付產品，又能充分了解和收集用戶反饋，再快速連續地進行產品迭代。

從網絡技術更新到商業市場重心轉移再到開發架構轉型，這些趨勢都為設計系統的后續發展提供了不可或缺的擴展與延伸空間。

什么是設計系統

雖然目前對“設計系統”這一概念沒有準確的定義，但是可以通過掌握定義中的關鍵詞，去定位“設計系統”所具有的特性。本篇摘錄了3本講解設計系統的外文書籍、Nielson Norman Group（尼爾森諾曼集團）發布的設計系統文章和空集設計對“設計系統思維”的見解，來對設計系統的定義進行分析。  

01 Alla Kholmatove - “Design System”：在Alla Kholmatova的“Design System”一書中為設計系統下的定義是：設計系統是由一組相互關聯的模式和一套團隊共享規則共同緊密構成的，是用來服務數字端產品的。

摘自原文：A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product.）

02 InVision - "Design Systems Handbook"：由InVision公司所出的設計系統手冊中，認為設計系統是：一組被明確清晰的標準所指導的可重復使用的組件。這些可重復使用的組件可以被組裝在一起去創建任意數量的應用程序。

摘自原文：A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

03 Nielson Norman Group - "Design Systems 101"：Nielson Norman Group（尼爾森諾曼集團）作為全球知名的用戶體驗研究機構，為設計系統下的定義是：設計系統是一套完整的標準，旨在利用可重復使用的組件和模式去管理大規模設計。

摘自原文：A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

04 Sarrah Vesselov & Taurie Davis - “Building Design System”：由Apress出版，Sarrah Vesselov和 Taurie Davis 編寫的“Building Design Systems”書中，對設計系統下了更詳細的定義：設計系統是一系列文檔化的元素、組件和區域，其中包括設計和前端指南。該文檔包括實時代碼示例，允許公司內部各部門在應用程序的多個實例中輕松重復使用樣式和組件。設計系統還包括幫助團隊構建一個或多個產品的基本設計原則、規則和指南。

摘自原文：A series of documented elements, components, and regions that include both design and front-end guidelines. The documentation contains live code examples, allowing cross-functional teams to easily reuse styles and components in several instances across an application. A design system also includes underlying design principles, rules, and guidelines that help a team build one or multiple products.

05 空集設計 - "榫卯設計系統思維"：“設計系統思維”是通過依照設計模組分類法與各項信息檢索方式，將企業內部繁雜的各項信息進行優化錄入、統一管理與高效調用，從而達到視覺信息模組化，模組信息的同質復用系統化的一種思維模式。“設計系統”思維可用于幫助中小型企業縮短產品研發流程，并加強企業對外文化宣傳的一致性，最終使企業整體提質、增效，保持擴大企業競爭力。

在這五種定義當中，雖然定義內容上不盡相同，但是卻又不約而同地將“Pattern、Component、Guideline、Standards”等詞匯放入了對設計系統概念的解釋當中，從這些關鍵詞中可以獲取到設計系統必不可少的幾個組成部分：規則、模式和組件。

設計系統的核心組成

01 風格指南 - Style Guide

風格指南包括用于創建界面或其他設計交付物的特定實施指南、視覺參考和設計原則。最常見的風格指南往往側重于品牌（顏色、排版、商標、標志和印刷媒體），但風格指南也提供關于內容（如品牌調性和推薦的品牌語言）視覺和交互設計的指南標準（也稱為前端風格指南）。這些指南有時也包含在組件庫中，在不同場景下提供相關指引。

02 組件庫（Component Library）

組件庫（Component Library）或也稱設計庫（Design Library）包含了已歸類的目錄和可重復使用在應用程序的UI元素，在一定的設計工具支持下，可實現在更改時自動跨設計文件同步。組件庫除了包含可視化組件以外，還包括：

? 組件名稱（Component Name）：一個特定且唯一的 UI 組件名稱，以避免設計者和開發者之間的理解偏差；

? 組件描述（Description）：對元素的定義和如何對它進行使用的清晰解釋，有時會附上在不同環境下使用時的注意事項；

? 組件屬性（Attribute）：即顏色、大小、形狀或副本等，這些屬性可以根據特定需求進行調整

? 組件狀態（State）：通常是以推薦的默認值進行呈現或跟隨后續外觀變化進行改變 ；

? 代碼片段（Code snippets）：元素的實際代碼摘錄；

? 前端和后端框架（Front-end & Back-end Frameworks）：以避免麻煩和不必要的調試。

03 模式庫 （Pattern Library）

“組件庫”和“模式庫”有時會作為同義詞在設計系統中進行使用。通常模式庫包含供設計團隊使用的頁面內容結構、排版布局和模版等。

為了更清晰全面的了解風格指南（Style Guide）、組件庫（Component Library）和模式庫（Pattern Library）在設計系統中承擔的角色，我們用表格進行了進一步的總結與分析。

設計系統與風格指南、組件庫、模式庫的功能劃分

早期在《1975 NASA Graphics Standards Manual》 手冊中模式庫與組件庫是兩個不同的概念，并且以服務人群作為主要區分點，庫中所放置歸屬的內容也有所不同。但是由于在逐漸使用與完善的過程中，使用者們發現模式庫和組件庫的目錄有許多相似點，所以一些設計系統選擇將兩者進行合并，或根據需求設置庫來存放組件和代碼。

為什么需要設計系統？

01 公司員工層面

設計團隊：

? 所包含的可共享的設計文檔可以幫助設計人員能夠快速準確地組合復用高保真的設計；

? 可以自動記錄和生成具有連貫性的規范文檔（如，紅線文檔）幫助設計團隊節省大量時間；

? 可以讓設計師跳出傳統工具并在協同工具中創建原型機；

? 讓設計師在設計流程的早期更掌握最終產品的全貌，使他們能夠測試解決方案并更快地迭代產品。

開發團隊：

? 開發團隊可以利用設計系統中的規范文檔和設計團隊進行良性有效溝通；

? 通過詳細的規范文檔，開發團隊將能夠復制他們需要的組件代碼并繼續推進流程。

產品經理：

? 幫助減少花費在過小細節交互上的時間與精力，讓產品經理能夠更專注于產品整體上的把控與決策；

? 所包含的可用性模式庫和使用指南，使產品經理可以較為輕松地做出決策。

市場團隊：

? 設計系統所包含的風格指南和產品相關組件使銷售和市場部對產品全貌有了更多的了解與可預見性。

02 企業層面

? 降本：設計系統為企業提供了一個無需裁員或削減收益即可降低成本的機會；

? 提質：設計系統中所包含的組件和模式庫，提高了產品的一致性、體驗性和可訪問性；

? 增效：設計系統允許探索和設計新功能以及改進現有功能，并且利用模式庫中可復用的模式和組件，縮短了從設計到實施的周期，提高了研發和整體效率。

海外設計系統例子

Google：Material Design

? 定義：幫助團隊為 Android、iOS、Flutter 和 Web端構建高質量的數字體驗；

? 組成：規則（Principles）、組件（Components）、主題（Theming）

? 特點：Material Design突破了谷歌以往的所有設計，包括柵格、風格、布局等，谷歌將其特點概括為擬物和扁平的結合，并更關心系統反應的質感、層次、深度，和其他物體的疊放邏輯。

Airbnb ：Airbnb Design Language System

? 定義：一套共享整合的模式和原則，能夠定義一款產品整體的設計風格與體驗。

? 組成：核心庫（Core Library）與團隊庫（Team Library）核心庫包含了全局的、經過驗證的、可用于團隊共享的組件。而團隊庫包含的則是常識性的、特殊的某些組件。

? 特點：Airbnb認為DLS應該成為產品的一部分和構建產品的基石，以達成“一群人使用一套通用的模式語言看上去就像是一個人完成的設計”的目標

Microsoft：Fluent Design System

? 定義：Fluent Design System是Microsoft的一個開放源代碼和跨平臺的設計系統，可為設計人員和開發人員提供他們創建產品所需的框架，其中體現包括了可訪問性、國際化和性能表現。

? 組成：光（Light）、深度（Depth）、動效（Motion）、材料（Material）、比例（Scale）

? 特點：徹底改變沿用多年的平面矩形樣式的用戶界面。不止與視覺有關，FDS還涉及交互模式、空間和全新元素的整合方式。

中國設計系統發展趨勢

目前，國內的互聯網企業開始把設計系統作為提升內部效率的重要工具之一。以小紅書為例，小紅書創建設計系統目的是為了企業內部的產品設計效率能有巨大飛躍，從而能夠更專注地解決用戶問題，并向市場推出更多有趣的產品和設計。這些是設計系統作為一門工具給企業所帶來的顯著優勢。

而放眼于目前國內商業趨勢的大環境中，企業如何實現數字化轉型，是目前熱度頗高的探討話題。一些企業也率先開展了技術上的大量投資和新的資源配置，力求搶占技術轉型的高地。但是“數字化”不等于“數據化”，使企業快速“上云”并不是數字化轉型的真諦，而只是人們所看到的表征。空集設計認為數字化轉型不是單一著力在技術上，而是要從局部看到整體，再從整體關注局部，企業內部人員的適應度、文化氛圍的培養度、組織結構的適應度都是數字化轉型所需的發力點。應對此情形，設計系統作為一個橫跨企業多個部門并包含可不斷復用和調用的云端組件和模式庫的系統，是促進企業數字化轉型的有效踏板。

設計系統所具有的云端性、共享性、一致性、可控性都為企業數字化轉型做了充足的準備和鋪墊。設計系統云端共享的各種組件庫或模式庫在本質上是“企業上云”的一種體現，更打破了企業內部團隊之間不必要的隔閡，了解了彼此的工作內容，加快了團隊、企業的工作效率，使企業整體擁有了快速迭代的能力，更重要的是企業內的數據因為“共享”而充滿了流動性。而設計系統的一致性和可控性上，幫助減少了大量的“現在時間成本”和“未來時間成本”，未雨綢繆，減少了企業數字化轉型在未來發展上的阻礙。因此，設計系統的發展與數字化轉型的發展相對企業而言應該是并駕齊驅，齊頭并進。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

部分原文翻譯摘自：

[1]Kholmatova, Alla. Design Systems (Smashing eBooks). Smashing Media AG.

[2]Vesselov, Sarrah; Davis, Taurie. Building Design Systems. Apress. 

[3]https://www.designbetter.co/design-systems-handbook/introducing-design-systems

[4]https://www.nngroup.com/articles/design-systems-101/

參考文章：

[1]https://cloud.tencent.com/developer/news/829033

[2]https://zhuanlan.zhihu.com/p/34410688

[3]https://zhuanlan.zhihu.com/p/83350178

參考圖片：

[1]Photo by Hisashi Oshite on Unsplash

[2]Photo by Scott Graham on Unsplash

[3]Photo by Ilya Pavlov on Unsplash

[4]Photo by Lagos Techie on Unsplash

[5]Photo by Kaleidico on Unsplash

[6]Photo by Balázs Kétyi on Unsplash

[7]Photo by Annie Spratt on Unsplash

[8]Photo by Alexander Shatov on Unsplash

[9]https://drawbackwards.com/blog/The-Design-Handoff-How-a-Component-Library-Can-Make-You-Design-System-Stronger

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -