在之前的文章里聊過，設(shè)計組件作為設(shè)計系統(tǒng)里的組成部分，可以說是構(gòu)成這個系統(tǒng)最基礎(chǔ)也是最實用的部分了。它帶來的好處也很多，看起來也很酷。但創(chuàng)建一個成功的可協(xié)作組件庫，不僅需要過硬的專業(yè)能力，更重要的是，了解它的意義對于公司或者所在團(tuán)隊的價值，并基于當(dāng)前現(xiàn)狀來建設(shè)它，才能發(fā)揮出它最高的性價比。

[[424020]]

第 1 步：基于實際情況，明確創(chuàng)建組件的價值

以設(shè)計師的角度，基于覆蓋面的廣度，組件庫可以從小到大分為三個層次：

• 為單個項目的設(shè)計復(fù)用創(chuàng)建的組件庫
• 為多個項目之間的設(shè)計復(fù)用創(chuàng)建的組件庫

為多個項目之間，跨職能復(fù)用創(chuàng)建的組件庫，通過少量定制即可以形成最終產(chǎn)品的組件庫。

第一個層次的組件庫要解決的是單個項目內(nèi)的復(fù)用，同時也能保證整個項目的設(shè)計統(tǒng)一性。如果同一個項目下如果有多個設(shè)計師，為了保證各個頁面的交互和視覺一致性，一個統(tǒng)一的標(biāo)準(zhǔn)就更有必要了，而組件庫可以說是這個標(biāo)準(zhǔn)的具化，不同的設(shè)計師使用同一個組件，可以有效保證頁面的一致性，同時也提高了工作的效率。

那，這個時候就一定必要創(chuàng)建組件庫嗎?恐怕也不盡然，如果這個項目需要快速開發(fā)上線進(jìn)行驗證，后續(xù)發(fā)展路線也很模糊，那犧牲部分一致性，容忍不同頁面的相對差異，或者用類似復(fù)制粘貼這種粗暴方式等等來達(dá)到目的，也許性價比更高。

第二個層次的組件庫，其價值在于多個項目間保持統(tǒng)一性，解放設(shè)計師重復(fù)性的工作。這個價值有一個前提，就是這些項目之間是需要保持一致性的。

第三個層次的組件庫，則是為了更廣泛的提高效率，它已經(jīng)跳出了設(shè)計師這個范圍，和其他職業(yè)產(chǎn)生了聯(lián)動，涵蓋了研發(fā)技術(shù)甚至更多專業(yè)人員，也被稱作業(yè)務(wù)型組件。雖然同樣的模塊不用再重新設(shè)計也不用再重新開發(fā)很吸引人，但這些組件的設(shè)計是否能被使用方認(rèn)可?原有支持的技術(shù)棧是否與使用方需要的一致，學(xué)習(xí)和推廣這些組件的成本是否能夠得到同等回報?相關(guān)的公司流程、規(guī)則和資源是否方便對組件進(jìn)行學(xué)習(xí)、推廣和使用?都是需要考慮的問題。

這三個層次的組件庫層層遞進(jìn)，每上升一個層次，聽起來就越吸引人，所耗費的精力卻越大。

做到最好的，諸如谷歌、微軟、蘋果、阿里等等，在業(yè)務(wù)上也有同等布局，比如需要開放給廣大的開發(fā)者形成生態(tài)平臺。這個時候，組件向外部賦能，不再局限于公司內(nèi)部，所發(fā)揮的價值已經(jīng)遠(yuǎn)遠(yuǎn)大于其所耗費的精力。

但作為一個新的組件庫，我們首先需要根據(jù)自己的實際情況來確認(rèn)要不要創(chuàng)建組件，而不是僅僅因為它美名在外。不做組件庫，或者使用第三方的組件庫，都是一種選擇。而不是為了做組件庫而做組件庫。當(dāng)確認(rèn)這個組件庫在當(dāng)前的實際情況下依然有創(chuàng)建的價值，我們就要把這個價值更具像化，成為切實可行的目標(biāo)。

第 2 步：借鑒 OKR 思維，創(chuàng)建符合實際情況的目標(biāo)體系

進(jìn)入公司的第二年，我開始基于我涉及到的三個 B 端產(chǎn)品來創(chuàng)建組件。

