結構的力量——設計系統模型指南
已發表: 2022-03-11設計系統可幫助組織保持跨多種產品、服務和業務的體驗一致性。 儘管通常與視覺指南和組件庫相關聯,但設計系統卻完全不同。 隨著越來越多的公司意識到設計連續性的價值,新成立的設計系統團隊正在建立最佳實踐,以確保其組織設計工作的長期相關性。
當多人從事相同的設計追求時,就會出現共同的問題。 如果這些問題的答案不容易獲得或不容易理解,那麼設計一致性就會被擱置。 進入設計系統。
儘管在當代設計討論中很受歡迎,但設計系統的根源在報紙和雜誌出版領域已有數十年的歷史。 即使是現在,編輯頁面的系統化層次結構也很明顯,預先配置的模式可以實現文本和視覺效果的一致放置。
2007 年之後,數字化的湧入迫使企業更加註重跨產品和平台的設計凝聚力。 隨後強調視覺指南和組件庫,但這些文檔很快在 PDF 和共享文件的頁面中固化。 通過反複試驗,現代設計系統的製造者開始將他們的工作視為有生命的產品,而不是靜態文件。
Zalando 是歐洲領先的在線時尚市場。 Atlassian 因其軟件開發工具而享譽全球。 每個都有龐大的產品團隊和復雜的設計需求。 從他們的設計系統模型中可以學到什麼?
Zalando:作為設計系統模型的協作
Zalando 是歐洲最大的鞋類和高端街頭服飾在線零售商。 擁有 1,900 多個品牌,其龐大的數字店面由數百名設計師和開發人員組成的團隊管理。 為了確保在如此廣泛的商品系列中獲得一致的購物體驗,該公司依賴於高度結構化的設計系統。
有人可能會認為,為這樣一個知名品牌維護一個設計系統需要嚴格的治理和一個緊密的設計決策者圈子。 相反,Zalando 的方法絕對是協作的。 Zalando 沒有將其設計系統視為處於熵威脅下的完美實體,而是鼓勵其功能團隊根據需要貢獻新想法。 它是如何工作的?
Zalando 設計系統團隊 (ZDS) 的主要目標是幫助功能團隊開發使產品大放異彩所需的組件。 同時,ZDS 確保設計系統的完整性不受影響。 這樣一來,ZDS 既是聯絡人,又是安全網。
當 Zalando 功能團隊發現自己需要與公司設計系統不一致的解決方案時,它會使用簡單的 Google 表單提交一份貢獻。 收到貢獻單後,ZDS 會審核更改請求並將其分類為Light 、 Medium或Heavy 。 每個類別都有自己的協作審查、設計和迭代序列。
一旦貢獻通過此過程並成為現實,ZDS 團隊就會更新集中共享的設計系統門戶,在其每週演示中展示更改,並將更新傳達給利益相關者和客戶。
Zalando 貢獻模型的簡單性使公司內的不同聲音能夠在系統的演變中擁有發言權。 從哲學上講,Zalando 將其係統視為一種產品,而不僅僅是一種旨在使產品在視覺上保持一致的文檔資源。 從這份展望中可以得出適用於不同設計系統模型的實用要點:
- 治理很重要,但監督設計系統的團隊應該關注組織內其他團隊的成功。
- 使特徵貢獻過程簡單、透明和協作,並記錄所有溝通。
- 讓設計人員和開發人員一起對系統進行更改,從而培養一種共享的系統語言。
- 創建一個清單,確保對系統的每次更新都能解決可訪問性問題。
Atlassian:重新構想設計系統思維
Atlassian 創建了用於軟件開發和協作的工具,例如 Jira 和 Trello。
2017 年,Atlassian 對其設計指南進行了更名並推出了一個網站。 同時,該公司託管了一個單獨的站點,專門用於其 UI 組件及其相應的代碼示例。

