起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識一起了解構(gòu)建設計系統(tǒng)的過程
編輯導語：設計師們經(jīng)常會用各種優(yōu)質(zhì)的設計案例進行參考，所以很多設計師開始專注于構(gòu)建一個統(tǒng)一的設計系統(tǒng)，希望將可以將各種設計聚集在一起，打造更完整的系統(tǒng)；本文作者拆解了 Bit 團隊構(gòu)建設計系統(tǒng)的過程，我們一起來了解一下。
在本篇文章中，我將呈現(xiàn)并拆解 Bit 團隊構(gòu)建設計系統(tǒng)的過程；為了幫大家更好理解，每個步驟內(nèi)的真實案例將展示給大家。
設計系統(tǒng)的創(chuàng)建，是為了解決必然出現(xiàn)的無序狀態(tài)，它帶來了秩序。在 1976 年，NASA（美國國家航空航天局）推出了第一個設計系統(tǒng)。
到如今，幾乎所有的大型組織（如 Uber，Pinterest，Airbnb 或 Shopify）都擁有一個這樣的設計系統(tǒng)；這個系統(tǒng)能保持他們產(chǎn)品自身的連續(xù)性，且?guī)椭嗷靵y的產(chǎn)品與團隊建立秩序。
在 Bit，我們?yōu)槌^ 15 萬名有組件使用場景的開發(fā)者提供解決方案；平臺幫助開發(fā)者構(gòu)建、分享和使用組件，來加快和優(yōu)化 Web 產(chǎn)品的研發(fā)過程。
我們享受構(gòu)建一個 以組件為驅(qū)動方式的設計系統(tǒng)在過去的兩年里，我們先“折騰”自身平臺來構(gòu)建出一個設計系統(tǒng)，然后再將其轉(zhuǎn)變?yōu)橐粋€由共享模式化組件構(gòu)成的活躍生態(tài)系統(tǒng)。
這套系統(tǒng)提供的價值，遠遠不止保持了界面體驗的一致性，它極大地加快與擴大了開發(fā)規(guī)模，且提高了產(chǎn)品質(zhì)量，同時還改善了開發(fā)者與設計師及其他人的工作方式。
通過讓所有成員參與合作，共同創(chuàng)建和共享組件，可以讓這套設計系統(tǒng)得以更快更廣泛的應用。
本文我將側(cè)重從開發(fā)層面進行描述，并與各位分享我們的設計目標、設計過程 和設計結(jié)果。
目錄：
- 視覺語言
- 組件共享
- 文檔與組件的可發(fā)現(xiàn)性
- 增量升級
- 依賴項的漣漪式更改
- 項目更新
- 團隊溝通
- 設計 – 研發(fā)的協(xié)作方式
一、視覺語言
審視已有，然后定義我們創(chuàng)建視覺語言的過程；與大多設計系統(tǒng)文章內(nèi)描述的有所不同，那些是大型企業(yè)持有的特權(quán)，而這種方式對創(chuàng)業(yè)公司通常是奢侈選項。
作為一個生長期的創(chuàng)業(yè)公司，我們沒有時間叫停，并將設計系統(tǒng)轉(zhuǎn)換為大型復雜項目；取而代之的是——我們必須審視現(xiàn)有的視覺語言，然后將其組織成一個有秩序的系統(tǒng)。
這個項目由 Bit 的設計負責人 Amir Shalev 領(lǐng)導，項目分為兩個部分：
- 審核現(xiàn)有樣式與元素；
- 創(chuàng)建一致的系統(tǒng)后，將其作為強大且靈活的基礎(chǔ)來標準視覺語言。
Bit.dev 的面板規(guī)范和色彩規(guī)范
視覺一致意味著為色彩、文字、尺寸、位置及其他視覺語言創(chuàng)建一個統(tǒng)一的樣式標準指南；而字體、排版，主色與輔色等方面，則可以作為設計系統(tǒng)的一部分。
我們還需要創(chuàng)建一系列的 UI 元素，這些元素需要在將來能夠使用現(xiàn)代的前端框架（例如 React 框架）實現(xiàn)為組件。
按鈕、頭像及其他基礎(chǔ)組件
為了使系統(tǒng)中的元素在真實場景里具備可用性，必須保證元素除了包含像按鈕或頭像等基本 UI 組件外，更應包括組件的組成方式或組件的具體用法，這些是保證元素具備功能性的最基礎(chǔ)方法。
將組件組合，可以創(chuàng)建出更多具象的、有進階功能的復合組件
設計系統(tǒng)必須沉淀以下資產(chǎn)，才算準備就緒：
- 樣式指南（Style – Guide）：用于定義 UI 樣式和實現(xiàn)方式。表現(xiàn)形式通常是一個相當長的文檔，帶有許多的講解和排版。
- 復用的系列視覺元素（Reusable Visual Elements）：它們通過組件將視覺（UI 方面）和功能（UX 方面）結(jié)合在一起，來保持一致性；表現(xiàn)形式通常是一個大型源文件，其元素在 Figma 或 Sketch 等軟件上繪制。
二、組件共享
構(gòu)建組件的生態(tài)系統(tǒng)有些人的做法是發(fā)布一個帶全部組件的版本包，僅此而已，我們卻更喜歡創(chuàng)建一個共享組件生態(tài)系統(tǒng)。
1. 我們的流程
如果前往 Bit.dev 的首頁，你將發(fā)現(xiàn)一些很酷的東西；當鼠標懸停在一個組件上時，將觸發(fā)高亮，提示該組件的名稱、版本和父級范圍。
Bit.dev首頁 —一個展示共享組件的作品
你看到的頁面，是由共享組件組成的；然而，這些獨立組件是由不同團隊開發(fā)且持有的，來源也是不同的項目，它們是混合后集成在一起的。
在 Bit，存在不止一個設計系統(tǒng)，我們有不同的團隊在UI 組件生態(tài)系統(tǒng)中構(gòu)建和共享他們的組件。
如果鼠標懸停在諸如「鏈接」（Link）或「段落」（Paragraph）之類的組件上，單擊這些元素，你將看到相鏈頁面顯示這些組件是 “base-ui” 范圍的一部分；這是我們設計系統(tǒng)最基礎(chǔ)的部分，由我們的設計系統(tǒng)團隊在自主的 GitHub repo 中開發(fā)，然后發(fā)布到 Bit.dev 供所有人使用。
“base-ui”—我們設計系統(tǒng)的基礎(chǔ)組件
然而，市場部成員需要更具象的組件，例如與營銷相關(guān)的“標題”（Heading）組件或“行動按鈕”（Action – button）組件；這些不是 “base-ui” 設計系統(tǒng)的一部分，而是另一個稱為“布道者”（Evangelist）的組件范圍。
基于此背景，在 GitHub repo 中，這些組件自動歸屬于市場營銷團隊；但由于這些業(yè)務組件使用 “base-ui” 的組件搭建，因此它們的升級由 “base-ui” 團隊負責。
“布道者”（Evangelist） — 市場營銷組件
“布道者” 只是由 “base-ui” 組成和擴展的眾多組件之一。事實上，每個企業(yè)團隊都 參與了構(gòu)建自己業(yè)務范圍的組件，并與他人共享自己的成果。
與其為組件發(fā)布一個統(tǒng)一的軟件包，我們選擇了創(chuàng)建一個讓所有人協(xié)同工作但獨立發(fā)布版本的生態(tài)系統(tǒng)；設計系統(tǒng)的角色應是促進 和規(guī)范，而不是阻止或強制執(zhí)行。
這個生態(tài)系統(tǒng)獲得了巨大的成功，我們既減少了約 75% 新營銷頁面的搭建時間，還保持了設計風格的一致。
2. 用自主研發(fā)的工具工作
Bit 的 “折騰” 意味著我們以幫助別人的方式來建設自己的設計系統(tǒng)，并且從 2017 年開始，已經(jīng)這樣進行了好幾年。
以下為要點：
- 我們使用Bit OSS 工作平臺來開發(fā)、管理和發(fā)布來自不同團隊不同代碼庫所擁有的解耦組件。
- 我們通過Bit 云平臺，幫助所有團隊順利地彼此公開、共享和集成組件。
- 我們設計系統(tǒng)團隊提供組件系統(tǒng)內(nèi)的基本組件，并負責更新與調(diào)整，保證基本組件的標準和一致性。
3. 選擇 React 框架
2017 年，基于各種原因，我們選擇使用 React 框架，并且對這一選擇感到非常滿意；自從 React 16 引入 Hooks 和 Context API 后，它就開始變得非常強大；例如，即使是在狀態(tài)管理方面，也能將多個組件彼此分離。
然而，我們正看到許多團隊選擇將 Bit 用于 Vue 或 Angular 甚至是 Stencil Web 組件。其實我們一直在與 Angular 團隊合作，為 Angular 的 Bit 庫提供支持；但在考慮了所有因素后，我們認為 React 是目前 Bit 團隊的最佳解決方案。
4. 獨立組件
Bit 工作平臺幫助你創(chuàng)建模塊項目的同時，享受簡單而全面的開發(fā)體驗；每個組件都是獨立開發(fā)、構(gòu)建、測試、記錄、發(fā)布并集成到新應用程序中的，所有的組件都是和諧組合與管理的。
5. 建立開發(fā)流程標準
另一個實現(xiàn)設計一致性的好方法，是標準化組件的開發(fā)流程；Bit 通過各種特有功能助力發(fā)布過程的標準化，比如標準組件開發(fā)環(huán)境、提供可復用的文檔模板，甚至是提供具備擴展性和復用性的開發(fā)記錄管道圖。
具有拓展性、復用性且可自定義設置的管道圖
三、文檔與組件的可發(fā)現(xiàn)性
保持文檔更新，不使用額外維護工具。
使用 Bit 的另一個優(yōu)勢是——我們不需要為組件創(chuàng)建或維護額外的文檔網(wǎng)站。
1. 本地開發(fā)
當我們編寫組件時，Bit 的 UI 將顯示一個涵蓋本地開發(fā)環(huán)境中全部組件的文檔；該文檔支持隔離呈現(xiàn)各個組件的概述、使用示例和構(gòu)成組合。
你可以創(chuàng)建可自定義和復用的文檔模板，以便所有組件都可以按照相同的標準和設計進行文檔化。
文檔是本地開發(fā)的一部分
2. 云端文檔
文檔只是每個 Bit 組件的一部分，當組件被導入云端時，組件的文檔將顯示在首頁，供所有人查看；文檔在組件的記錄位置是一樣的，方便查看與預覽；如果你在本地安裝或?qū)肓私M件，也支持在本地更新文檔。
“先修改 Tokens，之后更新 React、UI Kit，再接著將這些內(nèi)容的鏈接更新到對應文檔頁面，然后發(fā)布文檔?！薄?Kaelig Deloumeau Prigent，Shopify 的 Polaris 開發(fā)者
所有的 Bit.dev 上的文檔與我們在本地開發(fā)時所看到的保持一致，每次發(fā)布新版本的組件，其文檔也能輕松保持同步更新；沒有額外成本，沒有復雜流程，沒有未及時更新的文檔。
本地開發(fā)的，即云端所見的
3. 可發(fā)現(xiàn)性與搜索功能
由于組件越來越多，Bit.dev 使用“組件搜索”和“關(guān)聯(lián)篩選項”等功能提高組件的可發(fā)現(xiàn)性，這些功能幫助我們快速輕松地搜索許多組件。
?
前往 Bit.dev 從數(shù)千個 OSS 組件中搜索想要的，或者添加自己的組件
四、增量升級
單獨的組件版本控制
我們的設計系統(tǒng)是按組件進行版本控制的，而不是簡單發(fā)一個包。
對獨立的單個或多個組件 進行版本控制比將所有組件打成單個包來控制版本要好得多；獨立發(fā)布的組件語義化版本控制，已經(jīng)成為這個游戲規(guī)則的改進者。以下是 Bit 的主要優(yōu)勢：
- 我們只更新用戶所需的內(nèi)容。
- 我們可以輕松快速地升級單個組件。
- 我們很容易修復或者回滾任何組件。
- 我們支持混搭和匹配來創(chuàng)造各種復合組件。
Bit 幫助用戶將每個組件作為一個獨立的包進行版本發(fā)布，由于每個組件的版本都是獨立的，所以可依據(jù)不同的項目對組件進行增量升級，而不是一次次集成為一個大的包。
如果前往「按鈕」組件頁面，你會注意到該組件當前在 1.5.0 版本上，并且初始版本是 1.0.0。
這種更新方式給了設計師和開發(fā)人員極大的自由，大家可以不斷地進行產(chǎn)品創(chuàng)新和發(fā)布升級。
例如，以下展示了已發(fā)布的 1.5.0 版本的按鈕：
“布道者” 組件/按鈕@1.5.0
以下是之前 1.4.0 版本的按鈕：
“布道者” 組件/按鈕@1.4.0
這是更早之前 1.0.0 版本的按鈕：
“布道者” 組件/按鈕@1.0.0
現(xiàn)在如果你回到 1.5.0 版本，就會注意到按鈕有一系列的使用示例，1.5.0 這個版本，支持比過往版本更多的設計示例。
這樣設計師和開發(fā)人員無需等至大版本或較久的迭代版本才更新，現(xiàn)在便能夠極度自由地研發(fā)與升級組件。
組件開發(fā)者也可以通過 sem 版本規(guī)則、查看歷史記錄、查看視圖更改日志的方式，控制每個組件的版本避免沖突。
而應用程序共創(chuàng)者也不會接收到需求以外的更新通知，每個人都很高興。
五、依賴項的漣漪式更改
管理所有組件關(guān)系：Bit 管理著項目中所有組件之間的依賴關(guān)系圖，這意味著——當我們升級或中斷一個組件時，Bit 會 “知曉” 哪些組件與其有依賴關(guān)系，然后將運行這些依賴組件的重構(gòu)和測試。
結(jié)果證明，這個方法讓組件之間的內(nèi)部關(guān)系更容易掌握。開發(fā)同個項目里的多個組件一事變得更簡單。
“如果我們在升級時破壞了一個組件，我們不得不檢查并修復所有的依賴組件?！薄?Jony Cheung，Atlassian 的 Atlaskit 軟件工程經(jīng)理
每次更改，也會對所有關(guān)聯(lián)組件運行一次 重構(gòu) 和測試，并讓我們確切地知道哪些組件已損壞，而哪些組件沒有；如果結(jié)果一切正常，我們可以簡單粗暴地告訴 Bit 一次性迭代所有相關(guān)組件。
我們現(xiàn)在正在開發(fā)一種叫做 Ripple CI 的新產(chǎn)品。在 Ripple 平臺運行的重建過程，將通過云端把更改傳輸?shù)讲煌瑘F隊產(chǎn)品中的、有依賴關(guān)系的組件里。
使用者將確切地看到每個依賴組件被漣漪式影響的過程，以及它們的影響關(guān)系、影響部分；然后，這些組件將一起被修復和發(fā)布。
六、項目更新
通過 GitHub 集成實現(xiàn)自動化，我們使用對外公開的集成方式將 Bit.dev 與 GitHub 平臺關(guān)聯(lián)起來；當組件的新版本發(fā)布到 Bit.dev，這個版本將 “知道” 在 GitHub（或 GitLab）上的哪些項目也該被更新，然后這個過程就完全自動化了。
組件的新版本作為一個 Pull 請求，將自動發(fā)送到所有包含該組件的項目；只需單擊選擇接受，便可更新。
這使得負責設計系統(tǒng)的團隊能夠很容易地持續(xù)升級，并幫助所有產(chǎn)品構(gòu)建者接受更新與集成更改。
并且，團隊可以隨時監(jiān)控誰遺忘了更新內(nèi)容與位置，這里必須提到就在不久前 Gilad Shoham 領(lǐng)導 Bit 核心團隊避免了一次重大更新事故！注意咯 Gilad，我們什么都知道了。
七、團隊溝通
通過 Slack 軟件實現(xiàn)自動化：發(fā)布新的組件版本時，所有使用此組件（與此組件有依賴關(guān)系）的團隊都將通過平臺和 Slack 軟件獲得更新通知。
因此，例如說一個版本內(nèi)「購物車」中的「按鈕」組件被導出時，Bit 團隊會收到一個通知，其中包括執(zhí)行該操作的用戶賬號、操作行為（導出）以及與該特定操作相關(guān)的導出組件數(shù)。
以下是 Eden Ella 從 “布道者” 團隊組件內(nèi)更新「按鈕」組件的記錄。
每次進行組件的導入操作時，均將出現(xiàn)類似的通知模板，但帶有不同源范圍。
該工作流程幫助所有人保持信息同步，且更好地進行工作協(xié)同。
八、設計 – 研發(fā)的協(xié)作方式
以可視化的方式在代碼上協(xié)同工作：
- 設計系統(tǒng)這一概念對設計師 和開發(fā)人員 來說是兩個不同的東西。
- 設計師通常談論畫布上的元素，開發(fā)人員在他們的集成開發(fā)環(huán)境內(nèi)討論 React 組件。用戶最后獲得的是由代碼編寫的產(chǎn)物，而不是設計元素。
這就是為什么設計師參與 UI 開發(fā)過程這件事會產(chǎn)生爭議。
我們用兩個強大工具來實現(xiàn)設計與研發(fā)之間穩(wěn)固且雙贏的合作關(guān)系：
第一個是使用Zeplin —— 這是一個側(cè)重于服務設計師，讓他們與開發(fā)人員友好合作的工具。我們用它將設計任務轉(zhuǎn)化為開發(fā)任務，團隊使用該工具的頻率是每天。
第二個是使用Bit 平臺 —— 這是一個側(cè)重于服務開發(fā)人員，讓他們與設計師友好合作的工具，它為設計師在 UI 組件開發(fā)過程中扮演積極的一環(huán)搭建了橋梁；此外，它還可以幫助設計人員監(jiān)視代碼更改行為，甚至是參與組件的新版本的更改協(xié)作。
通過可視化，設計師可以查看和嘗試實際效果的 React 組件
同時，我們使用 Bit 平臺將所有組件公布給設計師，保證他們的設計效果始終完美一致。
像“熱重加載渲染” 和“可編輯示例” 等功能，是設計師查看組件和嘗試不同設計樣式的好方法。
每當有組件的新版本或者新組件在 Bit.dev 發(fā)布，設計師能通過可視化直觀地看到更改內(nèi)容。這樣就很容易保證所有設計的一致性。
然后，在設計師的批準之后，可以將此更改作為 Pull 請求，自動發(fā)送給所有有影響關(guān)系的項目。這意味著設計人員現(xiàn)在直接能與開發(fā)人員共同開發(fā)組件。很酷吧？
在不久的將來，我們團隊打算在 Bit.dev 平臺上添加更多面向設計師的功能，例如交互式屬性面板，這樣設計師就可以自己進行組件更改的行為，并將更改后的組件保存為新版本。這些功能應該能在 2021 年上線。
九、結(jié)語
2020 年版本的 NASA 設計系統(tǒng)
建立 UI/UX 體驗，并在產(chǎn)品的各個觸點上延續(xù)體驗的一致性，幫助用戶在操作時不會產(chǎn)生混淆，能夠直觀地進行導航并成功地與產(chǎn)品不同模塊進行交互；這就是品牌效應，而你需要一個這樣優(yōu)秀的品牌效應。
在建立設計系統(tǒng)的過程里，我們算是從頭開始構(gòu)建。我們審視了現(xiàn)有設計，把它變成了一個有序系統(tǒng)；我們定義了視覺元素 和樣式指南，這些東西無不反應了 Bit 的品牌故事。
我們依靠自主研發(fā)的云工具平臺，來構(gòu)建一個可共享的組件系統(tǒng)；在過程中，該平臺將每個成員聚集到此；在這個民主但受監(jiān)管的生態(tài)系統(tǒng)中，我們讓組件驅(qū)動產(chǎn)品開發(fā)。
最后，這個系統(tǒng)得到大眾快速和幾乎絕對的采用。
我希望這篇文章至少幫助你了解些許我們構(gòu)建設計系統(tǒng)的過程，以及現(xiàn)代大家共同構(gòu)建 Web 產(chǎn)品的可能性。
原文：https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833
作者：Jonathan Saring；
譯者：徐曼鷺；審核：張聿彤；編輯：徐小淇
本文由 @三分設 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
