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

回复

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

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

1.5 列表选择
列表选择控件包含选择按钮，容器框，项目列表和标签。用户可以单击容器框中随附的项目，以从列表中选择一个或多个。列表框可能会滚动，具体取决于它包含的项目数和可见区域，更复杂的列表框允许用户通过将项目从一个列表框移动到另一个列表框来调整容器框的大小，重新排列项目列表以及进行选择。

优点：
交互成本低：列表框不需要用户单击任何内容即可在进行选择之前显示其中的选项（但是，如果有太多项，它们可能需要用户滚动列表）。
增加了可见性：一次查看多个选项的能力可以加快决策速度并提高选择准确性。列表选择为内容提供了更多的空间。它们易于阅读，可以容纳多文字，文本可以换行，还可以增加图片。但是，应避免在多列列表框中进行水平滚动。
用多选双列表框，用户可以控制项目的显示顺序，并获得所选项目的清晰概述，这在列表框包含多个选项时很有用。
缺点：
空间：他们往往很占用空间，不适合用在垂直高度受限的页面中。
陌生：用户可能不知道如何立即与列表框进行交互-特别是，如果多选列表框中未包含复选框，则他们可能不知道如何选择倍数。这就是为什么将复选框包含在多选列表框中非常重要的原因，除非它们将注意力集中在多选功能上或增加不必要的屏幕混乱。
用户可能无法一次看到所有选定的选项：如果在可见区域中看不到更多的可用项目，则用户可能无法同时看到所有选定的项目。为避免此缺点，请在列表框上方将所选项目显示为标记，或在不可滚动的列表中突出显示所选项目。
可以根据选择类型进行分类，这些列表框形式都可以滚动。

列表单选
用户只能从互斥选项列表中选择一项。最初的单选按钮被用于列表中超过6个选项时，被设计成垂直方向，圆形轮廓，并摆在列表项的开头，这就是列表单选。现一些设计中，选中被设计成在列表选项外加一个描边框形式或带有背景色，用以节省水平空间。