設(shè)計(jì)規(guī)范

開源社區(qū)Github的設(shè)計(jì)系統(tǒng)是如何做的？

4380

作為全球最受開發(fā)者歡迎的開源社區(qū)，Github 的設(shè)計(jì)團(tuán)隊(duì)是怎樣構(gòu)建自己的工作流程的呢？Github 設(shè)計(jì)系統(tǒng)的管理者 Diana Mounter 通過(guò)這篇文章講述了 Github 設(shè)計(jì)系統(tǒng)的整個(gè)進(jìn)化史。

設(shè)計(jì)系統(tǒng)現(xiàn)在已經(jīng)成為我們整個(gè)設(shè)計(jì)構(gòu)建流程的核心。從2011年起 Github 的設(shè)計(jì)師就已經(jīng)抽象出一套 UI 模式和公共樣式。2012年，所有這些公共樣式和其它資源就被打包成了一個(gè)設(shè)計(jì)系統(tǒng)的雛形——Primer，并應(yīng)用于 Github 所有的站點(diǎn)。Primer 在內(nèi)部被使用了很多年，最終它有了一套完整的 CSS 和文檔，并被開源出去。2016年設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)成立并擁有了全職人員維護(hù)。這篇文章主要講述這個(gè)團(tuán)隊(duì)及設(shè)計(jì)系統(tǒng)的演進(jìn)歷史，以及我們現(xiàn)在正在做的和將來(lái)要做的事情。

從0開始

在 Github 我們的產(chǎn)品設(shè)計(jì)師和網(wǎng)頁(yè)設(shè)計(jì)師是需要編寫產(chǎn)品代碼的，有時(shí)候還需要自己去實(shí)現(xiàn)自己的設(shè)計(jì)?？赡苡幸恍┤藭?huì)繼續(xù)深入研究技術(shù)棧，但 CSS 是每個(gè)設(shè)計(jì)師都要掌握的。也就是說(shuō)設(shè)計(jì)師是 Primer 的首批用戶，并且他們能最先發(fā)現(xiàn)一些樣式問(wèn)題，或者是文檔錯(cuò)誤。

△ 2015年的 Primer 文檔

當(dāng)我2015年加入 GitHub 時(shí)，我注意到有很多設(shè)計(jì)模式在文檔中是沒(méi)有的，因此我需要自己去寫很多的 CSS 來(lái)填補(bǔ)它們。同時(shí)，我發(fā)現(xiàn)我們沒(méi)有一個(gè)底層的系統(tǒng)將這些設(shè)計(jì)模式聯(lián)系起來(lái)。此時(shí)我便萌生了想要做一些事情的想法，我覺得我們可以做得更好，慶幸的是我發(fā)現(xiàn)不止我一個(gè)人有這個(gè)想法。我們其實(shí)有好幾個(gè)人都在嘗試讓它變得更好，只是大家卻沒(méi)有朝著同一個(gè)方向前進(jìn)。在當(dāng)時(shí)設(shè)計(jì)負(fù)責(zé)人的協(xié)助下，我們成立了一個(gè)小組，定期碰面討論如何優(yōu)化它和我們的工作流程——這便是最早期的設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)。

△ 2016年3月的一次設(shè)計(jì)會(huì)議，我們定制計(jì)劃并進(jìn)行頭腦風(fēng)暴。我們都是遠(yuǎn)程的，所以一般我們都是定期碰面。

顯示出我們的價(jià)值

我們首先解決那些影響最大的問(wèn)題，以及在設(shè)計(jì)過(guò)程中給設(shè)計(jì)師帶來(lái)最大痛點(diǎn)的問(wèn)題。

我們添加了很多公共的樣式，比如排版、顏色、間隔，以及一些可復(fù)用的組件，來(lái)避免其他人不斷往里面添加新的可能重復(fù)的 CSS；我們把已有的設(shè)計(jì)模式也優(yōu)化了一下，減少重復(fù)代碼和無(wú)用的變化；我們還抽象提取了很多可以共用的東西，統(tǒng)一了命名規(guī)范，以保持一致性。

與此同時(shí)，我們還同步完善文檔，將以前沒(méi)有提及的設(shè)計(jì)模式添加進(jìn)去，并編寫了設(shè)計(jì)原則和可訪問(wèn)性指南。

△ 2016年的一個(gè)早期內(nèi)部版本

