相比于输入框，下拉菜单项的错误率更低，当用户漏选或者任务流中存在两个互斥的选项时，系统会通过强提醒的方式警告用户，比如使用红色作为提示文字、容器描边、填充等。

二、使用下拉菜单的条件 1、由选项数量决定（移动端）

首先选项数量不宜过少，也不宜过多。通俗的讲，5~9个选项是使用下拉菜单的最佳选择。因为下拉区域的空间有限，同时考虑到用户操作难度，大多数情况下，少于5个选项，单选按钮就足够了，超过9个选项则需要更多的显示空间，使用 Bar弹窗或者页面跳转会获得更好的体验。当然，这不是绝对的，只是一个参考值。以5~9个选项的下拉菜单为例，可以满足工作中大部分的设计需求。

其次，在满足选项数量的条件下，选项文字的字数尽量短，如果文字过长导致换行或者遗漏，用户体验会大打折扣，最好还是放弃下拉菜单移动端下拉框关键词，换一种呈现方式。

2. 根据方便程度确定

不要让用户输入他们可以选择的内容。例如，当用户选择退款原因时，常见的原因只有几种。使用下拉菜单比输入要高效得多。即使用户有定制化需求，增加“其他”选项也完全可以满足他们。

另外需要注意的是，这种方案只能满足大部分设计需求和使用场景，没有绝对好的设计。当输入很可能比选择更快时，那么就果断让用户输入。这种情况一般出现在日历控件上，如果用户的年龄跨度很大，想象一下在几十甚至几百组数据中找出你的出生年份是多么痛苦的事情。这比输入4位数字要快得多。

3. 延期决定

如果目前选项较少（不足5个），由于内容是在管理后台配置的，并且根据产品需求有计划在短时间内增加，但最终数量是可控的，此时即使只有一两个选项也可以选择使用下拉菜单。

3.下拉菜单类型

根据用户需求、内容性质、处理各种信息的便捷程度等不同，下拉菜单的视觉风格和交互方式也会有所不同。比如，下拉菜单用于导航，下拉框用于表单，甚至在某些特殊场景下，下拉框和下拉菜单可以互换使用。但为了兼顾不同类型，提高可用性，还是要特别注意这些类型和变化。

1.导航类型

几乎所有网站都离不开导航菜单，导航菜单又分为水平导航和垂直导航。水平导航一般出现在网站顶部，比如官网顶部的功能分类、电商网站的产品分类等，而垂直导航则多出现在后台管理系统的左侧。无论哪种类型，主要目的都是通过提供的导航链接将用户带到新的位置。

2. 命令菜单类型

命令菜单主要用于电脑桌面软件和应用程序的顶部，点击后会展开很多选项按钮，方便用户进行下一步的操作，一些比较复杂的功能选项会附带二级（子菜单）选项列表，方便用户更好地控制软件和应用程序。

3. 表格类型

众所周知，如果条件允许的话，用户选择的速度要比打字的速度快很多，也更利于系统的数据统计。因此在很多表单中，都会设计一个选项字段，让用户能够方便的通过下拉菜单选项进行选择。表单类型中下拉菜单的种类也非常多，下面会一一介绍：

1）标准风格

标准下拉菜单是最原始、操作最简单的一种，没有任何波折，触发弹出下拉选项后，选择任意内容就完成了与当前表单项的交互。

2）关键字匹配

此类搜索经常出现在选项较多的场景中，为了方便用户更加快捷地完成选择任务，在标准样式的基础上增加了输入功能，在输入过程中，系统根据输入的关键词对已有的选项进行匹配筛选，用户可以在筛选结果中快速找到自己需要的选项，而不需要输入全部文字或在内容过多的列表中来回搜索才能完成任务。

3）搜索框

这是比较老派的做法，下拉菜单触发后，一般会在选项列表上方增加搜索框，用户输入关键词进行搜索。相比上面提到的关键词匹配，略显落后，不仅视觉风格变得复杂，也增加了用户的操作成本。部分PC网站在地址选择控件中仍沿用，但更多产品直接使用城市拼音首字母进行分类筛选，显然比这种搜索方式效率更高。

4）多项选择/勾选

即用户在同一个表单项中选择多个选项。虽然这种设计方式操作起来比较复杂，但在内容很多、空间资源不够的管理系统、B端设计中还是很实用的。比如在用户权限配置、有二级/三级联动的机构或地址选择中，多选比扁平化选择更节省空间，而这类用户很多都是经过培训、相对专业的群体。

四、常见问题及避免陷阱指南 1. 不要扩展超过两层

菜单的子级越多，操作越复杂，用户体验越差。尽量不要超过两级。如果超过两级，在条件允许的情况下进行二次分析，增加、删除、合并类别，以减少用户的操作负担。当然，这不是绝对的，只能在相对情况下避免。例如，选择地址（省、市、区县）时，不能删除。

