Windows桌面应用程序设计指南（控件篇8-列表框）

使用列表框，用户可以从一组始终可见的列表值中进行选择。使用单选列表框，用户可以从互斥值列表中选择一个项目。 使用多选列表框，用户可以从值列表中选择零至多个项目。

一个典型的单选列表框

何时使用该控件？

思考以下几点：

• 列表内容是数据，还是项目选项？这两种对象，无论数量多少，都可以使用列表框来表示；相应的，单选按钮和复选框只适用于展示数量比较少的项目选项。
• 用户是否有更改视图、项目分组、按类筛选或者改变栏宽或排列顺序的需求？如果有的话，适合使用列表视图展示，而不是列表框。
• 该控件需要作为子项目的拖放源或拖放目标吗？如果是的话，使用列表视图来代替。
• 列表项目可以被复制或者粘贴吗？如果有此种需求，使用列表视图来代替。

对于单选列表框

• 控件需要从一组互斥的列表值中选择唯一一个值吗？如果不是，使用其他的控件。如果要选择多个选项，可以使用标准多选列表、复选框列表、列表生成器，或者添加/删除列表。

• 是否有在绝大多数情况下推荐大部分用户选择的默认选项？展示这个默认选项是否比展示其他所有可选项都要重要得多？如果是这样，考虑使用下拉列表，因为这样可以通过隐藏其它选项来鼓励用户维持默认的选项和设置。

示例：该例中，最高色彩质量是大多数用户的最佳选择，使用下拉列表显示是淡化其它选项的好方法。

• 列表是否需要持续的交互操作？ 如果是这样，使用单选列表来简化交互。
  

  在此示例中，用户会不断更改“显示项”列表中的选定项以调整合适的前景色和背景色。 在这种情况下，使用下拉列表进行操作将非常繁琐。

• 这个设置看起来像是一个相对数值吗？ 对于设置更改的效果，用户是否更倾向于看到即时反馈以便做出判断和调整？ 如果是这样，可以考虑使用滑块代替。

• 列表项目之间是否存在显著的层级关系？ 如果是，则使用树状视图控件。

• 节省屏幕空间很关键吗？ 如果是，则使用下拉列表，因为下拉列表控件所使用的屏幕空间大小是固定的，与列表项的数量无关。

对于标准多选列表和多选框列表

• 多选的操作，对于整个任务的完成来说是非常关键的，还是仅仅只是一般操作？如果很关键，就要使用复选框列表来展示，使得可以多选的选项更显眼，这对于非高级用户来说很有帮助。很多用户看到标准多选列表，根本意识不到是可以进行多项选择的。在复选框过于抢占视觉重点、以及过于占用空间的情况下，可以使用标准多选列表。

• 多重选择结果项保存的稳定性重要吗？ 如果是，请使用复选框列表、列表生成器或添加 / 删除列表，这些控件单击一次只更改一个项。 使用标准的多选列表，很容易因为误操作一下子清空所有的已选项。

• 控件是否可以用于从列表中选择零个至多个项？ 如果不是，使用其他控件。 若只能选择一个项目，使用单选列表。

预览列表

• 带有图像的选项是否比仅仅用文字表述的选项更有利于用户的选择？如果这样的话，使用预览列表。

列表生成器和添加/删除列表

• 控件是否可以用于从列表中选择零个至多个项？ 如果不是，使用其他控件。若只能选择一个项目，使用单选列表。

• 已选项的顺序是否重要？列表生成器和添加/删除列表支持对已选项进行排序，其他的多选控件则不支持。

• 给用户展示所有已选项的集合是否重要？列表生成器和添加/删除列表能单独展示所有已选项，其他的多选控件则不支持。

• 控件需要支持非限制性选项吗？ 如果是，请使用添加 / 删除列表，以便用户可以自己设定并选择当前不在列表中的值。

• 向列表中添加值是否需要一个专门的对话框来选择添加对象？ 如果是，请使用添加/删除列表，并在用户单击“添加”时显示对话框。

• 节省屏幕空间很重要吗？ 如果是这样，使用添加 / 删除列表，因为它不总是显示选项集（点击“添加”才会打开），从而使用较少的屏幕空间。

对于列表框，列表中的项目数量不是选择控件的考虑因素，因为它们可能有数千个项目，也可以只有一个项目(对于需要多选的列表则是一开始没有项目)。 因为列表框可以用于展示数据，所以可能不会事先知道项目的数量。

设计范例

列表框有好几种应用范例

• 单选列表框：只允许用户一次选择一个选项
  

  单选列表框

• 标准多选列表框:用户可以选择零到任意多个选项。
  标准版多选列表在外观上和单选列表没有差别，所以从视觉上并没有明显的特征能表明一个列表控件支持多选。由于用户需要自己探索才能发现多选这一功能特征，所以该控件最适用于多选操作非必要或者很少用到的情景下。
  标准多选列表有两种多选模式：多重选择和扩展选择。目前更常用的是扩展选择模式，这种模式允许用户使用拖拽框选或者辅助ctrl或shift键的方法一次性选择多个相邻或者不相邻的选项。而在多重选择模式下，不论是否按下ctrl或shift键，点击任意选项都会触发选项的状态在“选中”和“非选中”之间切换。由于此种特性，不建议选择“多重选择”模式。
  

  在上例中，多选列表允许用户选择任意多个选项

