編輯導(dǎo)語：近年來，“設(shè)計(jì)系統(tǒng)”一詞逐漸火爆了起來，大廠們也紛紛在做設(shè)計(jì)系統(tǒng)，一個(gè)好的設(shè)計(jì)系統(tǒng)可以幫助設(shè)計(jì)者和開發(fā)者快速產(chǎn)出高質(zhì)量產(chǎn)品原型。那么，該如何學(xué)習(xí)與分析大廠們的設(shè)計(jì)系統(tǒng)，才能為己所用呢？作者總結(jié)了幾條思路，希望對你有所幫助。

近年來，“設(shè)計(jì)系統(tǒng)”這個(gè)詞漸漸火爆起來。設(shè)計(jì)系統(tǒng)是設(shè)計(jì)團(tuán)隊(duì)經(jīng)過大量項(xiàng)目實(shí)踐和總結(jié)，逐步打磨出一個(gè)服務(wù)于類似產(chǎn)品的設(shè)計(jì)體系。一個(gè)完整的設(shè)計(jì)系統(tǒng)通常會提供包括設(shè)計(jì)指引、最佳實(shí)踐、設(shè)計(jì)資源和設(shè)計(jì)工具等一系列功能，來幫助設(shè)計(jì)者和開發(fā)者快速產(chǎn)出高質(zhì)量產(chǎn)品原型，在企業(yè)級的應(yīng)用產(chǎn)品中尤為適用。

業(yè)內(nèi)比較知名的設(shè)計(jì)系統(tǒng)，當(dāng)屬螞蟻集團(tuán)的 Ant Design（螞蟻集團(tuán)的企業(yè)級產(chǎn)品設(shè)計(jì)體系）。而2020年以來，隨著騰訊的 TDesign（騰訊開源的企業(yè)級設(shè)計(jì)體系）、字節(jié)的Arco Design（字節(jié)跳動的企業(yè)級產(chǎn)品的完整設(shè)計(jì)和開發(fā)解決方案） 等設(shè)計(jì)系統(tǒng)陸續(xù)發(fā)布，就經(jīng)常會有同學(xué)問我這樣的問題：

• 為什么這些設(shè)計(jì)系統(tǒng)感覺差異不大？難道大廠連這也要卷一卷？
• 設(shè)計(jì)系統(tǒng)雖然要注重普適性，但是不是也應(yīng)該有公司自己的品牌風(fēng)格和表達(dá)呢？
• 這么多設(shè)計(jì)系統(tǒng)，要怎么比較、分析和學(xué)習(xí)呢？

我們的確都會覺得大廠們真的太卷了，簡直就是神仙打架嘛！但我想要說的是，大廠的設(shè)計(jì)系統(tǒng)絕對不是為了“卷”而做。之所以要做，原因至少有這幾點(diǎn)：

1. 業(yè)務(wù)多

大廠的業(yè)務(wù)和產(chǎn)品多且繁雜，業(yè)務(wù)中可復(fù)用的能力和經(jīng)驗(yàn)在長時(shí)間的積累下也會越來越多。沉淀下來的設(shè)計(jì)系統(tǒng)會對自己業(yè)務(wù)起到強(qiáng)有力支撐和提效作用。有沉淀且不缺少應(yīng)用場景，也可以保證設(shè)計(jì)系統(tǒng)有較高的使用頻率，促進(jìn)其良性發(fā)展。

2. 資源足

相對于小公司來說，大廠有更多的成本、資源和積累可以用于做資產(chǎn)類的沉淀、研究和輸出。大廠也理應(yīng)在相應(yīng)的領(lǐng)域多做探索和經(jīng)驗(yàn)積累，回饋用戶和市場的信任。

3. 權(quán)威高

大廠的設(shè)計(jì)水平相對來說具備較強(qiáng)的穩(wěn)定性，輸出的質(zhì)量更有保證，可以發(fā)聲、傳播的渠道和方式也更多，也有實(shí)力在行業(yè)內(nèi)樹立起可靠、標(biāo)準(zhǔn)的規(guī)則話語權(quán)。

