設計系統：它是什麼、為什麼以及如何創建它

設計系統的主題似乎已經從各個方面得到了考慮：您可以找到許多關於設計系統的文章、貼文、報告和其他資料 創建設計系統。儘管如此，每個遇到這個術語的人都會有很多疑問。我們將嘗試詳細回答主要問題：

• 什麼是設計系統？
• 這是什麼呢？

什麼是設計系統？

設計系統是一個包含視覺化元件、程式碼庫和使用指南的結構。

通常，新手設計師會犯這樣的錯誤：將設計系統視為只是一個 UI 套件（包含圖形介面元素、版式和顏色的文件），從而簡化了概念。

設計系統由三個層次組成：

A 使用者介面套件 是為其創建設計系統的產品的視覺語言。這些是顏色、字體、圖示、按鈕、項目符號、切換開關、滑桿、圖像、動畫。這些元素各不相同，取決於數位產品的具體情況。所有這些都有助於創建用戶互動的介面的可見部分。

該框架是為每個元素編寫的程式碼庫，以及動畫、標籤和導航標籤的插件。

方針 是一組範本和規則，用於使用組織工作流程的元素。由於有了指導方針，設計人員不再參與簡單的任務，但開發人員立即參與其中。

例如，指南指定網站上彈出視窗的參數：文字的縮排、標題和正文文字的位置和大小、按鈕的位置以及視窗的外觀更多文字。

設計系統的類型

沒有單一的分類，但專家區分了兩種類型的設計系統—開源和閉源。

在開源系統中，任何公司都可以使用材料並根據自己的專案進行調整——更改按鈕顏色、字體和圖示。例如，在 Ant Design、人機介面指南和 Material Design 系統中。

閉源設計系統通常是為特定公司或產品創建的。這些材料要么是完全封閉的材料，僅供員工訪問，要么是部分開放的。

如何創建設計系統

設計系統的發展是基於原子設計的原理。原子設計是一種包含五個層次的設計元素的技術：原子、分子、有機體、圖案和頁面。

設計系統結構：

• 原子 是最小的元件：按鈕、圖示、輸入欄位和字體。
• 分子 是幾個簡單元素的組合：兩個按鈕、一個標題和一個輸入行、一個通知欄、一個複選框和一個文字。
• 生物 是完整的元件：網站標題、授權表單、產品卡和通知橫幅。
• 模板 – 沒有內容的頁面佈局：選單、網站外觀。
• 網頁 是充滿內容的頁面。

一般演算法如下所示：

• 選擇顏色和字體，設定模組化網格，然後選擇動畫、圖像和聲音。
• 建立基本的介面元素。
• 設計元素組合和佈局。
• 建立元素清單以及規則。在指南中，指定元素是什麼、它在哪裡使用以及它解決什麼任務。

通常，設計系統不是從頭開始創建的，而是基於已經開發的材料構建的：UI 套件、指南或品牌手冊。

為什麼需要設計系統？

與每個 IT 產品一樣，回答「設計系統的用途是什麼？」這個問題至關重要。或者，正如店裡的一些同事所說，「那又怎樣」？

這個問題的答案將幫助您了解產品的價值。從我們上面的描述已經可以看出一部分了。但讓我們把它分解並更深入地研究一下。

自動化

自動化提供了最明顯的好處。設計系統將幫助您實現營運自動化，從而騰出時間來處理其他職責。

迭代性

能夠繼承並自動應用設計系統元素的修改對於產品團隊來說是一個有價值的工具。您可以在一個位置快速進行裝飾性甚至重大更改。透過這種方式，您始終可以增強產品。

一致性

一致性是指產品中執行相同功能的物件和實體應以統一和相似為目標。

當我們在產品中使用類似功能時，它們會變得熟悉和方便：我們本能地了解按鈕的工作原理和外觀，以及它的位置。

我們希望每個人都能從這篇文章中學到一些有價值的東西。我們再次相信，撰寫文章可以建立知識並激發更多的學習。