编者按：本文来自资深设计师JeremiahLam。他写的这篇文章总结了UI中下拉菜单的一些常见注意事项，让UI设计的同学可以收藏一下~当用户需要在UI界面中选择不同的功能、选项、项目时，就需要依赖诸如此类的UI控件作为复选框、开关、按钮和下拉菜单。这些UI控件各有优缺点，需要根据使用场景和用户需求灵活使用。同时，这些控件的设计也有很多的考虑。今天的文章重点介绍下拉菜单的设计注意事项。文章会加入很多用例和最佳实践来为你讲解。至于设计的规则和技巧，在体验设计领域最著名的NNGroup和BaymardInstitute有很多文章。下拉菜单的基本分析Label：告知用户要选择的内容Fieldicon（可选）：用于说明对应字段特性的图标Searchcolumn（可选）：用于帮助用户方便地查找requiredoptions，前提是上下菜单字段中有20多个复选框（可选）：允许用户同时选择多个选项下拉菜单的类型根据所需输入的性质，外观下拉菜单可能会发生变化，以方便处理不同类型的信息。在设计下拉菜单时，重要的是要足够灵活以提高可用性并适应不同的输入类型。下拉菜单的状态基于不同的交互状态，下拉菜单的UI界面有多种不同的状态。每个状态在视觉上都是相似的，但是在设计的时候，需要让用户能够清楚地区分。下拉菜单通常有默认、活动、悬停、禁用、聚焦和错误状态。以下是设计下拉菜单时的一些重要设计指南和最佳实践。1.避免下拉菜单中的选项太多。下拉菜单中有很多选项，这是下拉菜单的一大特点。但是，如果选项过多，可能会对体验产生负面影响。例如，当有15个以上的选项时，用户可能会感到不知所措。此外，过多的选项会导致滚动问题。用户只有将光标放在下拉框内才能正常浏览，如果不小心将光标移到下拉框外，可能会导致整个页面滚动，这是一件很烦人的事情。但是，如果无法避免怎么办？超长下拉框是最常见的情况。当你需要填写/选择你所在的国家和地区时，超长的列表简直让人应接不暇。此时有两种解决方案：使用自动填充来帮助用户完成信息。将搜索功能集成到输入框中。2.选项太少时不要使用下拉菜单。您可以使用普通的按钮或选择器控件来实现此功能，这可能比下拉菜单更直观和易于使用，因为相比之下，下拉框也隐藏了信息。Therefore,whentherearenotmanyoptions,trynottousethedrop-downmenu.3.使不可用的选项变灰首先，一个选项存在但不可用（disabled）和不提供这两种情况是完全不同的。如果不直接显示，说明逻辑和界面一致性失衡。因此，最好保留不可用、禁用的选项，但显示为灰色且不可选择。4.按逻辑排列选项。列出的选项要符合一定的规则，方便用户定位和筛选。最常见的情况是按字母顺序或数字顺序排列，让用户对搜索定位有明确的预期和依据。5.如果打字速度更快，不要使用下拉菜单。在某些情况下，键入可能比从下拉菜单中选择更快。典型的情况是输入信用卡的有效期，输入“月/年”等信息，这比在两个下拉菜单中一一选择要快捷。虽然用户输入需要被程序验证和匹配，但从可用性的角度来看，直接输入仍然是更好的选择，因为它减少了操作和认知负荷。6.避免滥用功能和交互。当某些数据和信息可以自动匹配时，不需要反复要求用户确认。最典型的情况是系统可以根据信用卡号匹配相应的卡类型，不需要用户使用下拉菜单来一一选择。7、尽可能减少操作次数您可以通过自定义下拉框的设计来减少操作次数。一个经典的案例是选择日期的下拉菜单的设计。如果是普通的下拉菜单，可能需要三个，但是使用自定义下拉菜单就方便多了。8.使用尽可能简洁的标签文本。用户主要通过下拉菜单中的标签文字信息进行过滤，所以需要在有限的空间内尽可能让信息清晰明了，使用识别率更高的大小写组合拼写，表达清晰,直达目标。这里有3条写标签文字的准则：尽量使用动词来描述定向操作对于链接，请使用名词来帮助用户导航到页面将标签的内容写在一行中，不要冗长结合一定的逻辑进行排序，并将最常用、最重要的选项放在顶部。当然，可以结合一些用户研究提炼出更精确的排列。结论正确的下拉菜单具有良好的用户体验。它们可以帮助用户缩小过滤信息的范围，在有限的屏幕范围内最大限度地利用空间，提高用户选择效率。什么时候用下拉菜单，怎么用下拉菜单，最好想清楚，这样才能最大限度地发挥设计的价值。
