《設計師與工程師之間的橋樑：善用 The Component Gallery 提升跨部門溝通》
設計師與工程師溝通的挑戰
在 UI 設計師的日常工作中，經常會遇到同一種元件在不同平台上有不同名稱的情況，例如：Dropdown vs Select、Modal vs Dialog。這不僅容易造成設計規範的混亂，也可能在與工程師溝通時延長討論時間，甚至引發理解落差。
為了解決這個問題，我們可以善用『 The Component Gallery 』。這個網站收錄了多種系統的 Design System，不僅能直接選擇特定系統的元件資料，也可以針對特定元件進行搜尋。透過這個工具，設計師與工程師能更快找到共通語言，建立一致的設計規範，提升跨部門溝通效率，讓設計師與工程師之間溝通的橋樑更穩固。
為什麼建立共同語言這麼重要呢？
與專案團隊溝通，無論是設計師與工程師、或是我們與客戶討論元件時，是不是常常會對元件的命名有認知上的差異呢？舉例，當我們要討論彈窗樣式時，有的人說：「是dialog ! 」，有的人説是「modal！」，也有的人説是「popup ! 」，如果沒有共通語言，很容易造成討論方向不一致，甚至浪費時間反覆確認。
容易造成誤會的元件舉例
Dropdown / Select
在某些系統裡是「Dropdown」，在另一些系統裡可能叫「Select」。
討論時如果沒有先釐清，很容易有人以為在講「下拉選單」，有人卻以為是「表單輸入選擇器」。
Modal / Dialog / Popup
都是「彈出式視窗」，但不同系統、不同團隊的叫法各異。
有些工程師習慣說「Dialog」，設計師可能叫「Modal」，而 PM 又可能說「Popup」，結果三個人講的是同一個元件。
Tabs / Segmented Control
「Tabs」通常指的是頁籤切換，但在行動端（特別是 iOS）有時會用「Segmented Control」指類似的功能。
如果專案同時有桌面版與行動版，就可能在溝通上出現誤解。
Snackbar / Toast / Notification
有些設計系統叫「Snackbar」，有些叫「Toast」，而有些乾脆用「Notification」。
雖然功能相似（短暫提示），但出現位置、互動方式、停留時間會有細微差異。
Table / Data Grid
有些設計系統直接叫「Table」，但工程團隊可能更傾向叫「Data Grid」。
若沒有明確界定，可能會誤以為只是靜態表格，但實際上功能上可能包含篩選、排序、分頁等互動。
Checkbox / Switch / Toggle
有些前端框架（例如早期版本的 React、Vue 或 Ant Design）可能沒有提供 Switch 元件，只有 Checkbox。工程師就會直接套用 Checkbox，然後改造樣式，達到 Switch 的外觀與行為。
底層邏輯與互動都是「開/關」，只是外觀不同。設計師看到的是 Switch，使用者體驗是 Switch，但程式開發時，Checkbox 經常被用作基底元件，兼顧實作簡單和可存取性。
在專案初期，設計師通常會制定一套專屬的設計規範，目的是維持系統一致性，也為了在與工程師討論時，確保討論的元件是一致的。然而，有時在啟動會議或與客戶討論時，尚未建立專案規範，這時候 The Component Gallery 就能快速提供共通語言，幫助團隊對焦問題、降低誤解，並提供解決方案。
什麼是 The Component Gallery？
一個收錄常見 UI component 的資料庫網站，整理了不同設計系統的範例、命名和使用規範。
我們可以透過這個網站快速找到 UI 的 component，例如：
1. 各種 component (Button, Tabs, Dropdown, Table...)。
2. 不同設計系統的對照範例 (Atlassian, Bootstrap, Fluent, Polaris...)
3. 命名差異 (Dropdown vs Select, Popup vs Dialog vs Modal, ...)
4. 使用指南 (應用在什麼環境、結構、樣式、互動、可存取建議...)
透過這些資訊，團隊可以依據相同元件庫與命名，減少認知差異，提升跨部門對焦效率。
The Component Gallery能帶來哪些幫助？
The Component Gallery 不僅是一個元件資料庫，它帶來的價值可以分為兩層：
功能層面
-
快速對照不同設計系統的元件名稱與範例，避免命名混亂。
-
提供設計與實作範例，支援日常設計開發。
-
作為 Design System 的補充參考，幫助建立更完整的規範。
效益層面
-
提升溝通效率：減少在命名上或理解上的反覆討論。
-
降低理解落差：讓設計師、工程師甚至是客戶擁有共同語言，依據同一份資料做決策。
-
改善跨部門合作：更快對焦問題、達成共識，縮短產品開發週期，也可以把心力放在解決設計與使用者體驗上。
那我們要怎麼使用 The Component Gallery 呢？
想知道怎麼實際運用這個工具嗎？以下幾個小技巧，可以讓你馬上上手：
快速搜尋元件
在搜尋框輸入關鍵字，例如「Tabs」或「Dropdown」，就能看到不同設計系統中對應名稱與設計範例，立即解決命名爭議。
跨系統對照
左側可以切換不同 Design System（Material Design、Bootstrap、Fluent 等），快速比對相同元件在不同系統的樣式與命名，特別適合跨平台專案。在網站中，每個設計系統會以一張「卡片」呈現，裡面包含了設計師與工程師需要的關鍵資訊。
1 在這裡看會看到 figma, github, storybook..., 代表此設計系統中可能提供不同角色的資源入口，例如figma可讓設計師查看元件的設計稿、變體與使用規範。github則是提供工程師開源的程式碼實作、安裝方式與API文件，方便直接在專案中引用或參考。storybook則是提供元件在瀏覽器上的互動展示，工程師或設計師可以即時看到元件在不同狀態下的樣子（hover、disabled、loading 等），也能快速理解元件的可用屬性與行為。
2 有些設計系統會顯示資料，代表這個元件屬於此公司體系的設計系統。如上圖代表Material Design是Google的設計系統，包含元件規範、命名方式、設計與程式碼。
3 TECH 區塊，說明這個設計系統主要支援的技術以及平台。Mobile 適用於行動裝置，Web Components 提供網頁元件實作，Sass 提供 Sass 樣式資源。
4 FEATURES 區塊，Usage guidelines → 有完整的使用指引。Open source → 開源，任何人都可以使用或改造。Accessibility → 提供無障礙規範。這些資訊幫助團隊快速判斷系統的「成熟度」與「適用場景」。
查看使用指南
除了名稱與樣式，網站還提供互動設計、無障礙建議與使用情境，確保團隊對元件的理解一致。
1 元件名稱（Component Name）表示主要的元件名稱。
2 數量(Amount) 表示在『 The Component Gallery 』這個網站資料庫內的設計系統，收錄有用到Modal或類似Modal元件的數量。
3 別名 / 常見用法（Aliases）在名稱下方用斜體標示：Dialog, Popup, Modal window。這部分非常重要，因為它指出了不同設計系統或不同團隊可能使用的名稱。這就是設計師與工程師常常誤解的地方（有人叫 Dialog，有人叫 Popup）。
4 簡短說明（Description）提供這個元件的核心定義。
建立專案共用規範
在專案初期整理常用元件形成「命名與範例對照表」，可在 kick-off 或需求會議時直接使用，幫助團隊快速對焦、減少誤解。
總結
The Component Gallery 不只是 UI 元件資料庫，更是一座設計與工程之間的橋樑。善用這個工具，設計師與工程師可以快速建立共通語言，統一設計規範，讓跨部門協作更高效、產品開發更順暢。
資源連結：
