出自UXGuide.net

列表视图

List Views

目录 1 它用在这里合适吗？ 1.1 带复选框的列表视图（Check Box List View） 2 使用模式 2.1 标准列表视图 2.2 列表视图变体 3 设计规范 3.1 呈现 3.2 交互 3.3 多选列表 3.4 更改视图 3.5 详细信息视图 4 推荐尺寸与间距 5 标签 5.1 控件标签 5.2 列标题标签 5.3 分组标签 5.4 数据文本 5.5 说明文本 6 文档编写

列表视图（List View）用于通过单选或多选的方式，查看并操作一个数据对象集合。

典型的列表视图

列表视图的灵活性与功能性都比列表框要强。与列表框的区别在于，列表视图支持视图切换、分组、带标题的多个列、按列排序、更改列的宽度和顺序、作为拖放源或目标、以及使用剪贴板进行复制粘贴。

注：与布局和列表框相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

列表视图并非只是一个更加灵活而强大的列表框，其额外的功能已经使其用途发生了改变。下表对两者进行了比较：

	列表框	列表视图
数据类型	数据和程序选项	仅数据
内容	仅标签	标签与附加数据，可能具有多列
交互	用于进行选择	可用于进行选择，但更多地用于显示和操作数据。也可用作拖放源或目标。
呈现	固定不变	用户可以更改视图、分组、按列排序、以及改变列的宽度与顺序。

考虑下列问题，以判断该控件是否合适：

• 该列表展现的是否是数据，而非程序选项？如果不是，则应改用列表框。
• 用户需要更改视图、分组、按列排序、以及改变列的宽度与顺序吗？如果不需要，则应改用列表框。
• 该控件需要作为拖放源或目标吗？如果需要，则应使用列表视图。
• 需要使用剪贴板来复制或粘贴列表项吗？如果需要，则应使用列表视图。

带复选框的列表视图（Check Box List View）

• 该控件是否用于从一组数据中选择零项或多项？如果只需要选择一项，应改用单选模式。
• 多项选择对于该任务来说是必备的或者很常用吗？如果是，应使用复选框列表来明确多项选择，尤其当目标用户不是专业人士时。很多用户意识不到标准多选列表是支持多选的。如果复选框导致在多项选择上花费了太多不必要的注意力，或者是引起屏幕杂乱的话，则应使用标准多选列表。
• 多选的稳定性很重要吗？如果是，应使用复选框列表、列表构造器或添加/删除列表，因为每次单击只会改变一个项目。如果用的是标准多选列表，很可能一不小心就清除了整个选择。

注：有时，看起来像是列表视图的控件其实是通过列表框或其他控件来实现的。这种情况下，应当基于其使用来遵守设计规范，而不是实现。

使用模式

所有视图都支持单选和多选。单选即用户一次可选择一项，而多选即用户可选择任意项，包括不选。列表视图支持扩展选择模式，可以通过拖放鼠标或分别用“Shift+单击”及“Ctrl+单击”来选择连续或不相连的一组值。与列表框不同，列表视图不支持多重选择模式，即通过单击某个条目来切换其选中状态，而无须 Shift 或 Ctrl 键。

标准列表视图

列表视图控件支持五种标准视图：

平铺 各条目显示为右侧带有标签和可选详细信息的中等尺寸图标。	平铺视图显示右侧带有标签和可选详细信息的中等尺寸图标。
大图标 各条目显示为下方带有标签的超大、大或中等尺寸的图标。	大图标视图将各条目显示为下方带有标签的大图标。
小图标 各条目显示为右侧带有标签的小图标。	小图标视图将各条目显示为右侧带有标签的小图标。
列表 各条目显示为右侧带有标签的小图标。	在列表模式下，该视图按列排列各项，并使用水平滚动条。相反，图标视图模式则按行排列并使用垂直滚动条。 列表模式将各条目显示为右侧带有标签的小图标。
详细信息 各条目显示为表格格式中的一行。最左侧的列包含条目的可选图标及标签，后续的列则包含其他附加信息，如条目属性等。	此外，各列可以添加或删除，也可以重新排序或改变列宽。各行可以进行分组，也可以按列排序。 详细信息视图将各条目显示为表格格式中的一行。