隨著時間的推移,這兩個網站相互吻合,導致內部設計和開發團隊、第二方應用程序集成供應商和 Atlassian 的客戶感到沮喪和困惑。
認識到設計和開發之間的分歧越來越大,Atlassian 選擇重新思考其設計系統的方法。 它不能再將設計和開發文檔視為為 Atlassian 產品生成代碼和圖形輸出的一種手段。 設計系統必須作為產品本身而受到尊重。
為了充分了解其問題,Atlassian 進行了外部審計並發布了客戶滿意度調查。 可以預見的是,這兩個網站被認為是錯位和過時的。 憑藉其名聲在外,以及由設計師、開發人員和利益相關者組成的龐大生態系統要求變革,Atlassian 承認了自己的不足,並著手重新構想其設計系統。
2020 年 8 月開始,Atlassian 的設計系統團隊 (ADS) 推出了一個新網站,整合了品牌、視覺、內容、組件和模式的指南。
此外,ADS 團隊:
- 將其一半的 UI 組件遷移到新系統(其餘部分正在進行中)
- 在整個過程中重寫和簡化文檔
- 改進了系統內的搜索
- 添加了點擊複製代碼鏈接
Atlassian 成熟的心態最有力的證據來自 ADS 首席設計師 Jennie Yip:“關於設計系統的一個常見誤解是,一旦發布,它們就會成為不可改變的事實來源。 設計系統永遠不會完整。 在 Atlassian,我們開始將我們對設計系統的看法轉變為一個活生生的實體。”
5 條值得記住的設計系統原則
今天的尖端就是明天的鈍刀片——這是一個貫穿所有設計學科的問題。 用於創建和託管設計系統的工具和平台有很多,但是數字設計的快速發展使得從指導原則的角度考慮設計系統更有利可圖。
1. 設計系統是數字產品。
像所有數字產品一樣,設計系統需要定期維護。 長期處於休眠狀態的系統將遭受廢棄和衰退。
2. 設計系統是協作的。
設計系統必須滿足代表多種業務功能的利益相關者的需求。 提供協作途徑可以防止系統存在於設計和工程孤島中,並確保產品創意不會被忽視。
3. 設計系統因簡單而蓬勃發展。
設計系統是尋找答案的地方,而不是因為華麗的視覺效果、複雜的動畫或詼諧的文案而獲得讚譽。 信息應該組織良好,易於導航和搜索,而文本描述應該平衡上下文和簡潔的說明。
4. 設計系統需要溝通和參與策略。
管理設計系統的團隊需要考慮如何定期向利益相關者傳達更新和新功能。 時事通訊、問答環節和其他外展策略應告知和參與: “這些就是變化。 這就是你應該關心的原因。”
5. 設計系統是集中的。
設計系統應該可以在一個單一的、基於雲的位置訪問。 導航系統或獲取資產不應該需要特定設計程序的知識。 請記住,發佈單獨的設計和開髮指南是導致產品失調的必經之路。
設計中結構靈活性的力量
設計系統並不意味著是巨石,龐大而壯觀,永遠不變。 它們也不僅僅是設計組件和样式的存儲庫。 它們是活生生的、會呼吸的產品,是需要種植和修剪的有機產品。 因此,他們應該得到由致力於持續維護和更新的設計師組成的專門團隊。 畢竟,設計系統永遠不會完成。
最終,最好的設計系統是直接的、協作的和靈活的。 他們清晰地回答緊迫的設計問題,歡迎來自多個利益相關者的意見,並優先考慮有效的解決方案而不是教條公式。
讓我們知道您的想法! 請在下方留下您的想法、評論和反饋。
• • •
進一步閱讀 Toptal 設計博客:
- 一致性是關鍵——如何構建 Figma 設計系統
- 了解設計系統和模式
- Figma vs. Sketch vs. Axure——基於任務的評論
- 為什麼使用材料設計? 權衡利弊
- 過去依然存在——永恆設計概述