目錄：
什麼是元件
那些看過但叫不出來的
-分頁 Pagination 、Control、Carousel
-開關 Toggle 、Switch
-徽章、標籤 Badge、Tag、Chip
那些很混肴的元件
-彈跳視窗Dialog、Popup、Modal、Popover
-Action sheet、Bottom sheet、Alert
-標籤分頁Tab、Segment
-提示 Tooltip、Snack bar、Notification、Banner
那些熟悉的元件其實有很多名字
-下拉式選單Dropdown、Droplist、Selector、Picker
-日曆Calendar、Date picker
-進度條 Progress bar 、Wizard、Stepper
-主選單Drawer、Hamburger、Menu、navigation
-6個設計系統元件
什麼是元件？
元件是在做UI畫面時，組合每一個「零件」完成一個畫面的意思。就像包包是由外皮、背帶、拉鍊、扣環等元素組成，這些畫面零件該怎麼使用、在哪裡使用是新手該打的基礎功。
元件又可能因為不同角色說法被叫「Component、Element、Symbol」。每一個國家，甚至每一個公司都可能在表達元件的種類時用了不同的名稱。
剛接觸UI設計的時期，在跟其他人員(像是PM、工程師)溝通時，常常會聽到不同的名詞，有時候還要畫面確認一下彼此說的是不是相同。到現在我還是不知道為什麼不統一這些說法，不過也因為漸漸熟悉這些名詞才能可以順暢的跟PM或是工程師溝通。
趁機會將不同家的 Guideline 整理出經常使用的元件，以及可能會被稱呼的名稱，讓你在聽到這些名詞時能知道對方在說什麼！
小提醒🔔有時候他們也不一定說的跟想的是一樣的，還是要彼此確認過才不會出包呦！
一、那些看過但叫不出來的元件
分頁 Pagination 、Control、Carousel
他們是功能相似的。
有數字分頁的可以叫Pagination，輪播出現的點點也可以用control找到相關案例（畢竟找「點點」可能找不太到😂）
近期流行的限動模擬切換可以用 Carousel 找到相關案例。
開關 Toggle 、Switch
開關是調整狀態的元件，用來控制兩個狀態 — 想想 On/Off 或 True/False。
你可以使用開關來：
- 打開或關閉單個項目
- 立即啟動或停用某物
如果一組中的每個項目都可以獨立控制，則應使用開關而不是單選按鈕(radio)。
徽章、標籤 Badge、Tag、Chip
Badge
徽章用於指示通知、項目計數或與導航目的地相關的其他資訊。它們通常被放置在icon或是其他組件附近。
Chip
Chips允許用戶輸入、進行選擇、過濾內容或觸發操作。
Chips和Button的相似之處在於它們都提供視覺提示來提示用戶採取行動和做出選擇。雖然按鈕應該始終如一地出現並帶有熟悉的號召性用語，但Chips應該動態地顯示為一組多個交互元素。
但是，需要注意一些重要的區別：多個Chip應出現在一組中、可以水平滾動，而單個排列中的按鈕不應超過 3 個。
Chip是動態的和上下文相關的，而按鈕是靜態的和預先確定的。Chip應該根據內容的性質提供不同的操作，而Button應該是在排版上有固定位置。
從用戶流程的角度來看，Chip代表體驗中的分叉路徑，而Button代表流程中的線性步驟。
Tag
可以作為標記分類的小標籤，顯示跟內容相關的類別、維度或屬性。
二、那些很混肴的元件
彈跳視窗Dialog、Popup、Modal、Popover
Dialog(android)
Diaglog是出現在內容前面的模態窗口，用於提供關鍵資訊或要求做出決定。對話框在出現時會禁用其他功能，並一直保留在屏幕上，直到確認、關閉或採取所需的操作。
Dialog是刻意阻斷操作的，因此要謹慎使用。
一種破壞性較小的替代方法是使用類似menu的選單，它提供的選項不會中斷用戶的體驗。
Modal(ios)
以模態方式呈現內容可以：
確保人們收到關鍵信息，並在必要時採取行動
提供選項讓人們確認或修改他們最近的操作
幫助人們執行一項獨特的、範圍狹窄的任務，而不會忘記他們之前的主要任務
給人們身臨其境的體驗或幫助他們專注於一項複雜的任務
Popover
彈出窗口是一種瞬時視圖，當人們單擊或點擊控件或交互區域時，它會出現在屏幕上其他內容的上方。
Action sheet、Bottom sheet、Alert
Bottom sheet
底部工作表在螢幕上顯示補充內容和操作。
是一個多功能組件，可以包含各種訊息和排版，包括menu（列表或網格佈局）、操作和補充內容。
Alert
Alert可以告訴人們一個問題，在他們的行為可能會破壞原本狀態時警告他們，並讓他們有機會確認購買或他們發起的其他重要行為。
標籤分頁Tab、Segment
Tab
Tab用來切換同一層次結構級別的相關內容組，使用選項卡對相關內容進行分組，而不是順序內容。
Segment
分段按鈕可幫助人們選擇選項、切換視圖或對元素進行排序。
使用 Segement 提供切換狀態或視圖的選擇。例如， Segement 可以幫助人們在工具欄中的視圖之間切換。
應避免使用 Segement 來提供操作，例如添加、刪除或編輯內容。
通常保持每個項目大小一致，當所有的寬度相等時會比較感覺平衡。在可能的範圍內，最好也使icon和標題寬度保持一致。
提示 Tooltip、Snack bar、Notification、Banner
Snackbar
Snackbar 通知用戶已經執行或將要執行的過程。它們暫時出現在屏幕底部。它們不應打斷用戶體驗，Snackbars 傳達的消息干擾最少，不需要用戶操作。
一個 snackbar 可以包含一個動作。“返回”或“取消”操作是可接受的。
Tooltip
Tooltip 為 UI 元素提供詳細的內容或補充說明。
適合用於標記沒有文本的 UI 元素，例如純圖標按鈕和字段。
它們可以選擇包含副標題、按鈕和超鏈接。適用於較長的文本，例如定義或解釋。
三、那些熟悉的元件其實有很多名字
下拉式選單Dropdown、Droplist、Selector、Picker
彈出一個下拉式選單給使用者選擇操作。
當選項少時（少於5 項），建議直接將選項平鋪，使用Radio是更好的選擇。
如果你在尋找一個可輸可選的輸入框，那你可能需要Autocomplete。
日曆Calendar、Date picker
當使用者需要輸入日期，可以點選標準輸入框，彈出日期面板進行選擇
進度條 Progress bar 、Wizard、Stepper
主選單Drawer、Hamburger、Menu、Navigation
Drawer
導航抽屜(Drawer)提供對頁面和App的入口，例如切換帳戶。它們可以永久顯示在屏幕上，也可以通過導航icon打開和關閉。
導航抽屜推薦用於：
- 具有 5 個或更多主要頁面的產品
- 具有 2 層或更多級導航層次結構的產品
- 在不相關的頁面之間快速連接
- 替代電腦版上的導航欄
避免將導航抽屜與其他主要導航組件（例如導航欄）一起使用。
相反，根據產品要求和設備尺寸選擇單個導航組件：
- 小屏幕的導航欄
- 平板電腦屏幕的導航欄
- 桌面屏幕的標準導航抽屜
會議聽不懂不敢說或是誤會別人說的意思就糗大了！
展現UIUX設計師的專業感，就是用專有名詞跟工程師去溝通，不知道怎麼找參考資料的時候，就打開這個元件錦囊查看看吧！
6個設計系統文件
Kiwi
https://orbit.kiwi/components/
Atlassian
https://atlassian.design/components
Polaris
https://polaris.shopify.com/components
Material
https://m3.material.io/components
Apple Human-interface-guidelines https://developer.apple.com/design/human-interface-guidelines
Ant Design
https://ant.design/components/
文章內容多取自於這6個設計系統，在整理的過程當中，一直翻大公司做出來的設計系統，也重新學習到了很多！
— 本文在 2023.09 由 Una 整理
Una | 3U Design
UI/UX・自我成長 • 設計師的自我管理學
📰 每天一個 UIUX 小測驗
📖 每雙週一晚上8~9點起看書
👩🏻💻 一對一諮詢：前30分鐘免費，一個月限定 3 名
💌 每個月一封U報：一些IG看不到的秘辛
⏰ 成為更好的設計師：2023年度計畫覆盤
Read More : https://3udesign.website/
Follow Me : https://www.instagram.com/3u_design/
