列表视图

注意

此设计指南是为 Windows 7 创建的,尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用,但演示和示例并不反映我们 当前的设计指南

使用列表视图,用户可以使用单选或多选来查看数据对象的集合并与之交互。

带有列标题的列表视图的屏幕截图

典型的列表视图。

与列表框相比,列表视图具有更大的灵活性和功能。 与列表框不同,它们支持更改视图、分组、包含标题的多个列、按列排序、更改列宽和顺序、作为拖动源或拖放目标以及将数据复制到剪贴板和从剪贴板复制数据。

注意

布局列表框 相关的指南在单独的文章中提供。

这是正确的控件吗?

列表视图不仅仅是一个更灵活且功能更强大的列表框:其额外功能会导致不同的用法。 下表显示了比较。

使用情况 列表框 列表视图
Data type
数据和程序选项。
仅限数据。
Contents
仅标签。
标签和辅助数据,可能位于多个列中。
交互
用于进行选择。
可用于进行选择,但通常用于显示数据以及与数据交互。 可以是拖动源或拖放目标。
呈现
 已修复。
用户可以更改视图、分组、按列排序,以及更改列宽和顺序。

若要确定这是否是正确的控制措施,请考虑以下问题:

  • 列表是否显示数据,而不是程序选项? 如果没有,请考虑改用列表框。
  • 用户是否需要更改视图、分组、按列排序或更改列宽和顺序? 如果没有,请改用列表框。
  • 控件需要是拖动源还是拖放目标? 如果是,请使用列表视图。
  • 列表项是否需要复制到剪贴板或从剪贴板粘贴? 如果是,请使用列表视图。

复选框列表视图

  • 控件是否用于从数据列表中选择零个或多个项? 若要选择一项,请改用单项选择。
  • 多重选择对任务至关重要还是常用? 如果是这样,请使用检查框列表视图使多重选择变得明显,尤其是在目标用户不是高级用户的情况下。 如果没有,请使用标准的多选列表视图,如果检查框会吸引太多关注多个选择,或导致屏幕混乱太多。
  • 多重选择的稳定性是否重要? 如果是这样,请使用检查框列表、列表生成器或添加/删除列表,因为单击一次只更改一个项目。 使用标准多选列表时,即使意外清除所有选择也很容易。

注意

有时,看起来像列表视图的控件是使用列表框实现的,反之亦然。 在这种情况下,请根据使用情况而不是实现来应用准则。

使用模式

所有视图都支持单选,用户一次只能选择一项,以及多选,用户可以选择任意数量的项,包括无项。 列表视图支持 扩展选择模式,其中可以通过拖动或按住 Shift+单击或 Ctrl+单击来分别选择连续或非相邻值组来扩展所选内容。 与列表框不同,它们不支持 多选模式,在该模式下,无论 Shift 和 Ctrl 键如何,单击任何项都会切换其选择状态。

标准列表视图

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

使用情况 示例
磁贴
每个项显示为中等图标,右侧有标签和可选详细信息。
带有标题和详细信息的缩略图的屏幕截图
磁贴视图在右侧显示带有标签和可选详细信息的中等图标。
大图标
每个项显示为一个特大、大或中等的图标,其下方有一个标签。
大型缩略图列表视图的屏幕截图
大图标视图将每个项目显示为一个大图标,其下方有一个标签。
小图标
每个项都显示为一个小图标,右侧有一个标签。
小型缩略图列表视图的屏幕截图
小图标视图将每个项目显示为一个小图标,其标签在右侧。
列表
每个项都显示为一个小图标,右侧有一个标签。
在列表模式下,此视图对列中的项进行排序,并使用水平滚动条。 相比之下,图标视图模式是按行排序项并使用垂直滚动条。
列表模式下的列表视图的屏幕截图
列表模式将每个项目显示为一个小图标,其标签位于右侧。
详细信息
每个项以表格格式显示为一行。 最左侧的列包含项的可选图标和标签,后续列包含其他信息,如项属性。
此外,还可以添加或删除列,以及重新排序和调整大小。 行可以分组,按列排序。
详细信息模式下的列表视图的屏幕截图
“详细信息”视图以表格格式将每个项显示为一行。

