下拉菜单、选择框和组合框怎么选？
一句话做出判断
下拉菜单用于执行操作。选择框从固定列表挑一个值。组合框还能输入或搜索。
要执行操作时，用下拉菜单。固定短列表用选择框。列表很长或要搜索时，用组合框。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Dropdown & Context Menu — Learning Bundle
↗ 下拉菜单与上下文菜单（教学组合）
这个教学组合按打开方式比较菜单。下拉菜单（Dropdown）从控件打开；上下文菜单（Context Menu）属于某个对象，通常出现在鼠标指针旁。这个组合不是单一标准菜单术语。
DropdownMenu / ContextMenu“更多”按钮会打开常规操作；右键点击文件，则会打开只属于该文件的操作。
- 什么时候用
- 请根据触发方式和操作对象选择正确的菜单，接着实现相应的键盘操作。
- 什么时候不要用
- 不要把表单字段或网站主导航放进命令菜单。
- 代码里的名称
DropdownMenu / ContextMenu
Select
↗ 下拉选择框
下拉选择框是一个紧凑的控件，会打开固定列表，让用户选择一个值。
下拉选择框
国家字段会显示固定的国家列表，不能输入列表以外的值。
- 什么时候用
- 列表固定、长度不长，而且页面空间有限时，就使用下拉选择框。
- 什么时候不要用
- 列表很长而且需要搜索时，不要使用下拉选择框，请改用组合框。
- 代码里的名称
<select> / role="listbox"
Editable Combobox
↗ 可搜索组合框
可搜索组合框把文本字段和列表放在一起，输入时会筛选选项。
输入“Tai”后，城市列表只留下 Taipei 和 Tainan，再用方向键选择。
- 什么时候用
- 列表很长需要搜索、需要自动补全，或可以输入自定义答案时，就使用组合框。
- 什么时候不要用
- 不要把普通菜单或原生下拉选择框叫作组合框，因为它们的操作方式不同。
- 代码里的名称
role="combobox" + aria-controls
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 下拉菜单与上下文菜单（教学组合）Dropdown & Context Menu — Learning Bundle | 请根据触发方式和操作对象选择正确的菜单，接着实现相应的键盘操作。 | 不要把表单字段或网站主导航放进命令菜单。 | DropdownMenu / ContextMenu |
| 下拉选择框Select | 列表固定、长度不长，而且页面空间有限时，就使用下拉选择框。 | 列表很长而且需要搜索时，不要使用下拉选择框，请改用组合框。 | <select> / role="listbox" |
| 可搜索组合框Editable Combobox | 列表很长需要搜索、需要自动补全，或可以输入自定义答案时，就使用组合框。 | 不要把普通菜单或原生下拉选择框叫作组合框，因为它们的操作方式不同。 | role="combobox" + aria-controls |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 下拉菜单与上下文菜单（教学组合）（Dropdown & Context Menu — Learning Bundle）、下拉选择框（Select）、可搜索组合框（Editable Combobox） 中，为真实用户流程选出最合适的界面模式。判断规则：下拉菜单用于执行操作。选择框从固定列表挑一个值。组合框还能输入或搜索。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。