下拉菜单是日常交互设计中不可或缺的一部分，也是最受用户诟病的重灾区。糟糕的设计会适得其反，让它成为繁琐、低质量的代名词。本文我们将从根源上分析下拉菜单的结构、应用场景、注意事项等。

如何提升下拉菜单的设计体验？看看这些关键知识点！

下拉菜单经常出现在网站导航栏中。

阅读文章 >

下拉菜单结构图解

下拉菜单的设计结构和文本输入框很相似，但内容更多，主要由十个部分组成。

1. 列内容 2. 容器 3. 下拉箭头 4. 占位符或提示文本 5. 滚动条 6. 下拉菜单 7. 菜单项 8. 分隔线 9. 选定项 10. 提示

下拉菜单的类型

1. 标准形式

标准的下拉菜单，就是我们理解的“下拉”这个动词，在激活状态下，当你点击文本输入框时，会打开一个菜单。这里值得注意的是，由于下拉菜单的高度限制和用户的操作效率，菜单项不宜过多或过少。有研究发现，当选项超过10个或少于5个时，尽量避免使用下拉菜单。

2. 自动提示表格

我个人非常喜欢这种交互模式，有时候这个功能会变得很实用，比如在选择城市区域时，它可以让用户在一长串的选项中优雅地找到自己喜欢的，而不用一遍又一遍地向下滚动。

特别提醒：

3.自动补货模式

这是另一种帮助用户快速筛选选项的交互式设计策略。

4. 使用搜索框

当然我们也可以在下拉列表中结合搜索组件，帮助用户在下拉列表中完成搜索任务，这种设计策略比较老套，优点是直接了当，缺点是缺乏创新，不够优雅。

5. 特别提醒

以上提到的下拉菜单的交互形式都是建议用户在完成单选任务时使用的下拉菜单搜索关键字，因为下拉菜单对于完成多选任务来说并不友好，用户会陷入“多选陷阱”（这个概念引自大佬，再次致以最崇高的敬意），即用户通过下拉菜单完成多选任务后，无法直观的看到自己选择了哪些选项。

如果一定要用下拉菜单来完成多选任务，设计师一定要包含选中收集器，让用户在选择的同时知道自己选了什么。其实这样的交互设计已经不再是一个组件，而是一种解决多选任务的交互方式。因此，我真不建议用下拉列表来完成多选任务。

打大厂的狗头

又到了吐槽的时间了，不得不提一下文章里的组件示例。下图是尝试用下拉菜单解决多选陷阱问题，不得不说这里面的功夫大家看得出来。我想尝试把用户选中的选项显示在框架里，但是随着用户选项的增多，框架的高度会不会也跟着增加？如果用户选中了100个选项怎么办？OMG 反正我觉得这只能算是一个可用的设计，而不能算是一个优雅的设计。

使用下拉菜单的技巧

1. 避免使用默认值

在使用下拉菜单的时候，设置默认值绝对是一个糟糕的设计策略。很多经验告诉我们，如果有默认值，用户基本不会仔细看其他选项而是直接跳过，除非你真的确定90%的用户都会选择这个默认值！！！所以使用“请选择”比提供默认值好一千倍。

2. 注意滚动问题

这里特别支持下拉列表中的滚动问题。如果鼠标光标在下拉菜单之外，用户很可能会向下滚动页面而不是下拉菜单，从而无意识地将下拉菜单隐藏在屏幕上。但是，在某些浏览器中，只要有焦点，下拉框实际上就会滚动，这可能会给用户留下不正确的数据。

3. 注意数量

使用下拉框的选择菜单只有 2 个选项，这是一个非常糟糕的策略，因为用户必须单击才能查看可用的选项。

在这种情况下，应该使用单选按钮。让用户一眼就能看到有多少个选项以及每个选项是什么，而无需单击任何内容来显示此信息。

使用变体

由于移动设备尺寸的限制，屏幕空间非常有限，这意味着用户滚动页面时接收到的信息内容非常有限，这就要求设计师对于组件的选择和设计有更高的要求。同时有些框架提供的原生组件不太好用，比如iOS9提供的原生控件，交互操作环节比较长，表单高度占了50%，手势空间也受到相当大的制约。因此针对不同的数据类型，我们可以使用同构、异构的组件来让用户完成任务。

小编已经在《手把手帮你重新理解》一文中详细讲解过了，这里就不再重复了，下面是文章链接，帮你重新理解一下，不懂的朋友可以跳回去看看。

步进机

在选择一组有序序列时，使用“”也是一个不错的选择，可以用来增加或者减少一定量，对于选择步长较小的有序序列更有意义，可以和输入框结合使用。同时要注意，这类数据的数量一般不建议超过5个，如果有100个数据，肯定是没法选择的，否则用户肯定会抓狂的。

滑块

同时，在数据选择任务领域，使用滑块也是一个不错的选择。

单值情况：

多值情况：

与步进机一起使用

转变

开关比较简单下拉菜单搜索关键字，只支持两种简单的、完全相反的选项。值得注意的是，开关只有“开启”和“关闭”两种交互模式，没有“不可用”状态。不建议给开关添加文字说明，个人经验告诉我，在 B/S 结构的产品中应谨慎使用开关。

这里我们只是举了几种常见的可以替代下拉菜单完成用户选择任务的等效交互组件或者交互方式的例子，实际工作中这样的例子不胜枚举，希望大家在工作中都能养成好的方法。

结论

可用的设计和优雅的设计之间的主要区别是什么？优雅的设计应该为用户完成每个目标任务提供最合适的输入组件。同一个目标任务在不同场景下的组件设计一定是不一样的，有时候可能是下拉菜单百度搜索下拉框如何刷【64xl.com专业下拉联想词】百度搜索下拉框怎么做，有时候可能是，有时候可能是其他形式。本文希望给大家在工作中开拓更多的设计思路。

下拉菜单细节该如何设计？看这篇超全解析！

下拉菜单是UI设计和网页设计中的一个基础控件，也是大家在设计时常用的一个组件，因此对它有一个全面深入的了解是很有必要的。

阅读文章 >