列表视图变体

Label
列选择器
列表视图有时包含太多列,因此无法全部显示它们。 在这种情况下,最佳方法是默认显示最有用的列,并允许用户根据需要添加或删除列。
包含列选择器菜单的列表视图的屏幕截图
右键单击列标题将显示允许用户添加或删除列的上下文菜单。
“选择详细信息”对话框的屏幕截图
单击列标题上下文菜单中的“更多”将显示“选择列”对话框,该对话框允许用户添加或删除列以及重新排序列。
复选框列表视图
允许用户选择多个项。
多选列表视图的外观与单选列表视图完全相同,因此无法直观提示它们支持多选。 检查框列表视图可用于明确指示可以选择多个选项。 因此,此模式应用于多个选择是必需的或常用的任务。
包含多个检查框的对话框的屏幕截图
在此示例中,小图标视图使用检查框,因为多重选择对任务至关重要。
列出具有组的视图
将数据组织成组。
虽然“详细信息”视图通常支持按任何列对数据进行排序,但列表视图进一步允许用户将项组织成组。 分组的一些好处包括:
  • 组可在除列表) 以外的所有视图 (工作,因此,例如,用户可以按艺术家对专辑的特大图标视图进行分组。
  • 组可以是高级集合,这通常比直接将数据分组更有意义。 例如,Windows 资源管理器将日期分组到“今天”、“昨天”、“上周”、“今年早些时候”和“很久以前”。
包含多个数据组的列表视图的屏幕截图
在此示例中,Windows 欢迎中心在列表视图中显示分组项。

准则

呈现

  • 按逻辑顺序对列表项进行排序。 按字母顺序对名称进行排序,数字按数字顺序排序,日期按时间顺序排序。

  • 如果合适,允许用户更改排序顺序。 如果列表包含许多项,或者在某些情况下,使用非默认排序顺序更有效地找到项,则用户排序非常重要。

  • 使用 Always Show Selection 属性 ,以便用户可以轻松确定所选项,即使控件没有焦点。

  • 避免显示空列表视图。 如果用户创建列表,请使用用户可能需要的说明或示例项初始化列表。

    包含说明的搜索对话框的屏幕截图

    在此示例中,搜索列表视图最初提供说明。

  • 如果用户可以更改视图、分组、按列排序或更改列及其宽度和顺序,请保留这些设置,以便在下次显示列表视图时生效。 使它们在基于用户的按列表视图上持久保存。

交互

  • 使用单击选择用户指向的列表项。异常: 对于命令链接列表模式,单击会选择该项,然后关闭窗口或导航到下一页。

  • 请考虑提供双击行为。 双击应具有与选择项和执行其默认命令相同的效果。

  • 使双击行为变得冗余。 应始终存在具有相同效果的命令按钮或上下文菜单命令。

  • 如果列表项需要进一步说明,请在信息提示中提供说明。 使用完整句子和结尾标点符号。

    包含键盘信息提示的列表视图的屏幕截图

    在此示例中,信息提示用于提供更多信息。

  • 提供相关命令的上下文菜单。 此类命令包括剪切、复制、粘贴、删除或删除、重命名和属性。

  • 如果用户可以更改排序顺序和分组,请提供“排序依据”和“分组依据”上下文菜单。 第一次单击列名按该列的升序对列表进行排序或分组,第二次单击按降序对列表进行排序或分组。 使用另一列) 的上一个顺序 (作为辅助键。

    带有“排序依据”菜单的列表视图的屏幕截图

    在此示例中,“排序依据”上下文菜单更改排序顺序。 单击“名称”一次,按名称升序排序。 再次单击“名称”按名称降序排序。

  • 使用键盘使列表视图列标题易于访问。

    • 开发 人员: 可以通过在列标题控件上设置焦点来执行此操作。 此功能是 Windows Vista 的新增功能。
  • 禁用列表视图时,还要禁用任何关联的标签和命令按钮。

  • 避免水平滚动。 列表模式使用水平滚动。 此模式通常最紧凑,但水平滚动通常比垂直滚动更难使用。 如果紧凑性不重要,请考虑改用“小图标”视图。 但是,当有许多按字母顺序排序的项和足够的屏幕空间用于宽控件时,列表模式是一个不错的选择。

    可以接受:

    宽列表模式控件的屏幕截图

    在此示例中,使用列表模式是因为宽控件有许多项和大量可用屏幕空间。

多选列表

  • 请考虑在列表下方显示所选项目的数量,尤其是在用户可能选择多个项目时。 此信息不仅提供了有用的反馈,还清楚地表明列表视图支持多个选择。

    五个选定缩略图列表的屏幕截图

    在此示例中,所选项的数目显示在列表下方。

  • 或者,你可以提供其他可能更有意义的选择指标,例如选择所需的资源,而不是选定项的数量。

    显示磁盘空间的对话框的屏幕截图

    在此示例中,安装组件所需的磁盘空间比所选组件数更有意义。

  • 对于检查框列表视图,如果可能存在许多项,并且可能选择或清除所有这些项,请添加“全部选择”和“清除所有命令”按钮。

  • 使用混合状态检查框指示部分选择容器中的项。 混合状态不用作单个项的第三种状态。

更改视图

如果用户可以更改视图:

  • 默认情况下,选择最方便的视图。 用户所做的任何更改都应在按列表视图(按用户)上永久执行。

  • 使用拆分按钮、菜单按钮或下拉列表更改视图。 只要可行,请使用工具栏上的 拆分按钮 并更改按钮标签以反映当前视图。

    带有拆分“视图”按钮的列表的屏幕截图

    在此示例中,工具栏上的拆分按钮用于更改视图。

  • 提供“视图”上下文菜单。

    带有“视图”上下文菜单的列表的屏幕截图

在此示例中,“视图”上下文菜单用于更改视图。

详细信息视图

  • 请考虑使用磁贴视图来提高可读性。

    可以接受:

    包含窄列的详细信息列表的屏幕截图

    在此示例中,数据过多,并且窗口、列表和列太小,导致列表项难以读取。

    良好:

    包含组中数据的详细信息列表的屏幕截图

    在此示例中,“平铺”视图在不截断的情况下显示数据。

  • 选择适用于最长数据的默认列宽。 列表视图自动截断带省略号的长数据,因此,如果默认情况下显示几个省略号,则列宽是合适的。 虽然用户可以调整列的大小,但首选其他解决方案:

    • 调整每个列宽的大小以适应其数据。
    • 调整控件宽度的大小以适应其列和任何可能滚动条。
    • 如有必要,请使用水平滚动。
    • 仅截断奇数大小的项的数据或作为最后手段。

    如果默认必须截断正常大小的数据,请使窗口和列表视图可调整大小。 对于要本地化的任何文本 (,请额外包含 30% (最多 200% 的短文本) ,但不包括要本地化的数字) 。

    不正确:

    包含截断数据的列表列的屏幕截图

    在此示例中,大多数数据被截断。 许多省略号清楚地表明控件和列宽对于数据来说太小。

    不正确:

    包含截断数据的单列列表的屏幕截图

    在此示例中,将无缘无故地截断数据。

  • 选择适当的默认列顺序。 通常,按如下所示对列进行排序:

    • 首先,是项名称或标识数据。
    • 接下来,其他可用于区分列表项的数据。
    • 接下来,最有用的 (最好是短长度或固定长度) 数据。
    • 接下来,不太有用 (首选短长度或固定长度) 数据。
    • 最后一个长长度可变的数据。

    长度可变的长数据放置在最后一列中,以减少水平滚动的需求。 在这些类别中,将相关信息放在一个逻辑序列中。

  • 在适当情况下,允许用户添加和删除列,以及更改顺序。 默认情况下显示最有用的列。 这是使用“标题拖放”属性实现的。

  • 选择适合数据的对齐方式。 使用以下规则:

    • 右对齐数字、货币和时间。
    • 左对齐文本、ID (即使数字) ,也 (日期。
  • 对于可排序的列标题, 第一次单击某个标题将按列的升序对列表进行排序,第二次单击按降序排序。 使用上一个排序顺序 (另一列) 作为辅助排序键。

    包含已排序数据的详细信息列表的屏幕截图

    在此示例中,首先单击“名称”列,然后单击“类型”列。 因此,按升序键入是主要排序键,按升序排列的名称是次要排序键。

  • 使用“全行选择”属性 ,以便用户可以轻松地确定所有列中的选定项。

  • 除非可以对数据进行排序,否则不要使用可排序的列标题。

  • 如果只有一列且无需反向排序,请不要使用列标题。 请改用标签来标识数据。

    不正确:

    列标题中包含标签的列表的屏幕截图

    正确:

    控件上方带有标签的列表的屏幕截图

    在正确的示例中,使用标签而不是列标题。

列表大小调整和间距的屏幕截图

建议调整列表视图的大小和间距。

  • 选择显示整型项数的列表视图高度。 避免垂直截断项目。
  • 选择一个列表视图大小,以消除所有支持的视图中不必要的垂直和水平滚动。 列表视图应显示 3 到 20 个项目。 如果这样做会消除滚动条,请考虑使列表视图稍大一些。 包含可能有很多项的列表应至少显示五个项目,以便一次显示更多项,并使滚动条更易于定位,从而方便滚动。
  • 如果用户受益于放大列表视图,则使列表视图及其父窗口可调整大小。 这样做允许用户根据需要调整列表视图大小。 但是,可调整大小的列表视图应显示不少于三个项。

标签

控件标签

  • 所有列表视图都需要标签。 将标签编写为单词或短语,而不是句子,使用静态文本以冒号结尾。

  • 为每个标签分配唯一 的访问密钥 。 有关指南,请参阅 键盘

  • 使用 句子样式大写

  • 将标签置于控件上方,并将标签与控件的左边缘对齐。

  • 对于多选列表视图,请编写标签,明确指示可以进行多选。 复选框列表视图标签可能不太明确。

    正确:

    标签的屏幕截图:选择一个或多个加载项

    在此示例中,标签清楚地指示可以进行多重选择。

    不正确:

    标签的屏幕截图:加载项

    在此示例中,标签不提供有关多选的信息。

    可以接受:

    检查框列表标签的屏幕截图:加载项

    在此示例中,检查框清楚地指示可以选择多个选项,因此标签不必是显式的。

  • 可以在标签后的括号中指定单位 (秒、连接数等) 。

标题标签

  • 使标题标签保持简短 (三个单词或更少的) 。
  • 使用无结尾标点符号的单个名词或名词短语。
  • 使用 句子样式大写
  • 标题与数据对齐方式相同。

组标签

  • 对高级集合使用以下组标签:
    • 名称:使用姓名或字母范围的第一个字母。
    • 大小:未指定、0 KB、0-10 KB、10-100 KB、100 KB - 1 MB、1-16 MB、16-128 MB
    • 日期:今天、昨天、上周、今年早些时候和很久以前。
  • 否则,组标签使用所分组的数据的确切文本,包括大写和标点符号。

数据文本

说明性文本

  • 如果需要添加有关列表视图的说明性文本,请将其添加到标签上方。 使用带有结尾标点符号的完整句子。
  • 使用 句子样式大写
  • 其他有用但不必要的信息应保持简短。 将此信息放在标签和冒号之间的括号中,或在控件下方不带括号。

文档

引用列表视图时:

  • 使用确切的标签文本(包括其大写),但不要包含访问键下划线或冒号,并包括单词列表。 不要将列表框称为列表框、列表视图或字段。
  • 对于列表数据,请使用确切的数据文本,包括其大写。
  • 仅在编程和其他技术文档中将列表视图引用为列表视图。 其他任何位置都使用列表。
  • 若要描述用户交互,请使用选择来获取数据,然后单击以获取标题。
  • 如果可能,请使用粗体文本设置标签和列表选项的格式。 否则,仅当需要时,才将标签和选项放在引号中以防止混淆。

示例:在 “程序和服务 ”列表中,选择“ 文件和打印机共享”。

引用列表视图中检查框时:

  • 使用确切的标签文本(包括其大写),并包含单词检查框。 不要包括访问键下划线。
  • 若要描述用户交互,请使用选择和清除。
  • 如果可能,请使用粗体文本设置标签的格式。 否则,仅在需要时将标签置于引号中以防止混淆。

示例:选择“下划线检查框。