99精品国产在热久久无码,99国产欧美久久久精品蜜桃

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

設(shè)計系統(tǒng)洞察2021

空集設(shè)計

2021-08-16

0 評論 5984 瀏覽 29 收藏

26 分鐘

編輯導(dǎo)讀：設(shè)計系統(tǒng)近年來受到很多企業(yè)的關(guān)注，許多公司開始嘗試建立和開發(fā)屬于自己的設(shè)計系統(tǒng)，希望以此來提高產(chǎn)品迭代的連續(xù)性和團(tuán)隊協(xié)作的有效性。本文作者圍繞設(shè)計系統(tǒng)進(jìn)行了梳理，一起來看一下吧。

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

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

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

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

一、設(shè)計系統(tǒng)如何得以發(fā)展

1. 個人電腦和網(wǎng)絡(luò)的興起

在互聯(lián)網(wǎng)的早期發(fā)展階段，對設(shè)計來說是充滿局限性的。早期網(wǎng)站的外觀更像是經(jīng)過美化后的 Word 文檔。Web 是由 HTML 構(gòu)建，CSS 也尚不存在，各個瀏覽器以滿足功能需求為重心，來決定網(wǎng)頁應(yīng)該是被如何展示的

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

2. 網(wǎng)絡(luò)開發(fā)中的技術(shù)進(jìn)步

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

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

3. 技術(shù)對于商業(yè)上的影響

互聯(lián)網(wǎng)的迅速發(fā)展使購買個人電腦的人數(shù)有了質(zhì)的提升。根據(jù)美國勞工部的一份報告，1990 年至 1997 年間，美國的計算機(jī)擁有率從 15% 上升到 35%。計算機(jī)從被人們視為一種奢侈品，到開始轉(zhuǎn)變?yōu)樯畹谋匦杵?。這讓企業(yè)逐漸意識到新興信息技術(shù)產(chǎn)業(yè)市場的潛力，伴隨著互聯(lián)網(wǎng)進(jìn)入繁榮時期，諸多互聯(lián)網(wǎng)企業(yè)如雨后春筍般涌現(xiàn)。這趟“技術(shù)快車”使企業(yè)對數(shù)字化產(chǎn)品快速迭代的需求急劇上漲，也加重了開發(fā)時間上的緊迫感。許多企業(yè)需要開始利用組件化和系統(tǒng)化思維去探索相對應(yīng)的策略，以達(dá)到在快節(jié)奏下的降本、提質(zhì)、增效和提高企業(yè)競爭力。

4. 開發(fā)架構(gòu)從“瀑布模型”到“敏捷方法”的轉(zhuǎn)型

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

從網(wǎng)絡(luò)技術(shù)更新到商業(yè)市場重心轉(zhuǎn)移再到開發(fā)架構(gòu)轉(zhuǎn)型，這些趨勢都為設(shè)計系統(tǒng)的后續(xù)發(fā)展提供了不可或缺的擴(kuò)展與延伸空間。

二、什么是設(shè)計系統(tǒng)

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

1. Alla Kholmatove – “Design System”

在Alla Kholmatova的“Design System”一書中為設(shè)計系統(tǒng)下的定義是：設(shè)計系統(tǒng)是由一組相互關(guān)聯(lián)的模式和一套團(tuán)隊共享規(guī)則共同緊密構(gòu)成的，是用來服務(wù)數(shù)字端產(chǎn)品的。

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

2. InVision – “Design Systems Handbook”

由InVision公司所出的設(shè)計系統(tǒng)手冊中，認(rèn)為設(shè)計系統(tǒng)是：一組被明確清晰的標(biāo)準(zhǔn)所指導(dǎo)的可重復(fù)使用的組件。這些可重復(fù)使用的組件可以被組裝在一起去創(chuàng)建任意數(shù)量的應(yīng)用程序。

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

3. Nielson Norman Group – “Design Systems 101”

