Illustration by Ouch.pics

正确使用下拉菜单可以帮助用户缩小选择范围，拓展屏幕空间并防止错误的数据输入。但是，在某些情况下，不恰当地使用下拉菜单，反而会对用户体验产生负面影响。

因此了解如何结合使用场景去选择使用下拉菜单/单选按钮或其他接口元素显得尤为重要，因为过度使用或误用它们会产生可用性问题。

在本文中，下面将讨论下拉菜单的性质，分析其适用场景，并展示几个不好和好的例子，以帮助您与您的设计。

避免过长的下拉

在表单中使用下拉菜单可能看起来毫不费力;它们在界面上占用的空间并不大，所有浏览器都支持它们，而且用户对它们非常了解。但是，当有超过 15 个选项时，用户可能会难以选择。

看到 20 多个未分类的选项可能会令人困惑和令人生畏，这使得用户很难找到要查找的输入项。此外，过长的下菜单还可能会导致滚动问题。

长下拉列表最典型的示例是国家/地区选择器，通常有超过 100 个选项。虽然它通常按字母顺序排序，但有时常用国家/地区被放置在顶部，这可能会使用户感到困惑。更好的选择是使用模糊匹配的文本输入，因为用户已经知道他们正在寻找的输入项。

Custom Search Input by Jonathan Reinink

选项太少

另一方面，如果选项太少，那么下拉菜单则是一个糟糕的选择，因为它隐藏了本可以直接呈现的信息，从而造成了不必要的操作流程。更好的选择是使用单选按钮，使用户可以轻而易举地一眼查看到可用选项。

置灰禁用选项

如果某个选项被禁用或不可用，则应将其显示为灰色，而不是将其删除。如果删除了禁用项，则界面将失去空间一致性，并使用户更难学习-他们可能仅由于禁用项而无法找到某些选项。

与其删除已禁用的选项，不如将它们变灰以指示其“已禁用”或“不可用”状态。您也可以考虑显示tooltip，以提示该选项被禁用的原因以及如何使其处于活动状态。

避免在输入更快捷的情况下使用

在某些情况下，输入实际上可能比使用下拉菜单更快捷。一种典型的情况是输入信用卡有效期，输入mm / yy 会比从两个下拉菜单（月和年）中滚动选择操作更便捷。

尽管使用自由格式的输入字段确实需要某种形式的数据验证，但从可用性的角度来看，它仍然是更好的选择-因为它减少了用户的负担。

避免过度使用

当某些数据或信息可以自动识别时，无需不断询问用户的输入。例如在支付过程中，“卡类型”字段可根据卡号的前几位数字自动识别，因此要求用户自己选择卡的类型就会产生额外的麻烦。

减少操作次数

可以根据所需信息自定义下拉菜单的内容，以减少操作次数。一个经典的例子就是“日期选择”字段，如果使用普通的列表菜单，则需要3个下拉菜单（年月日），这对于用户来说很繁琐。

更好的选择是使用日期选择组件，使用户可以在一个下拉菜单中完成日期选择操作。

使用简洁明了的菜单项

用户根据标签来选择菜单选项，因此准确且提供信息至关重要。通常，最好使用短句并注意用词精简明晰，以清楚表明选择的目的。以下是一些书写良好标签的准则：

• 对于操作类的菜单项，请使用动词来描述将要发生的动作
• 对于链接，请使用名次来标识将要跳转的页面
• 避免在菜单项中写“文章”；例如使用“delete page",而不是“delete the page”
• 文本尽量保持在一行内显示

通过按逻辑顺序对列表进行排序来罗列菜单项也很重要——如果已知常用选项是什么，则将其放在顶部。这需要做用户研究，并且随时间进行测试和完善以重新评估结果。

Powered by Froala Editor