Netflix設(shè)計(jì)團(tuán)隊(duì)分享的Hawkins設(shè)計(jì)系統(tǒng)的過程和經(jīng)驗(yàn)


《怪奇物語》影像展示了Hawkins設(shè)計(jì)系統(tǒng)的靈感


Hawkins也許是印第安納州一個(gè)虛構(gòu)的小鎮(zhèn)的名字,大家對(duì)它的了解也許來自Netflix最受歡迎的系列劇之一,《怪奇物語》的背景,但這個(gè)名字的含義并不止這些。作為整個(gè)Netflix Studio生態(tài)體系都在使用的設(shè)計(jì)系統(tǒng)的基礎(chǔ)產(chǎn)品,它的名字也叫Hawkins。

你是不是曾經(jīng)用過用戶體驗(yàn)不一致的應(yīng)用?這對(duì)于高效工作來說可能會(huì)是一場(chǎng)噩夢(mèng)。對(duì)于套件的每一個(gè)應(yīng)用來說,學(xué)習(xí)曲線可能都會(huì)非常長,因?yàn)閷?shí)際上用戶是靠每一次交互來學(xué)習(xí)一種新工具的。除了會(huì)給這些用戶帶來負(fù)擔(dān)以外,負(fù)責(zé)開發(fā)和維護(hù)這些應(yīng)用的工程師也得重新設(shè)計(jì)輪子,從頭開始使用工具集、組件庫以及設(shè)計(jì)模式。這項(xiàng)投資是重復(fù)性的,且成本很高。而設(shè)計(jì)系統(tǒng),比如我們?yōu)镹etflix Studio開發(fā)的這套系統(tǒng),可以幫助減輕大多數(shù)的此類麻煩。

我們一直在開發(fā)自己的設(shè)計(jì)系統(tǒng),現(xiàn)在這套系統(tǒng)已經(jīng)在Netflix Studio眾多的應(yīng)用(有80多個(gè))中得到了廣泛使用。從基因估計(jì)到財(cái)務(wù)預(yù)測(cè)以及完整的資產(chǎn)交付,這些應(yīng)用可為Netflix內(nèi)容的制作提供支持。對(duì)于制作人員來說,典型的一天可能都需要使用其中的一些應(yīng)用來服務(wù)我們遍布全球的會(huì)員。我們希望能夠有一種方法來確保大家擁有一致的用戶體驗(yàn),同時(shí)還要共享盡可能多的代碼。

在本博客文章中,我們將重點(diǎn)介紹為什么開發(fā)Hawkins,以及我們與我們的計(jì)劃是如何獲得整個(gè)工程組織的支持的。

什么是設(shè)計(jì)系統(tǒng)?

在深入探討擁有設(shè)計(jì)系統(tǒng)的重要性之前,我們必須先定義一下設(shè)計(jì)系統(tǒng)意味著什么。對(duì)于不同的人來說,這可能意味著不同的事情。就Hawkins而言,我們的設(shè)計(jì)系統(tǒng)由兩個(gè)主要方面組成。

通用設(shè)計(jì)系統(tǒng)組件模型(component mocks)


首先,我們有構(gòu)成Hawkins基礎(chǔ)層的設(shè)計(jì)元素。這些由整支設(shè)計(jì)團(tuán)隊(duì)所使用的Figma組件組成。這些組件用阿里為工程團(tuán)隊(duì)開發(fā)模型(mock)。作為基礎(chǔ)層,這些資產(chǎn)必須一致且直觀,這一點(diǎn)非常重要。

其次,我們有自己的React組件庫,這是一個(gè)用來開發(fā)用戶界面的JavaScript庫。工程團(tuán)隊(duì)會(huì)用這個(gè)組件庫來確保每個(gè)組件都是可重用的,符合設(shè)計(jì)資產(chǎn)的要求,并且可以針對(duì)不同情況進(jìn)行靈活配置。我們還確保每個(gè)組件都可以組合,并且可以用于多種不同的組合。我們決定讓我們的組件保持原子性。這會(huì)讓它們保持緊湊,輕量,且易于組合成更大的組件。