Nielson Norman Group（尼爾森諾曼集團(tuán)）作為全球知名的用戶體驗研究機(jī)構(gòu)，為設(shè)計系統(tǒng)下的定義是：設(shè)計系統(tǒng)是一套完整的標(biāo)準(zhǔn)，旨在利用可重復(fù)使用的組件和模式去管理大規(guī)模設(shè)計。

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

4. Sarrah Vesselov & Taurie Davis – “Building Design System”

由Apress出版，Sarrah Vesselov和 Taurie Davis 編寫的“Building Design Systems”書中，對設(shè)計系統(tǒng)下了更詳細(xì)的定義：設(shè)計系統(tǒng)是一系列文檔化的元素、組件和區(qū)域，其中包括設(shè)計和前端指南。該文檔包括實時代碼示例，允許公司內(nèi)部各部門在應(yīng)用程序的多個實例中輕松重復(fù)使用樣式和組件。設(shè)計系統(tǒng)還包括幫助團(tuán)隊構(gòu)建一個或多個產(chǎn)品的基本設(shè)計原則、規(guī)則和指南。

摘自原文：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.

5. 空集設(shè)計 – “榫卯設(shè)計系統(tǒng)思維”

“設(shè)計系統(tǒng)思維”是通過依照設(shè)計模組分類法與各項信息檢索方式，將企業(yè)內(nèi)部繁雜的各項信息進(jìn)行優(yōu)化錄入、統(tǒng)一管理與高效調(diào)用，從而達(dá)到視覺信息模組化，模組信息的同質(zhì)復(fù)用系統(tǒng)化的一種思維模式?！霸O(shè)計系統(tǒng)”思維可用于幫助中小型企業(yè)縮短產(chǎn)品研發(fā)流程，并加強(qiáng)企業(yè)對外文化宣傳的一致性，最終使企業(yè)整體提質(zhì)、增效，保持?jǐn)U大企業(yè)競爭力。

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

三、設(shè)計系統(tǒng)的核心組成

1. 風(fēng)格指南 – Style Guide

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

2. 組件庫（Component Library）

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

組件名稱（Component Name）：一個特定且唯一的 UI 組件名稱，以避免設(shè)計者和開發(fā)者之間的理解偏差；
組件描述（Description）：對元素的定義和如何對它進(jìn)行使用的清晰解釋，有時會附上在不同環(huán)境下使用時的注意事項；
組件屬性（Attribute）：即顏色、大小、形狀或副本等，這些屬性可以根據(jù)特定需求進(jìn)行調(diào)整
組件狀態(tài)（State）：通常是以推薦的默認(rèn)值進(jìn)行呈現(xiàn)或跟隨后續(xù)外觀變化進(jìn)行改變；
代碼片段（Code snippets）：元素的實際代碼摘錄；
前端和后端框架（Front-end & Back-end Frameworks）：以避免麻煩和不必要的調(diào)試。

3. 模式庫（Pattern Library）

“組件庫”和“模式庫”有時會作為同義詞在設(shè)計系統(tǒng)中進(jìn)行使用。通常模式庫包含供設(shè)計團(tuán)隊使用的頁面內(nèi)容結(jié)構(gòu)、排版布局和模版等。

為了更清晰全面的了解風(fēng)格指南（Style Guide）、組件庫（Component Library）和模式庫（Pattern Library）在設(shè)計系統(tǒng)中承擔(dān)的角色，我們用表格進(jìn)行了進(jìn)一步的總結(jié)與分析。

四、設(shè)計系統(tǒng)與風(fēng)格指南、組件庫、模式庫的功能劃分

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

五、為什么需要設(shè)計系統(tǒng)

1. 公司員工層面

設(shè)計團(tuán)隊：

所包含的可共享的設(shè)計文檔可以幫助設(shè)計人員能夠快速準(zhǔn)確地組合復(fù)用高保真的設(shè)計；
可以自動記錄和生成具有連貫性的規(guī)范文檔（如，紅線文檔）幫助設(shè)計團(tuán)隊節(jié)省大量時間；
可以讓設(shè)計師跳出傳統(tǒng)工具并在協(xié)同工具中創(chuàng)建原型機(jī)；
讓設(shè)計師在設(shè)計流程的早期更掌握最終產(chǎn)品的全貌，使他們能夠測試解決方案并更快地迭代產(chǎn)品。