列表视图变体

列选择器 列表视图有时可能会包含太多的列，以导致全部显示是不现实的。此时，最好的办法是默认显示最有用的列，然后让用户来根据需要添加或删除列。	右击列标题弹出快捷菜单，用户可以添加或删除列。 单击列标题快捷菜单中的“更多”将弹出“选择列”对话框，用户可以添加或删除列，包括重新排序。
带复选框的列表视图 用户可以选择多个项。	多选列表视图和单选列表视图的外观完全相同，因此没有任何视觉线索说明其支持多选。带复选框的视图列表则可用于明确指出可以进行多选。因此，该模式应当用于那些多选属于基础操作或者很常用的任务。 在这个示例中，小图标视图使用了复选框，因为在这个任务中多选是基础操作的。
分组视图列表 用分组来组织数据。	详细信息视图通常支持按任意列排序，视图列表还允许用户通过分组来组织条目。分组的好处有： 分组在所有视图（除列图外）中均可用。例如，用户可以在超大图标视图中根据艺术家进行分组。 分组可能是一些层次抽象的集合，这往往比直接按照数据进行分组更加有意义。比如，Windows® Explorer 将日期分为“今日”、“昨天”、“上星期”、“今年早些时候”和“很久以前几组”。 在这个示例中，Windows 欢迎中心在列视视图中将项目分组显示。

设计规范

呈现

• 以逻辑顺序排列列表项。名称以字母顺序排列，数值则以数字大小排序，日期则以时间顺序排列。
• 可能的话，让用户能够更改排序顺序。如果列表项很多或者使用非默认的排序方法时更容易找到需要的项目的话，用户排序则非常重要。
• 使用“始终显示选择”属性，这样即使控件没有获得焦点，用户也可以确定选中项。
• 避免呈现空的列表视图。如果用户创建了一个列表，应当将用说明文本或用户可能会需要的示例项来初始化该列表。

在这个示例中，Search 视图列表最初显示的是说明文本。

• 如果用户能够更改视图、分组、按列排序或是改变列及其宽度与顺序的话，应当维持这些设置使下次显示该列表视图时这些设置仍然有效。这些设置应当是基于特定的列表视图及用户的。

交互

• 使用单击以选择用户指向的列表项。例外：对于命令链接列表模式来说，单击选中某项后将关闭窗口或导航至下一个页面。
• 考虑提供双击操作。双击操作应当与选择一项并执行其默认命令的效果相同。
• 双击操作应当是冗余的。应当始终有一个命令按钮或快捷菜单命令具有相同的效果。
• 如果列表项需要进一步解释，应当通过信息提示来提供解释说明。应当使用完整的带有句末标点的句子。

在这个示例中，信息提示用于提供进一步的信息。

• 为相关命令提供快捷菜单。这类命令包括：剪切、复制、粘贴、移除/删除、重命名、属性。
• 如果用户可以更改排序顺序和分组的话，应当提供“排序方式”和“分组方式”快捷菜单。第一次单击列名会将列表按照该列以升序方式排序或分组，再次单击则以降序排序或分组。将之前的顺序（其他列）作为次要排序键。

在这个示例中，排序方式快捷菜单用于更改排序顺序。单击一次“Name”会按名称以升降排列，再次单击则会按名称以降序排列。

• 保证列表视图的列标题能够通过键盘访问。
  • 致开发人员：你可以通过将焦点置于列标题控件上来实现。这是 Windows Vista® 中新增加的功能。