按照既定日程不斷解決一些痛點(diǎn)之后，我們給設(shè)計(jì)師和開發(fā)人員帶來(lái)的價(jià)值開始凸顯，這為我們后續(xù)提升識(shí)別性和設(shè)計(jì)系統(tǒng)的價(jià)值做了鋪墊。2016年年底，整個(gè)文檔幾乎覆蓋了所有的設(shè)計(jì)模式，在設(shè)計(jì)時(shí)我們不需要每次都寫一堆 CSS。我們也有了第一個(gè)設(shè)計(jì)系統(tǒng)團(tuán)隊(duì)——雖然只有我和 Jon Rohan 倆人。

不斷增長(zhǎng)的痛點(diǎn)

當(dāng)設(shè)計(jì)系統(tǒng)開始被廣泛使用時(shí)，我們面對(duì)的需求也逐漸增多，并且追蹤管理這些需求也開始變得困難。在 Github，我們一般都是在 pull request「1」或者 issue「2」中提及（@）某個(gè)團(tuán)隊(duì)來(lái)尋求反饋，被提及的人或團(tuán)隊(duì)會(huì)收到站內(nèi)通知或郵件。一段時(shí)間之后，我們就被淹沒(méi)在提醒里面，反而導(dǎo)致我們會(huì)忘記一些事情，并不能很好地在內(nèi)部推廣我們的設(shè)計(jì)系統(tǒng)。在一次「黑客周」的大會(huì)上，我們決定優(yōu)先解決這個(gè)事情。

我們制定了一些新的流程：

使用團(tuán)隊(duì)發(fā)布來(lái)更廣泛地發(fā)布設(shè)計(jì)系統(tǒng)更新：在 GitHub 內(nèi)部我們還有一個(gè)工具叫做 Team，一般是用來(lái)發(fā)布重大更新，新特性上線，或者是新的職位空缺。我們開始使用 Team 的發(fā)布功能在重大更新之前來(lái)通知所有人 Primer 和設(shè)計(jì)規(guī)范更新，同時(shí)分享更多相關(guān)信息。

讓更新的狀態(tài)更加明顯：因?yàn)槲覀兊母骂l率很快，所以我們需要更加明顯的標(biāo)志，來(lái)告知所有人哪些組件是可以安全使用的。我們創(chuàng)建了一個(gè)更新日志來(lái)同步更新，并在文檔上標(biāo)明每個(gè)模塊的狀態(tài)。和 Lightning 設(shè)計(jì)系統(tǒng)的狀態(tài)差不多，我們的是包含穩(wěn)定版、新發(fā)布、評(píng)審中、實(shí)驗(yàn)特性和已廢棄這幾種。

實(shí)行「隨叫隨到」輪崗制度：Github 的每個(gè)團(tuán)隊(duì)都在實(shí)行「隨叫隨到」輪崗制度，不過(guò)我們叫做「第一響應(yīng)人」。這個(gè)人輪崗時(shí)要去處理一些事項(xiàng)，及時(shí)響應(yīng)別人的幫助請(qǐng)求或代碼評(píng)審。這樣，該團(tuán)隊(duì)其他人就可以專注于自己更加深入的工作。

△ 在 Slack 中使用一個(gè)手?jǐn)]的 Hubot 腳本幫我們查看「第一響應(yīng)人」需要注意的工作

擴(kuò)大我們的影響力

當(dāng) Primer 開始在 Github 中被更加廣泛地使用時(shí)，我們就需要規(guī)?；覀兊牧鞒?，以保證它可以更加高效，我們也更有信心使用它。

?

1. 優(yōu)化發(fā)布流程

我們自己的工作流程中最大的痛點(diǎn)就是 Primer 每次的新發(fā)布。因?yàn)槊總€(gè)模塊都是單獨(dú)存放在自己的倉(cāng)庫(kù)「3」維護(hù)的，這就使得整個(gè)系統(tǒng)的更新變得無(wú)比困難。每次我們都得小心翼翼，以免使用時(shí)遇到問(wèn)題。我們經(jīng)常會(huì)填寫一個(gè)重復(fù)的版本號(hào)，或者忘記更新某一個(gè)模塊，或者不知道這次更新會(huì)給在線產(chǎn)品帶來(lái)的隱患。我們急需一個(gè)更加強(qiáng)健的流程來(lái)更好地檢查每次的更新。

我們的解決辦法是將所有模塊集中管理，并使用 Lerna「4」來(lái)幫助我們管理版本和發(fā)布新版。更新幾次之后，我們開始使用 Travis CI「5」來(lái)自動(dòng)構(gòu)建發(fā)布預(yù)初版本。也就是說(shuō)，每當(dāng)有人提交新的 pull request 時(shí)，系統(tǒng)就會(huì)自動(dòng)構(gòu)建一個(gè)版本，他就可以下載這個(gè)版本在自己的項(xiàng)目中進(jìn)行測(cè)試。這對(duì)于正式發(fā)布前測(cè)試改動(dòng)很有幫助。

△ 使用 Travis CI，當(dāng)有人提交 pull request 時(shí)會(huì)自動(dòng)構(gòu)建并發(fā)布至 npm

?

2. 讓機(jī)器人來(lái)做這件事

隨著時(shí)間往后推移，我們發(fā)現(xiàn)經(jīng)常需要重復(fù)地給出一些反饋，比如說(shuō)「盡量使用已有的公共樣式」這種。為此，我們寫了一個(gè)機(jī)器人腳本來(lái)自動(dòng)做這件事。這個(gè)機(jī)器人會(huì)在有新的 pull request 時(shí)自動(dòng)評(píng)論，告訴作者哪些地方需要修改一下，并且提供相關(guān)的文檔鏈接。這給我們節(jié)約了很多時(shí)間，并讓更多人不知不覺中學(xué)習(xí)了我們的設(shè)計(jì)系統(tǒng)規(guī)范。

△ Servbot 在一個(gè) pull request 下方評(píng)論

我們繼續(xù)去發(fā)現(xiàn)重復(fù)的工作項(xiàng)，并嘗試通過(guò)自動(dòng)化的方式提升它。今年我們使用我們自己開源的 Probot 機(jī)器人、Figma 接口和 Travis CI 來(lái)自動(dòng)化我們的圖標(biāo)庫(kù) Octicons 的發(fā)布流程。

3. 例行辦公時(shí)間

除了「第一響應(yīng)人」制度，我們每周還有三天的例行辦公時(shí)間留給其他人問(wèn)問(wèn)題。一般這個(gè)時(shí)間我們會(huì)進(jìn)行結(jié)對(duì)編程、討論需要我們幫助的產(chǎn)品發(fā)布，以及解答一些通用問(wèn)題。

△ 我們?cè)?Slack 內(nèi)進(jìn)行例行辦公，這樣所有人都能知道，并且我們忘記時(shí)機(jī)器人會(huì)提醒我們

擴(kuò)大團(tuán)隊(duì)

凸顯設(shè)計(jì)系統(tǒng)價(jià)值這件事使得我可以讓團(tuán)隊(duì)成長(zhǎng)。作為團(tuán)隊(duì)負(fù)責(zé)人，我經(jīng)常要給新人們講解案例，使他們明白設(shè)計(jì)系統(tǒng)帶來(lái)的積極影響，比如說(shuō)它讓我們?cè)诎l(fā)布新特性時(shí)更加高效，工程師們可以在不需要設(shè)計(jì)師協(xié)助的情況下提前做更多事情。我一般更傾向于向新人講述我們正在做的很厲害的事情，以及未來(lái)可能會(huì)幫助更多人的事情，而不告訴他們我們不能做什么。

2017年我們團(tuán)隊(duì)來(lái)了一個(gè)新的設(shè)計(jì)系統(tǒng)設(shè)計(jì)師，Shawn。Shawn 來(lái)自于美國(guó) Web 標(biāo)準(zhǔn)，之前有過(guò)設(shè)計(jì)或設(shè)計(jì)系統(tǒng)相關(guān)的工作經(jīng)驗(yàn)，他善于從設(shè)計(jì)角度去做一些開發(fā)上的決定。

今年（2018）我們招了第一個(gè)全職的工程師，Emily。她之前在 Buffer 做前端工程師，開發(fā)維護(hù)他們的組件庫(kù)。Emily 具有 React.js 和可訪問(wèn)性的經(jīng)驗(yàn)，這對(duì)于我們當(dāng)前的團(tuán)隊(duì)或工作是很重要的。

△ 不同時(shí)間我們需要不同類型的人

