中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：在設(shè)計系統(tǒng)的創(chuàng)建中，從最初的需求到后期的搭建來說，整個步驟都需要團(tuán)隊的合作以及完整的策劃，并且很多企業(yè)都開始進(jìn)行設(shè)計的規(guī)?；?；本文作者將側(cè)重從開發(fā)層面進(jìn)行描述，并分享了我們的設(shè)計目標(biāo)、設(shè)計過程和設(shè)計結(jié)果。

在本篇文章中，我將呈現(xiàn)并拆解 Bit 團(tuán)隊構(gòu)建設(shè)計系統(tǒng)的過程；為了幫大家更好理解，每個步驟內(nèi)的真實案例將展示給大家。

設(shè)計系統(tǒng)的創(chuàng)建，是為了解決必然出現(xiàn)的無序狀態(tài)，它帶來了秩序。

在 1976 年，NASA（美國國家航空航天局）推出了第一個設(shè)計系統(tǒng)；到如今，幾乎所有的大型組織（如 Uber，Pinterest，Airbnb 或 Shopify）都擁有一個這樣的設(shè)計系統(tǒng)；這個系統(tǒng)能保持他們產(chǎn)品自身的連續(xù)性，且?guī)椭嗷靵y的產(chǎn)品與團(tuán)隊建立秩序。

在 Bit，我們?yōu)槌^ 15 萬名有組件使用場景的開發(fā)者提供解決方案；平臺幫助開發(fā)者構(gòu)建、分享和使用組件，來加快和優(yōu)化 Web 產(chǎn)品的研發(fā)過程。

我們享受構(gòu)建一個 以組件為驅(qū)動方式的設(shè)計系統(tǒng)。

在過去的兩年里，我們先“折騰”自身平臺來構(gòu)建出一個設(shè)計系統(tǒng)，然后再將其轉(zhuǎn)變?yōu)橐粋€由共享模式化組件構(gòu)成的活躍生態(tài)系統(tǒng)。

這套系統(tǒng)提供的價值，遠(yuǎn)遠(yuǎn)不止保持了界面體驗的一致性；它極大地加快與擴(kuò)大了開發(fā)規(guī)模，且提高了產(chǎn)品質(zhì)量，同時還改善了開發(fā)者與設(shè)計師及其他人的工作方式。

通過讓所有成員參與合作，共同創(chuàng)建和共享組件，可以讓這套設(shè)計系統(tǒng)得以更快更廣泛的應(yīng)用。

本文我將側(cè)重從開發(fā)層面進(jìn)行描述，并與各位分享我們的設(shè)計目標(biāo)、設(shè)計過程和設(shè)計結(jié)果。

目錄：

1. 視覺語言
2. 組件共享
3. 文檔與組件的可發(fā)現(xiàn)性
4. 增量升級
5. 依賴項的漣漪式更改
6. 項目更新
7. 團(tuán)隊溝通
8. 設(shè)計 – 研發(fā)的協(xié)作方式

一、視覺語言

審視已有，然后定義。

我們創(chuàng)建視覺語言的過程，與大多設(shè)計系統(tǒng)文章內(nèi)描述的有所不同；那些是大型企業(yè)持有的特權(quán)，而這種方式對創(chuàng)業(yè)公司通常是奢侈選項。

作為一個生長期的創(chuàng)業(yè)公司，我們沒有時間叫停，并將設(shè)計系統(tǒng)轉(zhuǎn)換為大型復(fù)雜項目；取而代之的是，我們必須 審視現(xiàn)有的視覺語言，然后將其組織成一個有秩序的系統(tǒng)。

這個項目由 Bit 的設(shè)計負(fù)責(zé)人 Amir Shalev 領(lǐng)導(dǎo)，項目分為兩個部分：

• 審核現(xiàn)有樣式與元素；
• 創(chuàng)建一致的系統(tǒng)后，將其作為強(qiáng)大且靈活的基礎(chǔ)來標(biāo)準(zhǔn)視覺語言。

Bit.dev 的面板規(guī)范和色彩規(guī)范

視覺一致意味著為色彩、文字、尺寸、位置及其他視覺語言創(chuàng)建一個統(tǒng)一的樣式標(biāo)準(zhǔn)指南；而字體、排版，主色與輔色等方面，則可以作為設(shè)計系統(tǒng)的一部分。

我們還需要創(chuàng)建一系列的 UI 元素，這些元素需要在將來能夠使用現(xiàn)代的前端框架（例如 React 框架）實現(xiàn)為組件。

