【转帖】选择类控件设计解析（4）

回复

本帖最后由嗨，狗子于 2021-3-16 18:10 编辑

前文传送门：
选择类控件设计解析（1）
选择类控件设计解析（2）
选择类控件设计解析（3）

1.6 下拉菜单
这是是一种弹出按钮，单击后会显示包含选项列表的菜单。下拉列表以最简单的形式包含四个主要部分：一个容器框，一个朝下的箭头按钮，一个项目列表和一个标签。用户可以单击向下箭头以显示互斥项的列表，从中只能选择一项。[color=rgba(0, 0, 0, 0.84)]标准下拉菜单是针对我们所理解的“下拉”这个动词。在激活状态，当你点击文本输入栏的地方时，它会打开一个菜单。列表项仅在单击向下箭头后出现，选择一个项目或在下拉列表的外部单击将其关闭。

下拉列表的优点：为用户提供最佳选项的功能，默认情况下处于选中状态。

淡化替代选项和更改：由于下拉列表隐藏了其他可用选项，因此它们很好地淡化了替代选项并过分强调了进行更改的能力。（这在默认值可以满足大多数用户的情况下，并且其他选项可能对非专业用户来说是危险的或令人困惑的情况下是有利的。）

熟悉：下拉列表是大多数用户熟悉的选择机制，因为下拉列表在Web和本机应用程序中得到广泛使用。
缺点是需要点击项目列表中的选项，包括：
列表包含过多的内容，可能会很麻烦地滚动。

当用户习惯于捕获众所周知的值时，它们会使用户放慢速度。例如，当输入生日或信用卡到期日期时，与下拉列表进行交互相比，在直接键入内容通常更快，更容易。

忽视：由于表单内容非常紧凑，因此用户可能会意外忽视表单，网页和应用程序中的下拉列表。

容易消除：不小心将光标从框中移开会关闭下拉菜单，不得不重新开始选择过程。

下拉菜单配分组
当长型下拉菜单的设计不是特别理想时，你可以把列表分组，这样搜索起来更加简单。

可编辑的下拉菜单
可编辑的下拉菜单在菜单上方显示当前选择的菜单项，用户可以输入菜单中未列出的值。您可以将用户可以输入的值的类型限制为某些类型。例如，设计软件中输入字体大小时，系统会默认一些数值，同时支持你编辑修改。

快捷搜索选项
为了更方便用户的填入，支持字词搜寻，填写一半时，就会出现带有关键词名称选单。在选项很多的情况下，这个功能变得格外实用。

下拉菜单多选
下拉菜单多选是复选框的延伸：用户可以在同一个输入区域选择多个。这件控件用的比较少。
这种控件我一般在多个对象进行对比时才使用，如选择多个公司比较他们的能耗水平与用电规模，由于公司字段比较长，在查看选中状态时需注意容器能否充分显示选择的字段，在导航菜单中会明显拥挤，在表单中使用相对自由。如果可以的话，筛选中尽量避开这种类型。