從以上幾點(diǎn)不難看出設(shè)計(jì)系統(tǒng)之于大廠來說，對于內(nèi)部可以賦能業(yè)務(wù)、降本提效；對于外部可以提升自己的話語權(quán)，這其實(shí)是一個(gè)雙贏的過程。

其實(shí)設(shè)計(jì)系統(tǒng)的重要性不光是對于大廠來說的，對于中小型企業(yè)，尤其是以 B 類業(yè)務(wù)為主的公司，想要保持對外輸出的產(chǎn)品有較高的設(shè)計(jì)一致性，或是想要提高設(shè)計(jì)師和前端工程師的工作效率，設(shè)計(jì)系統(tǒng)都是最有效的解決方案?？梢哉f作為設(shè)計(jì)師，設(shè)計(jì)系統(tǒng)是你不得不了解和掌握的設(shè)計(jì)基礎(chǔ)知識之一。

拋開代碼層面不談，僅從設(shè)計(jì)師的使用場景出發(fā)，用過螞蟻集團(tuán)的 Ant Design 和字節(jié)的Arco Design 的設(shè)計(jì)師大概會覺得二者在功能上似乎并沒有什么差異。

早些年 Ant Design 在設(shè)計(jì)系統(tǒng)領(lǐng)域已打過比較牢靠的框架基礎(chǔ)，其他大廠進(jìn)行借鑒是很正常的事情，沒有必要重復(fù)造輪子。因此，這些設(shè)計(jì)系統(tǒng)最基礎(chǔ)的結(jié)構(gòu)和框架層面是大差不差的，提供的基礎(chǔ)服務(wù)也都是類似的，因此看上去就好像都差不多。

但其實(shí)基于究其細(xì)節(jié)，各家也都有各家的特點(diǎn)和看家本領(lǐng)，在應(yīng)用和功能層面并是不完全一致的。

那作為設(shè)計(jì)師，該如何對大廠的設(shè)計(jì)系統(tǒng)進(jìn)行分析和學(xué)習(xí)，并做到為我所用呢？這里提供幾個(gè)學(xué)習(xí)思路供你參考：

一、設(shè)計(jì)系統(tǒng)的功能和應(yīng)用場景

這里所說的功能和應(yīng)用場景，包括但不限于以下內(nèi)容：

1. 側(cè)重的用戶和場景

• 是以設(shè)計(jì)師為主、開發(fā)為主還是兩者兼?zhèn)洌?/li>
• 是初級組件（基礎(chǔ)組件）還是高級組件（業(yè)務(wù)組件）二者區(qū)別可閱讀這里；
• 用于哪些特定的業(yè)務(wù)場景和領(lǐng)域等等。

2. 側(cè)重 C 端還是 B 端

目前由于業(yè)務(wù)特性所決定，C 端產(chǎn)品的設(shè)計(jì)系統(tǒng)在數(shù)量上少于 B 端產(chǎn)品。騰訊的TDesign中包含了豐富的移動端和小程序相關(guān)的功能和服務(wù)，可以很好的滿足部分 C 端產(chǎn)品的設(shè)計(jì)需求，并為之提供設(shè)計(jì)借鑒。支付寶設(shè)計(jì)體系也曾有一套針對 C 端的移動端設(shè)計(jì)體系（不過也在和 Ant Design的移動端版本進(jìn)行整合）。

3. 側(cè)重國內(nèi)還是國外（國際化）

國內(nèi)大廠的設(shè)計(jì)系統(tǒng)很少考慮國際化應(yīng)用場景，只有個(gè)別會提及一些國際化的設(shè)計(jì)方法和思路。而這一點(diǎn)，國外的設(shè)計(jì)系統(tǒng)考慮得相對全面。

4. 獨(dú)特的功能應(yīng)用或升級服務(wù)

說到獨(dú)門秘籍，各個(gè)大廠的設(shè)計(jì)系統(tǒng)在這一點(diǎn)上可謂百花齊放，比如 Ant Design還可以與 AntV（螞蟻集團(tuán)的數(shù)據(jù)可視化解決方案）的可視化圖表進(jìn)行聯(lián)動；Arco Design 也自研出一套被稱為 Palette 色彩配置工具，幫助設(shè)計(jì)師做色彩算法和規(guī)范制定。