• 复选框列表：与标准的多选列表框一样，复选框列表允许用户选择零至任意数量的项目。
  而与标准多选列表框不同的是，复选框清楚地表明可以进行多重选择。对于必须进行多重选择或常用多重选择的任务，使用此列表模式。
  

  在此示例中，用户通常选择多个项，故使用复选框列表。 由于这样展示选项非常清晰，您可能认为复选框列表比标准多选列表更可取。 实际上，很少有任务需要多选操作或重度使用; 在这种情况下使用复选框列表会过多地突出选项。 因此，标准的多选列表更为常见。

• 预览列表：可以是单选的，也可以是多选的。不仅仅显示选项文字，同时会显示选项效果的预览图。
  

  在这个示例中，每个选项的预览都清楚地显示了选项的效果，这比单独使用文本更有效。

• 列表生成器：允许用户通过一次添加一个选项、自由设置列表顺序来创建选项列表。
  列表生成器由两个单选列表组成: 左侧的列表是一组固定的选项，右侧的列表是正在生成的列表。 列表之间有两个命令按钮:
  添加按钮，将当前选定的选项移动到正在生成的列表中，插入到选定项之前。 (双击选择项具有同样的效果。)
  移除按钮可以从生成列表中移除选定项，并使其回到选项列表。 (双击生成列表中的某个项具有同样的效果。) 生成列表可以选择使用“上移”和“下移”命令对列表项进行排序。
  

  在上例中，列表生成器通过从一组可选项中选择选项并排序，来生成一个工具栏。

• 添加/删除列表：允许用户通过一次添加一个或多个项来创建选项列表，并可以选择设置列表顺序(和列表生成器类似)。
  和列表生成器不同的是，点击“添加”按钮，会打开展示可选项的对话框。使用单独的对话框，在选择可选项上可以设计使用的控件会更加灵活：你可以使用专门的对象选择控件，甚至也可以使用一般的对话框。和列表生成器相比，该控件设计更紧凑，但添加选项的操作更麻烦一些。
  

  在上例中，用户可以在打开的菜单中选择选项以及排序。
  尽管列表生成器和添加 / 删除列表模式比其他多重选择列表控件看起来臃肿很多，但它们有两个独特的优点:
  1.无论是在构建列表时还是在构建之后，用户都可以控制列表顺序。
  2.用户可以查看所有已选项目的汇总列表视图，如果已选择项的数量很多，这一点尤为重要。
  它们的缺点则是需要占用更多的屏幕空间，并且在从零开始创建大量项目时难以使用。因此，它们最好用于创建短列表或修改已存在的列表。

设计指南

内容展示

• 按照逻辑顺序排列选项，例如将相关的选项打组，将最常用的选项放在最前面，或者使用首字母顺序排列选项。名称按字母顺序排列，数字也按大小顺序排列，日期则按照时间顺序排列。多于12个项目的列表应按字母顺序排序，以使项目更容易查找。
  

  正确示例：列表项按照空间顺序排列
  错误示例：列表项太多，应该按照首字母顺序排列
  正确示例：因为按照首字母顺序排列，该列表中的项目很容易查找。但是，“所有Windows产品”这一项不按照首字母顺序，应该排列在最前面

• 不论所有选项按照什么顺序排列，有“全部”、“所有”或者“零”、“无”含义的选项应该放在列表开头位置。

• 将元选项括在括号中。

在这个示例中，“(none)”是一个元选项，因为它不是选项的有效值，而是表示选项本身还没选择值

• 没选择的选项不要留空，用元选项代替。用户不知道空白的选项是什么意思，而元选项的含义是明确的。
  错误示例
  正确示例

交互设计

• 可以考虑设置双击行为效果。双击应该具有与选择一个项目并执行其默认命令相同的效果。

• 双击功能应该是备选项。应该始终有一个命令按钮或上下文菜单命令具有相同的效果。

• 如果用户不能对已选项进行任何操作，就禁止选择操作。
  

  正确示例：这个列表狂使用只读形式展示了更改项目，并无选择操作的必要。

• 当禁用一个列表框时，也要同时禁用与之相关的标签和命令按钮。

• 不要试图通过更改列表框中的已选项目来：
  1.执行命令；
  2.打开例如对话框等窗口来收集更多信息；
  3.动态展示与已选控件有关联的其他控件（屏幕阅读器无法监测到此类事件）。例外情况：随着选项更改而变化的静态说明文字是可以的。
  

  可行示例

