2021-10-9 濤濤
以設(shè)計(jì)師的角度，基于覆蓋面的廣度，組件庫(kù)可以從小到大分為三個(gè)層次：
第一個(gè)層次的組件庫(kù)要解決的是單個(gè)項(xiàng)目?jī)?nèi)的復(fù)用，同時(shí)也能保證整個(gè)項(xiàng)目的設(shè)計(jì)統(tǒng)一性。如果同一個(gè)項(xiàng)目下如果有多個(gè)設(shè)計(jì)師，為了保證各個(gè)頁(yè)面的交互和視覺(jué)一致性，一個(gè)統(tǒng)一的標(biāo)準(zhǔn)就更有必要了，而組件庫(kù)可以說(shuō)是這個(gè)標(biāo)準(zhǔn)的具化，不同的設(shè)計(jì)師使用同一個(gè)組件，可以有效保證頁(yè)面的一致性，同時(shí)也提高了工作的效率。
那，這個(gè)時(shí)候就一定必要?jiǎng)?chuàng)建組件庫(kù)嗎？恐怕也不盡然，如果這個(gè)項(xiàng)目需要快速開(kāi)發(fā)上線進(jìn)行驗(yàn)證，后續(xù)發(fā)展路線也很模糊，那犧牲部分一致性，容忍不同頁(yè)面的相對(duì)差異，或者用類似復(fù)制粘貼這種粗暴方式等等來(lái)達(dá)到目的，也許性價(jià)比更高。
第二個(gè)層次的組件庫(kù)，其價(jià)值在于多個(gè)項(xiàng)目間保持統(tǒng)一性，解放設(shè)計(jì)師重復(fù)性的工作。這個(gè)價(jià)值有一個(gè)前提，就是這些項(xiàng)目之間是需要保持一致性的。
第三個(gè)層次的組件庫(kù)，則是為了更廣泛的提高效率，它已經(jīng)跳出了設(shè)計(jì)師這個(gè)范圍，和其他職業(yè)產(chǎn)生了聯(lián)動(dòng)，涵蓋了研發(fā)技術(shù)甚至更多專業(yè)人員，也被稱作業(yè)務(wù)型組件。雖然同樣的模塊不用再重新設(shè)計(jì)也不用再重新開(kāi)發(fā)很吸引人，但這些組件的設(shè)計(jì)是否能被使用方認(rèn)可？原有支持的技術(shù)棧是否與使用方需要的一致，學(xué)習(xí)和推廣這些組件的成本是否能夠得到同等回報(bào)？相關(guān)的公司流程、規(guī)則和資源是否方便對(duì)組件進(jìn)行學(xué)習(xí)、推廣和使用？都是需要考慮的問(wèn)題。
這三個(gè)層次的組件庫(kù)層層遞進(jìn)，每上升一個(gè)層次，聽(tīng)起來(lái)就越吸引人，所耗費(fèi)的精力卻越大。
做到最好的，諸如谷歌、微軟、蘋(píng)果、阿里等等，在業(yè)務(wù)上也有同等布局，比如需要開(kāi)放給廣大的開(kāi)發(fā)者形成生態(tài)平臺(tái)。這個(gè)時(shí)候，組件向外部賦能，不再局限于公司內(nèi)部，所發(fā)揮的價(jià)值已經(jīng)遠(yuǎn)遠(yuǎn)大于其所耗費(fèi)的精力。
但作為一個(gè)新的組件庫(kù)，我們首先需要根據(jù)自己的實(shí)際情況來(lái)確認(rèn)要不要?jiǎng)?chuàng)建組件，而不是僅僅因?yàn)樗烂谕狻２蛔鼋M件庫(kù)，或者使用第三方的組件庫(kù)，都是一種選擇。而不是為了做組件庫(kù)而做組件庫(kù)。當(dāng)確認(rèn)這個(gè)組件庫(kù)在當(dāng)前的實(shí)際情況下依然有創(chuàng)建的價(jià)值，我們就要把這個(gè)價(jià)值更具像化，成為切實(shí)可行的目標(biāo)。
進(jìn)入公司的第二年，我開(kāi)始基于我涉及到的三個(gè) B 端產(chǎn)品來(lái)創(chuàng)建組件。
每一個(gè) B 端產(chǎn)品其實(shí)都是一個(gè)系統(tǒng)，是平臺(tái)+應(yīng)用的結(jié)構(gòu)，數(shù)據(jù)信息在這兩者之間運(yùn)轉(zhuǎn)。雖然看著挺龐大，但首先，這三個(gè)產(chǎn)品體系都是基于一個(gè)統(tǒng)一的產(chǎn)品價(jià)值（AR 技術(shù)）來(lái)映射到不同應(yīng)用場(chǎng)景（遠(yuǎn)程視頻、巡視檢查、展覽展示）的。其次，在人力資源的配備上，三個(gè)系統(tǒng)的產(chǎn)品、研發(fā)和設(shè)計(jì)負(fù)責(zé)人都同屬于一個(gè)團(tuán)隊(duì)，團(tuán)隊(duì)優(yōu)先級(jí)一致。另外，雖然主次分工不同，但同一個(gè)產(chǎn)品經(jīng)理或設(shè)計(jì)師都會(huì)同時(shí)涉及到三個(gè)產(chǎn)品線的定義中。
所以，在建設(shè)組件庫(kù)的時(shí)候，我直接提煉了三個(gè)產(chǎn)品線的相同功能模塊，給出了包含多個(gè)頁(yè)面和多個(gè)交互邏輯組合而成的功能模塊，對(duì)于市面上大多組件庫(kù)會(huì)包含的按鈕、提示、彈窗等也沒(méi)有專門(mén)羅列，只將 AR 眼鏡上有過(guò)特殊交互說(shuō)明的模塊給標(biāo)示了出來(lái)。
來(lái)源：公司內(nèi)部 Guidelines 文檔
可能由于恰好符合實(shí)情，在沒(méi)有費(fèi)很多力氣推廣的情況下，研發(fā)團(tuán)隊(duì)就形成了登陸和首頁(yè)列表 2 個(gè)模塊，其中的登陸模塊，更是一直沿用到了現(xiàn)在。
但隨著探索期的深入，產(chǎn)品對(duì)接的業(yè)務(wù)場(chǎng)景迅速擴(kuò)大，加上架構(gòu)調(diào)整，公司布局更新，組織使命調(diào)整，想要一次打通形成第三層次的組件很快就行不通了。雖然后來(lái)我也針對(duì)這個(gè)現(xiàn)象做過(guò)一些調(diào)整，但收效并不明顯，之前一直認(rèn)定主要原因是時(shí)間和精力不夠，直到組織設(shè)計(jì)團(tuán)隊(duì)完成了一場(chǎng) workshop 后我才發(fā)現(xiàn)，沒(méi)有聯(lián)系實(shí)際情況設(shè)定切實(shí)可行的目標(biāo)，可能才是收效甚微的主要問(wèn)題。
現(xiàn)在的實(shí)際情況是怎么樣的呢？
于我所在的組織來(lái)說(shuō)，三個(gè)部門(mén)分別負(fù)責(zé)了 1-3 個(gè)業(yè)務(wù)線，每個(gè)業(yè)務(wù)線都對(duì)應(yīng)不同的用戶場(chǎng)景和產(chǎn)品需求，需要用實(shí)際的落地業(yè)績(jī)和財(cái)務(wù)收入迅速證明自己所在業(yè)務(wù)線對(duì)于公司的價(jià)值，所以即使我能看到不同業(yè)務(wù)間存在復(fù)用的可能，想要像之前一樣，直接形成第三層次的組件也很難。
這個(gè)時(shí)候，借鑒 OKR 思維，設(shè)定更具有實(shí)質(zhì)性意義的 KR 目標(biāo)，然后讓組件庫(kù)如同產(chǎn)品一樣去迭代，確保每一次迭代都是關(guān)鍵和有效的。
比如，我認(rèn)為創(chuàng)建的組件庫(kù)要到第三層次才是它基于現(xiàn)狀能獲得最好的價(jià)值體現(xiàn)，那就可以把這個(gè)設(shè)定為 O。這個(gè) O 的設(shè)定是由戰(zhàn)略指引的，需要對(duì)齊公司或部門(mén)的目標(biāo)，也就是我們?cè)诘谝徊矫鞔_的價(jià)值。
接著，我們來(lái)設(shè)計(jì)子目標(biāo)，也就是 OKR 里的 Key results，可衡量的關(guān)鍵結(jié)果，以終為始，形成這個(gè)組件庫(kù)的目標(biāo)體系。
對(duì)應(yīng)我這個(gè)例子，就可以從用戶群的不同分為兩類，一個(gè)是針對(duì)設(shè)計(jì)師而言有用，一個(gè)是對(duì)協(xié)作部門(mén)來(lái)說(shuō)有用，以年度為周期，可以形成兩個(gè)關(guān)鍵結(jié)果：
如果再往下細(xì)分，還可以把年度周期拆分為季度周期甚至月度周期，設(shè)定更小的 OKR 目標(biāo)體系，使結(jié)果得到更及時(shí)的追蹤和復(fù)盤(pán)。
因?yàn)槲覀兊捻?xiàng)目幾乎都是 To B 的業(yè)務(wù)線，每個(gè)產(chǎn)品無(wú)論大小都是一個(gè)體系，即信息在前端和后端之間傳輸，用戶至少包含 2 個(gè)及以上的職業(yè)角色，最簡(jiǎn)單的是 1 個(gè) Web 平臺(tái)+1 個(gè) AR 終端應(yīng)用，所以要達(dá)到前面的 2 個(gè)關(guān)鍵結(jié)果，這個(gè)組件庫(kù)從一開(kāi)始就需要支持至少 2 個(gè)終端。
最開(kāi)始由于幾乎是單推我們自研的 AR 眼鏡作為應(yīng)用終端，在設(shè)計(jì)組件分類的時(shí)候，我選擇優(yōu)先羅列了組件，再在每個(gè)組件下區(qū)分終端。
這種形式和 Material design 的組件庫(kù)相似，基于一種終端衍生到其他平臺(tái)。在目錄上，你會(huì)首先看到組件列表，再看到每個(gè)組件支持平臺(tái)。
來(lái)源：Google Material design
但很快，這種推廣模式就被改變了，除了 AR 眼鏡，機(jī)器人、邊緣算法盒子、工業(yè) PDA、帶 CV 模組的相機(jī)等都納入了不同的業(yè)務(wù)線，以形成更貼合場(chǎng)景的方案構(gòu)成。雖然它們都圍繞計(jì)算視覺(jué)為核心技術(shù)，但在界面層的表現(xiàn)上就大不一樣了。
而這個(gè)時(shí)候，我還是以之前的形式組織著這個(gè)組件庫(kù)。導(dǎo)致使用的時(shí)候，必須得先看一看每個(gè)組件長(zhǎng)長(zhǎng)的目錄，才能找到當(dāng)前所需要的對(duì)應(yīng)終端資源。
來(lái)源：公司內(nèi)部組件介紹頁(yè)面
在組織過(guò)那場(chǎng) workshop 后，我開(kāi)始廣泛的研究行業(yè)內(nèi)其他優(yōu)秀的組件庫(kù)。其實(shí)大多數(shù)優(yōu)秀的組件庫(kù)都有對(duì)應(yīng)明確的、單一的終端，比如 Ant 組件是對(duì)應(yīng) web 終端，Hololens 的組件是對(duì)應(yīng) AR 眼鏡的，即使蘋(píng)果這樣跨平臺(tái)多設(shè)備的廠商，也分移動(dòng)設(shè)備、電視設(shè)備、手表，輸出了不同的組件庫(kù)。
出于種種考慮，我將原本處于二級(jí)目錄的終端分類提升到了一級(jí)，給設(shè)計(jì)師使用的 Sketch 組件也按終端劃分成單獨(dú)的文件。然后，再根據(jù)當(dāng)前的業(yè)務(wù)情況，聚焦到 2 個(gè)主要的終端上：Web 網(wǎng)頁(yè)和 AR 眼鏡。
由于有了聚焦的終端，在借鑒其他組件庫(kù)時(shí)，也就可以在之前廣泛研究的基礎(chǔ)上縮減范圍，得到更有參考意義的結(jié)果。
比如，針對(duì) AR 眼鏡終端，Windows 的 Hololens 和 Magic leap 的設(shè)計(jì)就比 Material design 更具有參考意義。
來(lái)源：Magic Leap 設(shè)計(jì) & Windows Hololens
即使具有參考意義，但由于每一個(gè)組件庫(kù)所面臨的實(shí)際情況都不一樣，生成組件庫(kù)時(shí)依然需要做對(duì)應(yīng)性的更改。
以我這里創(chuàng)建的 AR 眼鏡 UI kit 為例，因?yàn)樽罱K要落入不同業(yè)務(wù)線的各個(gè)項(xiàng)目中，應(yīng)對(duì)的客戶和場(chǎng)景很難統(tǒng)一，所以，色調(diào)統(tǒng)一就不需要作為該組件庫(kù)生成時(shí)一定要滿足的條件。如果要保證一致性，Sketch 里的圖層樣式，甚至顏色變量都可以作為解決方案放到組件庫(kù)里。
來(lái)源：公司內(nèi)部 Sketch 頁(yè)面
過(guò)硬的設(shè)計(jì)技能和專業(yè)能力，對(duì)建設(shè)一個(gè)優(yōu)秀的組件庫(kù)必不可少，但我認(rèn)為一個(gè)優(yōu)秀的組件庫(kù)，必然首先是一個(gè)實(shí)用的組件庫(kù)，在被它的光環(huán)吸引的同時(shí)，緊緊的扣住當(dāng)前環(huán)境的實(shí)際情況，依時(shí)而定、依時(shí)而變，不被自身的專業(yè)角度限制，才能夠發(fā)揮它本來(lái)應(yīng)該給團(tuán)隊(duì)或公司帶來(lái)的價(jià)值。
按照實(shí)際情況調(diào)整，這句話說(shuō)來(lái)簡(jiǎn)單卻最是困難，因?yàn)樗拖襁@個(gè)組件庫(kù)的土壤，土壤變了，上面就要跟著變化。這 3 個(gè)步驟，首先是在確認(rèn)有這樣一片讓它生長(zhǎng)的土壤，然后分析土壤當(dāng)前和未來(lái)可以提供個(gè)組件庫(kù)的養(yǎng)分，最后，才是動(dòng)手開(kāi)干，讓組件庫(kù)在這片土壤上開(kāi)花結(jié)果。
因?yàn)橥寥啦灰粯樱瑯拥姆椒ǎ詈笊傻慕M件庫(kù)可能會(huì)完全不一樣，但并不妨礙它成為助力協(xié)作，提高效率的一個(gè)好的組件庫(kù)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn