编辑导语：下拉菜单的模式在设计中最为常见了，那你有没有依赖下拉菜单呢？本文作者从四个角度进行了全面的梳理与分析，帮助你详细了解下拉菜单的设计，做设计的同学感兴趣就来看看吧。

下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖下拉菜单的使用。

在UI设计中，虽然经常会使用到下拉菜单，但很多设计师对它并不是很了解，如果过度使用或滥用，也会对用户体验产生负面影响，所以，如何正确的使用下拉菜单就显得非常重要，设计师需要对它有一个更为全面的了解。

那么，如何区分下拉菜单设计的是否合理？到底有哪些利弊？什么场景下需要使用下拉菜单，笔者将从什么是下拉菜单开始，对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结，希望本篇文章对大家有一定的帮助。

1. 什么是下拉菜单？

下拉菜单是选项的一种呈现方式，当用户点击某个触发图标/箭头时，会弹出一个项目列表，用户需从中选择一项或多项来满足自己的选择需求。

下拉菜单经常用在表单选项、筛选条件、导航等界面模块中，被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等，内容较多时可能需要上下滚动，真实情况视选项的实际数量而定。

2. 下拉菜单的构成

下拉菜单看起来跟表单中的选项框几乎一致，但在真实的表单页面中，触发表单项后可能是下拉菜单，也可能是弹窗或页面跳转。同理，下拉菜单也会经常用在除表单之外的其他界面模块中，从表面上看跟表单一样，而实际的元素及交互效果则有很大的区别，但本文主要针对表单中的下拉菜单（非导航）作出介绍，有以下十个部分构成：

1. 标签：告知用户该下拉菜单项需要选择什么内容；
2. 容器：用于承载选择前的信息提示（占位符）及选择后的内容；
3. 下拉箭头：提醒用户有可点击的延展项，点击后弹出下拉框，箭头垂直翻转，再次点击箭头或选择内容后复原。另外，部分产品使用到倒三角代替下拉箭头，其作用相同；
4. 占位符：对标签进行描述或补充，减少用户出错的可能，选择内容后会直接替换占位符；
5. 下拉框（容器）：用于承载下拉选项的容器，点击下拉箭头后会弹出下拉框；
6. 选项列表：供用户选择的内容；
7. 分隔线：当列表中选项较多时，添加分隔线能更好的区分每个单独的选项（视情况而定）；
8. 已选中：弹出下拉菜单后，通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容；
9. 滚动条：下拉框的高度会有一个最大值，当选项列表高度超过下拉框的高度时，就会出现滚动条；
10. 系统反馈：用户未操作必填内容就提交任务时，系统会给予提示。

3. 下拉菜单的几种状态

不管是出于系统问题还是用户的原因，下拉菜单能否操作或有什么限制，都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似，但在设计时需要明显的区分开来，常见的状态有默认、悬停、聚焦、完成、禁用和错误提示，下面一起来看看设计师如何通过不同的视觉样式反馈给用户。

1）默认状态

即初始化状态，操作之前的样式，用户可从标签内容中获取该下拉菜单的主题内容，通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项，系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项，以此减少用户的操作次数，降低任务流程的操作成本。