UI备忘单：下拉字段
下拉菜单在用户界面领域受到了很多抨击——如果我们认真思考，这并不是没有原因的。如果做得不好，它们就会变得笨重、不友好、丑陋不堪。在这里，我们将讨论如何使用它们。
我还想澄清一下，下拉菜单主要有两种：用于导航的下拉菜单和用于表单的下拉菜单。出于备忘单的目的，我们将只看表单的变体。
在本文中，我们将介绍以下内容：
解剖学
下拉菜单类型和变体
下拉样式
下拉状态
占位符应该说什么
何时不使用下拉菜单（以及何时使用）
本机下拉菜单
辅助功能清单
总结思想
下拉菜单的解剖结构与文本输入字段的解剖结构非常相似，只是还要多一点。
下拉字段解剖
尽管标准下拉列表得到了广泛的理解，但是你可能需要考虑几种不同的类型和变体，以进行下一步的工作。请注意，对于这些示例，我仅包括表单中使用的下拉列表，而不包括导航中使用的下拉列表。
标准下拉菜单
标准下拉列表是我们听到“下拉列表”一词时想到的。在其活动状态下，它应该看起来与文本输入字段非常相似，直到你单击它并打开一个菜单。
标准下拉菜单
自动建议下拉
我爱这些性感的坏男孩。我第一次意识到自动提示是在Google的搜索字段中。但是，我不知道它是在哪里实现的。（让我知道您是否愿意。）当你有一长串用户已经知道答案的列表（例如您来自哪个国家/地区）时，此功能特别有用。
自动建议下拉
自动完成和建议的下拉菜单
自动建议不要与自动完成混淆。自动建议是当输入字段显示供用户选择的选项时。自动完成是指输入提出一种完成单词或短语的方法。
自动完成和建议的下拉菜单
有时，自动完成字段会伪装成文本输入，直到你开始输入为止。
多选下拉菜单
虽然大多数下拉列表是单选按钮的扩展（因为您只能选择一个项目），但此下拉列表是复选框的扩展：用户可以在一个输入字段中选择多个项目。
多选下拉菜单
如果可能，请尽量避免使用此人。由于类别的种类繁多，我不得不使用它，而对于这个决定，我仍然在晚上冒着冷汗醒来。理想情况下，将需要一种自动建议和自动完成的组合。
分组下拉
虽然长下拉列表并不理想，但您可以将某些项目归为不同类别，以使搜索所需内容变得更加容易。
分组下拉
多选菜单
从技术上讲，下拉菜单不是一个下拉菜单，但是可以考虑选择多个菜单。与下拉菜单不同，它们从一开始就是打开的，并且基本上是一个小的滚动窗口。
固定的可滚动菜单
虽然它们对于台式机来说很好，但是对于移动设备来说却很糟糕，因为它们是“滚动中的滚动”。
我个人仅使用过这种模式一次（在胁迫下，我可能会补充一点），而我很少在野外看到它们。如果有人有任何更多信息，请在评论中让我知道。
日期选择器
日期选择器仅应用于安排会议，活动等。具有星期几的日历可以帮助您决定何时组织早午餐，但是如果您想输入护照的有效期，则非常令人讨厌。我喜欢您可以在其中键入以及从下拉菜单中进行选择的选项，只需确保输入足够聪明，即可在您的月，日和年之间添加“ /”，否则会造成一些混乱。
日期选择器
关于如何让人讨厌你的指南：
当要求人们输入其卡或护照过期的日期时，请给他们日历下拉菜单。他们特别在意看卡在一周的哪一天到期。
当要求用户输入出生日期时，请使用下拉日历。奖励积分：确保他们浏览年份的唯一方法是单击每个月份。奖励积分：这种设计模式在退休家庭申请的在线表格上特别有用。
日期选择器和日期范围选择器是复杂的野兽，因此在这里我没有做太多详细的介绍，但是也许有一天我会做一个特殊的日期选择器备忘单。
与下拉列表类型不同，“下拉列表样式”是指下拉列表的实际外观，而不是其工作方式。下面，我列出了一些常见的样式。
标准样式（随附）
我将这种样式称为“标准”，因为这是我们最常看到的。
标准样式（随附）
标准款式（独立式）
我越来越多地看到带有分离菜单的样式。这很有意义，因为它允许菜单根据浏览器视口位于字段的上方或下方。
标准款式（独立式）
圆角边框
圆角边框可用于具有更有趣角色的UI。
圆角边框
带图标
在输入的开头添加一个简单的图标可以使其看起来更具“设计性”。每当有人抱怨表单看起来很无聊时（“史蒂夫，它的表单有20个输入-您认为它看起来像什么？”），我只添加图标。这是一个简单的修复。
带有图标的下拉菜单
懒惰的设计师提示：如果有人抱怨一个长的表格看起来很无聊，只需添加图标即可。这是一种经过实践检验的真实方法，几乎不需要任何努力，你的产品所有者会认为自从星期天早上薄煎饼以来，你是最好的东西。
带图片
通常，我避免在下拉列表中将图像添加到项目中–只是因为必须更新它而进行的维护很麻烦，尤其是当列表变化很大时。但是，当你想要显示事物之间的差异（狗的品种，蛋糕，办公家具等）时，此功能非常有用。
带有图像的下拉菜单
但是，我认为，由于下拉列表的大小有限，很难看到图像是什么（请参见上图），因此除非你将图像变大，否则通常不值得付出努力。
Material Design的已填充下拉列表
备忘单系列的读者会知道，我是Material Design（包括其下拉菜单）的忠实拥护者。
“材料设计”准则中不再使用“仅行”字段，但您仍会看到它潜伏在互联网上。如果您想了解更多，我在上一个备忘单中写过有关此内容，Dave Chui 在这里回答。
Material Design的线下拉菜单
“仅行”字段已替换为“填充的下拉列表”，在用户测试中似乎做得更好。不那么酷，但是更加用户友好–伙计们，这就是全部。
材料设计的填充下拉列表
Material Design的概述下拉列表
像其轮廓文本字段一样，Material Design的轮廓下拉列表非常酷。他们的菜单与实际的下拉容器分离，可以帮助解决一些可用性问题。
我敢肯定，大家都会看到这个性感的小动画，它的焦点在输入的顶部变小。我还想指出一些经常被（我）忽略的内容：如果查看实际的下拉列表，你会注意到第一项是空白的。这样一来，如果用户想稍后再返回该问题或将其留空，则可以“重置”下拉列表。
Material Design的概述下拉列表
当用户与任何类型的输入进行交互时，输入应切换状态或外观以向用户提供反馈。在这里，我们将研究下拉菜单的不同状态。
活跃状态
激活状态是下拉列表在用户与其进行交互之前的样子。
活跃状态
残障人士
如果禁用输入字段，则用户将无法与其进行交互，但他们将能够看到它。如果你的业务规则需要它，则可以使用它，但是这种情况可能不会经常出现。
禁用状态
徘徊
如果用户将鼠标悬停在下拉菜单上，则应指示该列表是可单击的。
悬停状态
提示：你不能将鼠标悬停在触摸设备上，因此，如果要为移动或平板电脑应用程序设计，请不要为其设计状态。
高亮状态
高亮显示状态是用户使用制表图时（这是用户使用“制表符”导航界面并使用“输入”输入信息）并在选择下拉菜单之前将其突出显示的状态。我们通常将其视为可点击项的“蓝色光环”。
但是，某些网站结合了突出显示和焦点状态，因此即使用户没有单击“输入”，下拉菜单也会立即打开。我对什么是最好的系统感到困惑。从逻辑上讲，将两个状态结合起来是有意义的；但是，当下拉菜单没有我明确告诉他们打开时，我感到非常困惑。其他人有经验吗？在评论中让我知道。
替代突出显示状态
焦点状态
焦点状态是项目可交互的时间。单击下拉菜单后，它将打开一个菜单并显示其选项。
尽管我参与了许多下拉菜单，但在活动状态和焦点状态下，箭头始终指向同一方向，但我更喜欢将箭头的方向切换为。我认为它们就像手风琴一样。而且，如果你超酷，则可以为箭头的方向变化设置动画。
焦点状态
当用户将鼠标悬停在菜单项上时，它将显示正在悬停的选项。
悬停时的焦点状态
输入完成
一旦用户选择了一个选项，输入将被捕捉或激活回到活动状态，除非它将显示所选的项目。
输入完成
失败反馈
使用自由文本输入时，用户可以打错字等。但是，由于下拉菜单中的选项是预先确定的，因此应该只有一种类型的失败反馈：“不完整”类型，用户只会如果他们在填写表单之前单击“提交”按钮，则会收到。
失败反馈
通常，我将使占位符/提示文本与你的自由文本字段相似。还不确定吗？以下是你的一些选择：
将占位符留空
如果其他文本字段没有占位符，通常最简单的选择是将占位符留空。
带有空白占位符的下拉菜单
在占位符中有通用提示
“-选择-”，“选择”等是放置下拉菜单的经典提示。
具有通用提示的下拉菜单
在占位符中使用促销短语
使用通用的“选择” /“选择”，然后让他们选择的东西是一种很酷的方法，可以使下拉菜单保持一定的一致性，同时还可以向用户提示要做什么。
具有通用组合的下拉菜单
在占位符中显示一个选项
尽管你可以选择在下拉菜单中显示预选的项目，但必须注意确保用户已阅读并阅读了该项目-否则，他们可能会同意他们不希望的内容。#classicDarkPatternMove
带有表面选项的占位符的下拉菜单
那么，你应该选择哪种选择呢？如有疑问，请选择一致性。如果你的文本字段均具有占位符，请使用占位符。
这专用于所有使我使用下拉列表输入出生年份的站点：f ***。通过滚动浏览整个月份列表，直到我最终找到自己的出生年份，我不再需要提醒我自己的年龄迅速增长。
如果你的选择少于五个
如果选项少于五个，则使用单选按钮可能比使用额外的单击进入所有列表选项更容易。超过五个选项的任何内容都会开始占用大量空间。
下拉选项：如果少于五个选项
注意：有人说规则应该少于六个，不小于五个，但是我，但我将让你作为规则的法官。
如果键入比选择容易
如果你的用户键入时间比从下拉列表中选择内容花费的时间少，你是否真的要问哪个更好？例如，对于出生日期，键入日期要比使用三个单独的下拉菜单容易。
下拉菜单替代：如果更容易键入
有时，开发人员可能会对此表示反对，因为进行下拉菜单比设置关于用户可以在自由文本字段中输入和不能输入哪些内容的所有规则要容易得多。唉，我已经多次失去这场战斗，但我仍在继续打好仗。
如果你有两个选择，并且它们分别为“开”和“关”（或“是”和“否”）
有两个选项的下拉列表有点烦人。尤其是“是/否”问题。切换可以很好地解决这些类型的问题。
下拉选项：如果你有两个选项的问题
如果选项是数字的
如果你的选项是数字选项，则有几个选项。
首先是让他们再次输入。步进器也很有帮助，但是我只建议在预期行为达到最大值5的情况下建议这样做。否则，你的可怜用户将坐在那里，单击为100。
下拉选项：如果你的选项是数字的
第二个是使用滑块选择值。滑块对于较大的数字或近似值特别有用。
下拉选项：如果选项是数字
下拉选项：如果选项在范围内
如果有很多选择
如果下拉菜单中有很多选项（如果可能，应避免使用），让用户“搜索”他们的选项。看到这种行为的最常见时间是在国家/地区下拉列表中，因为它们很大但也很容易回答。如前所述，最好将其与自动完成功能配合使用。
下拉选项：如果有很多选项，但用户在单击下拉菜单之前确实知道他们的答案
那么，什么时候应该使用下拉菜单？
输入需要满足两个要求，以便我考虑使用下拉列表：
有六个以上的选择。
如果选项不是，则用户会立即知道。例如，假设你的用户正在上传视频，并且主持人需要知道附加到视频的许可证类型。普通用户不会知道平台上的所有可用选项，因此需要下拉菜单。
当时间和预算紧张或正在处理MVP时，我们倾向于使用本机或默认选项。拥有定制的输入是锦上添花，但有时我们没有选择制作甜美的糖衣。在这种情况下，很高兴知道您必须使用什么工具。
当涉及跨不同设备的可用性时，本机下拉菜单也更安全。
我们的大规模结帐可用性测试和基准测试表明，尽管82％的电子商务网站在结帐流程中使用了定制设计的下拉菜单，但所有定制设计的下拉菜单中有31％都存在严重的可用性问题。
- 克里斯蒂安·霍尔斯特（Christian Holst）
默认值
以下是野外原生下拉列表的一些示例。要自己尝试，请转到此处：https : //html.com/attributes/option-selected/
原生移动下拉菜单| https://html.com/attributes/option-selected/
本机桌面下拉列表https://html.com/attributes/option-selected/
正如你在这些示例中看到的那样，它们都略有不同，具体取决于它们的平台和浏览器。它们不漂亮，但非常有用。
使用外壳
我曾经称其为“半习惯”，但最近我发现一篇文章将此模式称为外壳 -听起来更正式。因此，我发誓今后将其称为贝壳，我也发誓要在会议中使用它，并晒晒人们的力量，问我这是什么意思，以便让我炫耀自己的聪明。
“但是什么是外壳？”，你问。外壳是指一个字段看起来自定义，但是当您单击它时，它将使用本机下拉样式。这是一种使页面样式与您的品牌保持一致并降低开发成本的简单方法。它还有助于解决自定义字段随附的所有UX问题。
外壳下拉菜单
下拉菜单（包括标签）的活动状态是否超过44像素？（我们在其中包含标签，因为如果您单击标签，则下拉菜单仍将打开。）
下拉菜单中的每个订单项是否都超过了44像素（高8像素）之间？
颜色是否符合AAA合规标准？
你的下拉菜单有突出显示状态吗？
确保下拉菜单在选项卡地图上有效。
如果你确实使用了自定义下拉菜单，请确保在浏览器视口过低的情况下可以打开或关闭该下拉菜单。
下拉菜单会引起很多仇恨-的确如此。但有时几乎没有可行的替代方法，如果是这种情况，则应使你的难看的小下拉列表尽可能地好。
原文：https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432
作者：Tess Gadd