下拉菜单如何设置方法，下拉菜单怎么写

本文基于下拉菜单属性，通过示例介绍了下拉菜单的使用场景。

精心设计的下拉菜单可以帮助用户缩小选择范围，减少其他屏幕元素的干扰，并防止用户输入错误的信息。然而，在某些情况下，错误地使用下拉菜单可能会对用户体验产生严重的负面影响。了解何时使用下拉菜单非常重要。

本文基于下拉菜单属性，通过示例介绍了下拉菜单的使用场景。

01 避免下拉列表过长。在表单中使用下拉菜单似乎很容易。它不占用界面空间，并且适用于所有浏览器。用户已经习惯了这样的组件。

然而，下拉菜单中的选项超过15 个可能会让用户不知所措，并且很难选择。关于它。

还有滚动的问题，用户必须将光标保持在下拉列表内，否则整个页面会轻松滚动，从而更容易误操作。

国家/地区选择器可能是最经典的长列表下拉菜单，通常有100 多个选项。虽然列表中的选项通常按字母顺序排列，但将热门国家/地区放在列表顶部仍然不能满足用户的需求。更好的是，添加自动完成或搜索功能，因为您知道用户想要选择什么。 （例如系统可以根据地理位置或场景自动输入国家，也可以用户自行搜索国家）

02 还要避免选项太少或使用下拉菜单组件。隐藏可以直接查看的信息内容会阻碍用户的流程并降低他们完成任务的效率。更好的方法是使用无线电组件。这允许用户快速浏览选项并改善用户体验。

03 灰显不可用的选项而不是删除它们：如果某个选项被禁用或不可用，您应该将其灰显，而不是直接删除它。在很多情况下，这些不可用的选项会变得无效（例如，它们可能在当前场景下不可用，但在其他场景下可能可用）。考虑向不可用的选项添加提示，解释它们被禁用的原因以及如何使它们可用。

04 键盘输入可能更快在某些情况下，输入可能比下拉选择更快。一个典型的例子是信用卡日期。输入mm/yy 肯定比滚动两个下拉菜单（月份和年份）更快。

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

05 避免过度使用如果某些数据或信息是自动填写的，则无需用户手动输入。其中一个例子是结账过程中使用的“卡类型”功能。卡类型可以通过信用卡号的前几位来确定，但如果用户必须自己选择卡类型，则会增加用户交互量。

06 减少操作您可以根据需要的信息自定义下拉菜单的操作方式，减少操作次数。一个典型的例子是“日期选择器”功能，但使用常规列表菜单需要三个下拉菜单：月、日、年，这对用户来说会很麻烦。

更好的选择是自定义菜单组件，以便用户可以仅使用下拉菜单来选择输入。

07 使用简洁清晰的标签用户根据菜单标签的内容来选择选项，因此提供准确的信息非常重要。一般最好使用简洁的标签，清楚地表明选择的目的。以下是一些标签指南。

对于操作菜单项，请使用描述要执行的操作的动词。对于链接，使用名词来标识用户跳转到的页面。不包括菜单项的文章。使用“删除此页面”而不是“删除此页面”。将菜单项保留在一行文本内也很重要。通过按逻辑顺序对列表进行排序来组织菜单项也很重要。如果可能，通常的做法是将最常选择的选项放在下拉列表的顶部。然后，我们通过用户研究继续测试和完善它，并重新评估结果。

原文：下拉菜单设计的7个技巧

作者：耶利米·兰姆

作者：微交互实验室，公众号为“微交互实验室”，定期发布优秀设计文章

本文由@microinteractionLab《人人都是产品经理》翻译发布。它禁止未经授权的复制。

标题图片来自Unsplash，并获得CC0 许可。