編輯導(dǎo)語：很多同學(xué)對(duì)于設(shè)計(jì)語言、設(shè)計(jì)系統(tǒng)、組件系統(tǒng)這三個(gè)概念之間的關(guān)系都一知半解，本文作者根據(jù)自己的工作經(jīng)驗(yàn)，從三個(gè)不同的視角來剖析三種概念之間的聯(lián)系與差異，希望能對(duì)你有所啟發(fā)。

本文源于讀者和粉絲的相關(guān)提問，以及我前段時(shí)間在做 Ant Design 設(shè)計(jì)與運(yùn)營(yíng)工作中的經(jīng)驗(yàn)沉淀和總結(jié)，希望對(duì)你有幫助。

很多同學(xué)問我「設(shè)計(jì)語言」、「設(shè)計(jì)系統(tǒng)」、「組件系統(tǒng)」是不是一回事兒？總是分不清這些概念之間的關(guān)系和區(qū)別。

這幾個(gè)詞的確容易搞混，廣義上來講，它們都是用來規(guī)范設(shè)計(jì)質(zhì)量、提升設(shè)計(jì)效率的，但詳細(xì)的追究起來又各有不同。本文就來拆解一下這些概念。

一、組件系統(tǒng)：降本提效的工具

通常我們將“組件庫(kù)（Design Components）”和“設(shè)計(jì)模式（Design Patterns）”統(tǒng)稱為組件系統(tǒng)。

「組件庫(kù)」這個(gè)概念很好理解，也很常用。組件庫(kù)是產(chǎn)品頁(yè)面設(shè)計(jì)的底層系統(tǒng)，它設(shè)定了設(shè)計(jì)質(zhì)量的底線，并可以減少重復(fù)性工作，從而極大提高設(shè)計(jì)和開發(fā)的效率。

某產(chǎn)品的組件庫(kù)

組件系統(tǒng)中基本包含所有界面中經(jīng)常被復(fù)用的單個(gè)組件（Symbols），如按鈕、文本框、標(biāo)簽頁(yè)；也包括相對(duì)復(fù)雜和完整的復(fù)合頁(yè)面組件及框架（Patterns），即“設(shè)計(jì)模式”。

設(shè)計(jì)模式更偏向于業(yè)務(wù)屬性，用于特定的、初期的業(yè)務(wù)中會(huì)更加高效，屬于高級(jí)組件。比如Ant Design 就通過業(yè)務(wù)設(shè)計(jì)沉淀出的 Protable（高級(jí)表格）、ProLayout（高級(jí)布局）、ProCard（高級(jí)卡片）等復(fù)合組件和框架，供內(nèi)部設(shè)計(jì)師在對(duì)應(yīng)的金融、政務(wù)相關(guān)的業(yè)務(wù)中。

AntD 通過業(yè)務(wù)設(shè)計(jì)沉淀出的 ProTable

這種復(fù)合組件和框架尤其適用于從 0-1 的業(yè)務(wù)或新功能的頁(yè)面搭建：

ProTable、ProLayout 搭建出的頁(yè)面

二、設(shè)計(jì)語言：品牌屬性的體現(xiàn)

設(shè)計(jì)語言是塑造該產(chǎn)品具備獨(dú)特且統(tǒng)一的品牌風(fēng)格的法則。設(shè)計(jì)語言把設(shè)計(jì)作為一種“溝通的方式”，用于在特定的場(chǎng)景中進(jìn)行品牌內(nèi)容與信息的傳遞。它的特點(diǎn)是：

