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

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

這太嚇人了。

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

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

小團(tuán)隊：所有創(chuàng)作者都是消費(fèi)者

中型團(tuán)隊：并非所有消費(fèi)者都是創(chuàng)作者

大型團(tuán)隊：獨(dú)立的系統(tǒng)團(tuán)隊發(fā)展

平臺：外部消費(fèi)者依賴于您

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

需要擴(kuò)展共享知識

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

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

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

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

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

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

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

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

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

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

創(chuàng)作者

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

消費(fèi)者

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

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

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

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

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

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

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

1.小團(tuán)隊：所有創(chuàng)作者都是消費(fèi)者

場景

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

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

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

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

2.中型團(tuán)隊：并非所有消費(fèi)者都是創(chuàng)作者

場景

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

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

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

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

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

場景

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

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

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

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

4.平臺：外部消費(fèi)者依賴于您

場景

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

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

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

通常這些是我們在野外看到和談?wù)摰睦印Ｋ麄冇衅恋木W(wǎng)站和完整的文檔。它們不僅具有版本化的UI位，而且還具有可用于在各種平臺上開發(fā)的生產(chǎn)組件。