按鈕、頭像及其他基礎(chǔ)組件

為了使系統(tǒng)中的元素在真實場景里具備可用性，必須保證元素除了包含像按鈕或頭像等基本 UI 組件外，更應(yīng)包括組件的組成方式或組件的具體用法，這些是保證元素具備功能性的最基礎(chǔ)方法。

將組件組合，可以創(chuàng)建出更多具象的、有進(jìn)階功能的復(fù)合組件。

設(shè)計系統(tǒng)必須沉淀以下資產(chǎn)，才算準(zhǔn)備就緒：

• 樣式指南（Style – Guide）：用于定義 UI 樣式和實現(xiàn)方式。表現(xiàn)形式通常是一個相當(dāng)長的文檔，帶有許多的講解和排版。
• 復(fù)用的系列視覺元素（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)一些很酷的東西；當(dāng)鼠標(biāo)懸停在一個組件上時，將觸發(fā)高亮，提示該組件的名稱、版本和父級范圍。

Bit.dev首頁 —一個展示共享組件的作品

你看到的頁面，是由 共享組件 組成的。然而，這些獨(dú)立組件是由不同團(tuán)隊開發(fā)且持有的，來源也是不同的項目，它們是混合后集成在一起的。

在 Bit，存在不止一個設(shè)計系統(tǒng)。我們有不同的團(tuán)隊在 UI 組件生態(tài)系統(tǒng)中構(gòu)建和共享他們的組件。

如果鼠標(biāo)懸停在諸如「鏈接」（Link）或「段落」（Paragraph）之類的組件上，單擊這些元素，你將看到相鏈頁面顯示這些組件是“base-ui” 范圍的一部分；這是我們設(shè)計系統(tǒng)最基礎(chǔ)的部分，由我們的設(shè)計系統(tǒng)團(tuán)隊在自主的 GitHub repo 中開發(fā)，然后發(fā)布到 Bit.dev 供所有人使用。

“base-ui”—我們設(shè)計系統(tǒng)的基礎(chǔ)組件（https://bit.dev/bit/base-ui）

然而，市場部成員需要更具象的組件，例如與營銷相關(guān)的 “標(biāo)題”（Heading）組件或 “行動按鈕”（Action – button）組件；這些不是 “base-ui” 設(shè)計系統(tǒng)的一部分，而是另一個稱為 “布道者”（Evangelist）的組件范圍。

基于此背景，在 GitHub repo 中，這些組件自動歸屬于市場營銷團(tuán)隊；但由于這些業(yè)務(wù)組件使用 “base-ui” 的組件搭建，因此它們的升級由 “base-ui” 團(tuán)隊負(fù)責(zé)。

“布道者”（Evangelist） — 市場營銷組件（https://bit.dev/bit/evangelist）

“布道者” 只是由 “base-ui” 組成和擴(kuò)展的眾多組件之一；事實上，每個企業(yè)團(tuán)隊都 參與了構(gòu)建自己業(yè)務(wù)范圍的組件，并與他人共享自己的成果。

與其為組件發(fā)布一個統(tǒng)一的軟件包，我們選擇了創(chuàng)建一個 讓所有人協(xié)同工作但獨(dú)立發(fā)布版本的生態(tài)系統(tǒng)；設(shè)計系統(tǒng)的角色應(yīng)是 促進(jìn) 和 規(guī)范，而不是阻止或強(qiáng)制執(zhí)行。

這個生態(tài)系統(tǒng)獲得了巨大的成功，我們既減少了約 75% 新營銷頁面的搭建時間，還保持了設(shè)計風(fēng)格的一致。

2. 用自主研發(fā)的工具工作

Bit 的 “折騰” 意味著我們以幫助別人的方式來建設(shè)自己的設(shè)計系統(tǒng)。并且從 2017 年開始，已經(jīng)這樣進(jìn)行了好幾年。以下為要點(diǎn)：

• 我們使用 Bit OSS 工作平臺（https://github.com/teambit/bit）來開發(fā)、管理和發(fā)布來自不同團(tuán)隊不同代碼庫所擁有的解耦組件。
• 我們通過 Bit 云平臺（https://bit.dev/），幫助所有團(tuán)隊順利地彼此公開、共享和集成組件。
• 我們設(shè)計系統(tǒng)團(tuán)隊提供組件系統(tǒng)內(nèi)的基本組件，并負(fù)責(zé)更新與調(diào)整，保證基本組件的標(biāo)準(zhǔn)和一致性。

3. 選擇 React 框架

