当我打开一个注册页面，依次填完名字、邮箱和密码。到了"国家"这一栏时，输入框变成了一个灰色的矩形区域，右侧带一个向下的小三角图标。我点了一下，一个列表随即从这个区域下方展开，两百多个国家名纵向排列。我向下滚动找到 China 并点选，列表随即收回，"China"显示在矩形区域上。
这个控件就是下拉选择器（Dropdown menu），它可以把两百多个或是更多选项收进一个只占一行区域的组件里，点击展开，选完收回。
如果将这些选项全做成单选按钮平铺在页面上，整个页面将无法装下。可以说，下拉选择器用一次额外的点击换来了页面的整洁。
判断一个场景该不该选用下拉选择器，你只需关注两点即可：选项数量是否多到不适合平铺，以及选项之间是否互斥
五个以内的互斥选项，单选按钮直接平铺展示更好，用户一眼就能看到所有选择，不需要点击才能知道有哪些选项；超过五个时，平铺占据的面积会让页面变得臃肿，这时下拉选择器的空间效率优势就显现出来了。
如果选项之间不互斥、用户可以同时选中多个，那么此时需要将下拉框换为多选下拉或复选框组，而不是标准的单选下拉。
一、四种下拉选择器
1. 单选下拉
单选下拉是最基础的下拉形态。用户点击触发区域，选项列表展开，选中一个后列表收起，触发区域显示选中项。国家选择、省市选择、职业选择、语言偏好都是这种下拉框典型的使用场景，这些选项的共同点是选项固定、互斥、数量在五个到几十个之间。
单选下拉的选项数量有一个体感上的舒适区间，大约在 5 到 15 个之间。少于 5 个时，用户需要点击一次才能看到所有选项，不如使用单选按钮，将选项全部平铺直观；超过 15 个时，列表变长，用户不得不借助滚动选项来找寻目标，操作效率会有所下降。当选项在 15 到 40 个之间，列表仍然可用，但最好按字母或某种逻辑排序，以帮助用户快速定位。一旦超过 40 个——比如国家列表有两百多个选项——靠滚动浏览效率太低，必须加入搜索功能。
2. 可搜索下拉
可搜索下拉在触发区域或列表顶部内置了一个文本输入框，用户输入关键字后，选项列表就可以实时过滤，只显示匹配的结果。城市选择是最典型的使用场景。全国有几百个城市，用户不可能逐条翻找，输入"杭"立刻过滤出杭州，输入"she"能匹配出深圳和佘山。字体选择器也是同样的逻辑，设计工具里字体列表可能有几百项，此时输入字体名称的前几个字母，能马上定位想要找的字体。
可搜索下拉的搜索逻辑需要考虑容错。用户可能输入拼音、可能输入汉字、也可能只记得名称的一部分。如果搜索只支持精确匹配前缀，用户输入"州"就找不到"杭州"，这种体验会很糟糕。设计时需要和开发明确搜索的匹配规则：是否支持拼音、是否支持模糊匹配、是否支持中间字符匹配。
4. 多选下拉
多选下拉支持用户从列表中勾选多个选项，选中的内容通常以标签（Tag）的形式排列在触发区域内。标签分类是典型的使用场景。一篇文章可以同时属于"设计""教程""工具"三个分类，用户需要在同一个下拉列表里勾选多个。权限分配也是同样的模式，给一个用户角色分配多项权限，权限列表可能会有十几项，逐条勾选后以标签形式展示已选内容。
多选下拉有一个容易忽略的问题。当选中项很多时，标签会把触发区域撑高，甚至撑成好几行，挤压下方的表单空间。设计时需要决定触发区域是否有最大高度限制。如果限制了高度，超出部分的标签该怎么处理——截断后显示"+3"这样的数量提示，还是让触发区域支持内部滚动？两种方案各有取舍，但必须在设计阶段确定，不要留给开发自行决定。
5. 分组下拉
分组下拉会在选项列表中用分隔线或小标题把选项按类别归拢。时区选择是典型的应用场景。几十个时区按洲分组（亚洲、欧洲、美洲），用户先定位到自己所在的洲，再在该组内找到具体时区。文件格式选择也经常分组：图片格式（PNG、JPG、SVG）一组，文档格式（PDF、DOCX）一组，数据格式（CSV、JSON）一组。
试想一下，将 30 个时区平铺在一个长列表里，用户得从头扫到尾才能找到目标。分组可以把这些选项按类别归拢后，用户的视线可以直接跳到"亚洲"那一组，搜索范围从原来的 30 个直接缩小到五六个。分组标题本身不可选中，只起到导航的作用。如果分组后每组内的选项仍然很多，那么可以考虑把分组下拉和搜索能力组合使用。
二、下拉选择器的构成
1. 触发区域
触发区域是指用户直接看到和操作的那个矩形框，未选择选项时显示占位提示文字，选中选项后显示当前选中项。
触发区域的宽度需要能够容纳最长的选项文字。如果选项里最长的一条是"中华人民共和国澳门特别行政区"，而触发区域只给出了 120px 行宽，那么用户选中这个选项后，文字会被截断，进而无法确认自己选的到底对不对。设计时需要预估选项的最大文本长度，确保触发区域的宽度足以完整显示选项名称，如果因排版限制无法扩展触发区域宽度，可以考虑在触发区域设计 tooltip ，让用户通过鼠标悬停，查看完整内容。
触发区域的高度同样需要注意。在桌面端，标准表单控件的高度通常在 36px 到 44px 之间，和文本输入框保持一致，视觉上处于同一条基线。在移动端，触控目标的最小尺寸是 44pt（iOS）或 48dp（MD3），触发区域的高度不能低于这个值，否则用户的手指很难准确命中。