• 避免横向滑动操作。多列列表需要横向滑动，通常这个比纵向滑动更难操作。当您有许多按字母顺序排序的项目并且有足够的屏幕空间用于宽控件时，可以使用需要水平滚动的多列列表。
  

  可行示例

多选列表

• 考虑在列表最下方展示已选择项目的数量，尤其是在用户很有可能进行多项选择操作的控件上。这样不仅能给用户有效的操作反馈，更能清楚地表明该控件支持多选操作。
  

  示例

• 你也可以展示其他与所选项有关的辅助信息，例如所选项所需要的资源空间。

  
  示例。在此示例中，安装所选项所需的磁盘空间比所选项目的数量更有意义。

• 如果可选项数量很多，并且可能有全选和全不选的操作，设计时加上“全选”和“取消全部”的按钮。

• 对于标准的多选列表，不要使用多重选择模式，因为此选择模式已被弃用。 对于等效的行为，改为使用复选框列表。

默认值

• 默认选中最安全和最保险的选项（以防止数据丢失或系统更改）。如果安全和保险不是需要考虑的因素，选择用户最可能选择或者最方便的值。
  例外情况: 如果控件表示处于混合状态的属性，则不要选择任何项，这种情况发生在为具有不同设置的多个对象，显示所有属性时。

建议尺寸和间距

列表框建议的尺寸和间距

• 列表框的宽度要适合于最长可选项。标准列表框是不能横向滑动的，所以用户只能看到列表框内展示的内容长度。

• 为文本（不包括数字内容）预留百分之三十的长度空间用于本地化翻译（但不要超过次长文字的百分之二百长度）

• 选择能显示整数项的列表框高度。避免竖直方向上展示不完整的项。

• 合理设计列表框高度，避免不必要的竖向滚动。展示项在3-20项之间的时候，是可以避免竖向滚动条的。尽量使列表框高一些以避免使用竖向滚动条。有很多项目的列表应该至少显示五个项目，一次显示更多项目，滚动条的使用会高效，并更容易定位到需要的项目上。

• 如果用户有实际需要，那么可以将列表框及其父窗口的大小设计为可调节。 这样做允许用户根据需要调整列表框的大小。 但是，可调整大小的列表框应该显示不少于三个项。

标签文字

控件标签

• 所有列表框都需要写明标签。 标签应该是单词或短语，而不是一个句子; 在标签的末尾使用冒号。
  特例: 如果标签仅仅是对对话框主要指令的重述，可以省略。 在这种情况下，主指令结尾处要使用冒号(除非是疑问句)，以及设置访问键。
  可行示例：该例中，列表框标签只是对主指令的重述
  优化示例：赘余的标签被删去，主指令附带冒号和存取键

• 如果列表框从属于单选按钮或复选框控件组，并由以冒号结尾的控件标签引入，则不需要在列表框控件上再添加附加标签了。

  
  在该例中，列表框从属于复选框控件组，与其共享标签文字
• 为标签文字分配单独的存取键。（详见交互-键盘一章的内容）
• 使用句子的大小写规则。

• 标签文字置于控件的上方或者左边，并沿控件的左边缘对齐。（若标签在控件左边，则与列表的第一项文字垂直对齐。）

  
  正确示例1

正确示例2 错误示例：标签置于控件上方时，不要与文字项左对齐
错误示例：标签置于控件左边时，不要与控件边缘垂直对齐

• 标准多选列表框的标签文字，应尽量表达出可以支持多选的意思；复选框列表的标签文字，就可以简洁一些。

  
  正确示例
  错误示例：标签文字没有清楚表明该列表框支持多选
  最佳示例：复选框已经清楚表明是支持用户的多选操作的，所以标签文字也不用写的很清楚了
• 可以在标签里的括号中写明单位(秒、连接符号等)。

选项文字

• 为每个选项设置不同的文字。
• 除非选项是专有名词，需要使用句子大小写规则来书写选项文字。
• 标签是词语或者短语，不是句子，末尾不要加标点符号。
• 所有选项尽量使用相同句式，保持相近的长度。

说明和补充性文字

• 如果需要添加关于列表框的说明文本，请将其添加到标签上方。使用结束标点符号写成完整的句子。
• 使用句式大小写规则。

• 其他有用但不必要的信息应该尽量简短。将此文本放在标签和冒号之间的括号中，或者不加括号放在控件下方。

  
  正确示例：补充文字放在列表下方

说明

当在其他位置提到某个具体的列表框控件时：

• 使用完整的带大小写规则的标签文字来指代该控件，但是不要带上存取键的下划线符号以及句尾符号，也不要使用“列表”这种文字描述。不要称该控件为“某某列表框”或是“某某框/栏”
• 提到列表项，使用具体的列表项文字，包括大小写规则。
• 在程序文档或其他技术文档中，该控件叫做列表框。其他地方称作列表即可。
• 用“选择”描述用户的交互动作。

• 在描述中尽量使用粗体文本书写标签和列表项名称。 否则，只有在需要时，才将标签和项目放在引号中，以防混淆。

  
  示例