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

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

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

NO.1

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

NO.2

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

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

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

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

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

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

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

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

1.增加倉庫類型，強(qiáng)化臨時(shí)倉庫

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

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

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

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

組件顆粒度太細(xì)會(huì)導(dǎo)致操作的精度無限度的加大，提高效率的同時(shí)又在折損效率，莫不如精進(jìn)一步，把封裝組件變成封裝工作流（workflow），從另一個(gè)角度來看是從交互設(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的歷史也很久了，可以通過這款A(yù)PP去再次理解一下極致的生產(chǎn)力。

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

總結(jié)一下

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

原文鏈接：https://mp.weixin.qq.com/s/m4o8s95H7mv5ok8nfFUSHA