现已推出!阅读 10 月份的最新功能和修复。

快速选择

快速选择 是一种执行操作并接收用户输入的简便方法。这在选择配置选项、需要筛选内容或从项目列表中进行选择时非常有用。

Quick Pick example

✔️ 做

  • 使用图标来清晰地表达隐喻
  • 使用描述来显示当前项目(如果适用)
  • 使用详细信息来提供(简短的)额外上下文
  • 对一系列基本输入使用多步模式
  • 提供一个选项,以便在从列表中选择时创建新项目(如果适用)
  • 对多步快速选择使用标题
  • 对没有文本输入的快速选择使用标题
  • 对请求文本输入的快速选择使用标题(使用占位符来显示提示或示例)
  • 对具有全局按钮(例如刷新图标)的快速选择使用标题

❌ 不要

  • 重复现有功能
  • 对多个项目使用相同的图标
  • 在列表中使用超过六个图标
  • 占位符本身可以描述用途时,不要使用标题
  • 不要使用没有占位符的输入

多步

快速选择可以配置为具有多个步骤。当您需要在单个流程中捕获相关的但独立的选择时,请使用这些步骤。避免对具有许多步骤的长流程使用快速选择——它们不适合用作向导或类似的复杂体验。

Multi-step Quick Pick example

注意快速选择标题中的“1/3”文本,它指示流程中当前步骤和总步骤数。

多选

对需要在一个步骤中选择的密切相关的选择,使用多选快速选择。

Multi-step Quick Pick example

标题

快速选择也可以配置为在主要输入和选择 UI 上方显示标题栏。当用户需要更多上下文才能进行选择时,请使用标题。避免使用标题,该标题使用快速选择输入占位符中已使用的标签。

Multi-step Quick Pick example

使用分隔符

可以使用快速选择分隔符将快速选择项目分组到清晰的区域。这些分隔符具有分隔线和标签,以清晰地显示区域。如果扩展程序的快速选择包含多个明显的选项组,请使用分隔符。

Quick Pick with separators