mfc dialog最小化后list不显示_交互设计细节系列：List-selection的设计思考

这是交互设计细节系列的第七篇：主要涉及到Listboxes（列表框）和Dropdown Lists（下拉列表）的设计思考。

第一篇：交互设计细节系列：Dropdowns的设计思考

传送门：

哥大鸭：交互设计细节系列：Dropdowns的设计思考​zhuanlan.zhihu.com

第二篇：交互设计细节系列：Parameters Controls的设计思考

传送门：

哥大鸭：交互设计细节系列：Parameters Controls的设计思考​zhuanlan.zhihu.com

第三篇：交互设计细节系列：Switch的设计思考

传送门：

哥大鸭：交互设计细节系列：Switch的设计思考​zhuanlan.zhihu.com

第四篇：交互设计细节系列：Tooltip的设计思考

传送门：

哥大鸭：交互设计细节系列：Tooltip的设计思考​zhuanlan.zhihu.com

第五篇：交互设计细节系列：Stepper的设计思考

传送门：

哥大鸭：交互设计细节系列：Stepper的设计思考​zhuanlan.zhihu.com

第六篇：交互设计细节系列：Dialog的设计思考

传送门：

稻草小八：交互设计细节系列：Dialog的设计思考​zhuanlan.zhihu.com

去网上查了一些资料，特别是关于用户研究方面的资料，看到了一些用研后的效果总结，自己也多多少少有些许启发，同时也希望带给你一些启发和思考。

以下内容主要源于国外一些关于List-selection设计研究的文章，所以更多意义上本人算是一个小搬运工，但同时会 加入一些自己在设计实践中的设计感受，希望对你有帮助~

原文作者：Anna Kaley

Listboxes 列表框

列表框主要包含三个主要部分：容器框、项目列表和标签。用户可以从列表中选择一个或多个选项，同时列表框支持滚动，当然这取决于它包含多少项和展示区域。复杂的列表框允许用户自定义调整容器框的大小，或对项目列表重新排序，或把项目从一个列表框移动到另一个列表框中进行选择。

列表框根据选择类型可以分成四类：

• 单选列表框：用户只能从互斥选项列表中选择其中一项。
• 多选列表框：用户可以按照需要选择多项选项，也可支持键盘快捷操作如Shift、Command或Control键等。
• 带复选框的多选列表框：这种类型的列表框包括使多个选择更加明显的复选框。
• 多选双列表框：由两个列表框组成，左侧列表框包含可选项，右侧列表框表示所选项。 “添加“按钮将选项从可选列表移至所选列表，而“删除”按钮将所选选项移回可选列表。同时支持用户上下移动选项以重新排序列表中的选项。

图源于原文

图源于原文

Dropdown Lists 下拉列表

下拉列表一般包含四个主要部分：容器框、向下箭头按钮、项目列表和标签。用户可以点击选择框或向下箭头以显示互斥项的列表，只支持选择一项。像列表框一样，下拉菜单可能会滚动，具体取决于展开时包含的项目数量。对于下拉列表，选定的选项或默认值在容器框中需要始终保持可见，选择一个选项后或在下拉列表的外部点击可将其关闭。

图源于原文

在实际设计实践中

列表框和下拉列表使表单更紧凑，特别是当许多选项均可用时，将这些选项显示为独立单选按钮或复选框的列表会占用不必要的空间。

同时列表框或下拉列表可以通过将选项限制为列表中的选项并确保用户以正确的格式输入数据来减少错误。

少量可用选项时，单独的选项列表是适当的，对于许多选项，可以使用列表框或下拉列表，这取决于可用的屏幕空间以及希望支持用户进行更改的程度。

对于可滚动的列表框和下拉列表，重要的是考虑它们的大小，将其尽可能设计成宽和短，将有助于用户快速轻松地进行查看和导航。

列表框的优缺点

列表框的优点包括：

• 支持单选、多选和容纳许多选项
• 低交互成本：在进行选择之前不用提前交互即可显示选项
• 增加选项可见性：一次查看多个选项可以提高决策效率并提高选择准确性
• 单列和多列视图：由于列表框不限于单列，因此如果列表框宽度允许，则可以显示更多选项，但是应尽量避免在多列列表框中进行水平滚动。
• 概览和重新排序：使用多选、双列表框，用户可以对项目的显示顺序进行一些控制，并获得被选中项目的清晰概览，这在列表框包含多个选项时很有帮助。

列表框的一些缺点：

• 屏幕空间：尽管它们可以做到很紧凑，但确实会比下拉列表占用更多的屏幕空间
• 不熟悉的交互：用户可能不会立即反应过来如何与列表框进行交互，特别是如果多选列表框中未包含复选框，则他们可能不知道如何进行多选。
• 用户可能无法同时查看所有选定的选项：如果在可视区域中有更多的选项可用，则用户可能无法同时查看所有选定的项目。

下拉列表的优缺点：

下拉列表的使用比列表框更频繁。下拉列表的优点包括：

• 它们占用的屏幕空间比较少
• 为用户提供最佳选项的能力，默认情况下是已选定的
• 淡化可选选项和更改：下拉列表可以隐藏其他可用的选项
• 熟悉的交互：下拉列表是大多数用户更熟悉的选择机制

下拉列表的一些缺点：

• 需要单击以显示其中的选项
• 它们容易被过度填充，当它们包含太多选项时，滚动浏览会很麻烦
• 当用户习惯于捕捉已知值时，它们会减慢速度。例如，输入生日时，在表单字段中直接输入通常会比与下拉列表交互更快、更简单。
• 容易忽略：不小心将光标偏离会关闭下拉菜单，用户不得不重新开始选择过程。

总结一波

当有5个或更多项目可供用户选择时，最好使用列表框或下拉列表。当然还需要考虑其他因素，如可用的屏幕空间，是否需要淡化或鼓励更改等。

在设计中包含列表框或下拉列表时，需要按照一定的逻辑顺序显示选项，这可能意味着将相关的条目分组在一起，将最常用的条目放在首位，或者按照字母顺序组织选项等。