1. 具備嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)規(guī)范：是產(chǎn)品設(shè)計(jì)參考的標(biāo)準(zhǔn)和規(guī)范，規(guī)定了設(shè)計(jì)的基本原則；
2. 是動(dòng)態(tài)的，不斷升級(jí)的：設(shè)計(jì)語言不是一成不變的，可以根據(jù)市場(chǎng)所流行和認(rèn)可的設(shè)計(jì)趨勢(shì)，進(jìn)行補(bǔ)充、迭代和完善；
3. 能夠使產(chǎn)品具備統(tǒng)一的品牌屬性：使用設(shè)計(jì)語言設(shè)計(jì)出的產(chǎn)品能夠保持較好的統(tǒng)一性，并帶明顯的品牌特征；
4. 能夠提高設(shè)計(jì)效率：設(shè)計(jì)語言中的規(guī)則和元素可以被當(dāng)成組件，應(yīng)用于產(chǎn)品設(shè)計(jì)的過程中，起到組件的作用，減少重復(fù)性工作。

Google 旗下眾多產(chǎn)品線共享同一套Material Design 的設(shè)計(jì)語言規(guī)范，因此其產(chǎn)品中任何一個(gè)界面都不會(huì)讓人感覺出自 Apple 或 Microsoft 之手。

使用 Material Design 設(shè)計(jì)語言搭建的頁(yè)面

好的產(chǎn)品都打造了屬于自己的設(shè)計(jì)語言。是設(shè)計(jì)語言統(tǒng)一了整個(gè)產(chǎn)品的風(fēng)格，并讓產(chǎn)品有了區(qū)別于其他產(chǎn)品的個(gè)性。

三、設(shè)計(jì)系統(tǒng)：方法論+工具+流程

「設(shè)計(jì)系統(tǒng)」也被叫做「設(shè)計(jì)體系」?！附M件系統(tǒng)」和「設(shè)計(jì)語言」定義了產(chǎn)品和設(shè)計(jì)應(yīng)該是怎樣，卻沒有解答該如何才能做到這樣。這些問題都由設(shè)計(jì)系統(tǒng)進(jìn)行回答。

一個(gè)設(shè)計(jì)系統(tǒng)通常包括以下內(nèi)容的合集：設(shè)計(jì)價(jià)值觀、設(shè)計(jì)原則、組件系統(tǒng)、樣式指南、最佳實(shí)踐、工具資源和工作流程（SOP）等。

有效的設(shè)計(jì)系統(tǒng)可以幫助團(tuán)隊(duì)提高設(shè)計(jì)決策，優(yōu)化設(shè)計(jì)與開發(fā)的工作流程，降低錯(cuò)誤風(fēng)險(xiǎn)。建立設(shè)計(jì)系統(tǒng)也是團(tuán)隊(duì)管理的一部分，有助于為新加入團(tuán)隊(duì)的成員提供指導(dǎo)，同時(shí)確保團(tuán)隊(duì)的工作不會(huì)因?yàn)槟澄魂P(guān)鍵成員的離開而出現(xiàn)斷點(diǎn)。

目前設(shè)計(jì)系統(tǒng)主要包括平臺(tái)級(jí)和公司級(jí)兩種：

1. 平臺(tái)級(jí)設(shè)計(jì)系統(tǒng)

Apple、Google、Microsoft 為了指導(dǎo)各自生態(tài)下應(yīng)用軟件的設(shè)計(jì)，都推出了完整的設(shè)計(jì)系統(tǒng)。

Apple 的 Human Interface Guidelines，Google 的 Material Design，Microsoft 的 Fluent Design 都是值得借鑒的典范，不僅為自家的產(chǎn)品制定了流程和規(guī)范，也規(guī)定了其平臺(tái)上產(chǎn)品的標(biāo)準(zhǔn)和形式。

2. 公司級(jí)設(shè)計(jì)系統(tǒng)

有的公司為自身產(chǎn)品和團(tuán)隊(duì)管理打造了設(shè)計(jì)系統(tǒng)，比如 IBM 的 Carbon 設(shè)計(jì)系統(tǒng)，還有螞蟻集團(tuán)的 TechUI 等，都在設(shè)計(jì)和開發(fā)的工作中持續(xù)賦能。

本文由@ 元堯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。