快速選擇 (Quick Picks)

快速選單 (Quick Picks) 是執行動作與接收使用者輸入的簡易方式。當需要選擇設定選項、過濾內容或從清單中挑選項目時,這非常實用。

Quick Pick example

✔️ 建議做法

  • 使用圖示以建立清晰的隱喻
  • 使用經過深思熟慮的圖示,以增加清晰度並協助區分項目
  • 使用說明 (description) 來顯示目前項目(如果適用)
  • 使用詳細資訊 (detail) 來提供(簡短的)額外背景資訊
  • 針對一系列基礎輸入使用多步驟模式
  • 從清單中挑選時,提供建立新項目的選項(如果適用)
  • 針對多步驟快速選單使用標題
  • 針對沒有文字輸入的快速選單使用標題
  • 針對要求文字輸入的快速選單使用標題(使用預留位置文字 (placeholder) 來顯示提示或範例)
  • 針對具有全域按鈕(例如重新整理圖示)的快速選單使用標題

❌ 不建議做法

  • 重複使用現有功能
  • 當預留位置文字足以自行描述用途時,請使用標題
  • 使用不帶有預留位置文字的輸入框

多步驟

快速選單可以設定為具備多個步驟。當您需要在單一流程中擷取相關但各自獨立的選擇時,請使用此功能。請避免將快速選單用於包含許多步驟的長流程——它們並不適合用作精靈 (wizard) 或類似的複雜體驗。

Multi-step Quick Pick example

請注意快速選單標題中的「1/3」文字,它指示了流程中當前的步驟與總步驟數。

多重選擇

針對需要在單一步驟中完成且密切相關的選擇,請使用多選快速選單。

Multi-step Quick Pick example

標題

快速選單亦可設定為在主要輸入和選擇 UI 上方顯示標題列。當使用者需要更多背景資訊以進行選擇時,請使用標題。避免使用與快速選單輸入預留位置文字中已有的標籤重複的標題。

Multi-step Quick Pick example

使用分隔符號

快速選單項目可以使用分隔符號 (separators) 分組為清晰的區塊。這些分隔符號具有分隔線與標籤,可清楚顯示該區段。若擴充功能的快速選單包含多個明顯的選擇群組,請使用分隔符號。

Quick Pick with separators

© . This site is unofficial and not affiliated with Microsoft.