編輯導(dǎo)語(yǔ)：對(duì)于設(shè)計(jì)師來(lái)說(shuō)，很多人都會(huì)接觸到組件庫(kù)，但是不同的人的使用方法卻大不相同。今天，在本篇文章中，作者為我們分享了他關(guān)于組件庫(kù)的幾個(gè)問(wèn)題以及相關(guān)的思考，快來(lái)看看你對(duì)組件庫(kù)的使用還要哪些應(yīng)該改進(jìn)的地方吧。

年中的時(shí)候作為評(píng)委參加了公司設(shè)計(jì)通道晉升評(píng)審，完整的聽(tīng)了10位同學(xué)的工作匯報(bào)和個(gè)人總結(jié)，果然不出所料，每個(gè)同學(xué)匯報(bào)里都或多或少涉及到“設(shè)計(jì)規(guī)范”或 “組件庫(kù)” 的這么一個(gè)模塊。

本想著平靜的聽(tīng)完打個(gè)醬油就完事了，但還是沒(méi)忍住問(wèn)了其中一個(gè)同學(xué)：“你們平時(shí)是怎么用組件庫(kù)協(xié)作的？”

具體答案記不清了，我轉(zhuǎn)譯一下，大概的意思是他會(huì)約束幾個(gè)元素，比如按鈕 / 圓角 / 字體字號(hào)規(guī)范設(shè)計(jì)稿，其余的地方需要就自由發(fā)揮。

顯然這個(gè)答案我是不買單的，反而帶來(lái)了關(guān)于組件庫(kù)的幾個(gè)問(wèn)題和思考：

01 低微顆粒度下的設(shè)計(jì)失衡

設(shè)計(jì)管理是門學(xué)問(wèn)（對(duì)設(shè)計(jì)工作的管理，不是對(duì)人的管理哈），一定程度上細(xì)節(jié)是不影響大局的，這就好比地球上的人分白種人 / 黃種人 / 黑種人。

盡管每一個(gè)白種人的長(zhǎng)相各不相同，但放在亞洲的任何一個(gè)國(guó)家你都能第一時(shí)間分辨出來(lái)種族的不同，他們的特征是膚色（品牌色），身材（造型）跟 發(fā)型 / 手飾 是否統(tǒng)一基本沒(méi)有關(guān)系；可不要拿了芝麻丟了西瓜。

02 面面俱到反而無(wú)從下手

大多數(shù)同學(xué)都有患得患失的心理，認(rèn)為準(zhǔn)備足夠多的組件就可以應(yīng)對(duì)所有問(wèn)題，像樂(lè)高的零件一樣可以快速拼完成各類需求同時(shí)保證了一致性。

但理想終歸是理想，試想一下家里是否堆砌了各種看似有用實(shí)則沒(méi)卵用的東西以備不時(shí)之需？

以我自己為例，家里的購(gòu)物袋堆滿了一個(gè)櫥柜，我對(duì)這些袋子的規(guī)劃有2方面；一部用途是裝垃圾，另外一部分用途是外出裝些雜物。

結(jié)局跟你想的一樣，購(gòu)物袋占據(jù)了我家2平方米的位置，也就是說(shuō)我用價(jià)值10w的體積容納了不足20塊錢的垃圾…

這件事情讓我明白一個(gè)道理，具備再生或持續(xù)發(fā)展能力的事或物，不要留戀。畢竟不是稀有資源，囤積真沒(méi)必要，該清理就清理，組件庫(kù)也是這樣。

進(jìn)入正題前，容我再啰嗦一下基本規(guī)范，UI設(shè)計(jì)本質(zhì)無(wú)非就是?對(duì)信息的編排，只需要弄想清楚“信息”和“編排“，整個(gè)UI的規(guī)則也能明確很多，所以試著去拆解下這兩個(gè)key word：

信息這塊不需要廢話了，重點(diǎn)說(shuō)下排布中的間距。間距的設(shè)置往往是囤余的引子，大毛病從來(lái)都是小事積累出來(lái)的，要想治標(biāo)還得治下本，如下圖：

通常的間距是按照線性增長(zhǎng)的方式，遵循N*X的公式（N為最小單元），坦誠(chéng)地講線性增長(zhǎng)的方式有點(diǎn)像溫水煮青蛙，遞進(jìn)的元素太小，所以感覺(jué)加一個(gè)就加一個(gè)了，讓人滋生了無(wú)所謂的念頭。

