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

本想著平靜的聽完打個醬油就完事了，但還是沒忍住問了其中一個同學(xué)：“你們平時是怎么用組件庫協(xié)作的？”具體答案記不清了，我轉(zhuǎn)譯一下，大概的意思是他會約束幾個元素，比如按鈕 / 圓角 / 字體字號規(guī)范設(shè)計稿，其余的地方需要就自由發(fā)揮。

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

設(shè)計管理是門學(xué)問（對設(shè)計工作的管理，不是對人的管理哈），一定程度上細節(jié)是不影響大局的，這就好比地球上的人分白種人 / 黃種人 / 黑種人，盡管每一個白種人的長相各不相同，但放在亞洲的任何一個國家你都能第一時間分辨出來種族的不同，他們的特征是膚色（品牌色），身材（造型）跟發(fā)型 / 手飾是否統(tǒng)一基本沒有關(guān)系，可不要拿了芝麻丟了西瓜。

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

但理想終歸是理想。試想一下家里，是否堆砌了各種看似有用實則沒卵用的東西以備不時之需？以我自己為例，家里的購物袋堆滿了一個櫥柜，我對這些袋子的規(guī)劃有2方面，一部用途是裝垃圾，另外一部分用途是外出裝些雜物。結(jié)局跟你想的一樣，購物袋占據(jù)了我家2平方米的位置，也就是說我用價值10w的體積容納了不足20塊錢的垃圾…

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

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

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

通常的間距是按照線性增長的方式，遵循NX的公式（N為最小單元）。坦誠地講線性增長的方式有點像溫水煮青蛙，遞進的元素太小，所以感覺加一個就加一個了，讓人滋生了無所謂的念頭。打消這個念頭的方式就是用指數(shù)增長去取代線性增長，合理的控制間距梯度，一定程度上會節(jié)制屯余。

另外要運用好 design token （設(shè)計編碼 / 密鑰）的方式去幫助我們管理元素，這個概念是2014年Salesforce提出來的，token已經(jīng)成為了許多設(shè)計系統(tǒng)中必不可少的部分。常用的方式就是按照衣服號去編碼，通過“S”“L”“M”的代號賦予界面呼吸感。同理，其他的小微組件也同樣可以用編碼的方式去管理。不用擔心不夠用，畢竟這些尺碼滿足著全球70億人的穿衣需求，你的間距還能多過70億人的身材么？

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

1. 增加倉庫類型，強化臨時倉庫

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

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

這個圖應(yīng)該都用不著我再解釋了哈哈哈哈，重點說下臨時型組件分類吧，這種組件定位是針對突發(fā)狀況的應(yīng)對策略，屬于定制型組件，只針對你當前遇到場景，未必是可以有復(fù)用價值。所以這種組件雖然價值不低，但恰恰是組件庫的癌細胞，特殊場景永遠不會少，如果草率的歸類到業(yè)務(wù)型組件，會越積越多，越積越龐大，嚴重的時候甚至?xí)绊懻麄€組件庫的迭代升級。放在臨時型分類里有需求再召喚也不失是一種辦法。

2. 封裝workflow，降低操作精度

組件顆粒度太細會導(dǎo)致操作的精度無限度的加大，提高效率的同時又在折損效率，莫不如精進一步，把封裝組件變成封裝工作流（workflow），從另一個角度來看是從交互設(shè)計的思路去做UI設(shè)計組件，這種做法會極大的解放生產(chǎn)力，特別是針對多端設(shè)備做設(shè)計的時候，可真是一鍵適配iOS / android /小程序 / H5等等。

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

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

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

總結(jié)一下

丘吉爾曾經(jīng)說過，“改變就是改善”，而“完美就是經(jīng)常改變”。如果我們過于嚴格的一致性實施“非一既二”可能會導(dǎo)致更大的麻煩，甚至?xí)屛覀儗⑼Ｖ箘?chuàng)新。組件庫也是相同的道理，定制化組件沒有類別就沒必要硬塞到通用或者業(yè)務(wù)里面，單獨拎出來放著讓需求證明價值也是一個辦法。