下拉菜单 | 一看就懂，助你全面了解下拉菜单！
能量眼球
发表于
在UI设计中，虽然经常会使用到下拉菜单，但很多设计师对它并不是很了解，如果过度使用或滥用，也会对用户体验产生负面影响，所以，如何正确的使用下拉菜单就显得非常重要，设计师需要对它有一个更为全面的了解。
那么，如何区分下拉菜单设计的是否合理？到底有哪些利弊？什么场景下需要使用下拉菜单，笔者将从什么是下拉菜单开始，对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结，希望本篇文章对大家有一定的帮助。
一、基本介绍及结构梳理
1 什么是下拉菜单？
2 下拉菜单的构成
标签：告知用户该下拉菜单项需要选择什么内容；
容器：用于承载选择前的信息提示（占位符）及选择后的内容；
下拉箭头：提醒用户有可点击的延展项，点击后弹出下拉框，箭头垂直翻转，再次点击箭头或选择内容后复原。另外，部分产品使用到倒三角代替下拉箭头，其作用相同；
占位符：对标签进行描述或补充，减少用户出错的可能，选择内容后会直接替换占位符；
下拉框（容器）：用于承载下拉选项的容器，点击下拉箭头后会弹出下拉框；
选项列表：供用户选择的内容；
分隔线：当列表中选项较多时，添加分隔线能更好的区分每个单独的选项（视情况而定）；
已选中：弹出下拉菜单后，通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容；
滚动条：下拉框的高度会有一个最大值，当选项列表高度超过下拉框的高度时，就会出现滚动条；
系统反馈：用户未操作必填内容就提交任务时，系统会给予提示。
3 下拉菜单的几种状态
1）默认状态
即初始化状态，操作之前的样式，用户可从标签内容中获取该下拉菜单的主题内容，通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项，系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项，以此减少用户的操作次数，降低任务流程的操作成本。
当鼠标经过或停留在一个下拉菜单项时，容器会通过改变填充色、描边色或其他不同于初始化的样式提醒用户该内容的可操作性。悬停状态只出现在电脑端，因触屏设备直接与之产生交互，会直接越过该状态。
聚焦状态是指用户正在与之发生交互，点击后，展开选项列表的同时，容器通过投影、边框加粗或主色调来提醒用户当前正处在操作中，下拉箭头会进行垂直翻转（向上）。在很多其他模块组件中，展开/收起也是源于箭头上下方向的提示。
用户完成选择后，容器中填充被选中的选项并替换占位符，对于非必填的下拉菜单项，后面出现一键清除图标“⨂”，其他元素与初始化状态相同。
对系统禁用或当前未满足操作条件的下拉菜单项，为保持内容的可见性，对部分元素置灰以提醒用户。
相比输入框，下拉菜单项出错的情况较少，用户出现漏选、或任务流程存在两个互斥的选项时，系统会通过强提醒警示用户，例如将提示文本、容器描边及填充使用红色。
二、使用下拉菜单需满足的条件
1 由选项数量决定（移动端）
2 由便捷性决定
3 后期延展决定
三、下拉菜单类型
1 导航类型
2 命令菜单类型
3 表单类型
标准下拉菜单是最原始、操作最简单的类型，没有任何的弯弯绕绕，触发弹出下拉选项后，选中任一内容即完成与当前表单项的交互。
这种类型常出现在选项较多的场景中，为了方便用户更快完成选择任务，在标准样式的基础上增加了输入功能。输入的过程中，系统根据输入的关键词在已有的选项中进行匹配、筛选，用户可在筛选结果中快速找出自己需要的选项，无需输入所有文字、也不用在内容超多的列表中来回寻找即可完成任务。
3）搜索框
这是一种比较老派的做法，触发下拉菜单后，通常会在选项列表上方增设一个搜索框，用户输入关键词后进行搜索，相比上面提到的关键词匹配就有些落后了，不仅视觉样式变得复杂、也增加了用户的操作成本。部分PC端网站的选择地址控件中还有使用，但更多产品直接使用了城市拼音首字母进行分类筛选，显然比这种搜索方式的效率更高。
4）多选/复选
即用户在同一表单项中选择多个选项，虽然这种设计方式操作起来比较复杂，但在内容较多、空间资源不是很充足的管理系统、B端设计中还是很实用的。例如用户权限配置、带有二级/三级联动的机构或地址选择，多选相比平铺更节省空间，且这类用户很多都是经过培训、相对专业的群体。
四、常见问题及避坑指南
1 延展不要超过两级
2 默认值的使用
1）选填项
为选填表单项提供默认值，用户极有可能直接略过该项，最终默认值并非用户的真实需求，这也将变得毫无意义，甚至在后续的数据分析中产生误导，影响产品的走向。另外，即便用户注意到了，不想选择任何内容，还得手动清除，这就需要用户付出更多的时间成本和操作成本，与用户体验相悖。
2）均衡度适中
当多个选项的使用率较为均衡，提供默认选项确实会减少这一小部分用户的操作成本，但在大部分的用户群体中，只要不影响其利益或用户认为无关紧要就会默认该选项的可用性，同样会出现上述问题。
3）用户属性模糊
这种主要针对千人千面的推荐设定，在一些新注册或行为飘忽不定的用户群体中，推荐默认选项也会将出错的概率大幅度提升。
3 避免滚动失误
解决这个问题需要程序员对滚动交互时的光标位置作出界定，当下拉菜单仅处于聚焦（高亮/主体色/阴影）状态时滚动选项列表，除此之外滚动页面即可。这里需要说明的是，光标离开下拉菜单就可取消聚焦状态，不用非得等用户完成选择任务后再取消，目的是为让下拉菜单与页面的滚动互不干扰且能随时切换。
4 选项数量
表单选项太少能使用下拉菜单吗？答案是“当然能”。但这又是何苦呢，如果只有两个选项，用单选按钮它不香吗，用户只喜欢用最少的操作在最短的时间内完成自身所需，每多操作一次都可能会离开。
2）选项太多
下拉选项过多可能会对用户产生负面影响，但有些时候是无法避免的，例如选择国家、地址、区号等，不管怎么做都没法简化。这时，增加前面所讲到的关键词匹配、搜索框功能，就能提高用户的完成效率，也让产品变得更容易使用。
5 如果输入比选择更快
6 减少操作
7 精简的选项描述
8 选项的优先级
9 不可用选项置灰
将已存在但不可选择的内容置灰显示，不仅能保持内容的完整性、提醒用户后续可选，还能在某些特殊场景让用户主动激活可选条件，提升用户对产品的使用深度。另外，如果空间资源足够，在附近提示不可选的原因能确保用户使用更顺畅（鼠标悬停在不可选内容，临时提示就是一种不错的方式）。
五、总结
正确的使用下拉菜单既可以保持界面的美观度，还能通过合理的利用空间资源、提高用户选择效率，但切勿滥用、乱用。
关于下拉菜单的使用方法及技巧远不止于此，只要我们在设计前考虑清楚何时用、怎么用、如何更好的使用，再加上后续持续不断的优化、查漏补缺，才能发挥下拉菜单的最大价值。
往期回顾：
结
语
设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。