クイックピック

Quick Pick(クイックピック)は、ユーザーから入力を受け取り、アクションを実行するための簡単な手段です。構成オプションの選択、コンテンツの絞り込み、アイテムリストからの選択を行う際に役立ちます。

Quick Pick example

✔️ するべきこと

  • アイコンを使用して明確なメタファーを示す
  • アイテムを明確にし、区別しやすくするために、意味のあるアイコンを使用します。
  • 説明(description)を使用して現在のアイテムを表示する(該当する場合)
  • 詳細(detail)を使用して(簡潔な)補足コンテキストを提供する
  • 一連の基本的な入力にはマルチステップパターンを使用する
  • リストから選択する際に、新しいアイテムを作成するオプションを提供する(該当する場合)
  • マルチステップの Quick Pick にはタイトルを使用する
  • テキスト入力のない Quick Pick にはタイトルを使用する
  • テキスト入力を求める Quick Pick にはタイトルを使用する(ヒントや例を示すにはプレースホルダーを使用する)
  • グローバルボタン(例:更新アイコン)を備えた Quick Pick にはタイトルを使用する

❌ すべきでないこと

  • 既存の機能を繰り返す
  • プレースホルダーだけで目的を説明できる場合でも、タイトルを使用する
  • プレースホルダーなしで入力を使用する

複数のステップ

Quick Pick は複数のステップを持つように構成できます。関連しているが個別の選択を単一のフローで取得する必要がある場合に使用してください。多くのステップを伴う長いフローには Quick Pick を使用しないでください。ウィザードのような複雑なエクスペリエンスには適していません。

Multi-step Quick Pick example

Quick Pick のタイトルにある「1/3」というテキストに注目してください。これはフローの現在ステップと総ステップ数を示しています。

複数選択

1つのステップで選択する必要がある密接に関連した項目には、複数選択可能な Quick Pick を使用します。

Multi-step Quick Pick example

タイトル

Quick Pick は、メインの入力および選択 UI の上にタイトルバーを表示するように構成することもできます。ユーザーが選択を行うためにより多くのコンテキストを必要とする場合は、タイトルを使用してください。Quick Pick の入力プレースホルダーですでに使用されているラベルと重複するタイトルは避けてください。

Multi-step Quick Pick example

セパレーターの使用

Quick Pick のアイテムは、セパレーターを使用して明確なセクションにグループ化できます。これには分割線とラベルが含まれており、セクションを明確に示します。拡張機能の Quick Pick に複数の明確な選択グループが含まれる場合は、セパレーターを使用してください。

Quick Pick with separators

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