如果沒有設計系統,每個設計師和開發人員都會自己做一些小決定:稍微不同的藍色、新的按鈕樣式、另一個間距值。一年后,该产品出现了数十个几乎重复的产品。设计系统用共享的决策取代了那些重复的决策。
大多數設計系統都具有三層。設計標記是儲存原始決策的命名值,例如 color.primary、space.4 或motion.duration.short。按钮、输入、卡片和对话框等组件是根据这些令牌构建的,并包含每个状态。指南記錄如何使用每個元件、如何編寫標籤和訊息以及適用的輔助功能規則。
設計系統存在於兩個地方:在設計工具中,作為元件庫;在程式碼中,作為開發人員安裝的套件。要保持這兩者同步是最困難的部分。當編碼按鈕不再與設計按鈕相符時,人們就不再信任該系統。
運動也屬於系統。持續時間、緩動曲線和彈簧設定可以是標記,互動式元件需要定義懸停、按下、載入和轉換的行為。我們製作的 ExodeUI 將該行為儲存在一個包含狀態和彈簧物理的開啟檔案中,因此同一元件可以在 React、Vue、SwiftUI、Flutter 和其他框架中運行。
著名的公开示例包括 Google 的 Material Design、Apple 的人机界面指南、IBM 的 Carbon 和 Shopify 的 Polaris。閱讀它們是了解成熟系統如何組織的好方法。