目錄
一、定義
二、設計體系
2.1?Design system
2.2 風格指南
2.3?Component
三、樣式庫
一、定義
設計體系（Design system）：可共享的設計語言的基礎合集，包含了設計價值，語義，語法和上下文。
風格指南（Style guide）：包含一個設計體系的樣式，組件，實例和原則的物理或數字文檔，并解釋如何使用。
樣式庫（Pattern library）：有組織的一組可復用的組件，通常會包含代碼實例，設計指南和用例。
組件（Component）：一個獨立且可復用的樣式，代表了一個特定界面或功能。
二、設計體系
2.1?Design system
Design system是一種可重用的設計規范和組件庫，可幫助設計師和開發人員在一致的視覺和交互模式下構建高質量的數字產品。它是一套設計、開發、文檔和管理工具的集合，可以為跨團隊和項目提供一致的品牌體驗和用戶體驗。它通常包括設計原則、顏色、字體、排版、圖標、組件、模板、樣式指南、交互模式和代碼庫等內容。通過使用設計系統，團隊可以更快地構建產品，減少設計錯誤，提高一致性和可維護性，并節省時間和資源。
設計體系是團隊中共享的語言，而語言的核心是保證系統的交流順暢。編程語言使人們可以和計算機進行交流，平時說的語言可以讓人們與講同樣語言的任何人溝通。而設計語言為你團隊的設計思想賦予意義，并幫助團隊之間傳達這種意義。當使用一種共享的語言時，交流想法就會統一和具體，從而更容易。
即使當你還沒有建立設計體系的時候，你的團隊也在使用它。想想你是如何傳達設計理念的，某些詞定義了某種界面元素的類型，某些組件應該在外觀和交互上不相同。甚至不需要刻意去將它寫成文檔，你們都有一個關于事情如何工作的共同假設。當然，如果沒有文檔，假設可能并不總是一致。
為了保證你的設計語言更加一致和明確，你的團隊應該創建一個風格指南（Style guide）。
2.2 風格指南
Style guide（樣式指南）是一個文檔，其中包含了一個品牌或產品的視覺和聲音方面的規范和指南。它通常包括標準化的規則和指導方針，用于確保品牌的一致性和統一性，以及為設計和寫作提供支持。樣式指南通常包括設計元素（例如顏色、字體、圖標和圖像）、排版和布局、品牌聲音（例如用語、風格和聲音標識）以及使用指南（例如品牌名稱、標志和其他標識符）。樣式指南的主要目的是確保品牌或產品在所有的渠道和媒體上都保持一致的外觀、感覺和聲音，從而提高品牌知名度和可識別性。
設計指南是設計系統的物理或數字呈現形式，通過參考設計風格指南，團隊成員可以開始掌握定義系統的各個部分和決策。
在網絡出現之前，風格指南主要用于定義書寫和印刷設計的標準和樣式，像AP Stylebook或Chicago Manual of Style這樣的書仍然是寫作者和編輯在大多數主要出版社如何保持一致性和定義最佳實踐的基礎資源。
如今，數字出版商和產品設計團隊建立風格指南來幫助鞏固他們團隊的設計語言。風格指南幫助他們編纂已建立的規范，記錄現有的模式和程序，并使新成員快速跟上進度。
數字設計的風格指南可以包含以下部分或全部：
- 設計原則（Design principles）
- 最佳實踐（Best practices）
- 品牌風格指南（Brand style guide）
- 書寫風格（Writing styles）
- 圖標設計（Iconography）
- 圖像（Imagery）
- 樣式庫（Pattern library）
- 代碼風格指南（Code style guide）
- 模板（Templates）
- 工具（Tools & Utilities）
- 說明文檔（Further documentation）
2.3?Component
Component（組件）是指一個可重復使用的、獨立的、具有特定功能的UI元素。組件通常由HTML、CSS和JavaScript代碼組成，可以通過簡單的調用或復制粘貼來在不同的部分或頁面中使用。組件的使用可以提高開發效率，同時也可以確保界面設計的一致性和可維護性。常見的組件包括按鈕、表單、導航、卡片、對話框等。組件的開發方式可以基于不同的框架或庫，例如React、Angular、Vue等，也可以使用純原生的HTML、CSS和JavaScript進行開發。組件化的開發模式已成為現代Web開發的重要趨勢之一，為Web應用和網站的開發提供了更好的可擴展性和可維護性。
三、樣式庫
正如上面看到的，樣式庫只是組成風格指南的一部分。它們可能在內容和使用方面構成了風格指南中最大的一部分，但不能代替整個風格指南。
在構建樣式庫時，你應該為添加的每個模式考慮以下問題:
- 模式名稱：
- 視覺表現：
- 設計元素
- 代碼示例
- 變形
- 用例
- 注意事項
- 相關元素
)
