什么是設(shè)計(jì)系統(tǒng)？UI組件、模版庫(kù)、規(guī)范？有何區(qū)別？

我們經(jīng)?？吹揭恍I(yè)術(shù)語(yǔ)，如：UI設(shè)計(jì)系統(tǒng)、模版庫(kù)、組件庫(kù)和樣式設(shè)計(jì)指南，等。雖然這些概念是相互關(guān)聯(lián)的，但它們所指的是產(chǎn)品生態(tài)的不同部分。設(shè)計(jì)系統(tǒng)與組件庫(kù)之間也存在混淆，設(shè)計(jì)系統(tǒng)包含了組件庫(kù)，但組件庫(kù)也是一個(gè)獨(dú)立的生態(tài)系統(tǒng)，如AntD 等。

什么是UI設(shè)計(jì)系統(tǒng)？
UI設(shè)計(jì)系統(tǒng)是一套完整的設(shè)計(jì)標(biāo)準(zhǔn)/規(guī)范（樣式指南）和伴隨 UI 工具包的文檔，包括UI模版、系統(tǒng)UX設(shè)計(jì)原則和組件。當(dāng)我們?cè)谶@種情況下查看設(shè)計(jì)系統(tǒng)時(shí)，它包含了設(shè)計(jì)師和開發(fā)人員構(gòu)建和擴(kuò)展數(shù)字產(chǎn)品所需的一切。
設(shè)計(jì)系統(tǒng)所包含的內(nèi)容有：
1、品牌設(shè)計(jì)規(guī)范
2、UI界面設(shè)計(jì)規(guī)范
3、設(shè)計(jì)應(yīng)用實(shí)踐指南
4、設(shè)計(jì)系統(tǒng)發(fā)布和代碼
5、 CSS風(fēng)格樣式變量
6、設(shè)計(jì)組件/模版庫(kù)
7、下載資源/知識(shí)庫(kù)
模版庫(kù)與組件庫(kù)有什么區(qū)別？
大多數(shù)設(shè)計(jì)師容易混淆這些術(shù)語(yǔ)，在某種程度上，這并沒(méi)有錯(cuò)，但也不完全準(zhǔn)確。
首先看幾個(gè)概念解釋：
“原子”：就是無(wú)法進(jìn)一步分解的基本（最小）設(shè)計(jì)元素，如：按鈕、圖標(biāo)、單選框...等。
“分子”：通過(guò)組合原子來(lái)創(chuàng)建具備功能屬性的UI 組件或模塊，如：翻頁(yè)、面包屑、彈框...等。 

“有機(jī)體”：由原子和分子組成的復(fù)雜 UI 模塊，這些模式通過(guò)卡片、導(dǎo)航、徽標(biāo)、搜索、字段...等來(lái)塑造出完整的模塊。
“模版”：是一個(gè)包括了原子、分子和有機(jī)體的完整布局和交互的組合體。
 “頁(yè)面”：頁(yè)面將所有內(nèi)容集中在一個(gè)屏幕上顯示。

關(guān)于定義模版庫(kù)和組件庫(kù)：
組件庫(kù) （原子+分子）：組件是一種可重復(fù)使用的代碼塊，可以獨(dú)立存或者構(gòu)建完整模塊。組件庫(kù)是設(shè)計(jì)系統(tǒng)中 UI 組件的集合。
模版庫(kù)（分子+有機(jī)體）：模版是設(shè)計(jì)人員用來(lái)解決可用性問(wèn)題的組件，例如，帶有徽標(biāo)、鏈接、搜索表單和 CTA 按鈕的導(dǎo)航欄，模版庫(kù)是設(shè)計(jì)系統(tǒng)中 UI 模版的集合。

什么是風(fēng)格設(shè)計(jì)指南？
風(fēng)格設(shè)計(jì)指南是一份設(shè)計(jì)規(guī)范文檔，為設(shè)計(jì)系統(tǒng)的組件和模版的使用提供設(shè)計(jì)環(huán)境說(shuō)明，例如，顏色應(yīng)用規(guī)則，排版布局原則...等。

設(shè)計(jì)系統(tǒng)與組件庫(kù)
當(dāng)人們談?wù)揂ntD、等前段框架時(shí)，盡管這些組件庫(kù)有大量的文檔和指南，但他們并不是屬于設(shè)計(jì)系統(tǒng)。設(shè)計(jì)師和工程師可以隨意使用這些開源組件庫(kù)。 他們可以不受限制地編輯庫(kù)的組件（因此它們與原始組件沒(méi)有區(qū)別）、構(gòu)建新模式、與其他庫(kù)組合或創(chuàng)建自定義組件。

相反，設(shè)計(jì)系統(tǒng)是不同的，設(shè)計(jì)師和工程師必須將組件用作構(gòu)建模塊，必須遵循系統(tǒng)的設(shè)計(jì)指南、風(fēng)格指南、設(shè)計(jì)原則和其他設(shè)計(jì)外觀保持風(fēng)格一致的用戶UI界面，就像按照說(shuō)明書去構(gòu)建樂(lè)高一樣。

最后，如果團(tuán)隊(duì)成員想要更改組件或引入新UI設(shè)計(jì)組件，他們必須遵循設(shè)計(jì)系統(tǒng)的一套統(tǒng)一的治理程序/規(guī)則。所以說(shuō)，設(shè)計(jì)系統(tǒng)的構(gòu)建者，對(duì)如何構(gòu)建產(chǎn)品的新組件擁有最終決定權(quán)。