《怪奇物語》影像展示了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。