現(xiàn)在市面上的公司無(wú)論規(guī)模如何，都或多或少有設(shè)計(jì)系統(tǒng)或者組件庫(kù)。 今天這篇文章屬于吐槽，咱們來(lái)聊一聊關(guān)設(shè)計(jì)系統(tǒng)的那些糟心事兒。

設(shè)計(jì)系統(tǒng)的發(fā)展史：

什么是設(shè)計(jì)系統(tǒng)

舉個(gè)例子，假如說(shuō)我們是景德燒陶瓷的工匠，咱們?cè)O(shè)計(jì)師負(fù)責(zé)畫(huà)瓷瓶的設(shè)計(jì)圖，下游工匠負(fù)責(zé)做出來(lái)。一開(kāi)始訂單少，設(shè)計(jì)師在紙上畫(huà)好瓷瓶的三視圖然后工匠手工拉胚做瓶子，所以做出來(lái)的瓶子大小、高度、薄厚都不一樣。但后來(lái)廠(chǎng)子效益好，訂單激增，于是工匠就來(lái)商量：我看你們?cè)O(shè)計(jì)師畫(huà)來(lái)畫(huà)去，畫(huà)出來(lái)的瓷瓶器型差異也不大，就那兩三種。與其一個(gè)個(gè)手工拉胚，不如咱確定幾個(gè)器型做成模具，咱們工匠直接灌模，這樣既做得快。

這幾個(gè)瓷瓶模具就是我們的組件庫(kù)。把常用的幾種花瓶樣式做成模具，也就是我們把設(shè)計(jì)模式打包成組件，開(kāi)發(fā)可以用灌模（代碼復(fù)用）的形式提高產(chǎn)出效率。

構(gòu)建組件庫(kù)：

之后這個(gè)瓷器廠(chǎng)又繼續(xù)經(jīng)營(yíng)，老板一看幾個(gè)設(shè)計(jì)師天天加班，效率也挺低啊。那些低質(zhì)量生產(chǎn)線(xiàn)的瓷器就不要占用設(shè)計(jì)師的時(shí)間，讓設(shè)計(jì)師出幾個(gè)簡(jiǎn)單花樣教給工匠，工匠自己看著做就行，勻出來(lái)的空閑設(shè)計(jì)師就專(zhuān)心設(shè)計(jì)幾個(gè)精品器賣(mài)高價(jià)。另一邊，設(shè)計(jì)師的技能水平差異很大，沒(méi)經(jīng)驗(yàn)的設(shè)計(jì)學(xué)徒設(shè)計(jì)的瓶子總是把手位置不合理、瓶子薄厚也不合理，導(dǎo)致受熱不均勻也不好用。因此老板讓老設(shè)計(jì)師把自己的設(shè)計(jì)思路總結(jié)出來(lái)，集合成冊(cè)，方便設(shè)計(jì)學(xué)徒照葫蘆畫(huà)瓢、檢查自己的瓶子是否好用。

老設(shè)計(jì)師總結(jié)出來(lái)的花樣圖紙，就是我們的設(shè)計(jì)系統(tǒng)。把花瓶圖案（也就是App開(kāi)發(fā)中的顏色/字號(hào)/間距…）、設(shè)計(jì)思路（也就是交互規(guī)則）總結(jié)出來(lái)，既是為了方便設(shè)計(jì)內(nèi)部或缺少設(shè)計(jì)經(jīng)驗(yàn)的其他角色快速產(chǎn)出設(shè)計(jì)，也是為了瓶子的用戶(hù)能獲得品質(zhì)穩(wěn)定的產(chǎn)品。

我們?yōu)槭裁葱枰O(shè)計(jì)系統(tǒng)

從上面的案例可以看出來(lái)，設(shè)計(jì)系統(tǒng)的目的有二：

