使用者體驗模式7 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊
指令面板與巢狀導覽:當 Cmd+K 擊敗側邊欄時
命令面板擅長什麼、失敗的地方以及如何與導航一起設計命令面板:搜尋、模糊匹配、快捷方式和可發現性。
直接總結與定義
核心要點
命令面板(通常使用 Cmd+K 或 Ctrl+K 開啟)讓人們可以鍵入他們想要執行的操作,而不是在選單中尋找。對於頻繁使用的用戶來說,它速度更快,並幫助他們發現功能和快捷方式。它不會取代導航:新用戶仍然需要可見的結構來了解存在的內容。最好的產品同時具備這兩種能力。
為什麼指令面板會傳播
命令面板在開發人員工具中啟動。在 Visual Studio Code 中,按 Ctrl+Shift+P 開啟命令面板,透過該面板可以從鍵盤驅動的視窗存取編輯器的所有功能。 Superhuman 等產品使 Cmd+K 成為體驗的中心:執行任何操作的一個快捷方式,這也教會了下次使用的專用快捷方式。 Superhuman 認為人們更喜歡搜尋而不是選單,因為只有當您已經了解菜單的組織方式時,菜單才會有幫助。
一個好的調色板需要什麼
有用的調色板和令人沮喪的調色板之間的區別主要在於搜尋品質:
- 模糊配對:拼字錯誤和部分單字仍應找到正確的指令(Superhuman 指出「lnik」仍應找到「link」)。
- 同義詞:人們輸入「邀請」、「加入成員」或「分享」;一切都應該有效。
- 排名:首先是最近和頻繁的命令,然後是最佳文字匹配。
- 在每個結果旁邊顯示快捷方式,以便人們學習它們。
- 混合物件和操作:頁面、人員、文件。
- 首先是鍵盤,但完全可以與滑鼠和螢幕閱讀器一起使用。
調色盤的不足之處
調色板在打開之前是不可見的,因此它無法告訴新用戶該產品的用途。人們必須知道或猜測他們想要的東西的詞。這就是為什麼為了支援調色板而刪除導航通常會傷害新用戶和臨時用戶的原因。保持清晰的側邊欄或選單進行瀏覽,並將調色板視為已經知道自己要去哪裡的人的快車道。
無障礙
使用已建立的組合框和列錶框模式,以便螢幕閱讀器宣布結果,在調色板打開時將焦點保留在調色板內,使用 Escape 關閉它並將焦點返回到原來的位置。不要覆蓋輔助科技或瀏覽器所依賴的捷徑。
要記住的關鍵 Principle
- Palettes are fast for frequent users and help them discover shortcuts
- They are invisible to new users, so keep visible navigation
- 搜尋品質決定成功:模糊匹配、同義詞、良好排名
- 在結果中顯示快捷方式以便人們學習
- 遵循組合框可訪問性模式
常見問題解答
來源
- How to build a remarkable command palette — Superhuman
- User interface: Command Palette — Visual Studio 程式碼文檔
- Progressive Disclosure — Nielsen Norman Group