在Netflix,我們有兩支總共六人的團(tuán)隊(duì),在他們的共同努力下Hawkins才能取得成功,但團(tuán)隊(duì)的規(guī)模未必就得這樣。一支很小的團(tuán)隊(duì)也可以開發(fā)出一套成功的設(shè)計(jì)系統(tǒng)。關(guān)鍵是要可重用,可配置且可組合。

設(shè)計(jì)系統(tǒng)為什么重要?

擁有可靠的設(shè)計(jì)系統(tǒng)可以幫助緩解維護(hù)眾多不同應(yīng)用帶來的問題。設(shè)計(jì)系統(tǒng)可以讓整個(gè)應(yīng)用套件保持一致,并大大減少每個(gè)應(yīng)用的工程負(fù)擔(dān)。

Hawkins設(shè)計(jì)系統(tǒng)的Figma組件樣例


隨著應(yīng)用套件規(guī)模越來越大,很難保證優(yōu)質(zhì)的用戶體驗(yàn)。這時(shí)候就應(yīng)該用設(shè)計(jì)系統(tǒng)來作為開發(fā)應(yīng)用的藍(lán)圖,從而減輕負(fù)擔(dān)。擁有一致的用戶體驗(yàn)還可以減少需要的培訓(xùn)。如果用戶知道怎么在一個(gè)應(yīng)用里面填寫表單,訪問表中的數(shù)據(jù)或接收通知,那么他們很容易就會(huì)知道下一個(gè)應(yīng)用該怎么操作。

設(shè)計(jì)系統(tǒng)充當(dāng)了語言的作用,設(shè)計(jì)人員和工程師都可以用這種語言來協(xié)調(diào)應(yīng)用的開發(fā)方式。由于設(shè)計(jì)系統(tǒng)里面還列出了相關(guān)文檔和示例,所以也有助于引導(dǎo)新團(tuán)隊(duì)成員入職。

設(shè)計(jì)系統(tǒng)最后一個(gè),也可以說是最大的勝利是減輕了工程負(fù)擔(dān)。按鈕、表格、表單等只有一種實(shí)現(xiàn)。這會(huì)大大減少錯(cuò)誤的數(shù)量,并改善使用設(shè)計(jì)系統(tǒng)的每個(gè)應(yīng)用的總體運(yùn)行狀況和性能。整個(gè)工程組織都在致力于改進(jìn)同一組組件,而不是各自使用獨(dú)立的組件。組件得到改進(jìn)后,無論是增加額外功能還是修復(fù)錯(cuò)誤,這些都可以讓整個(gè)組織共享所帶來的好處。

如果站在更高的視角審視整個(gè)Netflix Studio的版圖,我們會(huì)看到Hawkins有很多機(jī)會(huì)可以給工程組織帶來價(jià)值。

開發(fā) Vs 購買

在決策的時(shí)候我們要問自己的第一個(gè)問題是,我們是要從頭開始開發(fā)整個(gè)設(shè)計(jì)系統(tǒng)呢?還是利用現(xiàn)有解決方案?這兩種方案都各有利弊。

自己動(dòng)手開發(fā)——DIY的好處意味著每一步你都可以控制。你可以決定設(shè)計(jì)系統(tǒng)包含哪些內(nèi)容,以及哪些最好不放進(jìn)去。缺點(diǎn)是,由于你要對(duì)此負(fù)全責(zé),所以可能需要更長的時(shí)間才能完成。

利用現(xiàn)有的解決方案——當(dāng)你利用現(xiàn)有解決方案的時(shí)候,該解決方案的特定元素你仍然可以定制,但最終你得到的是大量免費(fèi)的開箱即用的資源。取決于你所選擇的解決方案,你可能會(huì)繼承解決方案的大量問題,也可能繼承到經(jīng)過戰(zhàn)火洗禮的設(shè)計(jì)資源。要做好你的研究,不要怕多問問別人!