每一個 B 端產(chǎn)品其實都是一個系統(tǒng)，是平臺+應(yīng)用的結(jié)構(gòu)，數(shù)據(jù)信息在這兩者之間運轉(zhuǎn)。雖然看著挺龐大，但首先，這三個產(chǎn)品體系都是基于一個統(tǒng)一的產(chǎn)品價值(AR 技術(shù))來映射到不同應(yīng)用場景(遠(yuǎn)程視頻、巡視檢查、展覽展示)的。其次，在人力資源的配備上，三個系統(tǒng)的產(chǎn)品、研發(fā)和設(shè)計負(fù)責(zé)人都同屬于一個團(tuán)隊，團(tuán)隊優(yōu)先級一致。另外，雖然主次分工不同，但同一個產(chǎn)品經(jīng)理或設(shè)計師都會同時涉及到三個產(chǎn)品線的定義中。

所以，在建設(shè)組件庫的時候，我直接提煉了三個產(chǎn)品線的相同功能模塊，給出了包含多個頁面和多個交互邏輯組合而成的功能模塊，對于市面上大多組件庫會包含的按鈕、提示、彈窗等也沒有專門羅列，只將 AR 眼鏡上有過特殊交互說明的模塊給標(biāo)示了出來。 

可能由于恰好符合實情，在沒有費很多力氣推廣的情況下，研發(fā)團(tuán)隊就形成了登陸和首頁列表 2 個模塊，其中的登陸模塊，更是一直沿用到了現(xiàn)在。

但隨著探索期的深入，產(chǎn)品對接的業(yè)務(wù)場景迅速擴(kuò)大，加上架構(gòu)調(diào)整，公司布局更新，組織使命調(diào)整，想要一次打通形成第三層次的組件很快就行不通了。雖然后來我也針對這個現(xiàn)象做過一些調(diào)整，但收效并不明顯，之前一直認(rèn)定主要原因是時間和精力不夠，直到組織設(shè)計團(tuán)隊完成了一場 workshop 后我才發(fā)現(xiàn)，沒有聯(lián)系實際情況設(shè)定切實可行的目標(biāo)，可能才是收效甚微的主要問題。

現(xiàn)在的實際情況是怎么樣的呢?

于我所在的組織來說，三個部門分別負(fù)責(zé)了 1-3 個業(yè)務(wù)線，每個業(yè)務(wù)線都對應(yīng)不同的用戶場景和產(chǎn)品需求，需要用實際的落地業(yè)績和財務(wù)收入迅速證明自己所在業(yè)務(wù)線對于公司的價值，所以即使我能看到不同業(yè)務(wù)間存在復(fù)用的可能，想要像之前一樣，直接形成第三層次的組件也很難。

這個時候，借鑒 OKR 思維，設(shè)定更具有實質(zhì)性意義的 KR 目標(biāo)，然后讓組件庫如同產(chǎn)品一樣去迭代，確保每一次迭代都是關(guān)鍵和有效的。

比如，我認(rèn)為創(chuàng)建的組件庫要到第三層次才是它基于現(xiàn)狀能獲得最好的價值體現(xiàn)，那就可以把這個設(shè)定為 O。這個 O 的設(shè)定是由戰(zhàn)略指引的，需要對齊公司或部門的目標(biāo)，也就是我們在第一步明確的價值。

接著，我們來設(shè)計子目標(biāo)，也就是 OKR 里的 Key results，可衡量的關(guān)鍵結(jié)果，以終為始，形成這個組件庫的目標(biāo)體系。

對應(yīng)我這個例子，就可以從用戶群的不同分為兩類，一個是針對設(shè)計師而言有用，一個是對協(xié)作部門來說有用，以年度為周期，可以形成兩個關(guān)鍵結(jié)果：

• 一套跨項目使用的 Sketch 組件庫，覆蓋項目 50% 界面設(shè)計工作量;
• 一套跨項目使用的組件設(shè)計定義文檔和資源，支持對應(yīng)功能直接進(jìn)入開發(fā)階段。

如果再往下細(xì)分，還可以把年度周期拆分為季度周期甚至月度周期，設(shè)定更小的 OKR 目標(biāo)體系，使結(jié)果得到更及時的追蹤和復(fù)盤。

第 3 步：聚焦相關(guān)競品，以實際情況設(shè)定組件庫內(nèi)容

