web下拉菜单栏怎么设置_如何提升UI界面中的下拉菜单细节设计，来看这篇超全面分析...

由于公众号文章的推送规则已经改成了不按照发布时间排序，所以为了大家能够准时收到我们的文章推送，请记得猛戳右下角的「 在看 」，并 点击文章右上角的“...” 将72PX 设为星标 ～这样就不会错过每一篇精彩的推送啦? 下拉菜单是UI设计，网页设计中的基础控件，也是平时大家做设计时会用到的常用组件，所以有必要对它进行全面深入的了解。 本文非常全面的介绍了下拉菜单的设计法则，相信读完会对下拉菜单设计有一个全新的认识，一起来学习吧。 下拉菜单在UI设计领域经常饱受批评，但这也不是没有理由的。设计得不好，它们变成了繁琐和Low的代名词。不过这不是这篇文章要讨论的，我们将要讨论的是，在必要时应该如何正确的使用它们。 同时我需要申明的是，下拉菜单有两种主要类型：一种用于导航菜单，另一种用于表单。在这篇文章中，我们只聊表单中的下拉菜单设计。 文章将会聊到如下内容：

1. 设计全面图解
2. 下拉菜单的类型及变化
3. 下拉菜单风格
4. 下拉菜单状态
5. 提示语句
6. 何时使用下拉菜单
7. 原生下拉菜单
8. 可用性检查
9. 结语

1. 设计全面图解

下拉菜单的设计图解和文本输入框很接近，只是内容多一些。(1.栏目内容 2.容器 3.下拉箭头 4.占位符或提示文本 5.滚动条 6.下拉菜单 7.菜单项 8.分割线 9.选中项 10.提示) 下拉菜单设计图解

2.下拉菜单的类型及变化

人们对标准下拉菜单已经有了普遍的了解，但你仍需要在工作中留意几个特别的类型和变化。这里包含的下拉菜单是针对表单的情况，并不是导航栏里使用的下拉菜单。

标准下拉菜单

标准下拉菜单是针对我们所理解的“下拉”这个动词。在激活状态，当你点击貌似文本输入栏的地方时，它会打开一个菜单。 标准下拉菜单

下拉菜单配自动提示

我超喜欢这个功能。当我第一次注意到自动提示是在谷歌的搜索栏上，可我不记得第一个实现这个功能的是什么网站了。当你在一长串列表中选择需要的选项时(比如国家名)，这个功能变得格外实用。 下拉菜单配自动提示

下拉菜单配自动完成和自动提示功能

自动提示和自动完成功能被放在一起并不惊讶。自动提示是在输入栏里显示选项让用户从中选择。自动完成是提前显示一个完整的单词或短语。 下拉菜单配自动完成和自动提示功能 如果你没有在文本输入栏开始打字的话，自动完成区域通常被隐藏起来。

下拉菜单配多选

大多数情况下，下拉菜单是单选按钮的延伸。这里的下拉菜单配多选则是复选框的延伸：用户可以在同一个输入区域选择多个列表选项。(彩云注：前段时间正好有朋友问我，在设计B端后台时，是否可以这样设计，其实是可以的。) 下拉菜单配多选 如果可以的话，尽量避开这种类型。我曾在一个无比冗长的类别列表上不得已使用了它。讲真，下拉菜单配自动完成和自动提示的组合才是最理想的。

下拉菜单配分组

当长型下拉菜单的设计不是特别理想时，你可以把列表分组，这样搜索起来更加简单。 下拉菜单配分门别类

固定滑动菜单

虽然不是严格意义上的下拉菜单，但是也可以考虑把多选菜单纳入选择范围中。和下拉菜单不同的是，固定滑动菜单展开后会有一个可以滑动的小窗口。