熱門觀點:大多數公司在他們實際上永遠不會使用的設計系統(tǒng)上浪費了 6 位數的資金。
我們已經無數次地見證了這樣的故事。領導層在看過 Shopify 的 Polaris 或 Atlassian 的文檔后,對設計系統(tǒng)充滿了憧憬。他們想象著自己擁有一個組織精美的組件庫,擁有完美的間距標記和配色方案,其完美程度足以讓瑞士設計師嘆為觀止。
六個月和 20 萬美元之后,他們的開發(fā)人員仍在從頭開始構建一切。
聽起來很熟悉?
偉大的設計系統(tǒng)騙局
通常情況下,情況是這樣的:一家公司決定需要一個設計系統(tǒng)。他們組建團隊,投資工具,耗費數月時間,打造出你見過的最華麗的 Figma 庫。領導層在全體會議上展示了這個系統(tǒng)。所有人都鼓掌。
然后……什么都沒有了。
殘酷的現實:
- 開發(fā)人員完全忽略了組件
- 新功能采用一次性樣式構建
- 設計系統(tǒng)成為浪費潛力的美麗紀念碑
- 六個月后,“系統(tǒng)”看起來與實際產品完全不同
我們審計過一些公司的設計系統(tǒng),這些公司花費了 15 萬至 30 萬美元構建復雜的組件庫,但開發(fā)人員的采用率約為零。
為什么花哨的組件不等于系統(tǒng)
問題不在于組件的質量,而在于大多數公司構建的是庫,而不是系統(tǒng)。
組件庫是:
- 精美的 UI 元素集合
- 孤立存在的文檔
- 設計師喜歡并且開發(fā)人員容忍的東西
- 壓力之下被拋棄的可有可無
設計系統(tǒng)是:
- 一套解決實際開發(fā)問題的工具
- 保持一致且不令人煩惱的治理
- 開發(fā)人員真正想要使用的文檔
- 開發(fā)工作流程的重要組成部分
區(qū)別是什么?一個存在于 Figma 演示文稿中。另一個存在于你的代碼庫中。
真正有效的系統(tǒng)的四大支柱
在見證了無數設計系統(tǒng)的成功和失敗之后,我們發(fā)現了成功設計系統(tǒng)與價值 20 萬美元的鎮(zhèn)紙產品之間的區(qū)別:
1. 清晰的治理(有人真正擁有這個東西)
大多數設計系統(tǒng)失敗是因為沒有人真正負責。它們被當作一個附帶項目,每個人都參與貢獻,但卻無人維護。
實際有效的方法:
- 一個人(或小團隊)負責整個系統(tǒng)
- 添加/更改組件的清晰流程
- 定期審查以保持最新狀態(tài)
- 必要時有權說“不”
危險信號:您的設計系統(tǒng)會議有 12 個人,但沒有人可以做出決定。
2. 不會??讓人想死的記錄
我們見過一些設計系統(tǒng)文檔,讀起來就像機器人寫的技術手冊。“主按鈕組件利用語義顏色標記來確保所有斷點都符合可訪問性……”
停!停!
好的文檔可以回答:
- 我如何使用這個東西?
- 我什么時候應該使用它(什么時候不應該使用它)?
- 如果我需要不同的東西怎么辦?
- 如果這個壞了,我該去哪里?
出色的文檔顯示:
3. 與實際開發(fā)工作流程集成
大多數系統(tǒng)都死在這里。它們的構建方式與開發(fā)人員的實際工作方式相悖。組件在 Storybook 中看起來很棒,但要將它們集成到實際產品中,需要三次 Slack 對話,并且需要向 CSS 之神獻祭。
有效的系統(tǒng):
- 組件作為實際包發(fā)布
- 它們與您現有的技術堆棧集成
- 更新不會破壞一切
- 使用起來比從頭開始構建更快
不具備以下條件的系統(tǒng):
- 需要從文檔復制并粘貼代碼
- 需要不斷定制才能工作
- 每次框架更新都會中斷
- 實施時間比定制解決方案更長
4. 實際維護所需的資源
很少有人談論這一點:設計系統(tǒng)是活的。它們需要滋養(yǎng)、呵護,偶爾也會進行修剪。太多公司建立了一個系統(tǒng),宣稱取得了成功,然后卻發(fā)現它一年后就變得無關緊要了。
維護包括:
- 當設計模式演變時更新組件
- 在團隊需要時添加新組件
- 修復錯誤(是的,設計系統(tǒng)有錯誤)
- 保持文檔最新
- 在團隊中推廣采用
虛假系統(tǒng)的真正代價
當設計系統(tǒng)失敗時,代價不僅僅是構建它們所花費的金錢,還包括隨之而來的一切:
技術債務不斷增加:每個開發(fā)人員都構建自己的解決方案,從而造成無法維護的不一致的混亂局面。
設計分歧:如果沒有共享組件,您的產品看起來就像是由委員會設計的(因為它確實是)。
開發(fā)速度變慢:團隊花時間重新創(chuàng)建相同的組件而不是構建功能。
用戶體驗受損:不一致的交互會讓用戶感到困惑并影響轉化率。
我們看到一些公司花費 30 萬美元來設計一個失敗的系統(tǒng),然后在兩年內又花費 50 萬美元來處理隨之而來的不一致問題。
成功究竟是什么樣的
我們遇到的最成功的設計系統(tǒng)不一定是最漂亮的。它們是開發(fā)人員首先想到的,因為它們解決了實際問題并節(jié)省了時間。
成功的系統(tǒng)特點:
- 六個月內 80% 以上的開發(fā)人員采用
- 由于基本組件已處理,因此新功能發(fā)布速度更快
- 所有產品均具有一致的用戶體驗
- 設計更新通過系統(tǒng)自動傳播
- 團隊爭相貢獻組件,而不是避免使用它們
案例研究片段:一位客戶在實施了合適的設計系統(tǒng)后,功能開發(fā)時間縮短了 40%。這并不是因為組件本身有多棒,而是因為開發(fā)人員不再需要從頭開始構建基本的 UI 元素。
關于建筑系統(tǒng)的殘酷真相
大多數公司還沒有準備好采用設計系統(tǒng)。他們自以為已經準備好了,但實際上并非如此。
當滿足以下條件時,您就準備好了:
- 您有多個具有共享模式的產品/功能
- 您擁有專門的維護資源
- 領導層確實了解他們購買的是什么
- 您愿意執(zhí)行標準(即使不方便)
當出現以下情況時,您還沒有準備好:
- 你認為設計系統(tǒng)會神奇地解決你所有的設計問題
- 你期望它在初始構建后就“完成”
- 你不愿意改變團隊的工作方式
- 你之所以要建它,是因為競爭對手已經有了
更好的方法
不要從第一天開始構建一個龐大的系統(tǒng),而是從你實際遇到的問題開始:
從小處著手:構建團隊經常使用的 3-5 個組件
證明價值:表明使用系統(tǒng)比不使用系統(tǒng)更快
根據使用情況進行迭代:在團隊需要時添加組件,而不是在它們看起來很酷時才
添加投資于采用:在宣傳上花費的時間與在構建上花費的時間一樣多
底線
設計系統(tǒng)并非在于擁有漂亮的組件,而在于擁有一種可擴展的方式,能夠更快地構建一致的產品。
如果你的開發(fā)人員沒有使用你的設計系統(tǒng),那么你面臨的不是系統(tǒng)問題,而是策略問題。
能夠做到這一點的公司不僅可以節(jié)省成本,還可以更快地推出更好的產品,并打造用戶真正喜愛的體驗。
蘭亭妙微(藍藍設計)www.yn-ups.com 是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。