打消這個(gè)念頭的方式就是用指數(shù)增長(zhǎng)去取代線性增長(zhǎng)，合理的控制間距梯度，一定程度上會(huì)節(jié)制屯余。

另外，要運(yùn)用好design token （設(shè)計(jì)編碼 / 密鑰）的方式去幫助我們管理元素。這個(gè)概念是2014年Salesforce提出來(lái)的，token已經(jīng)成為了許多設(shè)計(jì)系統(tǒng)中必不可少的部分。

常用的方式就是按照衣服號(hào)去編碼，通過(guò)“S”“L”“M”的代號(hào)賦予界面呼吸感。同理，其他的小微組件也同樣可以用編碼的方式去管理。

不用擔(dān)心不夠用，畢竟這些尺碼滿足著全球70億人的穿衣需求，你的間距還能多過(guò)70億人的身材么？

基礎(chǔ)說(shuō)完了，開(kāi)始進(jìn)入正題，如果你也遇到了上述類似的問(wèn)題，那么可以帶著審視的目光來(lái)看待組件庫(kù)，我建議可以從以下兩個(gè)方面重新思考：

03 增加倉(cāng)庫(kù)類型，強(qiáng)化臨時(shí)倉(cāng)庫(kù)

像 Ant Design / Salesforce 這種重量級(jí)的組件庫(kù)一般是開(kāi)放通用型組件，不一定完全貼合我們自身業(yè)務(wù)，所以做好組件庫(kù)的分類是對(duì)基礎(chǔ)的夯實(shí)。

區(qū)分這三個(gè)類型非常的簡(jiǎn)單，只要你玩過(guò)王者榮耀就可以輕而易舉的明白：

這個(gè)圖應(yīng)該都用不著我在解釋了哈哈哈哈，重點(diǎn)說(shuō)下臨時(shí)型組件分類吧，這種組件定位是針對(duì)突發(fā)狀況的應(yīng)對(duì)策略，屬于定制型組件，只針對(duì)你當(dāng)前遇到場(chǎng)景，未必是可以有復(fù)用價(jià)值。

所以這種組件雖然價(jià)值不低，但恰恰是組件庫(kù)的癌細(xì)胞，特殊場(chǎng)景永遠(yuǎn)不會(huì)少，如果草率的歸類到業(yè)務(wù)型組件，會(huì)越積越多，越積越龐大，嚴(yán)重的時(shí)候甚至?xí)绊懻麄€(gè)組件庫(kù)的迭代升級(jí)，放在臨時(shí)型分類里有需求再召喚也不失是一種辦法。

04 封裝workflow，降低操作精度

組件顆粒度太細(xì)會(huì)導(dǎo)致操作的精度無(wú)限度的加大，提高效率的同時(shí)又在折損效率，莫不如精進(jìn)一步，把封裝組件變成封裝工作流（workflow）。

從另一個(gè)角度來(lái)看是從交互設(shè)計(jì)的思路去做UI設(shè)計(jì)組件，這種做法會(huì)極大的解放生產(chǎn)力，特別是針對(duì)多端設(shè)備做設(shè)計(jì)的時(shí)候，可真是一鍵適配iOS / android / 小程序 / H5等等。

上圖是以登錄為例，同樣的流程封裝可以用在電商應(yīng)用的“賬號(hào)管理”、“地址管理”、“城市選擇” 、社交應(yīng)用的“評(píng)論回復(fù)”等等場(chǎng)景里。

這塊我推薦體驗(yàn)下蘋果的“捷徑”，workflow的歷史也很久了，可以通過(guò)這款A(yù)PP去再次理解一下極致的生產(chǎn)力。

封裝workflow的做法也是避免微觀管理的措施之一，還是那個(gè)觀點(diǎn)分的太細(xì)很容易造成精力不聚焦，手忙腳亂的去拼每一個(gè)細(xì)節(jié)，稍微宏觀的東西反而被擱置了。

05 總結(jié)一下

丘吉爾曾經(jīng)說(shuō)過(guò)，“改變就是改善”，而“完美就是經(jīng)常改變”。如果我們過(guò)于嚴(yán)格的一致性實(shí)施“非一既二”可能會(huì)導(dǎo)致更大的麻煩，甚至?xí)屛覀儗⑼Ｖ箘?chuàng)新。

組件庫(kù)也是相同的道理，定制化組件沒(méi)有類別就沒(méi)必要硬塞到通用或者業(yè)務(wù)里面，單獨(dú)拎出來(lái)放著讓需求證明價(jià)值也是一個(gè)辦法。

本文由 @負(fù)能量補(bǔ)給站 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議