快速精选

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

快速选择示例

✔️ 做

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

❌不要

  • 重复现有功能
  • 对多个项目使用相同的图标
  • 在列表中使用六个以上的图标
  • 当占位符可以自己描述目的时使用标题
  • 使用不带占位符的输入

多个步骤

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

多步骤快速选择示例

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

多项选择

对于需要一步选择的密切相关的选择,使用多选快速选择。

多步骤快速选择示例

标题

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

多步骤快速选择示例

使用分隔符

可以使用快速选择分隔符将快速选择项目分组为清晰的部分。它们具有分隔线和标签,可以清楚地显示该部分。如果扩展程序具有包含多个明显选择组的快速选择功能,请使用分隔符。

带分隔符的快速选择