1. 設(shè)計(jì)系統(tǒng)（或者組件庫(kù)）首當(dāng)其沖的、最基本的目標(biāo)是提效，并且是研發(fā)提效。
2. 另一個(gè)目標(biāo)則是：統(tǒng)一設(shè)計(jì)決策、幫助用戶(hù)建立穩(wěn)定的用戶(hù)心智。這個(gè)目標(biāo)是設(shè)計(jì)經(jīng)常吹噓自己達(dá)到了、但往往很難做到的。

針對(duì)第一點(diǎn)，首先我們要清楚新組件的設(shè)計(jì)周期和開(kāi)發(fā)周期都很長(zhǎng)。假如暫時(shí)不考慮開(kāi)發(fā)上的事情，大家可以試試在沒(méi)有組件庫(kù)的情況下寫(xiě)清楚一個(gè)下拉菜單的所有用例試試。

• 字段最長(zhǎng)怎么展示？
• 最短怎么展示？/為空怎么展示？/不能選什么樣式？
• 最多選幾個(gè)？
• 加載中什么樣式？
• 一次加載多少個(gè)？
• hover/選中/禁用/focus 怎么展示？支不支持鍵控？
• 哪里是選中熱區(qū)？
• 按什么順序展示？選中了的順序是不是會(huì)變？
• 沒(méi)選怎么報(bào)錯(cuò)？
• 狀態(tài)切換什么動(dòng)效？

……

正是因?yàn)樵跊](méi)有組件庫(kù)的情況下調(diào)用組件這么麻煩，所以應(yīng)用了組件庫(kù)以后，最立竿見(jiàn)影的效果就體現(xiàn)在開(kāi)發(fā)效率提升上。在設(shè)計(jì)師沒(méi)有額外說(shuō)明的情況下，開(kāi)發(fā)可以直接拖組件庫(kù)組件，組件什么樣交互設(shè)計(jì)出來(lái)就是什么樣子。一個(gè)需要 50PD 的項(xiàng)目在接入組件庫(kù)以后，25PD 就可以完成，開(kāi)發(fā)需要的時(shí)間大大縮短，設(shè)計(jì)-開(kāi)發(fā)之間的溝通效率也大大提高。因此從這個(gè)角度來(lái)說(shuō)，組件庫(kù)的建立是絕對(duì)有必要的。

然而做到這一步充其量只能證明在開(kāi)發(fā)實(shí)現(xiàn)的角度上來(lái)說(shuō)有組件庫(kù)比沒(méi)有更快，作為產(chǎn)品設(shè)計(jì)，我們更關(guān)心的是從用戶(hù)的角度上來(lái)說(shuō)，一致的設(shè)計(jì)系統(tǒng)是否對(duì)用戶(hù)體驗(yàn)更好？或者換句話(huà)說(shuō)，假如用戶(hù)就是喜歡每個(gè)頁(yè)面都不一樣，那么開(kāi)發(fā)實(shí)現(xiàn)也一定會(huì)順應(yīng)用戶(hù)訴求——我們肯定就不做組件庫(kù)了。

針對(duì)設(shè)計(jì)系統(tǒng)與用戶(hù)心智的討論在 70～80 年代就有了成型結(jié)論。引用 1985 年版的蘋(píng)果人機(jī)交互手冊(cè)，標(biāo)準(zhǔn)的、一致的用戶(hù)界面一方面可以減少用戶(hù)記憶、提高軟件的易學(xué)性：“…假如用戶(hù)已經(jīng)知道了一些功能是如何運(yùn)作的，那他們就不需要去記憶一個(gè)新功能的用法。通過(guò)使用標(biāo)準(zhǔn)的人機(jī)交互界面，你的用戶(hù)可以不需要記住界面上的任何東西。”