對(duì)于Hawkins而言,我們決定兩種辦法都用。在設(shè)計(jì)方面,我們決定自行開發(fā)。這讓我們對(duì)于整個(gè)設(shè)計(jì)語言的用戶體驗(yàn)如何擁有完全的、創(chuàng)造性的控制。在工程方面,我們決定利用Material-UI,在現(xiàn)有解決方案的基礎(chǔ)上進(jìn)行構(gòu)建。通過利用Material-UI,可以為我們提供大量可用的組件,然后我們可以對(duì)其進(jìn)行配置和設(shè)計(jì),以滿足Hawkins的需求。我們還選擇模糊來自庫里面的很多自定義,以確保升級(jí)或替換組件的時(shí)候更加順暢。

吸引用戶并獲得支持

在開發(fā)Hawkins的時(shí)候,我們唯一的一個(gè)最大問題是如何獲得整個(gè)工程組織的支持。我們決定跟蹤每個(gè)組件的使用次數(shù),軟件包本身的安裝次數(shù)以及有多少應(yīng)用在生產(chǎn)中使用了Hawkins來作為確定成功的指標(biāo)。

不管采用哪種路線,開發(fā)設(shè)計(jì)系統(tǒng)都會(huì)帶來一定的成本。研究、開發(fā)設(shè)計(jì)符號(hào)以及組件庫的初始成本非常高。然后,開發(fā)人員必須通過完全重寫或逐個(gè)功能替換才使用我們的庫。

此圖說明了開發(fā)設(shè)計(jì)系統(tǒng)的成本


上圖很好地說明了這一點(diǎn)。盡管組織一開始開發(fā)設(shè)計(jì)系統(tǒng)的時(shí)候可能會(huì)花費(fèi)大量時(shí)間,但是一旦這套系統(tǒng)在整個(gè)組織內(nèi)受到信任并完全實(shí)施,組織就會(huì)大為受益。我們的Hawkins初始開發(fā)階段耗時(shí)約兩個(gè)季度。這兩個(gè)季度又分為兩個(gè)階段:第一階段是建立設(shè)計(jì)語言,第二階段是實(shí)施階段。在整個(gè)開發(fā)階段工程和設(shè)計(jì)部門都在緊密合作。最終結(jié)果是我們用了Figma中的大量組件,并利用Material-UI開發(fā)了一個(gè)大型的組件庫。只有到了那個(gè)時(shí)候,我們才可以開始去找工程團(tuán)隊(duì)來使用Hawkins。

在開發(fā)組件庫的時(shí)候,我們打算從有助于增加對(duì)Hawkins的支持的四個(gè)關(guān)鍵方面入手:

組件文檔——首先,我們確保每個(gè)組件都有完整文檔,并用Storybook提供了示例。

隨叫隨到的支持——接著,我們?cè)赟lack里面設(shè)置了輪班的支持(on-call rotation),工程師不僅可以尋求指導(dǎo),還可以報(bào)告他們可能遇到的任何問題。我們的溝通渠道能夠及時(shí)響應(yīng)非常重要。工程師得到的支持越多,他們對(duì)使用設(shè)計(jì)庫的接受度就越高。

展示Hawkins的實(shí)用性——接下來,我們開始進(jìn)行“路演”,去參加團(tuán)隊(duì)會(huì)議,展示Hawkins可以為每個(gè)團(tuán)隊(duì)帶來的價(jià)值。這也為工程師提供了一個(gè)親自問問題的機(jī)會(huì),也為我們提供了收集反饋的機(jī)會(huì),從而確保我們的Hawkins計(jì)劃能夠滿足他們的需求。

用概念驗(yàn)證引導(dǎo)功能—最后,我們用概念驗(yàn)證來幫助引導(dǎo)團(tuán)隊(duì)適應(yīng)功能或應(yīng)用。所有這些很好地促進(jìn)了Hawkins團(tuán)隊(duì)與工程團(tuán)隊(duì)之間的關(guān)系。

