发布时间：2021-3-26 分类： 行业资讯
下拉菜单显然在网页设计中占有一席之地。然而，他们的过度使用和滥用导致了许多可用性问题和混乱。下拉菜单显然在网页设计中占有一席之地。然而，他们的过度使用和滥用导致了许多可用性问题和混乱。设计人员将pulldowns用于各种目的，包括:
命令菜单，根据所选选项启动操作
当用户点击“发布”时图标，Microsoft Word使用下拉菜单显示发布命令
将用户带到新位置的导航菜单
阿里云使用下拉菜单为每个顶级类别提供子类别列表
表单填写，允许用户选择输入表单字段的选项
元素下拉组件
属性选择，允许用户从可能值的菜单中选择值
Adobe Color CC允许用户从颜色规则列表中选择调色板
尽管初始术语“下拉框”和“下拉菜单”可互换使用，但随着时间的推移，两者之间存在功能差异。下拉菜单现在主要包括下拉菜单（导航和命令列表）的前两个用途，而下拉框通常是选择表单填充和属性选择的方法。
下拉框通常与下拉菜单不同:它们旁边有一个下拉箭头，用于选择属性或输入表单数据。此控件倾向于具有字段标签或标题，该标题占据下拉框中第一个项目的位置，以便在进行选择之前可以看到它。虽然MacOS和Windows具有不同的下拉实现，但在这两种情况下，命令菜单都与属性选择菜单不同。实际上，Macintosh人机界面指南明确建议不要使用下拉菜单来执行命令。
下拉设计指南
下拉菜单确实有其优点。首先，它们节省了屏幕空间。因为它们是标准小部件（甚至是令人不愉快的小部件），所以用户知道如何处理它们。此外，使用表单和属性选择时，下拉框会阻止用户输入错误数据，因为它们只显示合法选择。
尽管有这些优点，但如果设计人员使用较少的下拉菜单，则Web可用性会增加。为此，这里有一些下拉设计指南:
1.避免交互式菜单，当用户在同一页面上的另一个菜单中选择某些内容时，菜单中的选项会发生变化。当选择来去时，用户非常困惑，当它取决于不同小部件的选择时，通常很难看到所需的选项。
iTunes：视图菜单包含不同的选项，具体取决于在库侧面菜单中是否选择了专辑（左）或乐曲（右）
2.灰显任何不可用的选项而不是删除它们：任何无法选择的项目都应保留在视图中。为了获得额外的用户体验，如果用户保持灰色选项超过一秒钟，请考虑显示一个简短的气球帮助消息，说明禁用此选项的原因以及如何激活它。
如果删除了禁用的项目，则界面将失去空间一致性并变得更难学习。
Snagit：< ;; graded"和< ;; Tolerance“选项显示为灰色，表示在“无填充”时无法选择它们。选项已选中
3.需要滚动的非常长的下拉菜单使用户无法一目了然地看到所有选择。还需要小心转动鼠标，使其不会拉下拉。 （这是转向法的一个例子。它表明用户通过隧道引导指针设备的时间取决于隧道的长度和宽度.:隧道越长越窄，所需的时间越长。用户将指针从一端移动到另一端。转向定律来自Fitts定律
如果可能的话，抵制诱惑。如果您有很多项目，请考虑其他方式来展示它们——例如传统的链接HTML列表或超级菜单，它们是二维的而不是线性的，并且提供更简单的鼠标管理，并且更快地到达项目内部的平均时间。
百度的模糊匹配4，避免打字时下拉框。典型情况包括国家或国家/地区列表，例如邮寄地址。用户只需输入“NY”;比从下拉菜单中选择状态要快得多。对具有受限选项的字段的自由格式输入确实需要在后端进行数据验证，但从可用性的角度来看，这通常是最好的方法。 （这是我们的电子商务可用性指南之一，因为我们在签入表单时使用状态下拉列表观察到了很多错误。）
在查找控件时，Ant Design会比下拉选项更快地输入关键字
5.避免使用下拉框来获取用户非常熟悉的数据，例如他们的出生日期，月份或年份。此信息通常是硬连线到用户的手指，在长菜单中查找这些选项很麻烦，违反了以前的指导原则并为用户创建了更多的工作。
输入年，月和日将更容易
6.下拉菜单打开后，保留菜单标签或说明。菜单标题通过提醒用户他们选择的内容来提供范围和方向。打开菜单时，隐藏或删除标记时，用户必须在执行操作之前调用他们需要选择的内容。计划中断，用户的任务可能随时中断。
下拉菜单打开时，标签将被隐藏。用户需要调用标签以了解下拉列表中选项的上下文
7.将全局导航选项保留在桌面上的下拉菜单中。隐藏您代购源码网站的顶级类别可能会损害用户在任何代购源码网站上的成功。
8.支持键盘输入以在下拉菜单中导航。下拉菜单（菜单和框）不仅应支持鼠标输入，还应支持按钮。在下拉菜单中，访问键应允许用户在不使用鼠标的情况下快速选择可见选项。在下拉框中，用户应该能够键入一个字母并快速导航到以该字母开头的选项。
总结
下拉框和菜单可能过于笨拙，但可用于显示选项或命令列表。