無(wú)論我們招的是設(shè)計(jì)師還是工程師，我們都要求一些通用技能。我們要求開發(fā)者具有設(shè)計(jì)敏銳度，這樣能做出更好的決定來(lái)構(gòu)建設(shè)計(jì)系統(tǒng)，使其可以更好地服務(wù)于設(shè)計(jì)。我們也會(huì)要求設(shè)計(jì)師具有基本的代碼讀寫能力，能夠從開發(fā)的角度思考，并根據(jù)開發(fā)的經(jīng)驗(yàn)進(jìn)行設(shè)計(jì)。這很重要，因?yàn)樵O(shè)計(jì)系統(tǒng)融合了設(shè)計(jì)和開發(fā)，我們需要給設(shè)計(jì)和開發(fā)提供一致的設(shè)計(jì)語(yǔ)言。

擴(kuò)展我自己

作為團(tuán)隊(duì)負(fù)責(zé)人和管理者，我也要提升自己的影響力。相比于一年前，我現(xiàn)在帶了更多的人，往后我還要管理更多人員，以及開始構(gòu)建我們的設(shè)計(jì)運(yùn)維事務(wù)。這意味著我不能作為一個(gè)普通的工作者，不問(wèn)世事。今年早些時(shí)候，我發(fā)現(xiàn)我遇到了自己的瓶頸——我更像是一個(gè)設(shè)計(jì)系統(tǒng)的編輯者，而不是作者。

過(guò)去我給這個(gè)設(shè)計(jì)系統(tǒng)貢獻(xiàn)了很多視覺設(shè)計(jì)的工作，并且作為最主要的決定者。現(xiàn)在我正在學(xué)習(xí)如何將這些工作分?jǐn)傄徊糠纸o其他成員，如果他們有不懂的，我會(huì)教他們。

擴(kuò)展我們的構(gòu)建方式

我們最有趣的會(huì)議（是的，會(huì)議也可以很有趣）是每周組件評(píng)審。此時(shí)每位提交了新組件的成員會(huì)帶著我們過(guò)一遍他們的代碼，給我們展示如何使用，效果是怎樣的，并征求一些意見反饋。這保證我們創(chuàng)造出一個(gè)體驗(yàn)一致的設(shè)計(jì)系統(tǒng)。

△ 當(dāng)貓和會(huì)跳舞的同事加入時(shí)會(huì)議會(huì)變得更有趣

下一步

每年我們都會(huì)設(shè)定目標(biāo)，下面這幾項(xiàng)雖然沒(méi)有覆蓋所有，但是一直是我們2018年所專注的。

?1. 更現(xiàn)代化的前端技術(shù)棧

Github.com 的前端技術(shù)棧分散而老舊，我們?cè)跇?gòu)建 UI 時(shí)需要考慮的事情特別多。

與其分心于各種不同的編程語(yǔ)言（比如 HTML、CSS 和 JavaScript），我們不如專注于組件層面。為了達(dá)到這個(gè)目標(biāo)，我們今年主要的任務(wù)就是構(gòu)建一個(gè)基于 React.js 的組件庫(kù)?，F(xiàn)在我們已經(jīng)開始去做了，等這個(gè)組件庫(kù)達(dá)到第一個(gè)穩(wěn)定版本我們就會(huì)開源它。有一些團(tuán)隊(duì)已經(jīng)開始使用 React.js 了，我們希望能夠盡快讓他們使用到我們的組件庫(kù)。我們的應(yīng)用系統(tǒng)團(tuán)隊(duì)已經(jīng)幫我們做了一些事情，幫助我們更容易地將設(shè)計(jì)系統(tǒng)接入，我們需要緊密合作。

△ 我們的 primer-react 組件庫(kù)演示沙箱

2. 創(chuàng)造一個(gè)更好的協(xié)作模式

我們想要看到更多團(tuán)隊(duì)參與進(jìn)設(shè)計(jì)系統(tǒng)的構(gòu)建，不只是我們團(tuán)隊(duì)。我們想要人們?cè)谑褂?Primer 時(shí)感覺更簡(jiǎn)單，也更容易學(xué)習(xí)。因此，我們花了很多時(shí)間去研究設(shè)計(jì)工具、實(shí)踐教程、開發(fā)工具，以及簡(jiǎn)化參與流程。

