下拉菜单的7个设计要诀

​下拉菜单有许多优点：它节省屏幕空间不占地方，不需要做输入验证，所有平台都支持，技术门槛低，用户都熟悉其使用方法。。它还可以有效帮助用户缩小选择范围，转换屏幕空间并防止错误的数据输入。

然而，下拉菜单又是最容易被错误使用的表单组件。过度使用或滥用它们可能会造成可用性问题的出现。 

本文将针对下拉菜单性质，告诉大家下拉菜单的适用场景、设计技巧以及实例探讨怎样正确使用下拉菜单优化设计。

适合使用下拉菜单的场景

导航菜单

下拉菜单适用于陈列所有需要展示的子页面，相当于子导航菜单，将用户带到一个新的位置。

内容分类

例如：许多资讯产品会选择下拉菜单进行内容分类和罗列标签。这是因为资讯产品里通常有大量的内容，所以排版要简洁、清晰，而下拉菜单能将布局元素外的链接集合起来。

表单项

让用户选择一个选项设置表单字段

下拉菜单选项的类型影响下拉菜单的使用

五个以内选项建议使用单选框或分段选择器，这样能一眼看到所有选项，而不需要下拉打开选项菜单。

选项较多且指向性明确建议使用可输入下拉菜单

如果用户明确知道他们要什么，允许用户输入选项，并在输入的同时过滤出可能的答案，这样可以节省翻阅长列表的时间。

纯数值选项让用户在文本输入框中键入会更快

通常来说，在手机上使用数字键盘输入纯数值会比在菜单中选择数值更加快一些。

下拉菜单设计要诀

避免列表过长

当选项超过 15 种时，用户可能会不知所措。当用户看到 20 多个未分类的选项时，即使用户想在众多选项中找到合适选项，但一定会出现滚动问题，用户必须让鼠标在下拉框中，否则页面就会随下拉滚动。

长下拉列表最经典案例：

国家选择器-有 100 多个选项。通常按字母顺序排序。还有一种做法是把常用/流行的国家/地区放在顶部。

或者使用带自动提示功能的文本框，提示用户想要什么。

避免选项过少

选项太少时使用下拉菜单，反而给用带来繁琐的操作。因为下拉菜单隐藏选项，用户必须操作不必要的动作才能看到选项。

灰掉任何不可用的选项而不是删除它们

某个选项被禁用或不可用时，应将其设置为灰色。将选项设置灰色指示其「已禁用」或「不可用」状态。

同时可以加入提示，指示该选项被禁用的原因、如何让其成为可用状态。

输入优先、下拉备选

某些情况下，输入更快。

例如：输入信用卡有效期。键入 mm/yy相比从两个下拉菜单中选择月和年要快。

虽然自由输入需要数据验证，但在这一场景下，直接输入仍然是最好的选择。

组合下拉菜单，减少操作

当选择项由多个字段组成时，将几个下拉菜单组合，可以有效减少用户操作。

例如：日期选择下拉菜单，有年、月、日甚至是小时、分、秒的选择，如

果用普通下拉菜单则需要用到3-6个。而把这些选项组合成一个下拉菜单，就方便很多了。

下拉菜单打开时，保持菜单标签或描述。

用户会根据他们的标签选择菜单选项，因此提供准确的信息很重要。在打开菜单时标签被隐藏或删除，用户必须回忆他们在采取行动之前需要选择的内容。随时可能中断用户的任务。

编写简洁标签的准则：

↘      动作菜单项请使用动词来描述将要发生的动作。

↘      链接使用名词来标识用户将定向到的页面。

↘      排除菜单项中多余的描述性助词；例如「删除页面」，而不是「删除这个页面」。

↘      将菜单项保持在一行文本中。

↘      组织菜单项的列表排序有逻辑顺序。

↘      将选择最多的选项排列在顶部，迭代更新最热选项。