因為我們的項目幾乎都是 To B 的業(yè)務(wù)線，每個產(chǎn)品無論大小都是一個體系，即信息在前端和后端之間傳輸，用戶至少包含 2 個及以上的職業(yè)角色，最簡單的是 1 個 Web 平臺+1 個 AR 終端應(yīng)用，所以要達(dá)到前面的 2 個關(guān)鍵結(jié)果，這個組件庫從一開始就需要支持至少 2 個終端。

最開始由于幾乎是單推我們自研的 AR 眼鏡作為應(yīng)用終端，在設(shè)計組件分類的時候，我選擇優(yōu)先羅列了組件，再在每個組件下區(qū)分終端。

這種形式和 Material design 的組件庫相似，基于一種終端衍生到其他平臺。在目錄上，你會首先看到組件列表，再看到每個組件支持平臺。 

但很快，這種推廣模式就被改變了，除了 AR 眼鏡，機(jī)器人、邊緣算法盒子、工業(yè) PDA、帶 CV 模組的相機(jī)等都納入了不同的業(yè)務(wù)線，以形成更貼合場景的方案構(gòu)成。雖然它們都圍繞計算視覺為核心技術(shù)，但在界面層的表現(xiàn)上就大不一樣了。

而這個時候，我還是以之前的形式組織著這個組件庫。導(dǎo)致使用的時候，必須得先看一看每個組件長長的目錄，才能找到當(dāng)前所需要的對應(yīng)終端資源。 

 來源：公司內(nèi)部組件介紹頁面

在組織過那場 workshop 后，我開始廣泛的研究行業(yè)內(nèi)其他優(yōu)秀的組件庫。其實大多數(shù)優(yōu)秀的組件庫都有對應(yīng)明確的、單一的終端，比如 Ant 組件是對應(yīng) web 終端，Hololens 的組件是對應(yīng) AR 眼鏡的，即使蘋果這樣跨平臺多設(shè)備的廠商，也分移動設(shè)備、電視設(shè)備、手表，輸出了不同的組件庫。

出于種種考慮，我將原本處于二級目錄的終端分類提升到了一級，給設(shè)計師使用的 Sketch 組件也按終端劃分成單獨的文件。然后，再根據(jù)當(dāng)前的業(yè)務(wù)情況，聚焦到 2 個主要的終端上：Web 網(wǎng)頁和 AR 眼鏡。

由于有了聚焦的終端，在借鑒其他組件庫時，也就可以在之前廣泛研究的基礎(chǔ)上縮減范圍，得到更有參考意義的結(jié)果。

比如，針對 AR 眼鏡終端，Windows 的 Hololens 和 Magic leap 的設(shè)計就比 Material design 更具有參考意義。 

 來源：Magic Leap 設(shè)計 & Windows Hololens

即使具有參考意義，但由于每一個組件庫所面臨的實際情況都不一樣，生成組件庫時依然需要做對應(yīng)性的更改。

以我這里創(chuàng)建的 AR 眼鏡 UI kit 為例，因為最終要落入不同業(yè)務(wù)線的各個項目中，應(yīng)對的客戶和場景很難統(tǒng)一，所以，色調(diào)統(tǒng)一就不需要作為該組件庫生成時一定要滿足的條件。如果要保證一致性，Sketch 里的圖層樣式，甚至顏色變量都可以作為解決方案放到組件庫里。 

 來源：公司內(nèi)部 Sketch 頁面

過硬的設(shè)計技能和專業(yè)能力，對建設(shè)一個優(yōu)秀的組件庫必不可少，但我認(rèn)為一個優(yōu)秀的組件庫，必然首先是一個實用的組件庫，在被它的光環(huán)吸引的同時，緊緊的扣住當(dāng)前環(huán)境的實際情況，依時而定、依時而變，不被自身的專業(yè)角度限制，才能夠發(fā)揮它本來應(yīng)該給團(tuán)隊或公司帶來的價值。

按照實際情況調(diào)整，這句話說來簡單卻最是困難，因為它就像這個組件庫的土壤，土壤變了，上面就要跟著變化。這 3 個步驟，首先是在確認(rèn)有這樣一片讓它生長的土壤，然后分析土壤當(dāng)前和未來可以提供個組件庫的養(yǎng)分，最后，才是動手開干，讓組件庫在這片土壤上開花結(jié)果。

因為土壤不一樣，同樣的方法，最后生成的組件庫可能會完全不一樣，但并不妨礙它成為助力協(xié)作，提高效率的一個好的組件庫。