開發(fā)團(tuán)隊：

開發(fā)團(tuán)隊可以利用設(shè)計系統(tǒng)中的規(guī)范文檔和設(shè)計團(tuán)隊進(jìn)行良性有效溝通；
通過詳細(xì)的規(guī)范文檔，開發(fā)團(tuán)隊將能夠復(fù)制他們需要的組件代碼并繼續(xù)推進(jìn)流程。

產(chǎn)品經(jīng)理：

幫助減少花費在過小細(xì)節(jié)交互上的時間與精力，讓產(chǎn)品經(jīng)理能夠更專注于產(chǎn)品整體上的把控與決策；
所包含的可用性模式庫和使用指南，使產(chǎn)品經(jīng)理可以較為輕松地做出決策。

市場團(tuán)隊：

設(shè)計系統(tǒng)所包含的風(fēng)格指南和產(chǎn)品相關(guān)組件使銷售和市場部對產(chǎn)品全貌有了更多的了解與可預(yù)見性。

2. 企業(yè)層面

降本：設(shè)計系統(tǒng)為企業(yè)提供了一個無需裁員或削減收益即可降低成本的機(jī)會；
提質(zhì)：設(shè)計系統(tǒng)中所包含的組件和模式庫，提高了產(chǎn)品的一致性、體驗性和可訪問性；
增效：設(shè)計系統(tǒng)允許探索和設(shè)計新功能以及改進(jìn)現(xiàn)有功能，并且利用模式庫中可復(fù)用的模式和組件，縮短了從設(shè)計到實施的周期，提高了研發(fā)和整體效率。

六、海外設(shè)計系統(tǒng)例子

1. Google：Material Design

定義：幫助團(tuán)隊為 Android、iOS、Flutter 和 Web端構(gòu)建高質(zhì)量的數(shù)字體驗；
組成：規(guī)則（Principles）、組件（Components）、主題（Theming）
特點：Material Design突破了谷歌以往的所有設(shè)計，包括柵格、風(fēng)格、布局等，谷歌將其特點概括為擬物和扁平的結(jié)合，并更關(guān)心系統(tǒng)反應(yīng)的質(zhì)感、層次、深度，和其他物體的疊放邏輯。

2. Airbnb ：Airbnb Design Language System

定義：一套共享整合的模式和原則，能夠定義一款產(chǎn)品整體的設(shè)計風(fēng)格與體驗。
組成：核心庫（Core Library）與團(tuán)隊庫（Team Library）核心庫包含了全局的、經(jīng)過驗證的、可用于團(tuán)隊共享的組件。而團(tuán)隊庫包含的則是常識性的、特殊的某些組件。
特點：Airbnb認(rèn)為DLS應(yīng)該成為產(chǎn)品的一部分和構(gòu)建產(chǎn)品的基石，以達(dá)成“一群人使用一套通用的模式語言看上去就像是一個人完成的設(shè)計”的目標(biāo)

3. Microsoft：Fluent Design System

定義：Fluent Design System是Microsoft的一個開放源代碼和跨平臺的設(shè)計系統(tǒng)，可為設(shè)計人員和開發(fā)人員提供他們創(chuàng)建產(chǎn)品所需的框架，其中體現(xiàn)包括了可訪問性、國際化和性能表現(xiàn)。
組成：光（Light）、深度（Depth）、動效（Motion）、材料（Material）、比例（Scale）
特點：徹底改變沿用多年的平面矩形樣式的用戶界面。不止與視覺有關(guān)，F(xiàn)DS還涉及交互模式、空間和全新元素的整合方式。

七、中國設(shè)計系統(tǒng)發(fā)展趨勢

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

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

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

部分原文翻譯摘自：

[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