2017 年，基于各種原因，我們選擇使用 React 框架，并且對這一選擇感到非常滿意。自從 React 16 引入 Hooks 和 Context API 后，它就開始變得非常強(qiáng)大；例如，即使是在狀態(tài)管理方面，也能將多個組件彼此分離。

然而，我們正看到許多團(tuán)隊選擇將 Bit 用于 Vue 或 Angular 甚至是 Stencil Web 組件；其實我們一直在與 Angular 團(tuán)隊合作，為 Angular 的 Bit 庫提供支持；但在考慮了所有因素后，我們認(rèn)為 React 是目前 Bit 團(tuán)隊的最佳解決方案。

4. 獨(dú)立組件

Bit 工作平臺幫助你創(chuàng)建模塊項目的同時，享受簡單而全面的開發(fā)體驗。每個組件都是獨(dú)立開發(fā)、構(gòu)建、測試、記錄、發(fā)布并集成到新應(yīng)用程序中的，所有的組件都是和諧組合與管理的。

5. 建立開發(fā)流程標(biāo)準(zhǔn)

另一個實現(xiàn)設(shè)計一致性的好方法，是 標(biāo)準(zhǔn)化組件的開發(fā)流程；Bit 通過各種特有功能助力發(fā)布過程的標(biāo)準(zhǔn)化，比如標(biāo)準(zhǔn)組件開發(fā)環(huán)境、提供可復(fù)用的文檔模板，甚至是提供具備擴(kuò)展性和復(fù)用性的開發(fā)記錄管道圖。

具有拓展性、復(fù)用性且可自定義設(shè)置的管道圖

三、文檔與組件的可發(fā)現(xiàn)性

保持文檔更新，不使用額外維護(hù)工具。

使用 Bit 的另一個優(yōu)勢是，我們不需要為組件創(chuàng)建或維護(hù)額外的文檔網(wǎng)站。

1. 本地開發(fā)

當(dāng)我們編寫組件時，Bit 的 UI 將顯示一個涵蓋本地開發(fā)環(huán)境中全部組件的文檔；該文檔支持隔離呈現(xiàn)各個組件的概述、使用示例和構(gòu)成組合。

你可以創(chuàng)建可自定義和復(fù)用的文檔模板，以便所有組件都可以按照相同的標(biāo)準(zhǔn)和設(shè)計進(jìn)行文檔化。

文檔是本地開發(fā)的一部分

2. 云端文檔

文檔只是每個Bit 組件的一部分，當(dāng)組件被導(dǎo)入云端時，組件的文檔將顯示在首頁，供所有人查看；文檔在組件的記錄位置是一樣的，方便查看與預(yù)覽；如果你在本地安裝或?qū)肓私M件，也支持在本地更新文檔。

“先修改 Tokens，之后更新 React、UI Kit，再接著將這些內(nèi)容的鏈接更新到對應(yīng)文檔頁面，然后發(fā)布文檔”

— Kaelig Deloumeau Prigent，Shopify 的 Polaris 開發(fā)者

所有的 Bit.dev 上的文檔與我們在本地開發(fā)時所看到的保持一致；每次發(fā)布新版本的組件，其文檔也能輕松保持同步更新。沒有額外成本，沒有復(fù)雜流程，沒有未及時更新的文檔。

本地開發(fā)的，即云端所見的

3. 可發(fā)現(xiàn)性與搜索功能

由于組件越來越多，Bit.dev 使用“組件搜索”和“關(guān)聯(lián)篩選項” 等功能 提高組件的可發(fā)現(xiàn)性，這些功能幫助我們快速輕松地搜索許多組件。

?

前往 Bit.dev 從數(shù)千個 OSS 組件中搜索想要的，或者添加自己的組件

四、增量升級

Incremental Upgrades 單獨(dú)的組件版本控制

我們的設(shè)計系統(tǒng)是 按組件進(jìn)行版本控制的，而不是簡單發(fā)一個包。

對 獨(dú)立的單個或多個組件 進(jìn)行版本控制比將所有組件打成單個包來控制版本要好得多。獨(dú)立發(fā)布的組件語義化版本控制，已經(jīng)成為這個游戲規(guī)則的改進(jìn)者。

以下是 Bit 的主要優(yōu)勢：

1. 我們只更新用戶所需的內(nèi)容。
2. 我們可以輕松快速地升級單個組件。
3. 我們很容易修復(fù)或者回滾任何組件。
4. 我們支持混搭和匹配來創(chuàng)造各種復(fù)合組件。

