編輯導語：近年來，“設計系統”一詞逐漸火爆了起來，大廠們也紛紛在做設計系統，一個好的設計系統可以幫助設計者和開發者快速産出高質量産品原型。那麼，該如何學習與分析大廠們的設計系統，才能為己所用呢？作者總結了幾條思路，希望對你有所幫助。

近年來，“設計系統”這個詞漸漸火爆起來。設計系統是設計團隊經過大量項目實踐和總結，逐步打磨出一個服務于類似産品的設計體系。一個完整的設計系統通常會提供包括設計指引、最佳實踐、設計資源和設計工具等一系列功能，來幫助設計者和開發者快速産出高質量産品原型，在企業級的應用産品中尤為适用。

業内比較知名的設計系統，當屬螞蟻集團的 Ant Design（螞蟻集團的企業級産品設計體系）。而2020年以來，随着騰訊的 TDesign（騰訊開源的企業級設計體系）、字節的Arco Design（字節跳動的企業級産品的完整設計和開發解決方案） 等設計系統陸續發布，就經常會有同學問我這樣的問題：

• 為什麼這些設計系統感覺差異不大？難道大廠連這也要卷一卷？
• 設計系統雖然要注重普适性，但是不是也應該有公司自己的品牌風格和表達呢？
• 這麼多設計系統，要怎麼比較、分析和學習呢？

我們的确都會覺得大廠們真的太卷了，簡直就是神仙打架嘛！但我想要說的是，大廠的設計系統絕對不是為了“卷”而做。之所以要做，原因至少有這幾點：

1. 業務多

大廠的業務和産品多且繁雜，業務中可複用的能力和經驗在長時間的積累下也會越來越多。沉澱下來的設計系統會對自己業務起到強有力支撐和提效作用。有沉澱且不缺少應用場景，也可以保證設計系統有較高的使用頻率，促進其良性發展。

2. 資源足

相對于小公司來說，大廠有更多的成本、資源和積累可以用于做資産類的沉澱、研究和輸出。大廠也理應在相應的領域多做探索和經驗積累，回饋用戶和市場的信任。

3. 權威高

大廠的設計水平相對來說具備較強的穩定性，輸出的質量更有保證，可以發聲、傳播的渠道和方式也更多，也有實力在行業内樹立起可靠、标準的規則話語權。

從以上幾點不難看出設計系統之于大廠來說，對于内部可以賦能業務、降本提效；對于外部可以提升自己的話語權，這其實是一個雙赢的過程。

其實設計系統的重要性不光是對于大廠來說的，對于中小型企業，尤其是以 B 類業務為主的公司，想要保持對外輸出的産品有較高的設計一緻性，或是想要提高設計師和前端工程師的工作效率，設計系統都是最有效的解決方案。可以說作為設計師，設計系統是你不得不了解和掌握的設計基礎知識之一。

抛開代碼層面不談，僅從設計師的使用場景出發，用過螞蟻集團的 Ant Design 和字節的Arco Design 的設計師大概會覺得二者在功能上似乎并沒有什麼差異。

早些年 Ant Design 在設計系統領域已打過比較牢靠的框架基礎，其他大廠進行借鑒是很正常的事情，沒有必要重複造輪子。因此，這些設計系統最基礎的結構和框架層面是大差不差的，提供的基礎服務也都是類似的，因此看上去就好像都差不多。

但其實基于究其細節，各家也都有各家的特點和看家本領，在應用和功能層面并是不完全一緻的。

那作為設計師，該如何對大廠的設計系統進行分析和學習，并做到為我所用呢？這裡提供幾個學習思路供你參考：

一、設計系統的功能和應用場景

這裡所說的功能和應用場景，包括但不限于以下内容：

1. 側重的用戶和場景

• 是以設計師為主、開發為主還是兩者兼備；
• 是初級組件（基礎組件）還是高級組件（業務組件）二者區别可閱讀這裡；
• 用于哪些特定的業務場景和領域等等。

2. 側重 C 端還是 B 端

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

3. 側重國内還是國外（國際化）

國内大廠的設計系統很少考慮國際化應用場景，隻有個别會提及一些國際化的設計方法和思路。而這一點，國外的設計系統考慮得相對全面。

4. 獨特的功能應用或升級服務

說到獨門秘籍，各個大廠的設計系統在這一點上可謂百花齊放，比如 Ant Design還可以與 AntV（螞蟻集團的數據可視化解決方案）的可視化圖表進行聯動；Arco Design 也自研出一套被稱為 Palette 色彩配置工具，幫助設計師做色彩算法和規範制定。

二、設計系統使用起來的體驗和感受

這裡既要看使用設計系統做出的産品帶給用戶的體驗和感受，也要看設計師和開發在使用設計系統工作的過程體驗和感受。包括但不限于以下内容：

1）設計整體基調：包括設計系統的價值觀和設計原則等，奠定整個設計系統的基調。

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

3）交互體驗特征：包括交互反饋和針對用戶操作的細節處理，決定用戶的使用過程是否流暢舒适。

4）系統品牌建設：這點不僅僅是指設計系統中的組件的風格與品牌特性，也包括閱讀和了解整個設計系統（網站、品牌運營與推廣等内容）的體驗。

三、設計系統的搭建方式

搭建方式指的是設計系統在搭建過程中的思路、框架結構和工作方法，包括但不限于以下内容：

1）使用方式：指的是設計師和開發使用設計系統的方式。大部分設計系統依賴官網，提供 Figma 或 Sketch 兩種 Toolkits。也有一些獨特和有時效性的方式，比如 AntD 提供的 Sketch 插件 Kitchen。

2）協作機制：也就是設計系統團隊的工作流程和方法，你可以利用你的人脈資源，看看在這些設計系統中有沒有你的熟人可以約着聊聊，更好地了解背後的工作和搭建方式。

3）更新頻率：小疊代和大疊代的更新速率和通知方式、設計運營和維護機制等。

因為設計系統内容繁雜，所以我也建議你在從以上幾個方面入手分析之前，先明确你做分析的目的和目标。不同的目标，對于以上内容的側重點也就不同。

舉個例子，如果你已經是一個組件設計師，對于設計系統的基礎知識也有一定的了解，你的學習目的是，幫助自己對已有的組件庫或設計系統進行品牌升級，那就可以将學習和分析的重點放在設計系統的整體基調和品牌建設上。

希望以上内容可以為你所用。

#專欄作家#

元堯，長弓小子，人人都是産品經理專欄作家。一線互聯網大廠B端體驗設計師，清華大學美術學院本碩連讀。曾負責國内最大開源組件庫Ant Design組件的設計和運營工作，目前負責國際業務線B端産品體驗設計和組件庫的搭建工作。

本文原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部