下拉選單、選擇欄和組合方塊怎麼選？
一句話做出判斷
下拉選單用來執行動作。選擇欄從固定清單挑一個值。組合方塊還能輸入或搜尋。
要執行動作時，用下拉選單。固定短清單用選擇欄。清單很長或要搜尋時，用組合方塊。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Dropdown & Context Menu — Learning Bundle
↗ 下拉選單與情境選單（教學組合）
這個教學組合依開啟方式比較選單。下拉選單（Dropdown）從控制項開啟；情境選單（Context Menu）屬於某個物件，通常出現在游標旁。這個組合不是單一標準選單術語。
DropdownMenu / ContextMenu「更多」按鈕會開啟一般操作；在檔案上按右鍵，則會開啟只屬於該檔案的操作。
- 什麼時候用
- 請依觸發方式和操作物件選擇正確的選單，接著實作相應的鍵盤操作。
- 什麼時候不要用
- 不要把表單欄位或網站主要導覽放進指令選單。
- 程式裡的名稱
DropdownMenu / ContextMenu
Select
↗ 下拉選單
下拉選單是一個精簡的控制項，會打開固定清單，讓人選一個值。
下拉選單
國家欄位會顯示固定的國家清單，不能輸入清單以外的值。
- 什麼時候用
- 清單固定、長度不多，而且畫面空間有限時，就使用下拉選單。
- 什麼時候不要用
- 清單很長而且需要搜尋時，不要使用下拉選單，請改用組合框。
- 程式裡的名稱
<select> / role="listbox"
Editable Combobox
↗ 可搜尋組合框
可搜尋組合框把文字欄位和清單放在一起，輸入時會篩選選項。
輸入「Tai」後，城市清單只留下 Taipei 和 Tainan，再用方向鍵選擇。
- 什麼時候用
- 清單很長需要搜尋、需要自動完成，或可以輸入自訂答案時，就使用組合框。
- 什麼時候不要用
- 不要把普通選單或原生下拉選單叫做組合框，因為它們的操作方式不同。
- 程式裡的名稱
role="combobox" + aria-controls
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 下拉選單與情境選單（教學組合）Dropdown & Context Menu — Learning Bundle | 請依觸發方式和操作物件選擇正確的選單，接著實作相應的鍵盤操作。 | 不要把表單欄位或網站主要導覽放進指令選單。 | DropdownMenu / ContextMenu |
| 下拉選單Select | 清單固定、長度不多，而且畫面空間有限時，就使用下拉選單。 | 清單很長而且需要搜尋時，不要使用下拉選單，請改用組合框。 | <select> / role="listbox" |
| 可搜尋組合框Editable Combobox | 清單很長需要搜尋、需要自動完成，或可以輸入自訂答案時，就使用組合框。 | 不要把普通選單或原生下拉選單叫做組合框，因為它們的操作方式不同。 | role="combobox" + aria-controls |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 下拉選單與情境選單（教學組合）（Dropdown & Context Menu — Learning Bundle）、下拉選單（Select）、可搜尋組合框（Editable Combobox） 中，為真實使用流程選出最合適的介面模式。判斷規則：下拉選單用來執行動作。選擇欄從固定清單挑一個值。組合方塊還能輸入或搜尋。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。