安安～我是ChiYu～
昨天把工作區設定整理完後，我回到專案列表處理任務。內容切換終於不再全部交給 Tabs，最後一欄卻只剩一顆三點按鈕。
昨天結尾先停在這個錯誤現場。這張圖是依照第一版問題重建的畫面，不含真實資料：
圖 1：和昨天結尾是同一張畫面。「進行中」會保存狀態，「編輯」與「刪除」則會立刻執行命令。
三點按鈕展開後依序出現：
「進行中、編輯、刪除。」
畫面很整齊，行為卻像一道突襲測驗。
選「進行中」會保存任務狀態；選「編輯」應該打開編輯介面；選「刪除」則可能讓整筆資料消失。三個項目排在同一份清單裡，使用者按下 Enter 前，還得先猜這次是在填欄位，還是在下命令。
問題來自原始需求：
「在資料表每一列加一個下拉選單，讓使用者選擇編輯、刪除和狀態。」
「下拉選單」四個字一次包辦資料選擇、列操作和危險命令，AI 當然會照著排成一列。Vibe Coding 時，元件名稱講得越模糊，行為就越容易由 AI 自由發揮。
今天先把資料值和命令分家。狀態交給 Select 保存；編輯、複製與刪除則依使用時機，放進 Menu Button、Dropdown Menu、Context Menu、Overflow Menu 或 Command Palette。
在 Menu、Select 與 Command Palette 完整比較頁裡，可以先看到「選一個值」和「執行一件事」放在同一個工作區時，操作結果到底差在哪裡。
圖 2：Menu、Select 與 Command Palette 都可能展開一列文字；按下項目後，有的保存資料，有的立刻執行命令。
外觀都是一張浮動清單，不能代表它們能互相代班。這篇真正要追的是操作後果。
原始實驗保留的 Prompt 就是這一句：
在資料表每一列加一個下拉選單，讓使用者選擇編輯、刪除和狀態。
實驗最早在 2026 年 7 月 24 日使用 Codex Desktop 進行。當時只保存需求缺口，沒有留下第一張畫面，因此我沒有把別的截圖拿來冒充原始模型結果。
為了讓問題還能被看見，我在 2026 年 7 月 27 日用當日 GPT-5 系列模型重跑一次。截圖前沒有說明資料值與命令的差別，也沒有補上危險操作的確認規則。
圖 3：第一版把進行中、編輯與刪除排在同一份選項裡，畫面沒有交代每個項目按下後會留下資料，還是直接執行工作。
第一版完整照著文字做了。問題也完整留下來了。
「進行中」是任務的資料值，可以被篩選、保存，再顯示成目前狀態；「刪除」是會造成後果的命令。相同控制項同時承諾兩種行為，使用者無法從外觀預測 Enter 之後會發生什麼。
我的判斷很明確：狀態篩選使用 Select；資料列的次級命令交給 Overflow Menu；和目前物件有關的操作可以從 Context Menu 開啟，但一定要保留右鍵以外的可見入口；高頻、跨區域工作才放進 Command Palette。
遇到「下拉選單」需求時，我會先問一個很硬的問題：使用者選完項目，系統裡會留下一個目前值嗎？
如果答案是會，例如任務狀態、成員角色或篩選條件，那是資料選擇。原生 <select> 有目前值，可以和欄位名稱關聯，也能隨表單提交，很適合「待處理、進行中、已完成」這類內容。MDN：<select>
如果按下後會開始匯出、開啟編輯或刪除資料，那是命令。命令名稱最好用動詞開頭，例如「匯出 CSV」「建立分享連結」「刪除任務」，讓使用者在按下去以前就知道會發生什麼。
再往下，才輪到命令從哪裡被找到：
| 使用者當下正在做什麼 | 適合的入口 | 我的分工 |
|---|---|---|
| 第一次使用後台，從看得見的操作開始 | Menu Button／清楚命名的 Dropdown Menu | 按鈕先交代這組命令的目的，例如「匯出」。 |
| 正在處理某一筆任務 | Overflow Menu／Context Menu | 命令貼著目前物件，不用跑到全站工具列找。 |
| 每天反覆使用同一套功能 | Command Palette | 用鍵盤搜尋跨區域命令，但仍保留可見入口。 |
| 正在設定篩選條件 | Select | 「進行中」是會留下來的資料值，不是命令。 |
這張選型地圖把操作結果與命令範圍放在一起：
圖 4：先分資料值與命令，再判斷命令屬於明確目的、目前物件、次級操作，還是高頻跨區域工作。
讀者不用把五個 Menu 名稱背成一排。先確認按下後的結果，再看命令最接近哪個工作情境，元件通常就不會差太遠。
Menu Button 元件頁使用一顆寫著「匯出」的按鈕。使用者在打開選單以前，就知道裡面是一組和匯出有關的命令。
圖 5：「匯出」先交代命令目的，打開後才列出 CSV、PDF 等操作。
W3C 將 Menu Button 定義為會開啟 Menu 的 Button。Enter 或 Space 可以打開選單，焦點接著進入第一個項目；按 Esc 關閉後，再回到原本按鈕。按鈕、展開狀態、焦點與選單得一起工作，不是多畫一顆向下箭頭就算完成。W3C WAI：Menu Button Pattern
CSV、PDF 和建立分享連結在這裡都是一次性命令。使用者按下就開始工作，不會留下「目前選取 CSV」作為表單值。若產品真的要保存預設匯出格式，那是另一個設定欄位，不要順手混進來。
Dropdown Menu 元件頁示範一張從觸發按鈕下方展開的清單。問題是，Dropdown 只描述外觀和展開方向。
圖 6：Dropdown Menu 會從按鈕附近展開；需求仍要補上裡面是命令、導覽，還是資料選項。
「幫我做一個 Dropdown」幾乎等於只告訴 AI 盒子要怎麼出現。裡面可能是導覽連結、表單選項，也可能是一組命令，三種內容的語意和鍵盤操作都不同。
我會把需求改成：「這是一組立即執行的報表命令，包含匯出 CSV、匯出 PDF 和建立分享連結，不會寫回表單欄位。」多說這一句，AI 就不用從外觀反推功能。
Context Menu 元件頁把命令綁在目前任務。對「完成活動頁的無障礙檢查」這筆資料，可以指派負責人、移至封存或複製連結；換到另一種物件，選單內容也可能不同。
圖 7：右鍵與可見的「管理此任務」都能開啟相同操作，不用先知道祕密手勢。
瀏覽器的 contextmenu 事件通常由右鍵或 Context Menu 鍵觸發，但不同環境的相容性並不完全一致；觸控裝置與不知道右鍵功能的人，也不會自然發現這條路。MDN：contextmenu event
所以我保留兩種入口：可以對任務列按右鍵，也可以按畫面上看得見的「管理此任務」。在 Windows 與這次 Demo 裡，鍵盤使用者聚焦任務列後還能用 Shift + F10 開啟；W3C 也把它列為 Windows 常見的 Context Menu 命令，不是每個作業系統與觸控裝置都會照這套演。W3C WAI：Menu and Menubar Pattern
多一個可見按鈕，換來的是功能真的找得到。其他平台就算沒有 Shift + F10，使用者仍有一條不靠祕密手勢的路。
資料表每列若同時排出編輯、複製、封存與刪除，很快就會長成按鈕展示牆。Overflow Menu 元件頁把這些次級操作收進三點按鈕，手機上也保留完整文字。
圖 8：三點按鈕展開後仍顯示完整命令；刪除使用 Danger token，但不讓整列永遠紅通通。
三點圖示本身沒有說明功能，規格裡要補上 accessible name，例如「更多操作」。畫面仍可使用三點，鍵盤與輔助科技則會知道這是一顆能打開列操作的按鈕。
刪除也不用一開始就在資料列上放一顆巨大紅色按鈕。我的做法是在 Overflow Menu 裡用 Danger token 標示「刪除任務」；使用者真的點下去後，再顯示包含任務名稱的確認區，並提供取消。紅色有出現，卻不會從頁面載入那一刻就對每筆資料虎視眈眈。
當命令很多，而且使用者每天反覆操作時，Command Palette 元件頁提供一個可搜尋的入口。建立任務、切換看板檢視與邀請成員，可以用 Ctrl／Cmd + K 後直接輸入名稱。
圖 9：面板打開後焦點進入搜尋框，結果列出可執行命令，不是拿來保存的資料選項。
VS Code 的 Command Palette 是很清楚的參考：同一個互動視窗可以執行命令、開啟檔案或搜尋符號。這是產品層級的互動模式，並不是 HTML 或 ARIA 裡一顆裝上就完成的原生元件。Visual Studio Code：Command Palette
因此，規格得自己補上完整行為。這個 Demo 選擇「有名稱的 Dialog＋搜尋輸入框＋單選 Listbox」：開啟後焦點放進搜尋框，結果數量由狀態訊息回報，方向鍵移動目前命令，Enter 執行，Esc 關閉後把焦點還給原本位置。搜尋不到時，保留查詢文字並顯示「找不到相符命令」，別讓空白面板看起來像搜尋功能剛好請假。W3C WAI：Listbox Pattern
Listbox 是這次的實作選擇，不是所有 Command Palette 的唯一結構。若結果裡塞了按鈕、勾選框或其他可互動元件，就不能再假裝每列只是單純 Option；規格得改用能容納那些互動的模式。
我先從畫面上的「開啟命令面板」按鈕進入，沒有假設每個人都記得 Ctrl／Cmd + K。面板開啟後，焦點直接落在搜尋框；輸入「邀請」，結果數量顯示 1。按下 Enter 後，面板關閉，原頁回報「已執行示範命令：『邀請成員』」。
這次操作讓我保留三個判斷：
畫面上只剩一筆結果，不代表輔助科技一定只會讀到一筆。結果集合與目前命令仍需要正式螢幕閱讀器實聽，這項限制先留到後面的驗收結果再交代。
第一版沒有少做清單，問題出在同一張清單同時扛了資料值與命令。我重新寫 Prompt 時，把操作結果、使用位置、鍵盤行為和刪除確認都補進去：
在 LumenDesk 的任務資料表設計選擇與命令操作，請明確區分資料值和指令。
1. 狀態篩選使用 Select，選項為全部、待處理、進行中、已完成。選取後更新篩選結果與目前值；它不是列操作選單。
2. 每筆任務的次級操作使用 Overflow Menu。三點圖示按鈕要有 accessible name「更多操作」，選單項目為「編輯任務」、「複製連結」、「刪除任務」。Enter、Space 或向下方向鍵可開啟，方向鍵移動項目，Esc 關閉並回到三點按鈕。
3. 「刪除任務」使用 Danger token，但只在選單內與確認區出現。點擊後顯示「要刪除『完成活動頁的無障礙檢查』嗎？」並提供取消與確認刪除。沒有確認前不可刪除。
4. 對任務列提供 Context Menu：右鍵可以開啟；Windows 版另外支援 Shift + F10。同時保留可見的「管理此任務」按鈕，讓其他平台、觸控裝置與不知道快捷鍵的人也能進入。
5. 加入 Command Palette。Ctrl／Cmd + K 和「開啟命令面板」按鈕都可開啟有名稱的 Dialog；焦點先進有 Label 的搜尋框，可搜尋建立任務、切換看板檢視、邀請成員。結果使用單選 Listbox，顯示並宣告結果數量與目前 Option；方向鍵移動目前命令、Enter 執行、Esc 關閉並回到開啟位置。零結果時保留查詢字串並顯示「找不到相符命令」。
360px 手機版：整頁不可水平溢出；三點按鈕的選單項目要保留完整文字，不能只剩圖示或只靠右鍵入口。
這份 Prompt 沒有規定三點要橫著還是直著。使用者按下去之後會發生什麼，遠比三點的站姿重要。
我用五條路驗收改寫後的版本：
| 路徑 | 實際操作 | 必須看見的結果 |
|---|---|---|
| 新手路徑 | 用 Enter 或向下方向鍵打開「匯出」Menu Button，再按 Esc。 | 選單可讀、方向鍵可移動，焦點回到原按鈕。 |
| 目前物件路徑 | 在 Windows 對任務列按 Shift + F10；再從該列的 Overflow Menu 選擇刪除。 | 不用滑鼠右鍵也能開啟 Context Menu；刪除確認區顯示正確任務名稱與取消按鈕。 |
| 熟手路徑 | 按 Ctrl／Cmd + K 搜尋「邀請」，接著搜尋不存在的命令。 | Enter 可執行可讀結果；零結果有訊息，Esc 能離開。 |
| 資料值路徑 | 在狀態 Select 選「進行中」。 | 只更新篩選值，不執行列操作。 |
| 窄螢幕路徑 | 在 360px 開啟三點選單與 Command Palette。 | 完整文字可讀，整頁沒有水平捲軸。 |
實際操作後，Menu Button 可以用方向鍵移動；Windows 測試中的 Context Menu 能以 Shift + F10 開啟，按 Esc 後回到可見入口；Overflow Menu 選刪除時，會先顯示任務名稱與取消；Command Palette 輸入「邀請」後只剩一個命令，Enter 執行並回報結果。狀態 Select 則只更新篩選值，沒有再把「進行中」和「刪除」當成同一類選項。
這些項目在目前操作流程中通過。仍未驗證的是正式螢幕閱讀器實聽結果集合與目前命令，以及 200% 縮放。它們不能因為畫面有 ARIA 屬性、寬度看起來足夠，就直接補上一個通過。
現在，狀態 Select 只保存篩選值；編輯與刪除進入 Overflow Menu；跟著任務走的命令可以從 Context Menu 開啟，也保留可見入口；跨區域的高頻工作才進 Command Palette。危險操作不再混進一般選項，三種使用者也各自有找得到命令的路。
我接著用 Command Palette 打開「檢視專案結構」。畫面出現箭頭和縮排，展開「設計系統」後，有時看到的是子專案，有時卻只是同一列的備註。
下面這張圖，是我依照第一版問題在網站上重建的錯誤現場，不含真實資料：
圖 10：設計系統組展開後有三個「孩子」，其中只有元件盤點計畫是真正的子專案；備註與附件只是同一筆資料的明細。
箭頭沒有壞，縮排也很整齊。麻煩在於畫面把三種不同關係都算成下一層，使用者只能讀完文字後，自己判斷眼前的是子專案、備註還是附件。
明天就來拆開 Tree View、Nested List、Treegrid 與 Expandable Row，看看展開後出現的到底是孩子，還是原本那筆資料的更多明細。
<select> HTML element
contextmenu event
資料查閱：2026-08-07。
iThome鐵人賽
看影片追技術