《怪奇物語》影像展示了Hawkins設(shè)計系統(tǒng)的靈感
Hawkins也許是印第安納州一個虛構(gòu)的小鎮(zhèn)的名字,大家對它的了解也許來自Netflix最受歡迎的系列劇之一,《怪奇物語》的背景,但這個名字的含義并不止這些。作為整個Netflix Studio生態(tài)體系都在使用的設(shè)計系統(tǒng)的基礎(chǔ)產(chǎn)品,它的名字也叫Hawkins。
你是不是曾經(jīng)用過用戶體驗不一致的應(yīng)用?這對于高效工作來說可能會是一場噩夢。對于套件的每一個應(yīng)用來說,學(xué)習(xí)曲線可能都會非常長,因為實際上用戶是靠每一次交互來學(xué)習(xí)一種新工具的。除了會給這些用戶帶來負(fù)擔(dān)以外,負(fù)責(zé)開發(fā)和維護(hù)這些應(yīng)用的工程師也得重新設(shè)計輪子,從頭開始使用工具集、組件庫以及設(shè)計模式。這項投資是重復(fù)性的,且成本很高。而設(shè)計系統(tǒng),比如我們?yōu)镹etflix Studio開發(fā)的這套系統(tǒng),可以幫助減輕大多數(shù)的此類麻煩。
我們一直在開發(fā)自己的設(shè)計系統(tǒng),現(xiàn)在這套系統(tǒng)已經(jīng)在Netflix Studio眾多的應(yīng)用(有80多個)中得到了廣泛使用。從基因估計到財務(wù)預(yù)測以及完整的資產(chǎn)交付,這些應(yīng)用可為Netflix內(nèi)容的制作提供支持。對于制作人員來說,典型的一天可能都需要使用其中的一些應(yīng)用來服務(wù)我們遍布全球的會員。我們希望能夠有一種方法來確保大家擁有一致的用戶體驗,同時還要共享盡可能多的代碼。
在本博客文章中,我們將重點介紹為什么開發(fā)Hawkins,以及我們與我們的計劃是如何獲得整個工程組織的支持的。
什么是設(shè)計系統(tǒng)?
在深入探討擁有設(shè)計系統(tǒng)的重要性之前,我們必須先定義一下設(shè)計系統(tǒng)意味著什么。對于不同的人來說,這可能意味著不同的事情。就Hawkins而言,我們的設(shè)計系統(tǒng)由兩個主要方面組成。
通用設(shè)計系統(tǒng)組件模型(component mocks)
首先,我們有構(gòu)成Hawkins基礎(chǔ)層的設(shè)計元素。這些由整支設(shè)計團(tuán)隊所使用的Figma組件組成。這些組件用阿里為工程團(tuán)隊開發(fā)模型(mock)。作為基礎(chǔ)層,這些資產(chǎn)必須一致且直觀,這一點非常重要。
其次,我們有自己的React組件庫,這是一個用來開發(fā)用戶界面的JavaScript庫。工程團(tuán)隊會用這個組件庫來確保每個組件都是可重用的,符合設(shè)計資產(chǎn)的要求,并且可以針對不同情況進(jìn)行靈活配置。我們還確保每個組件都可以組合,并且可以用于多種不同的組合。我們決定讓我們的組件保持原子性。這會讓它們保持緊湊,輕量,且易于組合成更大的組件。
在Netflix,我們有兩支總共六人的團(tuán)隊,在他們的共同努力下Hawkins才能取得成功,但團(tuán)隊的規(guī)模未必就得這樣。一支很小的團(tuán)隊也可以開發(fā)出一套成功的設(shè)計系統(tǒng)。關(guān)鍵是要可重用,可配置且可組合。
設(shè)計系統(tǒng)為什么重要?
擁有可靠的設(shè)計系統(tǒng)可以幫助緩解維護(hù)眾多不同應(yīng)用帶來的問題。設(shè)計系統(tǒng)可以讓整個應(yīng)用套件保持一致,并大大減少每個應(yīng)用的工程負(fù)擔(dān)。
Hawkins設(shè)計系統(tǒng)的Figma組件樣例
隨著應(yīng)用套件規(guī)模越來越大,很難保證優(yōu)質(zhì)的用戶體驗。這時候就應(yīng)該用設(shè)計系統(tǒng)來作為開發(fā)應(yīng)用的藍(lán)圖,從而減輕負(fù)擔(dān)。擁有一致的用戶體驗還可以減少需要的培訓(xùn)。如果用戶知道怎么在一個應(yīng)用里面填寫表單,訪問表中的數(shù)據(jù)或接收通知,那么他們很容易就會知道下一個應(yīng)用該怎么操作。
設(shè)計系統(tǒng)充當(dāng)了語言的作用,設(shè)計人員和工程師都可以用這種語言來協(xié)調(diào)應(yīng)用的開發(fā)方式。由于設(shè)計系統(tǒng)里面還列出了相關(guān)文檔和示例,所以也有助于引導(dǎo)新團(tuán)隊成員入職。
設(shè)計系統(tǒng)最后一個,也可以說是最大的勝利是減輕了工程負(fù)擔(dān)。按鈕、表格、表單等只有一種實現(xiàn)。這會大大減少錯誤的數(shù)量,并改善使用設(shè)計系統(tǒng)的每個應(yīng)用的總體運行狀況和性能。整個工程組織都在致力于改進(jìn)同一組組件,而不是各自使用獨立的組件。組件得到改進(jìn)后,無論是增加額外功能還是修復(fù)錯誤,這些都可以讓整個組織共享所帶來的好處。
如果站在更高的視角審視整個Netflix Studio的版圖,我們會看到Hawkins有很多機會可以給工程組織帶來價值。
開發(fā) Vs 購買
在決策的時候我們要問自己的第一個問題是,我們是要從頭開始開發(fā)整個設(shè)計系統(tǒng)呢?還是利用現(xiàn)有解決方案?這兩種方案都各有利弊。
自己動手開發(fā)——DIY的好處意味著每一步你都可以控制。你可以決定設(shè)計系統(tǒng)包含哪些內(nèi)容,以及哪些最好不放進(jìn)去。缺點是,由于你要對此負(fù)全責(zé),所以可能需要更長的時間才能完成。
利用現(xiàn)有的解決方案——當(dāng)你利用現(xiàn)有解決方案的時候,該解決方案的特定元素你仍然可以定制,但最終你得到的是大量免費的開箱即用的資源。取決于你所選擇的解決方案,你可能會繼承解決方案的大量問題,也可能繼承到經(jīng)過戰(zhàn)火洗禮的設(shè)計資源。要做好你的研究,不要怕多問問別人!
對于Hawkins而言,我們決定兩種辦法都用。在設(shè)計方面,我們決定自行開發(fā)。這讓我們對于整個設(shè)計語言的用戶體驗如何擁有完全的、創(chuàng)造性的控制。在工程方面,我們決定利用Material-UI,在現(xiàn)有解決方案的基礎(chǔ)上進(jìn)行構(gòu)建。通過利用Material-UI,可以為我們提供大量可用的組件,然后我們可以對其進(jìn)行配置和設(shè)計,以滿足Hawkins的需求。我們還選擇模糊來自庫里面的很多自定義,以確保升級或替換組件的時候更加順暢。
吸引用戶并獲得支持
在開發(fā)Hawkins的時候,我們唯一的一個最大問題是如何獲得整個工程組織的支持。我們決定跟蹤每個組件的使用次數(shù),軟件包本身的安裝次數(shù)以及有多少應(yīng)用在生產(chǎn)中使用了Hawkins來作為確定成功的指標(biāo)。
不管采用哪種路線,開發(fā)設(shè)計系統(tǒng)都會帶來一定的成本。研究、開發(fā)設(shè)計符號以及組件庫的初始成本非常高。然后,開發(fā)人員必須通過完全重寫或逐個功能替換才使用我們的庫。
此圖說明了開發(fā)設(shè)計系統(tǒng)的成本
上圖很好地說明了這一點。盡管組織一開始開發(fā)設(shè)計系統(tǒng)的時候可能會花費大量時間,但是一旦這套系統(tǒng)在整個組織內(nèi)受到信任并完全實施,組織就會大為受益。我們的Hawkins初始開發(fā)階段耗時約兩個季度。這兩個季度又分為兩個階段:第一階段是建立設(shè)計語言,第二階段是實施階段。在整個開發(fā)階段工程和設(shè)計部門都在緊密合作。最終結(jié)果是我們用了Figma中的大量組件,并利用Material-UI開發(fā)了一個大型的組件庫。只有到了那個時候,我們才可以開始去找工程團(tuán)隊來使用Hawkins。
在開發(fā)組件庫的時候,我們打算從有助于增加對Hawkins的支持的四個關(guān)鍵方面入手:
組件文檔——首先,我們確保每個組件都有完整文檔,并用Storybook提供了示例。
隨叫隨到的支持——接著,我們在Slack里面設(shè)置了輪班的支持(on-call rotation),工程師不僅可以尋求指導(dǎo),還可以報告他們可能遇到的任何問題。我們的溝通渠道能夠及時響應(yīng)非常重要。工程師得到的支持越多,他們對使用設(shè)計庫的接受度就越高。
展示Hawkins的實用性——接下來,我們開始進(jìn)行“路演”,去參加團(tuán)隊會議,展示Hawkins可以為每個團(tuán)隊帶來的價值。這也為工程師提供了一個親自問問題的機會,也為我們提供了收集反饋的機會,從而確保我們的Hawkins計劃能夠滿足他們的需求。
用概念驗證引導(dǎo)功能—最后,我們用概念驗證來幫助引導(dǎo)團(tuán)隊適應(yīng)功能或應(yīng)用。所有這些很好地促進(jìn)了Hawkins團(tuán)隊與工程團(tuán)隊之間的關(guān)系。
甚至到現(xiàn)在,作為Hawkins團(tuán)隊,我們?nèi)詧猿稚鲜鲎龇ǎ源_保設(shè)計系統(tǒng)的可靠,并具備那種工程組織可以信任的支持程度。
處理異類
Hawkins的庫全部都是由基本組件組成的,這些基本組件構(gòu)成了整個Netflix Studio應(yīng)用的基礎(chǔ)。當(dāng)工程師對Hawkins的使用增加時,很顯然,許多人正在用原子組件來構(gòu)建更復(fù)雜的體驗。那些體驗在很多應(yīng)用里面都很常見,比方說應(yīng)用內(nèi)聊天,數(shù)據(jù)網(wǎng)格以及文件上傳工具等。我們不希望把這些組件直接放到Hawkins里面,因為這些組件太復(fù)雜,并且并不是整個Studio都會用到的。所以,我們的任務(wù)是確定一種能夠共享這些復(fù)雜組件的辦法,同時仍然能從受益于我們在Hawkins上面所做的一切。
為了應(yīng)對這一挑戰(zhàn),開發(fā)者決定在Hawkins的基礎(chǔ)上建立一個并行庫。這個庫建立在現(xiàn)有設(shè)計系統(tǒng)的基礎(chǔ)上,為所有那些沒法放進(jìn)原始設(shè)計系統(tǒng)的復(fù)雜組件提供了一個家。
維恩圖顯示了庫之間的關(guān)系
這個庫以Lerna monorepo的形式出現(xiàn),具備快速啟動新軟件包的工具。我們采用了跟Hawkins一致的步驟和溝通渠道,也是用了Storybook。用monorepo的好處在于,它可以讓工程人員在開發(fā)應(yīng)用時可以在一個位置上去發(fā)現(xiàn)可用的組件。我們還決定分別對每個包進(jìn)行獨立的版本控制,這有助于避免在更新Hawkins或下游應(yīng)用時出現(xiàn)的問題。
由于會有太多的組件被放到這個并行的庫里面,所以我們決定采用“開源”方法來分擔(dān)每個組件的責(zé)任。我們歡迎每一位工程師來貢獻(xiàn)新組件,幫助修復(fù)錯誤,或者發(fā)布現(xiàn)有組件的新功能。這種模式有助于把所有權(quán)從單個工程師分散到由多個開發(fā)者和工程師協(xié)同工作的團(tuán)隊。
我們的目標(biāo)是最終能夠把這些組件遷移到Hawkins庫里面。所以我們才會花時間去確保每個庫都采用相同的規(guī)則進(jìn)行開發(fā),測試和構(gòu)建。這樣將來就可以輕松地進(jìn)行遷移。
總結(jié)
Hawkins還有很長一段路要走。我們還可以做大量改進(jìn),提高性能、改善開發(fā)者的人機工程學(xué)、以及讓Hawkins的使用更加容易。特別是在Netflix Studio以外的地方使用Hawkins時,更是如此!
Netflix的設(shè)計團(tuán)隊分享了他們設(shè)計Hawkins設(shè)計系統(tǒng)的過程和經(jīng)驗。原文發(fā)表在Netflix官方博客上,標(biāo)題是:Hawkins: Diving into the Reasoning Behind our Design System。
全站高品質(zhì)素材免費下載!