們從人們那里得到了很多關于如何設置他們的設計系統(tǒng)的問題。很多人開始的地方是看看野外的例子。

他們會找到設計精良的網(wǎng)站建設，關于產(chǎn)品原理背后的思考的詳細說明，以及一直指向用于圖標的網(wǎng)格系統(tǒng)的說明。許多設計系統(tǒng)還包括組件的交互示例，它們應如何在代碼中使用，以及可用組件的公共回購。所有UI工具包或庫旁邊的所有內(nèi)容都以常規(guī)節(jié)奏更新。

這太嚇人了。

別誤會我的意思。我喜歡這些詳細的解釋。我個人最喜歡的仍然是較舊的Apple人機界面指南（1995年的例子）。但我親眼目睹了那些試圖創(chuàng)建設計系統(tǒng)或只是加強公司文檔的人們會感到多么沮喪和壓倒性。

如果您目前對所有精心打造的詳細設計系統(tǒng)感到不知所措，那么本文就適合您。下面，我們將為您所看到的令人印象深刻的示例添加上下文，為您提供一個框架，幫助您更好地理解設計系統(tǒng)，并為您提供有關如何使用正確的鈴聲和口哨開始構(gòu)建自己的設計系統(tǒng)的想法您。從設計系統(tǒng)的范圍我們';; 展示四個不同的例子：

小團隊：所有創(chuàng)作者都是消費者

中型團隊：并非所有消費者都是創(chuàng)作者

大型團隊：獨立的系統(tǒng)團隊發(fā)展

平臺：外部消費者依賴于您

本文討論了設計系統(tǒng)的細粒度方面，并假設您已經(jīng)決定構(gòu)建一個。它還假設已經(jīng)對您的團隊如何設計和構(gòu)建正在進行的產(chǎn)品進行了某種組件化。

需要擴展共享知識

無論有沒有設計系統(tǒng)，我們的最終目標都是創(chuàng)造一個有凝聚力的用戶體驗。用戶感受到的經(jīng)驗，可以直觀地重用現(xiàn)有知識，在軟件中導航，實現(xiàn)他們有效完成的任務。

當你開始在一小群人中建立一些東西時，共同的理解就會發(fā)展。每個人都在同一條船上，一起做出決定。每個人都有相同的目標。其中大部分都是通過直接或公開的溝通和共享討論來實現(xiàn)的。

在小型團隊中進行設計時，每個人都確切知道可用的組件或樣式，在哪里找到它們以及如何使用它們。當您工作時，您將討論并完善您的原則，指南以及可能出現(xiàn)的任何其他內(nèi)容。這是一個快樂的地方。

但是一旦團隊成長，維持小團隊的共同理解變得越來越難。當然，我們可以舉行更多會議并發(fā)送更多電子郵件，但最終，我們需要一種可靠的方式來擴大共同理解以及我們的增長。

設計系統(tǒng)（或它的清晰度）是一種異步傳播這種共享理解的工具。

了解創(chuàng)作者和消費者

現(xiàn)在我們在同一頁上講述為什么我們要將我們的知識外化。但是從一開始的核心問題仍然存在：如何？

我們應該創(chuàng)建一個優(yōu)秀的網(wǎng)站并描述系統(tǒng)背后的原因嗎？我們是否應該將我們的生產(chǎn)組件發(fā)布為開源GitHub版本，并確保它們與我們的設計人員正在使用的組件完全同步？

這些是很棒的解決方案 但是如果你是一個資源有限的小團隊，這些也需要做很多工作并且不容易實現(xiàn)。

要確定哪些示例與您最密切相關，您必須首先了解與系統(tǒng)交互的人員的兩個關鍵角色：創(chuàng)建者和消費者。

創(chuàng)作者

這是發(fā)明新模式或記錄現(xiàn)有模式供他人使用的人或人。在較大的組織中，“發(fā)明”和文檔部分可能是分開的，在較小的團隊中，這可能是同一組人。

消費者