Bit 幫助用戶將每個組件作為一個 獨(dú)立的包進(jìn)行版本發(fā)布，由于每個組件的版本都是獨(dú)立的，所以可依據(jù)不同的項目對組件進(jìn)行增量升級，而不是一次次集成為一個大的包。

如果前往「按鈕」組件頁面，你會注意到該組件當(dāng)前在 1.5.0 版本上，并且初始版本是 1.0.0。

這種更新方式給了設(shè)計師和開發(fā)人員極大的自由，大家可以不斷地進(jìn)行產(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 這個版本，支持比過往版本更多的設(shè)計示例。

這樣設(shè)計師和開發(fā)人員無需等至大版本或較久的迭代版本才更新，現(xiàn)在便能夠 極度自由地研發(fā)與升級組件。

組件開發(fā)者也可以通過 sem 版本規(guī)則、查看歷史記錄、查看視圖更改日志的方式，控制每個組件的版本避免沖突。

而應(yīng)用程序共創(chuàng)者也不會接收到需求以外的更新通知。每個人都很高興。

五、依賴項的漣漪式更改

RipplingChanges toDependencies 管理所有組件關(guān)系。

Bit 管理著項目中所有組件之間的依賴關(guān)系圖，這意味著，當(dāng)我們升級或中斷一個組件時，Bit 會“知曉”哪些組件與其有依賴關(guān)系，然后將運(yùn)行這些依賴組件的重構(gòu)和測試。

結(jié)果證明，這個方法讓組件之間的內(nèi)部關(guān)系更容易掌握，開發(fā)同個項目里的多個組件一事變得更簡單。

“如果我們在升級時破壞了一個組件，我們不得不檢查并修復(fù)所有的依賴組件。”

—— Jony Cheung，Atlassian 的 Atlaskit 軟件工程經(jīng)理

每次更改，也會對所有關(guān)聯(lián)組件運(yùn)行一次 重構(gòu) 和 測試，并讓我們確切地知道哪些組件已損壞，而哪些組件沒有；如果結(jié)果一切正常，我們可以簡單粗暴地告訴 Bit 一次性迭代所有相關(guān)組件。

我們現(xiàn)在正在開發(fā)一種叫做 Ripple CI 的新產(chǎn)品。在 Ripple 平臺運(yùn)行的重建過程，將通過云端把更改傳輸?shù)讲煌瑘F(tuán)隊產(chǎn)品中的、有依賴關(guān)系的組件里。

使用者將確切地看到每個依賴組件被漣漪式影響的過程。以及它們的影響關(guān)系、影響部分。然后，這些組件將一起被修復(fù)和發(fā)布。

六、項目更新

Project Updates 通過 GitHub 集成實現(xiàn)自動化。

我們使用對外公開的集成方式將 Bit.dev 與 GitHub 平臺關(guān)聯(lián)起來；當(dāng)組件的新版本發(fā)布到 Bit.dev，這個版本將 “知道” 在 GitHub（或 GitLab）上的哪些項目也該被更新。

然后這個過程就完全自動化了。

組件的新版本作為一個 Pull 請求，將自動發(fā)送到所有包含該組件的項目，只需單擊選擇接受，便可更新。

這使得負(fù)責(zé)設(shè)計系統(tǒng)的團(tuán)隊能夠很容易地 持續(xù)升級，并幫助所有產(chǎn)品構(gòu)建者接受更新與集成更改。

并且，團(tuán)隊可以隨時監(jiān)控誰遺忘了更新內(nèi)容與位置；這里必須提到就在不久前 Gilad Shoham 領(lǐng)導(dǎo) Bit 核心團(tuán)隊避免了一次重大更新事故！注意咯 Gilad，我們什么都知道了。

七、團(tuán)隊溝通

Team Communication通過 Slack 軟件實現(xiàn)自動化。

發(fā)布新的組件版本時，所有使用此組件（與此組件有依賴關(guān)系）的團(tuán)隊都將通過平臺和 Slack 軟件獲得更新通知。

因此，例如說一個版本內(nèi)「購物車」中的「按鈕」組件被導(dǎo)出時，Bit 團(tuán)隊會收到一個通知，其中包括執(zhí)行該操作的用戶賬號、操作行為（導(dǎo)出）以及與該特定操作相關(guān)的導(dǎo)出組件數(shù)。

以下是 Eden Ella 從 “布道者” 團(tuán)隊組件內(nèi)更新「按鈕」組件的記錄。

每次進(jìn)行組件的導(dǎo)入操作時，均將出現(xiàn)類似的 通知模板，但帶有不同源范圍。

