现已发布!阅读关于 11 月份的新功能和修复的详情。

快速选择

快速选择是执行操作和接收用户输入的简单方法。当需要选择配置选项、过滤内容或从项目列表中选择时,这非常有用。

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