2. 使用默认值

默认值主要针对表单类型的下拉菜单，在可预见的场景下，通过行为预测提前选择用户最常用、最常选择、或者最有可能被当前用户选择的选项。这让精准匹配的用户无需做任何操作就能完成任务，同时也提高了效率。但根据笔者对多个产品和各类相关资料的经验，是否提供默认选项是一半一半，成为了一个矛盾的局面。不管默认选项是否合理，如果出现以下几种情况，请谨慎使用。

1）可选项目

为可选的表单项提供默认值，将极有可能导致用户直接跳过该项。最终默认值并非用户真正需要的，在后续的数据分析中会变得毫无意义甚至产生误导，影响产品的走向。另外，即便用户察觉到了，不想选择任何东西，也还是要手动清除，这需要用户花费更多的时间和操作成本，与用户体验相悖。

2）适度平衡

当多个选项的使用率相对均衡时，提供默认选项确实会降低这一小部分用户的运营成本，但对于大多数用户群体来说，只要不影响自身利益或者用户认为无关紧要，就会默认该选项的可用性，同样会出现上述问题。

3）用户属性模糊性

这种推荐设置主要针对不同的用户，对于一些新注册的用户或者行为不稳定的用户，推荐默认选项时出错的概率会大大增加。

3. 避免滚动错误

对于选项较多的下拉菜单，滚动是不可避免的。但有没有可能我们需要滚动下拉列表，但可滚动的部分是整个网页，鼠标离开下拉区域滚动页面，真正的滚动交互发生在下拉列表中，这就极其痛苦了。

为了解决这个问题，程序员需要定义滚动交互时光标的位置，当下拉菜单处于焦点状态（高亮/主色/阴影）时，滚动选项列表，否则滚动页面。需要注意的是，当光标离开下拉菜单时就可以取消焦点状态，而不必等到用户完成选择任务。目的是让下拉菜单和页面滚动互不干扰，随时可以切换。

4. 选项数量

1）选择太少

如果表单选项太少，可以使用下拉菜单吗？答案是“当然”。但何必呢？如果只有两个选项，使用单选按钮不是更好吗？用户只喜欢用最少的操作在最短的时间内完成自己的需求，如果操作超过一次，他们可能会离开。

2）选择太多

下拉选项过多可能会给用户带来负面影响，但有时候也是不可避免的，比如选择国家、地址、区号等，无论怎么做都没有办法简化，这时候加入前文提到的关键词匹配、搜索框功能，可以提高用户的完成效率，让产品更加容易使用。

5. 如果输入比选择更快

在一些特殊场景下，输入显然比选择更快。试想一下，你的出生年份只有四位数字，但你要翻阅几十个选项才能找到，这确实很耗时。选择信用卡的有效期也是如此。解决这个问题只需要一个数字键盘，这样用户自己输入就方便多了。

6.减少操作

一个经典的例子就是日期组件，使用三个下拉菜单来选择年月日看似可以，但确实比较复杂，而且前面内容的每一次变化都会对后面的值起决定性的作用。如果能将三组内容组合起来，让用户自己定制，会方便很多，可以减少一些不必要的操作。

7. 简洁的选项描述

能用一句话说清楚的就不要用两句话，词越多越难理解，在空间有限的下拉区，选项尽量简短，直达核心内容。

8. 选项的优先性

下拉菜单中的选项并不是随意摆放的，为了迎合用户，提供更好的用户体验，需要遵循一定的规则，将最常用的选项放在最前面，相关组合、时间顺序、地区字母顺序排列，让用户在操作前一目了然。

9. 将不可用的选项设为灰色

当某个选项被系统禁用或者用户不符合选择条件时，尽量不要隐藏这些选项，以免用户误认为内容不完整或者系统本身没有某些选项，从而造成后期的不利。

将已存在但无法选择的内容灰化，不仅可以保持内容的完整性，提醒用户后续可以选择，还可以在某些特殊场景下让用户主动激活可选条件，从而增加用户对产品的使用深度。另外，如果空间足够，在附近提示无法选择内容的原因，可以保证用户使用更顺畅（鼠标悬停在无法选择的内容上时进行临时提示是个好办法）。

五、结论

正确使用下拉菜单既可以保持界面的美观，又可以合理利用空间资源，提高用户的选择效率。但是，不要滥用或误用下拉菜单。

下拉菜单的使用方法和技巧远不止这些，只要我们在设计前考虑清楚什么时候用、怎么用、怎么用更好，之后不断优化、补齐短板，就能最大程度发挥下拉菜单的价值。

#专栏作家#

沙漠之鹰；微信公众号：能量眼球，人人都是产品经理专栏作者。致力于驱动产品需求，探索产品体验，用设计给目标用户带来更好的体验，即好看又好用。