熱門觀點：大多數(shù)公司在他們實際上永遠不會使用的設(shè)計系統(tǒng)上浪費了 6 位數(shù)的資金。

我們已經(jīng)無數(shù)次地見證了這樣的故事。領(lǐng)導層在看過 Shopify 的 Polaris 或 Atlassian 的文檔后，對設(shè)計系統(tǒng)充滿了憧憬。他們想象著自己擁有一個組織精美的組件庫，擁有完美的間距標記和配色方案，其完美程度足以讓瑞士設(shè)計師嘆為觀止。

六個月和 20 萬美元之后，他們的開發(fā)人員仍在從頭開始構(gòu)建一切。

聽起來很熟悉？

偉大的設(shè)計系統(tǒng)騙局

通常情況下，情況是這樣的：一家公司決定需要一個設(shè)計系統(tǒng)。他們組建團隊，投資工具，耗費數(shù)月時間，打造出你見過的最華麗的 Figma 庫。領(lǐng)導層在全體會議上展示了這個系統(tǒng)。所有人都鼓掌。

然后……什么都沒有了。

殘酷的現(xiàn)實：

• 開發(fā)人員完全忽略了組件
• 新功能采用一次性樣式構(gòu)建
• 設(shè)計系統(tǒng)成為浪費潛力的美麗紀念碑
• 六個月后，“系統(tǒng)”看起來與實際產(chǎn)品完全不同

我們審計過一些公司的設(shè)計系統(tǒng)，這些公司花費了 15 萬至 30 萬美元構(gòu)建復雜的組件庫，但開發(fā)人員的采用率約為零。

為什么花哨的組件不等于系統(tǒng)

問題不在于組件的質(zhì)量，而在于大多數(shù)公司構(gòu)建的是庫，而不是系統(tǒng)。

組件庫是：

• 精美的 UI 元素集合
• 孤立存在的文檔
• 設(shè)計師喜歡并且開發(fā)人員容忍的東西
• 壓力之下被拋棄的可有可無

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

• 一套解決實際開發(fā)問題的工具
• 保持一致且不令人煩惱的治理
• 開發(fā)人員真正想要使用的文檔
• 開發(fā)工作流程的重要組成部分

區(qū)別是什么？一個存在于 Figma 演示文稿中。另一個存在于你的代碼庫中。

真正有效的系統(tǒng)的四大支柱

在見證了無數(shù)設(shè)計系統(tǒng)的成功和失敗之后，我們發(fā)現(xiàn)了成功設(shè)計系統(tǒng)與價值 20 萬美元的鎮(zhèn)紙產(chǎn)品之間的區(qū)別：

1. 清晰的治理（有人真正擁有這個東西）

大多數(shù)設(shè)計系統(tǒng)失敗是因為沒有人真正負責。它們被當作一個附帶項目，每個人都參與貢獻，但卻無人維護。

實際有效的方法：

• 一個人（或小團隊）負責整個系統(tǒng)
• 添加/更改組件的清晰流程
• 定期審查以保持最新狀態(tài)
• 必要時有權(quán)說“不”

危險信號：您的設(shè)計系統(tǒng)會議有 12 個人，但沒有人可以做出決定。

2. 不會??讓人想死的記錄

我們見過一些設(shè)計系統(tǒng)文檔，讀起來就像機器人寫的技術(shù)手冊。“主按鈕組件利用語義顏色標記來確保所有斷點都符合可訪問性……”

停！停！

好的文檔可以回答：

• 我如何使用這個東西？
• 我什么時候應該使用它（什么時候不應該使用它）？
• 如果我需要不同的東西怎么辦？
• 如果這個壞了，我該去哪里？

出色的文檔顯示：

• 實時代碼示例
• 常見用例
• 不該做什么
• 如何回饋

3. 與實際開發(fā)工作流程集成

大多數(shù)系統(tǒng)都死在這里。它們的構(gòu)建方式與開發(fā)人員的實際工作方式相悖。組件在 Storybook 中看起來很棒，但要將它們集成到實際產(chǎn)品中，需要三次 Slack 對話，并且需要向 CSS 之神獻祭。

有效的系統(tǒng)：

• 組件作為實際包發(fā)布
• 它們與您現(xiàn)有的技術(shù)堆棧集成
• 更新不會破壞一切
• 使用起來比從頭開始構(gòu)建更快

不具備以下條件的系統(tǒng)：

• 需要從文檔復制并粘貼代碼
• 需要不斷定制才能工作
• 每次框架更新都會中斷
• 實施時間比定制解決方案更長

4. 實際維護所需的資源

很少有人談?wù)撨@一點：設(shè)計系統(tǒng)是活的。它們需要滋養(yǎng)、呵護，偶爾也會進行修剪。太多公司建立了一個系統(tǒng)，宣稱取得了成功，然后卻發(fā)現(xiàn)它一年后就變得無關(guān)緊要了。

維護包括：

• 當設(shè)計模式演變時更新組件
• 在團隊需要時添加新組件
• 修復錯誤（是的，設(shè)計系統(tǒng)有錯誤）
• 保持文檔最新
• 在團隊中推廣采用

虛假系統(tǒng)的真正代價

當設(shè)計系統(tǒng)失敗時，代價不僅僅是構(gòu)建它們所花費的金錢，還包括隨之而來的一切：

技術(shù)債務(wù)不斷增加：每個開發(fā)人員都構(gòu)建自己的解決方案，從而造成無法維護的不一致的混亂局面。

設(shè)計分歧：如果沒有共享組件，您的產(chǎn)品看起來就像是由委員會設(shè)計的（因為它確實是）。

開發(fā)速度變慢：團隊花時間重新創(chuàng)建相同的組件而不是構(gòu)建功能。

用戶體驗受損：不一致的交互會讓用戶感到困惑并影響轉(zhuǎn)化率。

我們看到一些公司花費 30 萬美元來設(shè)計一個失敗的系統(tǒng)，然后在兩年內(nèi)又花費 50 萬美元來處理隨之而來的不一致問題。

成功究竟是什么樣的

我們遇到的最成功的設(shè)計系統(tǒng)不一定是最漂亮的。它們是開發(fā)人員首先想到的，因為它們解決了實際問題并節(jié)省了時間。

成功的系統(tǒng)特點：

• 六個月內(nèi) 80% 以上的開發(fā)人員采用
• 由于基本組件已處理，因此新功能發(fā)布速度更快
• 所有產(chǎn)品均具有一致的用戶體驗
• 設(shè)計更新通過系統(tǒng)自動傳播
• 團隊爭相貢獻組件，而不是避免使用它們

案例研究片段：一位客戶在實施了合適的設(shè)計系統(tǒng)后，功能開發(fā)時間縮短了 40%。這并不是因為組件本身有多棒，而是因為開發(fā)人員不再需要從頭開始構(gòu)建基本的 UI 元素。

關(guān)于建筑系統(tǒng)的殘酷真相

大多數(shù)公司還沒有準備好采用設(shè)計系統(tǒng)。他們自以為已經(jīng)準備好了，但實際上并非如此。

當滿足以下條件時，您就準備好了：

• 您有多個具有共享模式的產(chǎn)品/功能
• 您擁有專門的維護資源
• 領(lǐng)導層確實了解他們購買的是什么
• 您愿意執(zhí)行標準（即使不方便）

當出現(xiàn)以下情況時，您還沒有準備好：

• 你認為設(shè)計系統(tǒng)會神奇地解決你所有的設(shè)計問題
• 你期望它在初始構(gòu)建后就“完成”
• 你不愿意改變團隊的工作方式
• 你之所以要建它，是因為競爭對手已經(jīng)有了

更好的方法

不要從第一天開始構(gòu)建一個龐大的系統(tǒng)，而是從你實際遇到的問題開始：

從小處著手：構(gòu)建團隊經(jīng)常使用的 3-5 個組件
證明價值：表明使用系統(tǒng)比不使用系統(tǒng)更快
根據(jù)使用情況進行迭代：在團隊需要時添加組件，而不是在它們看起來很酷時才
添加投資于采用：在宣傳上花費的時間與在構(gòu)建上花費的時間一樣多

底線

設(shè)計系統(tǒng)并非在于擁有漂亮的組件，而在于擁有一種可擴展的方式，能夠更快地構(gòu)建一致的產(chǎn)品。

如果你的開發(fā)人員沒有使用你的設(shè)計系統(tǒng)，那么你面臨的不是系統(tǒng)問題，而是策略問題。

能夠做到這一點的公司不僅可以節(jié)省成本，還可以更快地推出更好的產(chǎn)品，并打造用戶真正喜愛的體驗。

 

蘭亭妙微（藍藍設(shè)計）m.wtxcl.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。