今年我們將設(shè)計(jì)組件轉(zhuǎn)移到了 Figma，并使用 Figma 來(lái)進(jìn)行可交互原型設(shè)計(jì)。Figma 是基于 Web 的，這意味著我們可以整合進(jìn)設(shè)計(jì)系統(tǒng)工作流中的其它工具，而且不用局限于 macOS。Figma 的公共樣式特性可以幫助我們提取出注入顏色、排版等樣式，和我們?cè)诖a中的實(shí)現(xiàn)方式類似。Figma 還提供對(duì)外接口，可以幫我們很容易地接入其它自動(dòng)化流程，比如說(shuō)根據(jù)我們代碼中的組件來(lái)檢查 Figma 中的組件是否符合規(guī)范。

△ Figma 中的 Primer 顏色樣式

今年晚些時(shí)候，我們將會(huì)去探索代碼原型工具。在設(shè)計(jì)流程確定的階段我們使用圖形化的設(shè)計(jì)工具是很好的，但有時(shí)候我們需要做更進(jìn)一步的探索。在 Github 很多設(shè)計(jì)師都是直接擼產(chǎn)品級(jí)的代碼，但這樣也不好，因?yàn)槊看味夹枰M(jìn)行一些前期的基礎(chǔ)搭建。還有一些設(shè)計(jì)師會(huì)在 Codepen「6」中使用我們之前的一些模板。

△ Primer 在 Codepen 中的項(xiàng)目

我們知道這兩種方式其實(shí)都不是很完美。設(shè)計(jì)師需要經(jīng)常做一些頁(yè)面原型或流程，他們需要能夠快速調(diào)整設(shè)計(jì)效果，就像在圖形化設(shè)計(jì)工具中一樣。這在產(chǎn)品級(jí)代碼中很難做到，而使用 Codepen 中的模板意味著他們?cè)趯Ｗ⒂跇I(yè)務(wù)之前需要寫很多代碼。理想的情況是設(shè)計(jì)師們需要能夠快速開始，使用真實(shí)或接近真實(shí)的產(chǎn)品數(shù)據(jù)來(lái)構(gòu)建頁(yè)面。我們知道這對(duì)于很多公司都是一個(gè)挑戰(zhàn)，希望我們能夠找到一個(gè)解決辦法。

3. 保持開放

我們希望 Github 是人們?cè)谡務(wù)撛O(shè)計(jì)系統(tǒng)時(shí)首先想到的公司之一。許多公司開始構(gòu)建自己的設(shè)計(jì)系統(tǒng)，這是一個(gè)不斷發(fā)展的領(lǐng)域。我們將會(huì)不斷分享這個(gè)過(guò)程中的一些想法，以期幫助到你們。

今年早些時(shí)候我們公開了新版的樣式指南——我在一次設(shè)計(jì)系統(tǒng)的活動(dòng)中曾分享過(guò)，同時(shí)我也談?wù)摰饺藗冴P(guān)于自己公司的設(shè)計(jì)系統(tǒng)和其他公司設(shè)計(jì)系統(tǒng)相比較的問(wèn)題。其實(shí)比較是沒(méi)有意義的，我們應(yīng)該專注于去創(chuàng)造自己的度量標(biāo)準(zhǔn)，因?yàn)閯e人的并不一定適用于你。即使是我們的設(shè)計(jì)系統(tǒng)，也有很多 bug 和可提升的空間。所以我覺得我要分享我們的設(shè)計(jì)系統(tǒng)，包括缺點(diǎn)。

△ 我們的樣式規(guī)范文檔

我們一直在開放地工作，在我們的公開倉(cāng)庫(kù)中不斷發(fā)布著新計(jì)劃。我們將繼續(xù)分享一些新項(xiàng)目，也許它可以直接被用到其他人的設(shè)計(jì)系統(tǒng)，或者能夠啟示人們?nèi)绾稳プ?。我們也?huì)寫更多的文章，去做一些分享，或參與到社區(qū)活動(dòng)中。

如果你有什么想要知道的可以在這里（Primer 倉(cāng)庫(kù)）開 issue 來(lái)告訴我們。

△ Primer 的項(xiàng)目看板

GitHub 將持續(xù)投入到設(shè)計(jì)系統(tǒng)中，我們也將持續(xù)努力做到最好，分享我們成功或失敗的經(jīng)驗(yàn)。如果你也想?yún)⑴c到我們的設(shè)計(jì)系統(tǒng)中，為開發(fā)者創(chuàng)造更好用的產(chǎn)品，可以加入我們。

相關(guān)鏈接及注釋：