虽然下拉菜单在UI设计领域中经常饱受争议(没办法，因为下拉菜单设计得不好，会让整个网站和APP的操作变得繁琐)，但不可否认，下拉菜单的确是UI设计中最基础的控件之一。
那麽，UI设计什麽时候需要用到下拉菜单?通常情况下，如果输入栏符合以下两个条件，都可以考虑使用下拉菜单：
▶ 多於6个选项;
▶ 用户不能马上知道选项单项的情况。
既然知道了「什麽时候需要用到下拉菜单」，接下来南宁网页集团将详细介绍有关下拉菜单的各类属性。
● 下拉菜单的类型
虽然人们对下拉菜单都有普遍的了解，但在进行UI设计时，各位仍需要特别留意几个常见的下拉菜单类型：
1.标准下拉菜单：点击类似文本输入栏时，会出现对应的列表菜单。
UI设计教程
2.下拉菜单配自动提示：当用户在一长串列表中选择需要的选项时，只需要输入首字母(文字)便会出现相关选项。
UI设计教程
* 部分下拉菜单配自动提示还具备自动完成功能，即用户在输入栏里输入字母(文字)时，输入栏会显示完成的选项。
UI设计教程
3.下拉菜单配多选：类似复选框的延伸，用户可在同一输入区域内选择多个列表选项。
UI设计教程
4.下拉菜单配分组：将选项按照类别分组显示，方便用户搜索和选择。
UI设计教程
5.导航下拉菜单：用於实现多级导航菜单的展示。
UI设计教程
● 下拉菜单的风格
不同於下拉菜单的类型(Type)，下拉菜单的风格(Style)涉及的是它的样子，而不是功能，下面南宁网页集团将几款常见的下拉菜单风格简单地说说。
1.标准风格：这是最常见的下拉菜单风格(下图)。
UI设计教程
* 标准下拉菜单风格还会出现(如下图)的分离菜单风格，这类风格会根据屏幕尺寸变化决定输入栏的位置。
UI设计教程
2.圆形边框风格：这类下拉菜单风格更适合游戏型页面设定。
UI设计教程
3.搭配图标或图片风格：如果觉得下拉菜单看起来比较单调，可以在下拉菜单添加图标或图片，让整个更有设计感，但需要注意图标或图片的清晰度，如果列表太小无法看清，就不要强行添加。
UI设计教程
另外，这种下拉菜单在後期更新和维护时也会比较痛苦，尤其是列表经常变换时，不过若需要展示各列表的不同之处时，这种风格还是挺实用的。
UI设计教程
4.Material Design下拉菜单风格：这种风格的下拉菜单风格实在太棒，让整个UI设计显得更乾净、更简约，还解决了很多可用性的问题。
UI设计教程
● 下拉菜单的状态
要想提高UI设计的交互性，关键要给用户提供友好的操作体验，因此不管用户用什麽方式操作，下拉菜单都应给予及时的反馈。这里，我们来看看不同反馈状态下的下拉菜单是如何的：
1.默认状态：用户在操作前的下拉菜单样子。
UI设计教程
2.禁用状态：用户能看到该菜单内容，但不能使用。
UI设计教程
3.悬停状态：光标在菜单悬停时，下拉菜单会向用户暗示它的可点击性。(该状态只适用PC端的UI设计。)
UI设计教程
4.强调状态：用在使用「制表键」制定了下拉菜单後，但在选中特定列表选项之前。
UI设计教程
5.焦点状态：当用户点击下拉菜单後，列表会随之打开展示选项，且当用户的光标悬停在下拉菜单的选项时，该选项会变得与众不同。
UI设计教程
6.完成输入：用户点击选项，输入栏弹回活跃状态并显示已选择的选项内容。
UI设计教程
7.失败反馈：用户没有完成正确的选项，并点击「提交」键後，用户会收到「提交失败」的反馈信息。
UI设计教程
下拉菜单是UI设计中令人又爱又恨的控件之一，虽然它不占地方、不需要输入验证、技术门槛、用户认知度高等，却又非常容易被错误使用。因此，在设计下拉菜单需要注意细节、使用场景、设计技巧等，才能将下拉菜单的优点发光发热。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处：https://www.cwhello.com/42508.html
