為什么很多設(shè)計系統(tǒng)，并不能提高效率？

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

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

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

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

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

構(gòu)建組件庫：

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

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

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

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

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

針對第一點，首先我們要清楚新組件的設(shè)計周期和開發(fā)周期都很長。假如暫時不考慮開發(fā)上的事情，大家可以試試在沒有組件庫的情況下寫清楚一個下拉菜單的所有用例試試。

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

……

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

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

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

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

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

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

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

拓展閱讀：

1. 缺乏前期溝通

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

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

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

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

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

對體驗沒有助益的設(shè)計系統(tǒng)

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

1. 缺乏交互說明

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

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

2. 缺乏價值觀

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

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

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

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