• 当禁用列表视图时，应当同时禁用所有相关联的标签和命令按钮。
• 避免水平滚动。列表模式可以使用水平滚动。虽然该模式通常是最为紧凑的模式，但通常来说，水平滚动比垂直滚动要更难使用。如果紧凑性不太重要的话，考虑使用小图标视图来代替。不过，当存在大量以字母顺序排列的条目且屏幕空间足以容纳较宽的控件时，列表模式是一个好的选择。

可以接受：

在这个示例中，使用了列表模式，因为条目数量很多，且有大量屏幕空间可以用于较宽的控件。

多选列表

• 考虑在列表下方显示选中项的数量，尤其当用户往往会选择多项时。该信息不仅仅提供了有用的反馈，而且还明确指出该视图列表支持多重选择。

在这个示例中，选中项的数量显示在列表的下方。

• 除了选中项的数量之外，你还可以提供其他可能更加有意义的统计单位，比如选中项的资源需求。

在这个示例中，安装这些组件所需的磁盘空间比选中项的数量更加有意义。

• 对于带复选框的视图列表来说，如果有可能存在大量列表项，且经常需要选中或清除所有项的话，应当添加“全部选择”和“全部清除”命令按钮。
• 将混合状态的复选框用于指出容器中条目的部分选中。混合状态不应当被用作单独条目的第三种状态。

更改视图

如果用户能够更改视图：

• 默认选择最方便的视图。用户所做的任何更改应当被维持，基于特定列表视图和用户。
• 使用分割按钮、菜单按钮或下拉列表来更改视图。只要有可能，应当在工具栏上使用分割按钮并更改按钮的标签以反映当前视图。

在这个示例中，工具栏上的分割按钮用于更改视图。

• 提供视图快捷菜单。

在这个示例中，视图快捷菜单用于更改视图。

详细信息视图

• 考虑使用平铺视图以提高可读性。

可以接受：

在这个示例中，数据量很大，且窗口、列表及各列又太小，导致列表项难以阅读。

较好：

在这个示例中，平铺视图显示数据时没有截断。

• 为最长的数据选择合适的默认列宽。列表视图会自动使用省略号截断长数据，因此如果默认情况下能够显示较少的省略号的话，列宽较为合适。虽然用户能够改变列宽，但应当先考虑其他方案：
  1. 调整各列宽度以适合其数据。
  2. 调整控件宽度以适合其列以及可能的滚动条。
  3. 如果必要的话，使用水平滚动。
  4. 仅将截断数据用于特殊长度的项或作为最后的手段

如果正常长度的数据默认情况下必须截断的话，应将窗口和列表视图设为可缩放的。应当额外空出 30% 的长度（对于较短的文本来说，最多 200%）用于需要被本地化的任何文本（但不包括数字）。

错误：

在这个示例中，大部分数据都被截断了。大量的省略号明确指出控件及列的宽度对于这些数据来说太小了。

错误：

在这个示例中，数据没有理由地被截断了。

• 选择合适的默认列顺序。一般说来，按照下列顺序排列各列：
  1. 首先，项目名称或用于标识的数据。
  2. 然后，能够有效区别与其他列表项的其他数据。
  3. 然后，最有用的（最好是简短或长度固定的）数据。
  4. 然后，次要用处的（最好是简短或长度固定的）数据。
  5. 最后，较长的、长度不定的数据。

较长的、长度不定的数据被放在最后几列，以减少水平滚动的需要。在这些分类中，应当将相关的信息以逻辑顺序进行放置。

• 适当的时候，可允许用户添加或移除列，以及更改其顺序。默认显示最有用的列。这可以通过“拖放列标题”属性实现。
• 选择适合数据的对齐方式。考虑下列规则：
  • 右对齐数字、货币、日期和时间。
  • 左对齐文本和 ID（即使是数值）。
• 对于可排序的列标题，第一次单击列名会将列表按照该列以升序方式排序或分组，再次单击则以降序排序或分组。将之前的顺序（其他列）作为次要排序键。

在这个示例中，先单击了 Name 列，然后是 Type 列。结果，以升序排列的 Type 是排序主键，而以升序排列的 Name 则是次键。