二、設(shè)計(jì)系統(tǒng)使用起來的體驗(yàn)和感受

這里既要看使用設(shè)計(jì)系統(tǒng)做出的產(chǎn)品帶給用戶的體驗(yàn)和感受，也要看設(shè)計(jì)師和開發(fā)在使用設(shè)計(jì)系統(tǒng)工作的過程體驗(yàn)和感受。包括但不限于以下內(nèi)容：

1）設(shè)計(jì)整體基調(diào)：包括設(shè)計(jì)系統(tǒng)的價(jià)值觀和設(shè)計(jì)原則等，奠定整個(gè)設(shè)計(jì)系統(tǒng)的基調(diào)。

2）視覺語言特征：包括全局樣式、排版效果、動效特征等，會使用戶產(chǎn)生最直觀的視覺感受。

3）交互體驗(yàn)特征：包括交互反饋和針對用戶操作的細(xì)節(jié)處理，決定用戶的使用過程是否流暢舒適。

4）系統(tǒng)品牌建設(shè)：這點(diǎn)不僅僅是指設(shè)計(jì)系統(tǒng)中的組件的風(fēng)格與品牌特性，也包括閱讀和了解整個(gè)設(shè)計(jì)系統(tǒng)（網(wǎng)站、品牌運(yùn)營與推廣等內(nèi)容）的體驗(yàn)。

三、設(shè)計(jì)系統(tǒng)的搭建方式

搭建方式指的是設(shè)計(jì)系統(tǒng)在搭建過程中的思路、框架結(jié)構(gòu)和工作方法，包括但不限于以下內(nèi)容：

1）使用方式：指的是設(shè)計(jì)師和開發(fā)使用設(shè)計(jì)系統(tǒng)的方式。大部分設(shè)計(jì)系統(tǒng)依賴官網(wǎng)，提供 Figma 或 Sketch 兩種 Toolkits。也有一些獨(dú)特和有時(shí)效性的方式，比如 AntD 提供的 Sketch 插件 Kitchen。

2）協(xié)作機(jī)制：也就是設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)的工作流程和方法，你可以利用你的人脈資源，看看在這些設(shè)計(jì)系統(tǒng)中有沒有你的熟人可以約著聊聊，更好地了解背后的工作和搭建方式。

3）更新頻率：小迭代和大迭代的更新速率和通知方式、設(shè)計(jì)運(yùn)營和維護(hù)機(jī)制等。

因?yàn)樵O(shè)計(jì)系統(tǒng)內(nèi)容繁雜，所以我也建議你在從以上幾個(gè)方面入手分析之前，先明確你做分析的目的和目標(biāo)。不同的目標(biāo)，對于以上內(nèi)容的側(cè)重點(diǎn)也就不同。

舉個(gè)例子，如果你已經(jīng)是一個(gè)組件設(shè)計(jì)師，對于設(shè)計(jì)系統(tǒng)的基礎(chǔ)知識也有一定的了解，你的學(xué)習(xí)目的是，幫助自己對已有的組件庫或設(shè)計(jì)系統(tǒng)進(jìn)行品牌升級，那就可以將學(xué)習(xí)和分析的重點(diǎn)放在設(shè)計(jì)系統(tǒng)的整體基調(diào)和品牌建設(shè)上。

希望以上內(nèi)容可以為你所用。

#專欄作家#

元堯，微信公眾號：長弓小子，人人都是產(chǎn)品經(jīng)理專欄作家。一線互聯(lián)網(wǎng)大廠B端體驗(yàn)設(shè)計(jì)師，清華大學(xué)美術(shù)學(xué)院本碩連讀。曾負(fù)責(zé)國內(nèi)最大開源組件庫Ant Design組件的設(shè)計(jì)和運(yùn)營工作，目前負(fù)責(zé)國際業(yè)務(wù)線B端產(chǎn)品體驗(yàn)設(shè)計(jì)和組件庫的搭建工作。

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

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