作為全球最受開發(fā)者歡迎的開源社區(qū),Github 的設(shè)計(jì)團(tuán)隊(duì)是怎樣構(gòu)建自己的工作流程的呢?Github 設(shè)計(jì)系統(tǒng)的管理者 Diana Mounter 通過這篇文章講述了 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)在正在做的和將來要做的事情。
在 Github 我們的產(chǎn)品設(shè)計(jì)師和網(wǎng)頁設(shè)計(jì)師是需要編寫產(chǎn)品代碼的,有時(shí)候還需要自己去實(shí)現(xiàn)自己的設(shè)計(jì)??赡苡幸恍┤藭?huì)繼續(xù)深入研究技術(shù)棧,但 CSS 是每個(gè)設(shè)計(jì)師都要掌握的。也就是說設(shè)計(jì)師是 Primer 的首批用戶,并且他們能最先發(fā)現(xiàn)一些樣式問題,或者是文檔錯(cuò)誤。
△ 2015年的 Primer 文檔
當(dāng)我2015年加入 GitHub 時(shí),我注意到有很多設(shè)計(jì)模式在文檔中是沒有的,因此我需要自己去寫很多的 CSS 來填補(bǔ)它們。同時(shí),我發(fā)現(xiàn)我們沒有一個(gè)底層的系統(tǒng)將這些設(shè)計(jì)模式聯(lián)系起來。此時(shí)我便萌生了想要做一些事情的想法,我覺得我們可以做得更好,慶幸的是我發(fā)現(xiàn)不止我一個(gè)人有這個(gè)想法。我們其實(shí)有好幾個(gè)人都在嘗試讓它變得更好,只是大家卻沒有朝著同一個(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)程的,所以一般我們都是定期碰面。
我們首先解決那些影響最大的問題,以及在設(shè)計(jì)過程中給設(shè)計(jì)師帶來最大痛點(diǎn)的問題。
我們添加了很多公共的樣式,比如排版、顏色、間隔,以及一些可復(fù)用的組件,來避免其他人不斷往里面添加新的可能重復(fù)的 CSS;我們把已有的設(shè)計(jì)模式也優(yōu)化了一下,減少重復(fù)代碼和無用的變化;我們還抽象提取了很多可以共用的東西,統(tǒng)一了命名規(guī)范,以保持一致性。
與此同時(shí),我們還同步完善文檔,將以前沒有提及的設(shè)計(jì)模式添加進(jìn)去,并編寫了設(shè)計(jì)原則和可訪問性指南。
△ 2016年的一個(gè)早期內(nèi)部版本
按照既定日程不斷解決一些痛點(diǎn)之后,我們給設(shè)計(jì)師和開發(fā)人員帶來的價(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 倆人。
當(dāng)設(shè)計(jì)系統(tǒng)開始被廣泛使用時(shí),我們面對的需求也逐漸增多,并且追蹤管理這些需求也開始變得困難。在 Github,我們一般都是在 pull request「1」或者 issue「2」中提及(@)某個(gè)團(tuán)隊(duì)來尋求反饋,被提及的人或團(tuán)隊(duì)會(huì)收到站內(nèi)通知或郵件。一段時(shí)間之后,我們就被淹沒在提醒里面,反而導(dǎo)致我們會(huì)忘記一些事情,并不能很好地在內(nèi)部推廣我們的設(shè)計(jì)系統(tǒng)。在一次「黑客周」的大會(huì)上,我們決定優(yōu)先解決這個(gè)事情。
我們制定了一些新的流程:
使用團(tuán)隊(duì)發(fā)布來更廣泛地發(fā)布設(shè)計(jì)系統(tǒng)更新:在 GitHub 內(nèi)部我們還有一個(gè)工具叫做 Team,一般是用來發(fā)布重大更新,新特性上線,或者是新的職位空缺。我們開始使用 Team 的發(fā)布功能在重大更新之前來通知所有人 Primer 和設(shè)計(jì)規(guī)范更新,同時(shí)分享更多相關(guān)信息。
讓更新的狀態(tài)更加明顯:因?yàn)槲覀兊母骂l率很快,所以我們需要更加明顯的標(biāo)志,來告知所有人哪些組件是可以安全使用的。我們創(chuàng)建了一個(gè)更新日志來同步更新,并在文檔上標(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í)行「隨叫隨到」輪崗制度,不過我們叫做「第一響應(yīng)人」。這個(gè)人輪崗時(shí)要去處理一些事項(xiàng),及時(shí)響應(yīng)別人的幫助請求或代碼評(píng)審。這樣,該團(tuán)隊(duì)其他人就可以專注于自己更加深入的工作。
△ 在 Slack 中使用一個(gè)手?jǐn)]的 Hubot 腳本幫我們查看「第一響應(yīng)人」需要注意的工作
當(dāng) Primer 開始在 Github 中被更加廣泛地使用時(shí),我們就需要規(guī)模化我們的流程,以保證它可以更加高效,我們也更有信心使用它。
我們自己的工作流程中最大的痛點(diǎn)就是 Primer 每次的新發(fā)布。因?yàn)槊總€(gè)模塊都是單獨(dú)存放在自己的倉庫「3」維護(hù)的,這就使得整個(gè)系統(tǒng)的更新變得無比困難。每次我們都得小心翼翼,以免使用時(shí)遇到問題。我們經(jīng)常會(huì)填寫一個(gè)重復(fù)的版本號(hào),或者忘記更新某一個(gè)模塊,或者不知道這次更新會(huì)給在線產(chǎn)品帶來的隱患。我們急需一個(gè)更加強(qiáng)健的流程來更好地檢查每次的更新。
我們的解決辦法是將所有模塊集中管理,并使用 Lerna「4」來幫助我們管理版本和發(fā)布新版。更新幾次之后,我們開始使用 Travis CI「5」來自動(dòng)構(gòu)建發(fā)布預(yù)初版本。也就是說,每當(dāng)有人提交新的 pull request 時(shí),系統(tǒng)就會(huì)自動(dòng)構(gòu)建一個(gè)版本,他就可以下載這個(gè)版本在自己的項(xiàng)目中進(jìn)行測試。這對于正式發(fā)布前測試改動(dòng)很有幫助。
△ 使用 Travis CI,當(dāng)有人提交 pull request 時(shí)會(huì)自動(dòng)構(gòu)建并發(fā)布至 npm
隨著時(shí)間往后推移,我們發(fā)現(xiàn)經(jīng)常需要重復(fù)地給出一些反饋,比如說「盡量使用已有的公共樣式」這種。為此,我們寫了一個(gè)機(jī)器人腳本來自動(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),并嘗試通過自動(dòng)化的方式提升它。今年我們使用我們自己開源的 Probot 機(jī)器人、Figma 接口和 Travis CI 來自動(dòng)化我們的圖標(biāo)庫 Octicons 的發(fā)布流程。
除了「第一響應(yīng)人」制度,我們每周還有三天的例行辦公時(shí)間留給其他人問問題。一般這個(gè)時(shí)間我們會(huì)進(jìn)行結(jié)對編程、討論需要我們幫助的產(chǎn)品發(fā)布,以及解答一些通用問題。
△ 我們在 Slack 內(nèi)進(jìn)行例行辦公,這樣所有人都能知道,并且我們忘記時(shí)機(jī)器人會(huì)提醒我們
凸顯設(shè)計(jì)系統(tǒng)價(jià)值這件事使得我可以讓團(tuán)隊(duì)成長。作為團(tuán)隊(duì)負(fù)責(zé)人,我經(jīng)常要給新人們講解案例,使他們明白設(shè)計(jì)系統(tǒng)帶來的積極影響,比如說它讓我們在發(fā)布新特性時(shí)更加高效,工程師們可以在不需要設(shè)計(jì)師協(xié)助的情況下提前做更多事情。我一般更傾向于向新人講述我們正在做的很厲害的事情,以及未來可能會(huì)幫助更多人的事情,而不告訴他們我們不能做什么。
2017年我們團(tuán)隊(duì)來了一個(gè)新的設(shè)計(jì)系統(tǒng)設(shè)計(jì)師,Shawn。Shawn 來自于美國 Web 標(biāo)準(zhǔn),之前有過設(shè)計(jì)或設(shè)計(jì)系統(tǒng)相關(guān)的工作經(jīng)驗(yàn),他善于從設(shè)計(jì)角度去做一些開發(fā)上的決定。
今年(2018)我們招了第一個(gè)全職的工程師,Emily。她之前在 Buffer 做前端工程師,開發(fā)維護(hù)他們的組件庫。Emily 具有 React.js 和可訪問性的經(jīng)驗(yàn),這對于我們當(dāng)前的團(tuán)隊(duì)或工作是很重要的。
△ 不同時(shí)間我們需要不同類型的人
無論我們招的是設(shè)計(jì)師還是工程師,我們都要求一些通用技能。我們要求開發(fā)者具有設(shè)計(jì)敏銳度,這樣能做出更好的決定來構(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ì)語言。
作為團(tuán)隊(duì)負(fù)責(zé)人和管理者,我也要提升自己的影響力。相比于一年前,我現(xiàn)在帶了更多的人,往后我還要管理更多人員,以及開始構(gòu)建我們的設(shè)計(jì)運(yùn)維事務(wù)。這意味著我不能作為一個(gè)普通的工作者,不問世事。今年早些時(shí)候,我發(fā)現(xiàn)我遇到了自己的瓶頸——我更像是一個(gè)設(shè)計(jì)系統(tǒng)的編輯者,而不是作者。
過去我給這個(gè)設(shè)計(jì)系統(tǒng)貢獻(xiàn)了很多視覺設(shè)計(jì)的工作,并且作為最主要的決定者?,F(xiàn)在我正在學(xué)習(xí)如何將這些工作分?jǐn)傄徊糠纸o其他成員,如果他們有不懂的,我會(huì)教他們。
我們最有趣的會(huì)議(是的,會(huì)議也可以很有趣)是每周組件評(píng)審。此時(shí)每位提交了新組件的成員會(huì)帶著我們過一遍他們的代碼,給我們展示如何使用,效果是怎樣的,并征求一些意見反饋。這保證我們創(chuàng)造出一個(gè)體驗(yàn)一致的設(shè)計(jì)系統(tǒng)。
△ 當(dāng)貓和會(huì)跳舞的同事加入時(shí)會(huì)議會(huì)變得更有趣
每年我們都會(huì)設(shè)定目標(biāo),下面這幾項(xiàng)雖然沒有覆蓋所有,但是一直是我們2018年所專注的。
Github.com 的前端技術(shù)棧分散而老舊,我們在構(gòu)建 UI 時(shí)需要考慮的事情特別多。
與其分心于各種不同的編程語言(比如 HTML、CSS 和 JavaScript),我們不如專注于組件層面。為了達(dá)到這個(gè)目標(biāo),我們今年主要的任務(wù)就是構(gòu)建一個(gè)基于 React.js 的組件庫?,F(xiàn)在我們已經(jīng)開始去做了,等這個(gè)組件庫達(dá)到第一個(gè)穩(wěn)定版本我們就會(huì)開源它。有一些團(tuán)隊(duì)已經(jīng)開始使用 React.js 了,我們希望能夠盡快讓他們使用到我們的組件庫。我們的應(yīng)用系統(tǒng)團(tuán)隊(duì)已經(jīng)幫我們做了一些事情,幫助我們更容易地將設(shè)計(jì)系統(tǒng)接入,我們需要緊密合作。
△ 我們的 primer-react 組件庫演示沙箱
我們想要看到更多團(tuán)隊(duì)參與進(jìn)設(shè)計(jì)系統(tǒng)的構(gòu)建,不只是我們團(tuán)隊(duì)。我們想要人們在使用 Primer 時(shí)感覺更簡單,也更容易學(xué)習(xí)。因此,我們花了很多時(shí)間去研究設(shè)計(jì)工具、實(shí)踐教程、開發(fā)工具,以及簡化參與流程。
今年我們將設(shè)計(jì)組件轉(zhuǎn)移到了 Figma,并使用 Figma 來進(jìn)行可交互原型設(shè)計(jì)。Figma 是基于 Web 的,這意味著我們可以整合進(jìn)設(shè)計(jì)系統(tǒng)工作流中的其它工具,而且不用局限于 macOS。Figma 的公共樣式特性可以幫助我們提取出注入顏色、排版等樣式,和我們在代碼中的實(shí)現(xiàn)方式類似。Figma 還提供對外接口,可以幫我們很容易地接入其它自動(dòng)化流程,比如說根據(jù)我們代碼中的組件來檢查 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)常做一些頁面原型或流程,他們需要能夠快速調(diào)整設(shè)計(jì)效果,就像在圖形化設(shè)計(jì)工具中一樣。這在產(chǎn)品級(jí)代碼中很難做到,而使用 Codepen 中的模板意味著他們在專注于業(yè)務(wù)之前需要寫很多代碼。理想的情況是設(shè)計(jì)師們需要能夠快速開始,使用真實(shí)或接近真實(shí)的產(chǎn)品數(shù)據(jù)來構(gòu)建頁面。我們知道這對于很多公司都是一個(gè)挑戰(zhàn),希望我們能夠找到一個(gè)解決辦法。
我們希望 Github 是人們在談?wù)撛O(shè)計(jì)系統(tǒng)時(shí)首先想到的公司之一。許多公司開始構(gòu)建自己的設(shè)計(jì)系統(tǒng),這是一個(gè)不斷發(fā)展的領(lǐng)域。我們將會(huì)不斷分享這個(gè)過程中的一些想法,以期幫助到你們。
今年早些時(shí)候我們公開了新版的樣式指南——我在一次設(shè)計(jì)系統(tǒng)的活動(dòng)中曾分享過,同時(shí)我也談?wù)摰饺藗冴P(guān)于自己公司的設(shè)計(jì)系統(tǒng)和其他公司設(shè)計(jì)系統(tǒng)相比較的問題。其實(shí)比較是沒有意義的,我們應(yīng)該專注于去創(chuàng)造自己的度量標(biāo)準(zhǔn),因?yàn)閯e人的并不一定適用于你。即使是我們的設(shè)計(jì)系統(tǒng),也有很多 bug 和可提升的空間。所以我覺得我要分享我們的設(shè)計(jì)系統(tǒng),包括缺點(diǎn)。
△ 我們的樣式規(guī)范文檔
我們一直在開放地工作,在我們的公開倉庫中不斷發(fā)布著新計(jì)劃。我們將繼續(xù)分享一些新項(xiàng)目,也許它可以直接被用到其他人的設(shè)計(jì)系統(tǒng),或者能夠啟示人們?nèi)绾稳プ?。我們也?huì)寫更多的文章,去做一些分享,或參與到社區(qū)活動(dòng)中。
如果你有什么想要知道的可以在這里(Primer 倉庫)開 issue 來告訴我們。
△ 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)鏈接及注釋:
- 樣式規(guī)范:https://styleguide.github.com/
- Primer:https://styleguide.github.com/primer/
- pull request:成員往項(xiàng)目代碼中提交新特性或修復(fù)的請求
- issue:類似于項(xiàng)目協(xié)作中的任務(wù),用于追蹤需求或 bug
- 倉庫:代碼倉庫,可以看做一個(gè)項(xiàng)目的所有代碼文件集合
- Lerna:管理版本的工具
- Travis CI:持續(xù)集成工具,自動(dòng)化地觸發(fā)代碼測試、編譯或部署
- Codepen:前端工程師展示作品的地方
翻譯「codesigner」
原文:https://medium.com/@broccolini/design-systems-at-github-c8e5378d2542
全站高品質(zhì)素材免費(fèi)下載!