另一方面，用戶(hù)在逐步探索產(chǎn)品的途中，會(huì)逐漸形成一套關(guān)于如何操作產(chǎn)品、產(chǎn)品會(huì)產(chǎn)生什么樣反饋的心智模型，然后用戶(hù)就會(huì)用這個(gè)模型去預(yù)測(cè)產(chǎn)品中其他功能的用法。比如你的用戶(hù)一上來(lái)使用了“增加”功能，那么他就會(huì)推測(cè)“修改”功能和“增加”功能的操作方法是一致的。因此，一套穩(wěn)定的概念模型或者說(shuō)設(shè)計(jì)系統(tǒng)可以很好地輔助用戶(hù)形成穩(wěn)定的心智模型，對(duì)于一些操作復(fù)雜的產(chǎn)品來(lái)說(shuō)，穩(wěn)定的心智模型就代表著更好的易學(xué)性甚至用戶(hù)粘性。

所以這就引出了設(shè)計(jì)系統(tǒng)的第二個(gè)目標(biāo)：統(tǒng)一設(shè)計(jì)決策，建立用戶(hù)心智。這個(gè)目標(biāo)雖然不如提升開(kāi)發(fā)效率一樣立竿見(jiàn)影、可測(cè)量，但我認(rèn)為它是我們做設(shè)計(jì)系統(tǒng)的終極目的。既然我們知道了做設(shè)計(jì)系統(tǒng)，短期是為了提效，長(zhǎng)期是為了用戶(hù)價(jià)值，那么接下來(lái)我們就可以去討論一個(gè)沒(méi)能達(dá)到這些目標(biāo)的系統(tǒng)都踩了什么大坑。

不能提效的設(shè)計(jì)系統(tǒng)

大多數(shù)組件庫(kù)或設(shè)計(jì)系統(tǒng)之所以“糟糕”，是因?yàn)闆](méi)有達(dá)成第一個(gè)“提效”目標(biāo)，這主要是由兩方面原因?qū)е碌模喝狈η捌跍贤ê腿狈Ψ答仚C(jī)制。

拓展閱讀：

1. 缺乏前期溝通

假如我們將“設(shè)計(jì)的工作范圍”作為我們這個(gè)“設(shè)計(jì)系統(tǒng)”的邊界，那么我們就需要注意到設(shè)計(jì)系統(tǒng)的信息輸入是來(lái)源于設(shè)計(jì)部之外的，輸出也是應(yīng)用于設(shè)計(jì)部之外的。因此我們需要意識(shí)到，設(shè)計(jì)系統(tǒng)的產(chǎn)生絕對(duì)不可能是一個(gè)設(shè)計(jì)一頭熱就能完成的事情。與業(yè)務(wù)方（這里的業(yè)務(wù)方可能是產(chǎn)品，也可能是將來(lái)會(huì)使用設(shè)計(jì)系統(tǒng)的其他設(shè)計(jì)師）與開(kāi)發(fā)仔細(xì)地溝通設(shè)計(jì)場(chǎng)景，是一件和設(shè)計(jì)執(zhí)行同樣重要的事。

組件庫(kù)的搭建不能一步到位，除了字階/主題色/間距這種非常基礎(chǔ)的樣式規(guī)則，我們需要優(yōu)先支持哪個(gè)組件樣式？能夠覆蓋哪些最基礎(chǔ)的場(chǎng)景？這些東西需要提前歸納和溝通。換個(gè)說(shuō)法，設(shè)計(jì)系統(tǒng)或者組件庫(kù)的搭建，不是一個(gè)借鑒/移植的過(guò)程，這個(gè)過(guò)程不僅需要一些經(jīng)驗(yàn)判斷，更需要項(xiàng)目組織推進(jìn)的能力。我見(jiàn)過(guò)的失敗項(xiàng)目中，總是在組件庫(kù) 1.0 階段派兩個(gè)實(shí)習(xí)生把 ant design 重新描一遍，這樣做會(huì)導(dǎo)致組件庫(kù)上線(xiàn)后要用的組件沒(méi)有，沒(méi)用的畫(huà)了一大堆。

2. 缺乏反饋機(jī)制

嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)系統(tǒng)和千奇百怪的業(yè)務(wù)需求之間的關(guān)系有點(diǎn)像一個(gè)具有反饋回路的系統(tǒng)，設(shè)計(jì)系統(tǒng)的健全、設(shè)計(jì)效率的提升當(dāng)然能促進(jìn)業(yè)務(wù)發(fā)展，業(yè)務(wù)發(fā)展又帶來(lái)了不同的嘗試方向和需求，這些需求又不斷推動(dòng)著設(shè)計(jì)系統(tǒng)的不斷完善。或者咱們用更淺顯一點(diǎn)的比方，業(yè)務(wù)需求和設(shè)計(jì)系統(tǒng)之間的關(guān)系就像“小孩穿鞋”，小孩在成長(zhǎng)期時(shí)，鞋總是稍微大點(diǎn)/小點(diǎn)沒(méi)什么關(guān)系；但本質(zhì)上來(lái)說(shuō)只有鞋適應(yīng)腳，沒(méi)有腳適應(yīng)鞋的道理。你給小孩買(mǎi)鞋，不可能只買(mǎi)一個(gè)碼數(shù)就解決了，肯定得隨著小孩的成長(zhǎng)不停地買(mǎi)新的鞋。

做設(shè)計(jì)系統(tǒng)也是一樣的，它不是一個(gè)做一次刷完 KPI 就萬(wàn)事大吉的任務(wù)，也不是給其他的設(shè)計(jì)定規(guī)矩/用規(guī)矩劃分地盤(pán)，而是一套需要不斷迭代更新的動(dòng)態(tài)規(guī)范。業(yè)務(wù)發(fā)展中出現(xiàn)了什么共性的東西，或者之前規(guī)范中沒(méi)有覆蓋的、不允許覆蓋的東西，都應(yīng)該及時(shí)地評(píng)估測(cè)量。這就需要在 1.0 階段的基礎(chǔ)組件庫(kù)完成后，及時(shí)建立合理的反饋機(jī)制。這種機(jī)制可以落實(shí)為每周討論設(shè)計(jì)系統(tǒng)的一些細(xì)節(jié)的對(duì)齊會(huì)，也可以考慮做成 ant design 那樣開(kāi)放收集反饋的交流群。在建立完基礎(chǔ)庫(kù)之后，根據(jù)業(yè)務(wù)訴求持續(xù)迭代、擴(kuò)充“業(yè)務(wù)組件”，也是比較好的工作方式。

對(duì)體驗(yàn)沒(méi)有助益的設(shè)計(jì)系統(tǒng)

一套能夠提效的組件庫(kù)已經(jīng)達(dá)到了及格線(xiàn)，但距離設(shè)計(jì)系統(tǒng)的終極目的：體驗(yàn)價(jià)值，還要走很遠(yuǎn)。我認(rèn)為國(guó)內(nèi)的大多數(shù)設(shè)計(jì)系統(tǒng)暫時(shí)還沒(méi)有做到，所以在這里更多的探討我們未來(lái)能夠怎么做，希望做到些什么。

1. 缺乏交互說(shuō)明

大部分設(shè)計(jì)系統(tǒng)是從 UI 做起的，因?yàn)橐曈X(jué)元素上的一致對(duì)體驗(yàn)一致性的貢獻(xiàn)很大，效果也很顯著。但是不是我們停留在視覺(jué)樣式上就可以了呢？對(duì)于一些形態(tài)簡(jiǎn)單、核心功能突出的產(chǎn)品來(lái)說(shuō)也許是的，因?yàn)樗鼈兊膶W(xué)習(xí)曲線(xiàn)很平滑，有些不一致也不影響用戶(hù)當(dāng)場(chǎng)就學(xué)會(huì)了。但對(duì)于很多功能復(fù)雜的產(chǎn)品大家庭來(lái)說(shuō)，視覺(jué)樣式一致是遠(yuǎn)遠(yuǎn)不夠的，除了視覺(jué)一致性之外，還需要考慮控件應(yīng)用場(chǎng)景的一致性、流程的一致性、概念的一致性等等，而這些東西都需要設(shè)計(jì)師去整理、定義。

