Dropdown Menu｜下拉選單

60 秒決策

先確認使用者要完成的事。

適合使用

指令適合在某個工具列按鈕下方按需展開，並且有共同任務脈絡。
需要描述的是一組操作清單的視覺呈現，而非要在欄位裡選一個值。

不適合使用

需求只說「下拉選單」卻沒有交代要選資料還是執行命令。
選單內容其實是網站導覽目的地、複雜設定或過多巢狀層級。

畫面要說清楚的事

不要只交代外觀，也要交代資料與輸入規則。

先把「Dropdown」翻成任務

它可能是 Menu，也可能是 Select；要在 Prompt 裡明說項目是指令或資料。

從觸發元件附近展開

選單和「新增」按鈕靠近，讓人知道這些建立方式屬於同一件事。

少量分組就好

如果項目越長越多，先整理資訊架構，不要把它做成無止盡的下拉清單。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

收合

工具列保持可掃讀，只有需要時才展開較少用的建立方式。

展開

每個指令都有可理解名稱，鍵盤焦點落在可執行項目上。

執行後

執行成功、失敗或轉到下一步都要有回饋，不能讓選單安靜消失。

操作 Demo

先知道要觀察什麼，再動手操作。

操作前先知道

報表工具列的新增方式
先觀察：「新增」不是資料欄位；它展開的是建立報表的三種行動。
操作：開啟選單，用方向鍵到「從範本建立」，按 Enter。
預期結果：畫面指出將從範本建立報表，選單關閉並把焦點回到「新增」。

可操作 Demo

「Dropdown」先說清楚是命令選單，才不會誤做成 Select。

LumenDesk／行銷網站改版

任務資料列的指令，不能假裝成狀態選項。

專案內有 12 筆任務

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的報表工具列建立「新增」Dropdown Menu，項目為「建立報表」、「從範本建立」、「匯入資料」。觸發按鈕與展開清單的位置要清楚關聯，開啟後焦點可進入第一個指令；用方向鍵移動、Enter 執行、Esc 關閉。不要把任何選項當成表單資料值，也不要只做 hover 才會出現的選單。

驗收清單

不要只確認欄位能不能點。

「Dropdown」是否被明確定義為命令選單，而不是模糊名稱？
觸發按鈕是否說明這組動作的共同目的？
選單是否和觸發位置貼近，且展開方向不會遮住必要內容？
是否可用鍵盤開啟、移動、執行與關閉？
項目是否太多、太深或混入了表單資料與網站導覽？