這些是使用先前定義的模式的人。他們需要盡可能地了解情況并清楚地了解他們在哪里找到他們正在尋找的東西，以及為什么以及如何使用它。

設計系統(tǒng)可能狀態(tài)的范圍

了解創(chuàng)建者和消費者現(xiàn)在為我們提供了定義設計系統(tǒng)可能狀態(tài)范圍所需的一切。現(xiàn)在，我們可以分析為什么某些示例按照它們的方式設計，并確定您和您的團隊在此范圍內(nèi)的位置。

現(xiàn)在問問自己，“你的創(chuàng)造者離你的消費者有多遠？”

在最左邊，我們有一個團隊。創(chuàng)建者角色和消費者角色合并為一個人。這個人正在使用的一切都是由同一個人創(chuàng)造的。

在最右邊，我們將創(chuàng)建者和消費者角色完全分開。他們沒有任何直接的溝通方式。

中間有幾個關鍵階段。由于這是一個流體光譜，因此應該很容易找到它們之間的位置。所以，讓我們潛入。

1.小團隊：所有創(chuàng)作者都是消費者

場景

在這種情況下，一個小型，高度一致的小組一起工作，并且非常清楚地了解每天發(fā)生的事情，以及產(chǎn)品的表面區(qū)域是什么。這是一次激動人心的體驗，因為每個人都能無縫對齊并以令人印象深刻的速度生產(chǎn)。

設計系統(tǒng)的狀態(tài)

在這個小階段，團隊成員關注靈活性和速度是有意義的。許多信息是直接共享的，因此不需要寫下來。

此外，由于產(chǎn)品可能還很年輕，許多工作可能需要在移動中使用新模式，這些可以很容易地與整個團隊的其他人討論。這限制了重復工作的可能性。

2.中型團隊：并非所有消費者都是創(chuàng)作者

場景

這是Figma目前所處的階段。發(fā)生了兩件讓我們來到這里的事情：更多的人加入了公司，產(chǎn)品達到了更多模式被重用的地步。

設計系統(tǒng)的狀態(tài)

我們開始更徹底地記錄我們的UI組件，并為其他人做出貢獻。它仍然是一項正在進行的工作，并且是在一邊完成的。

我們?nèi)匀蝗鄙籴槍ξ覀兊膭訖C，UI組件背后的原則以及如何使用它們的全面文檔。由于我們?nèi)匀缓苄〔⑶沂虑榭偸窃谧兓焖俚腟lack消息或走到辦公桌可以非常容易和有效地澄清任何其他情況。

3.大型團隊：獨立的系統(tǒng)團隊發(fā)展

場景

在某個時刻，有更多的人在不同的領域使用該系統(tǒng)，而不是回饋它。管理系統(tǒng)將變得更加困難。甚至可能是您的產(chǎn)品的特定區(qū)域需要專用的二級設計系統(tǒng)。

設計系統(tǒng)的狀態(tài)

我們合作的大多數(shù)團隊都實施了一個單獨的設計操作或系統(tǒng)團隊來處理系統(tǒng)組件的文檔和組織以及基本原理和動機。這是有道理的，因為在這個階段與系統(tǒng)的交互變得更加自動化和自助服務。

當多個團隊獨立訪問設計系統(tǒng)時，擁有可以擔任監(jiān)護人或監(jiān)護人的人員非常重要。他們的工作是尋找重用和管理貢獻的案例。

4.平臺：外部消費者依賴于您

場景

此場景比“大型團隊”高一級，因為設計系統(tǒng)是打開并與第三方設計人員和開發(fā)人員使用的意圖共享。

在這個階段，沒有從消費者到系統(tǒng)創(chuàng)建者的直接溝通渠道。這些第三方團隊依賴并信任所提供組件的穩(wěn)定性和性能。

設計系統(tǒng)的狀態(tài)

通常這些是我們在野外看到和談論的例子。他們有漂亮的網(wǎng)站和完整的文檔。它們不僅具有版本化的UI位，而且還具有可用于在各種平臺上開發(fā)的生產(chǎn)組件。