• 使用“选中整行”属性，用户在任何列中都能够迅速确定选中项。
• 如果数据不能排序则不要使用可排序的列标题。
• 如果只有一个列，而且没有必要反转排序顺序的话，就不要使用列标题。应当改用标签来标识数据。

错误：

正确：

在正确的示例中，标签代替了列标题。

推荐尺寸与间距

用于列表视图的推荐尺寸与间距

• 调整列表视图的高度以能够显示整数个列表项。避免纵向截断列表项。
• 调整列表视图的尺寸以在所有支持的视图中消除不必要的垂直与水平滚动。列表视图应当显示 3 至 20 个项。如果把列表视图稍稍加大可以消除垂直滚动条的话，可以考虑调整列表视图的尺寸。可能包含大量条目的列表应当至少显示五项，使其同时能够显示更多条目以使滚动更加容易，也可以使得滚动条更易于定位。
• 如果增大列表视图对用户来说有好处的话，应当使列表视图及其父窗口可以缩放。这么做使用户能够根据需要调整列表视图的尺寸。但是，可缩放的列表视图应当是至少出现三次的。

标签

控件标签

• 应当为所有列表视图添加标签。标签文本应当为以冒号结尾的单词或短语，而不是句子。应当使用<a href="../../glossary.aspx">静态文本</a>。
• 分配唯一的访问键。相关设计规范，参见键盘。
• 使用句子大写样式。
• 将标签放置于控件的左侧或上方，并将其与控件的左边对齐。
• 对于多选列表视图，应当使用明确指示可以多选的标签。带复选框的列表视图的标签则可以无须那么明显。

正确：

在这个示例中，标签明确指出可以进行多选。

错误：

在这个示例中，标签没有提供关于多选的信息。

可以接受：

在这个示例中，复选框明确指出可以进行多选，因此标签无须那么明显。

• 你可以在标签之后的括号中指定单位（如“秒”或“连接”）。

列标题标签

• 保持列标题标签简洁（不超过三个单词）。
• 使用不带句末标点的单个名词或名词短语。
• 使用句子大写样式。
• 将列标题与其数据以相同的方式对齐。

分组标签

• 为高度抽象的分组集合使用下列标签：
  • 名称：使用名称的第一个字母或字母范围。
  • 大小：未指定、0 KB、0-10 KB、10-100 KB、100 KB - 1 MB、1-16 MB、16-128 MB
  • 日期：今日、昨天、上星期、今年早些时候、很久以前。
• 其他情况，严格将用于分组的数据文本作为分组标签，包括其大小写方式和标点符号。

数据文本

• 使用句子大写样式。

说明文本

• 如果你需要为列表视图添加说明文本，应当将其放置在标签的上方。应使用完整的包含句末标点的句子。
• 使用句子大写样式。
• 那些有用但并非必须的附加信息应当保持简短。这类信息要么放在标签与冒号之间的括号内，要么不带括号放在控件的下方。

文档编写

当提及列表视图时：

• 原样引用标签文本，包括其大小写及“list（列表）”字样，但无须包含访问键下划线和冒号。不要将视图列表称为“list box（列表框）”、“list view（列表视图）”或“field（字段/域）”。
• 对于列表数据，应原样引用数据文本，包括其大小写。
• 仅在编程和其他技术文档中将列表视图称为“list views（列表视图）”，其他地方都称为“list（列表）”。
• 当描述用户的交互行为时，对于数据应使用“select（选择）”，而对于列标题则应使用“click（单击）”。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：In the Programs and services list, select File and printer sharing.（在“程序与服务”列表中，选择“文件与打印机共享”。）

当提及复选框时：

• 原样引用标签文本，包括其大小写，并包括“check box（复选框）”字样。不要包含访问键下划线。
• 用“select（选择）”和“clear（清除）”描述用户的交互行为。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：Select the Underline check box.（选择“下划线”复选框。）