选择选项后自动收起（最常见）；点击菜单外部区域（页面空白处）收起；按 “Esc” 键收起（桌面端快捷键优化）。
设计注意事项① 不使用长菜单
如果下拉菜单中的选项过多，对于页面展示、用户使用来说，都不会很友好。长菜单会增加用户处理、比较一长串选项的认知负荷，导致用户会在一个简单的选择上花费更多时间。
用户需要滚动列表才能查看所有选项。如果在小屏幕上展示内容会更局限。当滚动列表来查找所需选项时，需要更多的加载时间来快速加载所有选项。
如果需要长下拉菜单怎么办？
使用分组：帮助用户快速导航到特定分组，不必滚动浏览整个列表。提供搜索功能：允许输入文本并快速找到需要的结果。限制选项数量：重新评估所有选项是否必要。通过删减（不太重要的选项）、合并（有关联的选项）来限制选项数量。使用替代UI组件：考虑在某些场景中用列表框或一组复选框等UI组件来替代下拉菜单，方便内容展示及用户操作。② 不使用下拉菜单来展示两个选项
通常不建议使用仅有两个选项的下拉菜单，这会增加一些不必要的操作。
下拉菜单组件中，选中一个选项至少要点击两次，第一次是点击打开菜单，第二次是点击选择一个选项。对于其他能直接展示两个选项的组件，使用下拉菜单组件的效率更低。
那只有2个选项的解决方案是什么呢？
这种情况下，可以考虑使用「单选按钮」或「切换开关」 允许用户通过单击或轻触来选择选项。此外，这两个选项最好能始终在界面上展示出来。
③ 禁用当前无效的选项
这种方法可以引导用户只关注有效可用的选项，从而提高效率。防止用户选择当前不适用或无法生效的选项，降低出错的可能性。
保持选项可见但处于禁用状态，可以提供一致的体验，确保用户能够看到所有选项。
如何更好地实现这一点？
首先是将选项变灰或者降低不透明度，这样就能清楚表明这些选项是不可选的。
其次还可以通过提示气泡，解释选项被禁用的原因，让用户知道该选项何时以及如何启用。
④ 选择性使用下拉菜单
有些场景中，选项可能非常简单，例如下图中的选择年份菜单，如果把这些年份全部塞到下拉列表中，然后再让用户从长列表中进行滚动浏览，会大大减慢浏览速度从而降低操作效率。
当输入更简便时，可以不使用下拉菜单，允许输入可以显著加快流程；其次是提供选项建议，引导用户了解相关选项，这样能减轻在长列表中浏览和选择的认知负担。
对于已经知道要查找什么的用户来说，这种方法通常更直观、更快捷。
⑤ 下拉菜单层级不要过多
层级过多的下拉菜单会导致很多内容被藏在里面WhatsApp网页版，很难让用户知道并使用。例如Figma里的一些下拉菜单能展开4个层级WhatsApp网页版，操作起来就会很麻烦。
层级过深还可能会导致交互问题WhatsApp网页版，如果不小心将鼠标悬停在错误的选项上，导致某个功能关闭，可能再想恢复就会很费力。
怎么解决层级过多的问题？
将菜单限制为两级有助于确保简洁易用。 如果想为某个选项添加更多级，可以考虑使用其他控件，例如级联选择器、标签页或结构良好的导航页面。
⑥ 清晰的视觉设计
在菜单标签中加入箭头icon，有助于清晰表明下拉菜单的位置。例如在微软的顶部导航中，含有下拉菜单的导航会用下拉图标表示。
使用一致的样式
在整个产品中，下拉菜单应使用一致的样式，这样有助于识别并与控件交互。 另外，下拉菜单通常会与界面重叠展示，为了能和背景形成清晰的对比， 下拉菜单最好加上阴影、边框等效果。
提供清晰的悬停态、选择态
当悬停或选择菜单选项时，提供清晰的视觉反馈，例如添加选项背景色或选择icon来显示所选选项。
选项搭配图标
展示使用图标和文字相结合的展示方式能让菜单选项更直观易懂，尤其是对于一些通过图标icon可以快速识别的选项，例如设置、帮助等，可以帮助用户准确理解菜单的含义。
⑦ 考虑移动端的展示效果
由于移动端的屏幕尺寸较小且基于触摸的交互，下拉菜单的设计可能更具挑战性。
首先对于较长的列表，可以考虑使用专门的选择浮层或新页面，让用户可以滚动浏览选项并进行选择。
其次，确保下拉菜单和选项具有足够大的点击区域，选项过小或间距过近会增加误触的概率。
最好使用原生控件，因为它们针对触控交互进行了优化，这些组件用户也相对更熟悉，会比自定义的下拉菜单提供更好的用户体验。避免在移动端使用多层级的下拉菜单，单层级菜单更易于导航，也更不容易混淆。
⑧ 按逻辑顺序组织选项
如果选项能按照类别进行逻辑分组，可以优先考虑将选项进行分组展示。为了使分组更加直观，还可以在下拉菜单中使用分隔线或标题来区分不同的类别。
如果选项同等重要或没有明确的关联性，可以考虑按字母顺序排列。这种方法可以让用户预测选项的出现位置。如果下拉菜单中包含日期、时间等有顺序的选项，可以按升序或降序的方式进行排列。
⑨ 提供搜索功能
在选项较多的情况下，带有搜索功能的下拉菜单可以显著提升易用性。
有了搜索功能后，不需要滚动整个列表就能轻松检索到所需选项。而且，输入所需名称并筛选列表可以减少查找选项所需的时间和精力。
如果搜索结果为空，则需要显示清晰的提示，告知用户尝试其他搜索词。
⑩ 设置默认选项
如果有常用或推荐的选项，尤其是在用户必须接受默认选项的情况下，可以考虑将其设置为默认选项，这样能大大简化操作。
如果没有明确的默认选项，或者想让用户做出符合要求的选择，可以对下拉菜单框的暗字提示中加入引导性的文字说明。
最后
合理设计的下拉菜单能在 「节省空间」 和 「操作效率」之间找到平衡，是提升界面简洁性的重要组件。设计时需结合具体场景（如操作频率、选项数量）灵活调整细节，避免为了 “省空间” 而牺牲易用性。