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