工作經驗｜ B 端產品元件設計細節及經驗分享（四）

編輯導語：很多同學對於設計語言、設計系統、元件系統這三個概念之間的關係都一知半解，本文作者根據自己的工作經驗，從三個不同的視角來剖析三種概念之間的聯絡與差異，希望能對你有所啟發。

本文源於讀者和粉絲的相關提問，以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉澱和總結，希望對你有幫助。

很多同學問我 「設計語言」、「設計系統」、「元件系統」 是不是一回事兒？總是分不清這些概念之間的關係和區別。

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

一、元件系統：降本提效的工具

通常我們將“元件庫（Design Components）”和“設計模式（Design Patterns）”統稱為元件系統。

「元件庫」這個概念很好理解，也很常用。元件庫是產品頁面設計的底層系統，它設定了設計質量的底線，並可以 減少重複性工作 ，從而極大 提高設計和開發的效率。

某產品的元件庫

元件系統中基本包含所有介面中經常被複用的 單個元件（Symbols） ，如按鈕、文字框、標籤頁；也包括相對複雜和完整的 複合頁面元件及框架 （Patterns）， 即“設計模式”。

設計模式更偏向於 業務屬性 ，用於 特定的、初期 的 業務中會更加高效，屬於高階元件。比如Ant Design 就通過業務設計沉澱出的 Protable（高階表格）、ProLayout（高階佈局）、ProCard（高階卡片）等複合元件和框架，供內部設計師在對應的金融、政務相關的業務中。

AntD 通過業務設計沉澱出的 ProTable

這種複合元件和框架尤其適用於從 0-1 的業務或新功能的頁面搭建：

ProTable、ProLayout 搭建出的頁面

二、設計語言：品牌屬性的體現

設計語言是塑造該產品具備獨特且統一的品牌風格的法則。設計語言把設計作為一種“溝通的方式”，用於在特定的場景中進行品牌內容與資訊的傳遞。它的特點是：

1. 具備嚴謹的設計規範： 是產品設計參考的標準和規範，規定了設計的基本原則；
2. 是動態的，不斷升級的： 設計語言不是一成不變的，可以根據市場所流行和認可的設計趨勢，進行補充、迭代和完善；
3. 能夠使產品具備統一的品牌屬性： 使用設計語言設計出的產品能夠保持較好的統一性，並帶明顯的品牌特徵；
4. 能夠提高設計效率： 設計語言中的規則和元素可以被當成元件，應用於產品設計的過程中，起到元件的作用，減少重複性工作。

Google 旗下眾多產品線共享同一套 Material Design 的設計語言規範 ，因此其產品中任何一個介面都不會讓人感覺出自 Apple 或 Microsoft 之手。

使用 Material Design 設計語言搭建的頁面

好的產品都打造了屬於自己的設計語言。是設計語言統一了整個產品的風格，並讓產品有了區別於其他產品的個性。

三、設計系統：方法論+工具+流程

「設計系統」也被叫做「設計體系」。「元件系統」和「設計語言」定義了產品和設計應該是怎樣，卻沒有解答 該如何才能做到這樣 。這些問題都由設計系統進行回答。

一個設計系統通常包括以下內容的合集：設計價值觀、設計原則、元件系統、樣式指南、最佳實踐、工具資源和工作流程（SOP）等。

有效的設計系統可以幫助團隊 提高設計決策 ，優化設計與開發的工作流程，降低錯誤風險。建立設計系統也 是團隊管理的一部分 ，有助於為新加入團隊的成員提供指導，同時確保團隊的工作不會因為某位關鍵成員的離開而出現斷點。

目前設計系統主要包括平臺級和公司級兩種：

1. 平臺級設計系統

Apple、Google、Microsoft 為了指導各自生態下應用軟體的設計，都推出了完整的設計系統。

Apple 的 Human Interface Guidelines，Google 的 Material Design，Microsoft 的 Fluent Design 都是值得借鑑的典範，不僅為自家的產品制定了流程和規範，也 規定了其平臺上產品的標準和形式 。

2. 公司級設計系統

有的公司為自身產品和團隊管理打造了設計系統，比如 IBM 的 Carbon 設計系統，還有螞蟻集團的 TechUI 等，都在設計和開發的工作中持續賦能。

本文由@ 元堯 原創釋出於人人都是產品經理。未經許可，禁止轉載。

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