為了規劃一個不斷擴充的網站或應用程式，您需要一種有效和高效的方法來管理它，而不引入錯誤、不一致或充滿摩擦的體驗。 這就是使用者介面設計系統的用。
在本設計系統簡介中，我們將看看當今的國際大型企業所使用的設計系統的真實示例。 我們還將研究為什麼需要設計系統的原因，以及構建設計系統時需要包含的內容。
什麼是設計系統？
當我們為網站或應用程式設計使用者介面時，細節很容易被漏掉。 每次我們新增新頁面或元件或增加專案的組件時，往往很難做到設計風格的一致性。
也就是說，如果沒有設計系統，設計就會變得雜亂無章。
設計系統是用於網站及應用程式使用者介面的設計規範，包手文字內容、樣式、元件、模式和其他資源的集合，可以把它看作是品牌的一種視覺語言。
設計系統中應包含的內容
設計系統是一個良好的組織的一個框架，可以簡化設計師在設計使用者介面時有所依據。 與此同時，它使設計團隊更容易地擴充套件、更新和管理設計內容以達到風格一致；而有關如何使用、為什麼使用以及何時使用的問題，將會為大家一一解答。
雖然每個設計系統都有自己獨特的外觀，但每個品牌的設計系統的結構通常是相同的。 以下是設計系統最常見的元件：
設計原則
這個部分有很多名稱。 例如：
它也並不總是一成不變的，有些企業會使用這一部分來講述品牌的目標和使命。 其他企業用它來解釋設計系統背後的設計原理。
例如，這是閃電設計系統中的概述頁面：
它解釋說，清晰度、效率、一致性和美觀用於為Salesforce的產品做出設計決策。
風格指南
風格指南可以存在於設計系統中，或是自己獨自存在， 但他們的目的是相同的：就是為品牌設計時，可以給設計師參考一些基本的視覺風格和設計指南。
這些基本要素包括：
- 色彩 Color
- 排版 Typography
- 圖解 Iconography
- 品牌標誌 Logos
- 圖像 Imagery
- 間隔 Spacing
- 版面佈局 Layout
- 動畫效果 Motion
它還可能包括有關響應性、全球化和可訪問性的資訊。 在本節中查詢有關設計通行證的資訊也變得越來越普遍。
每個設計令牌都有一個json金鑰和相應的值。 如果您正在尋找一個好的例子，請檢視Shopify的北極星設計系統：
設計通行證有助於設計師的設計作品和開發人員實踐出來的成品達成一致。 透過選擇特定的設計通行證，可以對設計師和開發人員的有所規範，減少大家的爭議。
風格指南還可以在執行和更新整體品牌風格時變得更加容易。
元件
元件庫是定義品牌視覺語言的下一步。 在其中，你會發現可重複使用的UI元件，例如：
- 收合式選單元件 Accordions
- 麵包屑導覽 Breadcrumbs
- 按鈕 Buttons
- 版面佈局容器 Containers
- 列表 Lists
- 進度條 Progress bars
- 搜尋表格 Search forms
- 分頁標籤 Tabs
- 文字輸入框 Text inputs
這些是使用者介面的基本構建元素。 元件庫的每個部分都會分解成獨立的元件，我們應該如何使用它以及加上不同的變化。
例如，這是Sainsbury’s Luna設計系統中的按鈕頁面：
使用者將找到不同的按鈕樣式的用法和視覺的規範。 在頁面的下方，他們還將找到使用元件的規範，以及使用方法。
設計模式庫
設計模式庫是一些設計元件的組合。 它們可以幫助使用者在網站或應用程式上快速地執行特定任務或是版面設計工作。
這種設計模式可能會彙集以下元件：
- 標籤 Labels
- 文字輸入 Text inputs
- 複選框 Checkboxes
- 下拉式選單 Dropdowns
- 按鈕 Buttons
- 麵包屑導覽 Breadcrumbs
- 進度條 Progress bars
- 錯誤資訊 Error messages
例如我們在頁面設計上如何處理表單介面，可以參考 VMware 的 Clarity設計系統，會是一個很好的例子：
您不僅會找到用於建立設計模式的樣式和元件的視覺描述。 你會發現如何展示它的該做和不該做，甚至乎連版面的可共容性設計規範等，一切都被覆蓋了。
附加資訊
一些設計系統除了包含以上的基礎元素外， 還會加入更多其他資訊。 例如：
- 程式碼片段 Code snippets
- 內容指南 Content guidelines
- 模板、使用者介面套件和外掛等資源
設計系統所包含的內容完全取決於您和您的團隊的受益效能，如果有一些東西可以讓您更輕鬆地更有效地設計使用者介面，那麼就可能值得將那些元件建立在您的設計系統中。
設計系統示例
設計系統有時候除了讓整個團隊中可以有效地使用外， 亦可能分共享出外，這是因為使用設計系統的不僅僅是網頁設計師和開發人員，有可能會是其他合作夥伴。
雖然許多公司選擇將其設計系統保密，但一些大型組織選擇線上釋出它們。 因此，我們有很多實時設計系統示例可以參考。
例如：
Workbench 是Gusto的設計系統：
Pajamas 是Gitlab的設計系統：
Backpack 是Skyscanner的設計系統：
Crayons 是Freshworks的設計系統：
這是 Atlassian 設計系統：
這是全球資訊網聯盟的設計系統：
設計系統的好處
為您的組織建立一個設計系統有很多好處：
- 效率: 設計精良的風格和可重複使用的元件和圖案使設計師的工作變得更容易、更快。
- 品質: 在設計和更新內容時減少錯誤和不一致。
- 清晰度: 建立統一的視覺語言，以便每個人（包括新員工）都知道如何將品牌願景轉化為視覺介面。
- 有效性: 每一個細節都是事先經過深思熟慮的規範，因此您不必再花時間在無數次會議上獲得每個人的認同。
- 自動化: 當設計系統與Figma等工具同步時，每個UI的更新都可以在整個產品上進行推送更新，達致一致。
- 可擴充套件性: 可以更快地擴充套件，創造更好的產品，併為使用者提供風格一致的出色體驗。
- 統一: 為您的每個數字產品和渠道的使用者構建連貫、一致和高質量的體驗。
由於設計系統有效地展示了設計產品使用者介面的所有設計規範，大大減少設計師、開發人員和使用者之間的分歧，因此大家將有更多的時間專注於更重要的事項——例如處理複雜的任務和完善使用者體驗。
你什麼時候需要一個設計系統？
我們應該問的是，你什麼時候不應該使用設計系統。 雖然建立設計系統有很多理由，但有時這種費力的任務的回報太小。
例如，如果您正在為個人專案、小企業或企業家建立一個網站，您可能不需要設計系統。
要弄清楚這一點，您需要考慮您需要多少頁，以及業務和網站的增長潛力。 如果隨著時間的推移，網站的大小和範圍或多或少保持相同，那麼設計系統可能就沒有必要了。
如果你獨自工作，你可能也不會發現設計系統的用處。 設計系統是彌合網頁設計和開發之間差距的好方法。 它們還有助於為數字團隊（包括營銷人員、作家和其他非設計師）提供單一的真理來源。
另一件需要考慮的事情是預算。 如果您的客戶沒有為您提供大量資金來構建網站或應用程式，那麼設計系統可能過於昂貴和耗時。 然而，這並不意味著隨著他們的需求和預算的變化，你不需要向他們推銷。
結論
上述設計系統簡介涵蓋了開始使用設計系統所需的所有基礎知識。
總之，設計系統不僅僅是您在設計數字產品時使用的視覺元件庫。 這是一個詳細說明品牌視覺語言的框架，並提供如何使用它的規則和指南。
如果您正在構建大型且可擴充套件的網站和應用程式，如今設計系統是必須的。