初學(xué)交互的人可能對(duì)于控件缺乏理解，感覺(jué)“控件”就好像是界面設(shè)計(jì)中固有的一些規(guī)矩，微軟/蘋(píng)果這樣的平臺(tái)級(jí)規(guī)范說(shuō)的就絕對(duì)正確，直接日常遵守即可。但實(shí)際上從我之前幾篇文章中也能看出來(lái)，互聯(lián)網(wǎng)/軟件設(shè)計(jì)中控件的產(chǎn)生和應(yīng)用也是有潮流、有趨勢(shì)、有變化的，存在很多曖昧的、模糊的地方，不是黑白分明的。所以咱們看一些開(kāi)發(fā)企業(yè)級(jí)軟件/對(duì)技能要求很高的工具型軟件的公司，比如我們熟悉的微軟/IBM，那個(gè)設(shè)計(jì)系統(tǒng)都寫(xiě)得啰啰嗦嗦、邏輯極多，這也是為了在復(fù)雜場(chǎng)景下保證體驗(yàn)的一致性。

2. 缺乏價(jià)值觀

缺乏價(jià)值觀的設(shè)計(jì)系統(tǒng)不過(guò)是一個(gè)控件超市。“價(jià)值觀”是個(gè)很主觀的事情，我說(shuō)得沒(méi)有別人好，所以引用一句話(huà)：“（設(shè)計(jì)價(jià)值觀是）系統(tǒng)地思考產(chǎn)品的價(jià)值系統(tǒng)和理念原則，抵御各種削弱產(chǎn)品價(jià)值和理念的嘗試”。這句話(huà)出自我很喜歡的一本書(shū)，叫《硅谷設(shè)計(jì)之道》。非常推薦大家看一看。

日常工作中總是會(huì)有一些設(shè)計(jì)團(tuán)隊(duì)容易在一些細(xì)節(jié)問(wèn)題上爭(zhēng)議很久，美其名曰“打磨設(shè)計(jì)”，但我認(rèn)為就是一種設(shè)計(jì)價(jià)值觀的缺失。比如假如用戶(hù)沒(méi)有填寫(xiě)完表單，那么表單的提交按鈕能不能按？是置灰好，還是按了以后再報(bào)錯(cuò)好？大表格里的批量操作到底是露出來(lái)還是收起來(lái)？文案里到底是稱(chēng)呼用戶(hù)為“你”還是“您”？

這些問(wèn)題都不是對(duì)與錯(cuò)的問(wèn)題，而是我們的設(shè)計(jì)系統(tǒng)到底認(rèn)為什么東西重要、什么東西沒(méi)那么重要的問(wèn)題。比如說(shuō)加入我們做一個(gè)主要用戶(hù)為老年人的系統(tǒng)，“明確/易理解”一定比“簡(jiǎn)潔”重要。映射到界面上，那就是界面肯定丑，字大顏色艷，保證用戶(hù)能看懂。因此我覺(jué)得大家在做設(shè)計(jì)的時(shí)候也可以跳脫單點(diǎn)的設(shè)計(jì)體驗(yàn)點(diǎn)，從產(chǎn)品的層面來(lái)說(shuō)設(shè)計(jì)的價(jià)值觀是什么？設(shè)計(jì)系統(tǒng)也是一種系統(tǒng)，而從系統(tǒng)角度得出的解決方案是偏長(zhǎng)期的、綜合的方案，它在單個(gè)設(shè)計(jì)細(xì)節(jié)中也許不是最優(yōu)解，但從整體體驗(yàn)上來(lái)說(shuō)是一致性更好的。

歡迎關(guān)注作者微信公眾號(hào)：「白話(huà)說(shuō)交互」