快速选择
快速选择是一种执行操作和接收用户输入的简便方式。当需要选择配置选项、筛选内容或从项目列表中选择时,这非常有用。
✔️ 建议
- 使用图标来清晰地表达概念
- 使用经过深思熟虑的图标,以增加清晰度并帮助区分项目
- 使用描述来显示当前项目(如果适用)
- 使用详细信息来提供(简要的)额外上下文
- 对于一系列基本输入,使用多步骤模式
- 从列表中选择时提供创建新项目的选项(如果适用)
- 为多步骤快速选择使用标题
- 为不带文本输入的快速选择使用标题
- 为要求文本输入的快速选择使用标题(使用占位符显示提示或示例)
- 为包含全局按钮(例如刷新图标)的快速选择使用标题
❌ 不建议
- 重复现有功能
- 当占位符本身足以描述用途时,不要使用标题
- 不要使用没有占位符的输入框
多步骤
快速选择可以配置为包含多个步骤。当您需要在单个流程中捕获相关但独立的选择时,请使用此功能。避免将快速选择用于具有许多步骤的冗长流程——它们不适合用作向导或类似的复杂体验。
请注意快速选择标题中的“1/3”文本,它表示当前步骤数和总步骤数。
多项选择
对于需要一步完成的紧密相关的选择,请使用多选快速选择。
标题
快速选择也可以配置为在主输入和选择 UI 上方显示标题栏。当用户需要更多选择上下文时,请使用标题。避免使用在快速选择的输入占位符中已使用的标签作为标题。
使用分隔符
快速选择项目可以使用快速选择分隔符分组为清晰的部分。这些分隔符包含一个分割线和标签,以清晰地显示该部分。如果扩展包含多个明显选择组的快速选择,请使用分隔符。