你能說明設計系統與元件庫在網頁領域中的差異嗎？

直覺的想法是：

• 🎨 設計系統 - 設計者的東東，定義樣式風格體驗。
• 🧱 元件庫 - 開發者的東東，定義使用者介面組件。

🎨 設計系統包含像是顏色、字體樣式、無障礙規則、文案語氣……等「代表品牌體驗相關的描述」，類似品牌體驗文件。從平面設計端的角度來說類似著重於企業識別系統 (CIS) 中視覺識別 (VI) 的部分。

🧱 元件庫更偏向實踐層面，蒐集現有的使用者介面模式並定義為元件：如何、為什麼、什麼時候應該或不應該去使用該元件。

也就是說，其實並不應該透過某個專業領域去區分它們，而是從概念到落地實踐的程度，我也會和設計者共同溝通維護整體元件庫以確保雙方領域達成共識。

最後，建立這一大堆「文件」有什麼好處？

1. 一致性：統一外觀與產品體驗，使得橫跨領域也能存在共通語言。
2. 減少重複工作：與其每次規劃全新的使用者介面，將介面分散為可復用的元件提高效率。並不是所有產品都應該花時間建構設計系統或元件庫，但當產品找到市場定位進入維護期時，這些基礎建設就相當重要。

想要了解常見的使用者介面模式或設計系統可以參考看看：Component Gallery🔗