|| 前言

最近在搭建B端组件库，顺便记录下自己对于组件的理解，这篇文章主要针对「下拉菜单」进行思考与总结。

在研究相关组件时，发现，下拉 菜单-Dropdown 跟 选择器-Select 很像，但是为什么Element和Antdesign不把两个控件合在一起呢？其实在看左侧导航就会发现，Element和Antdesign都把下拉菜单放在导航模块下面，主要用来执行相应的命令，选择器则放在信息/数据录入模块下，用来做对用户输入的值新型过滤选择，两者也对应了下面所讲到的，下拉菜单的功能。

|| 下拉菜单的组成

下拉菜单一般是由【下拉框】与【选择器】两大部分组成，下拉框又包含【容器】、【提示文本】、【下拉icon】三个内容，选择器包含【容器】、【内容】。

这里需要说明的是，选择器的内容可以包含其他控件，如图标、多选控件，树级控件、搜索框等控件，都可以融入到选择器容器里。

|| 下拉菜单的功能

下拉菜单通常用作以下功能：

• ·命令菜单：主要应用于程序的工具栏，有的也被放在导航中供用户做选择，用于对界面的控制操作。

• ·导航菜单：顾名思义，经常用在导航中，对应组件库中的下拉菜单-Dropdown，一般没有容器，是水平导航栏中常见的一种导航菜单，用于向用户提供更多链接，可以将用户带到新的位置。典型的案例如腾讯云。

• ·表单填写：对应组件库中的选择器-Select，有容器承载，主要用于表单、表格筛选区，目的是帮助用户从许多不同选项中进行便捷选择。

• ·属性选择：用户从几个属性值中选择其中一个，其作用方式类似于表单填写中的下拉菜单。如Element导航栏中切换语言，Sketch选择颜色切换。

|| 下拉菜单的设计要诀

1、合理使用默认值

恰当的默认值可以帮助用户了解当前下拉菜单的标签状态，如飞书管理后台，通过默认值对标签的说明，让用户更了解目前结果状态，这种形式一般用在表格筛选区。表单中的下拉菜单建议使用“请选择”辅助说明，这里尽量不要设置默认值，除非你真的确定有 90%的用户会选择这个默认值。

2、列表过长的情况，尽量选择可输入搜索属性

在项目实现过程中，难免会出现筛选项很多的情况，因为产品经理会告诉你，这么多都很重要，这时候可以采用下拉菜单的远程搜索属性，方便用户快速找到目标选项。

特别说明：如果担心用户不知道可输入搜索操作，产品经理想更直观的让用户明白，这么多选项是可以搜索的，还有种展示方式为，选择器内放入搜索框控件。

3、能输入不下拉

这个情况一般出现在表单中，当遇到需要用户选择时，可能使用输入会比使用下拉选择更快，一种典型的情况是输入日期，键入YYY/MM/DD 要比选择快得多。

以Hubspot为例，选择日期时，如果我想选2008年10月01日，有两种途径，一种是通过日期选择器的箭头连续点击，直至点击到2008年，另一种途径就是通过格式直接输入年月日，可快速定位到想要选择的日期，通过实践可以得出，输入远比点击选择要快得多。

|| 下拉菜单的高度定义

在实际项目中，经常会碰到一个问题，下拉选择器的高度到底该定义多少呢？有的选择器项类有3-5个，有的甚至超过了10个，那高度是随着内容去决定吗？针对这个问题，我去研究了下Element跟arco.design的代码，发现它们都对选择器设定了一个最大高度，至于这个高度为什么一个设定为274px跟200px，这咱也不知道，但是大家可以根据自己公司前端使用的代码框架进行设定，例如我们公司的前端是采用的Element框架，所以我们采用了274px的最大高度。

当然也不是说所有的下拉场景都为选择器设定最大高度，例如选择颜色，系统提供10种固定颜色供用户选择，把10种颜色全部展示出来反而比通过设定选择器最大高度滚动查看全部要友好很多。

|| 结语

关于下拉菜单的很多细节与体验远不止于此，以上仅是笔者通过工作实践学习与观看其他大佬文章到的个人感悟，可能会有很多思考不是很到位与准确的地方，希望与大家多多交流改正，感谢阅读。

参考文章链接

https://www.uisdc.com/dropdown-menu

https://www.uisdc.com/dropdown-menu-design

Powered by Froala Editor