组件|下拉菜单这么简单，为什么总监老是说用错？_

导读：下拉菜单相关应用在平常的交互设计当中是少不了的一环，也是被用户饱受批评的重灾区。设计得不好会适得其反，让它变成繁琐与LOW的代名词。这篇文章我们也跟上一篇radio button一样，从根本上来分析下拉菜单的构造、应用场景、注意点。

文章插图
一、下拉菜单的构造图解【组件|下拉菜单这么简单，为什么总监老是说用错？】下拉菜单的设计结构和文本输入框很接近，只是内容多一些，主要有十个部分构成。

栏目内容
容器
下拉箭头
占位符或提示文本
滚动条
下拉菜单
菜单项
分割线
选中项
提示

文章插图
二、下拉菜单的类型1. 标准形态标准下拉菜单是针对我们所理解的“下拉”这个动词，在激活状态，当你点击文本输入栏的地方时，它会打开一个菜单。这里值得注意的是因为受到下拉菜单高度的限制以及用户操作效率，菜单项不宜过多也不介意太少，有研究发现当有超过 10 个或少于 5 个选项时，尽量避免下拉。

文章插图
2. 自动提示形态我个人是超级喜欢这种交互模式的，某些时候这个功能变得格外实用。比如选择城市地区时，它可以让用户在一长串选项中优雅的找到自己心头所爱，不用疯狂的让自己下拉一遍又一遍，

文章插图
特别提醒：

在这个场景之下，用户双手是在敲击键盘，所以该组件可以用键盘上的“????”来操作尤为重要。
同时也要考虑到有些场景，输入信息是来自用户的粘贴，所以该交互模式必须支持用户粘贴信息。

3. 自动补充形态这也是帮助用户从众多选项当中进行快速完成筛选的另一种交互设计策略。

文章插图
4. 附带搜索框形态当然我们也可以在下拉列表当中结合搜索组件，帮用户在下拉列表中完成搜索任务。这种设计策略就比较老派了，好处是平铺直叙，坏处是没有啥新意，不够优雅。

文章插图
5. 特别提醒以上小编提到几种下拉菜单的交互形态都建议用户在完成单选任务的时候去使用，私以为下拉菜单对于完成多选任务并不友好。会让用户掉入「多选陷阱」（此概念引用于Hozin大佬，再次给出最高的敬意）当中，即通过下拉菜单完成多选任务后，用户并不能直观看到自己选择了哪些选项。
如果一定要使用下拉菜单完成多选任务的话，那设计师必须要带上一个已选搜集器，这样用户就可以在选择同时知道自己已选了哪些。其实这种交互设计已经不是组件范畴了，而是一种解决多选任务的交互模式。所以说小编真的不太推荐用下拉列表去完成多选任务。

文章插图
6. 打爆大厂的狗头又要了喜闻乐见打狗头的时间，这里又不得不提到Antdesign里的组件例子。下图中就是Antdesign试图用下拉菜单去解决多选陷阱的问题。不得不说这里我们看到Antdesign努力的样子。想尝试把用户的已选项在框体内作展示，但是难道框体高度随着用户选项增多而不停增高吗？如果用户选择100个选项呢？OMG反正我觉得这只能算一个能用的设计，但是不是一个优雅的设计。