甚至到現(xiàn)在,作為Hawkins團(tuán)隊(duì),我們?nèi)詧?jiān)持上述做法,以確保設(shè)計(jì)系統(tǒng)的可靠,并具備那種工程組織可以信任的支持程度。

處理異類

Hawkins的庫全部都是由基本組件組成的,這些基本組件構(gòu)成了整個(gè)Netflix Studio應(yīng)用的基礎(chǔ)。當(dāng)工程師對(duì)Hawkins的使用增加時(shí),很顯然,許多人正在用原子組件來構(gòu)建更復(fù)雜的體驗(yàn)。那些體驗(yàn)在很多應(yīng)用里面都很常見,比方說應(yīng)用內(nèi)聊天,數(shù)據(jù)網(wǎng)格以及文件上傳工具等。我們不希望把這些組件直接放到Hawkins里面,因?yàn)檫@些組件太復(fù)雜,并且并不是整個(gè)Studio都會(huì)用到的。所以,我們的任務(wù)是確定一種能夠共享這些復(fù)雜組件的辦法,同時(shí)仍然能從受益于我們?cè)贖awkins上面所做的一切。

為了應(yīng)對(duì)這一挑戰(zhàn),開發(fā)者決定在Hawkins的基礎(chǔ)上建立一個(gè)并行庫。這個(gè)庫建立在現(xiàn)有設(shè)計(jì)系統(tǒng)的基礎(chǔ)上,為所有那些沒法放進(jìn)原始設(shè)計(jì)系統(tǒng)的復(fù)雜組件提供了一個(gè)家。

維恩圖顯示了庫之間的關(guān)系


這個(gè)庫以Lerna monorepo的形式出現(xiàn),具備快速啟動(dòng)新軟件包的工具。我們采用了跟Hawkins一致的步驟和溝通渠道,也是用了Storybook。用monorepo的好處在于,它可以讓工程人員在開發(fā)應(yīng)用時(shí)可以在一個(gè)位置上去發(fā)現(xiàn)可用的組件。我們還決定分別對(duì)每個(gè)包進(jìn)行獨(dú)立的版本控制,這有助于避免在更新Hawkins或下游應(yīng)用時(shí)出現(xiàn)的問題。

由于會(huì)有太多的組件被放到這個(gè)并行的庫里面,所以我們決定采用“開源”方法來分擔(dān)每個(gè)組件的責(zé)任。我們歡迎每一位工程師來貢獻(xiàn)新組件,幫助修復(fù)錯(cuò)誤,或者發(fā)布現(xiàn)有組件的新功能。這種模式有助于把所有權(quán)從單個(gè)工程師分散到由多個(gè)開發(fā)者和工程師協(xié)同工作的團(tuán)隊(duì)。

我們的目標(biāo)是最終能夠把這些組件遷移到Hawkins庫里面。所以我們才會(huì)花時(shí)間去確保每個(gè)庫都采用相同的規(guī)則進(jìn)行開發(fā),測(cè)試和構(gòu)建。這樣將來就可以輕松地進(jìn)行遷移。

總結(jié)

Hawkins還有很長一段路要走。我們還可以做大量改進(jìn),提高性能、改善開發(fā)者的人機(jī)工程學(xué)、以及讓Hawkins的使用更加容易。特別是在Netflix Studio以外的地方使用Hawkins時(shí),更是如此!


Netflix的設(shè)計(jì)團(tuán)隊(duì)分享了他們?cè)O(shè)計(jì)Hawkins設(shè)計(jì)系統(tǒng)的過程和經(jīng)驗(yàn)。原文發(fā)表在Netflix官方博客上,標(biāo)題是:Hawkins: Diving into the Reasoning Behind our Design System。

每天更新,
全站高品質(zhì)素材免費(fèi)下載!