該工作流程幫助所有人保持信息同步，且更好地進(jìn)行工作協(xié)同。

八、設(shè)計 – 研發(fā)的協(xié)作方式

Developer -Designer Collaboration 以可視化的方式在代碼上協(xié)同工作。

設(shè)計系統(tǒng)這一概念對 設(shè)計師 和 開發(fā)人員 來說是兩個不同的東西。

設(shè)計師通常談?wù)摦嫴忌系脑兀_發(fā)人員在他們的集成開發(fā)環(huán)境內(nèi)討論 React 組件。用戶最后獲得的是 由代碼編寫的產(chǎn)物，而不是設(shè)計元素。

這就是為什么設(shè)計師參與 UI 開發(fā)過程這件事會產(chǎn)生爭議。

我們用兩個強(qiáng)大工具來實現(xiàn)設(shè)計與研發(fā)之間 穩(wěn)固且雙贏的合作關(guān)系。

• 使用 Zeplin —— 這是一個側(cè)重于服務(wù)設(shè)計師，讓他們與開發(fā)人員友好合作的工具。我們用它 將設(shè)計任務(wù)轉(zhuǎn)化為開發(fā)任務(wù)，團(tuán)隊使用該工具的頻率是每天。
• 使用 Bit 平臺 —— 這是一個側(cè)重于服務(wù)開發(fā)人員，讓他們與設(shè)計師友好合作的工具，它為設(shè)計師在 UI 組件開發(fā)過程中扮演積極的一環(huán)搭建了橋梁；此外，它還可以幫助設(shè)計人員監(jiān)視代碼更改行為，甚至是參與組件的新版本的更改協(xié)作。

而且，目前 Zeplin 團(tuán)隊正在和 Bit 團(tuán)隊探討集成合作！

通過可視化，設(shè)計師可以查看和嘗試實際效果的 React 組件。

同時，我們使用 Bit 平臺將所有組件公布給設(shè)計師，保證他們的設(shè)計效果始終完美一致。

像“熱重加載渲染”和“可編輯示例”等功能，是設(shè)計師查看組件和嘗試不同設(shè)計樣式的好方法。

每當(dāng)有組件的新版本或者新組件在 Bit.dev 發(fā)布，設(shè)計師能通過可視化直觀地看到更改內(nèi)容。這樣就很容易保證所有設(shè)計的一致性。

然后，在設(shè)計師的批準(zhǔn)之后，可以將此更改作為 Pull 請求，自動發(fā)送給所有有影響關(guān)系的項目，這意味著設(shè)計人員現(xiàn)在直接能與開發(fā)人員共同開發(fā)組件。很酷吧？

在不久的將來，我們團(tuán)隊打算在 Bit.dev 平臺上添加更多面向設(shè)計師的功能；例如交互式屬性面板，這樣設(shè)計師就可以自己進(jìn)行組件更改的行為，并將更改后的組件保存為新版本，這些功能應(yīng)該能在 2021 年上線。

九、結(jié)語

Conclusion

2020 年版本的 NASA 設(shè)計系統(tǒng)

建立 UI/UX 體驗，并在產(chǎn)品的各個觸點(diǎn)上延續(xù)體驗的一致性，幫助用戶在操作時不會產(chǎn)生混淆，能夠直觀地進(jìn)行導(dǎo)航并成功地與產(chǎn)品不同模塊進(jìn)行交互，這就是品牌效應(yīng)。

而你需要一個這樣優(yōu)秀的品牌效應(yīng)。

在建立設(shè)計系統(tǒng)的過程里，我們算是從頭開始構(gòu)建；我們審視了現(xiàn)有設(shè)計，把它變成了一個有序系統(tǒng)；我們定義了 視覺元素 和 樣式指南，這些東西無不反應(yīng)了 Bit 的品牌故事。

我們依靠自主研發(fā)的 云工具平臺，來構(gòu)建一個 可共享的組件系統(tǒng)；在過程中，該平臺將每個成員聚集到此；在這個民主但受監(jiān)管的生態(tài)系統(tǒng)中，我們讓組件驅(qū)動產(chǎn)品開發(fā)。

最后，這個系統(tǒng)得到大眾快速和幾乎絕對的采用。

我希望這篇文章至少幫助你了解些許我們構(gòu)建設(shè)計系統(tǒng)的過程，以及現(xiàn)代大家共同構(gòu)建 Web 產(chǎn)品的可能性。

作者：Jonathan Saring

原文：https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833

譯者：徐曼鷺；審核：張聿彤；編輯：徐小淇

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議