下拉菜单在有效的网页设计中显然占有一席之地。然而，它们的过度使用和误用造成了许多可用性问题和困惑。设计师将下拉菜单用于各种不同的目的，包括:
- 命令的菜单，它根据所选选项发起操作
- 导航菜单，它将用户带到一个新的位置
- 表格填满，它允许用户选择一个选项以输入表单字段
- 属性选择，它允许用户从可能的值菜单中选择一个值
Adobe Color CC是一个用于收集RGB和HEX值的调色板工具，允许用户从颜色规则列表中选择调色板。
虽然最初术语“下拉框”和“下拉菜单”是可以互换使用的，但随着时间的推移，两者之间出现了功能上的区别。今天,下拉菜单主要包括下拉菜单的前两种用法(导航和命令列表)，而下拉框通常是表单填写和属性选择的方法。
下拉框通常看起来与下拉菜单不同:它们旁边有一个下拉箭头，用于选择属性或输入表单数据。该控件通常由占下拉框中第一个项目位置的字段标签或标题支持，以便在进行选择之前可以看到它。尽管MacOS和Windows有不同的下拉菜单实现，但在这两种情况下，命令菜单与属性选择菜单都是不同的。事实上,Macintosh人机界面指南明确建议不要使用下拉菜单的命令。
下拉设计指南
下拉菜单确实有其优势。首先，它们节省屏幕空间。因为它们是一个标准的小部件(即使是一个不愉快的小部件)，用户知道如何处理它们。在表单和属性选择中使用时，下拉框可以防止用户输入错误的数据，因为它们只显示合法的选择。
尽管有这些优势，但如果设计师少用下拉菜单，网页的可用性将会提高。为此，以下是一些下拉菜单的设计指南:
- 避免交互菜单，当用户在同一页面的另一个菜单中选择某项内容时，一个菜单中的选项会改变。当选项来来去去时，用户会感到非常困惑，而且当需要的选项依赖于不同小部件中的选择时，通常很难使其可见。
iTunes:视图菜单包含不同的选项，取决于是否专辑(左)或歌曲(右)选项在图书馆侧菜单。 - 灰色任何不可用的选项而不是删除它们:任何不能被选择的项目应该保持在视图中。如果用户将鼠标悬停在一个灰色选项上超过一秒钟，可以考虑显示一个简短的气球帮助信息，解释为什么该选项被禁用，以及如何使其激活。
如果禁用的项被删除，接口将失去空间一致性并变成很难学习．
屏幕捕获工具:梯度和宽容选项将变为灰色，以表示无法选择它们没有填满选择选项。 - 很长时间拉这需要滚动，用户不可能一眼看到所有的选择。它们还需要小心地控制鼠标，这样它就不会离开下拉菜单。(这是转向法律的一个实例,说的时间用户引导定位设备通过一个隧道的长度和宽度取决于隧道:时间越长和狭窄的隧道,就需要越多的时间用户移动指针从一端到另一个。转向定律是由菲茨定律推导出来的，我们在我们的人机交互过程．)
只要有可能，抵制住把很多东西都包括进去的诱惑。如果你有很多条目，考虑用其他方式来显示它们——比如传统链接的HTML列表或者大型的菜单，它是二维的而不是线性的，提供了更简单的鼠标管理更快的平均到达时间项目内。
Angie的列表使用了一个下拉列表来列出服务类别。要查看所有选项，用户必须向下滚动几次。由于没有滚动条，用户无法预测列表的结束。 - 当打字速度可能较快时，避免使用下拉框。典型的情况包括州或国家的名单，例如美国的邮寄地址。对于用户来说，简单地输入“NY”比从滚动的下拉菜单中选择一个状态要快得多。对带有受限选项的字段进行自由形式的输入确实需要在后端进行数据验证，但从可用性的角度来看，这通常是最好的方法。这是我们的ecommerce-usability因为我们在使用状态下拉列表的签出表单中观察到许多错误。)
小印花通过下拉菜单改变购买的杯子数量，使购买过程变得复杂。输入数量比从下拉菜单中选择一个要快得多。 - 避免对用户非常熟悉的数据使用下拉框，例如他们出生的日子、月份或年份。这些信息通常是硬连接到用户的手指上的，必须在一个很长的菜单中找到这些选项是乏味的，打破了之前的指导原则，并可能为用户创建更多的工作。
Live.com:要创建一个账户，用户必须从长长的下拉框中选择月份、日期和年份来输入他们的生日。直接输入这些信息会更简单。 - 保持菜单标签或描述在视图中当下拉菜单打开时。菜单标题通过提醒用户他们正在选择什么来提供范围和方向。当菜单打开时，标签被遮挡或删除时，用户必须回忆起他们需要选择的内容，然后才能采取行动。为可能在任何时候中断用户任务的中断做好计划。
Square网站隐藏了标签，选择业务类型，当下拉菜单打开时。为了理解下拉菜单中选项的上下文，用户需要收回标签。(我们通常也建议不要居中或右对齐的菜单选项，因为左对齐的菜单更容易扫描．) - 保持全局导航选项不在桌面的下拉菜单中。隐藏网站的顶级类别对用户在任何网站上的成功都是有害的。
Joann网站的顶级导航中有几个链接，但大多数全局导航都在部门下拉菜单。这种设计选择使得导航选项更难被发现。 - 支持键盘输入在下拉菜单中导航。下拉菜单(包括菜单和框)不仅应该支持鼠标输入，还应该支持键。在下拉菜单中，访问键应该使用户无需使用鼠标就能快速选择可见选项。在下拉框中，用户应该能够键入字母并快速导航到以该字母开头的选项。
这些替代选项将缓解长下拉列表造成的一些问题，也改善了盲人用户的易用性。
结论
不久前，作为一个关于网络可用性方法的演讲的一部分，我们为观众进行了一个小型用户测试。当完成一个注册页面时，我们的测试参与者必须在一个表单上输入她的地址，其中一个文本字段表示街道的名称，但一个下拉菜单表示街道的类型(大道，大道，法院，开车等等)。你猜怎么着?用户在文本输入框中输入她的完整街道地址，因为她过去总是这样做。下拉菜单突然出现了，她不得不回到文本框，擦掉已经输入的部分地址信息。
这项在数百人面前进行的小型研究表明，有时用单个用户运行测试就足以清楚地说明一个观点。一旦您看到这种混乱的操作，您就会意识到使用“有用”下拉菜单来为用户节省一些按键可能弊大于利。在您自己的设计中遵循这些指导方针，以改进站点导航并提高任务的成功率。
分享这篇文章: