Windows桌面应用程序设计指南(控件篇9-列表视图)

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


一个典型的列表视图

列表视图比列表框更灵活,且具有更多功能。和列表框不同,列表视图支持更改视图、分组、带标题的多列视图、按列排序、更改列宽和顺序、成为拖放源或拖放目标、以及从剪贴板复制数据。

何时使用该控件?

列表视图不仅仅是一个拥有更多功能和更灵活的列表框:它的多功能性意味着更多的用途。下面是对照表:

列表框 列表视图
数据类型 数据和项目选项 仅展示数据
内容 只包含标签文字 标签和辅助信息,并可以支持多栏展示
交互 用于提供给用户选择的选项 可以用于给用户做选择,但也经常用来展示以及对数据进行交互,可以作为拖拽源和拖放目标控件
展示方式 固定 用户可以更改视图、分组、分栏展示、改变栏宽以及展示顺序

再决定是否使用列表视图时,思考以下几个问题:

  • 列表是否仅用来展示数据,而非项目选项?如果不是,考虑使用列表框来代替列表视图。
  • 用户是否有更改视图、分组、分栏展示、改变栏宽以及展示顺序的需求?如果不是,考虑使用列表框来代替列表视图。
  • 控件需要成为拖拽源和拖放目标吗?这种情况要使用列表视图。
  • 列表项需要支持复制粘贴操作吗?这种情况要使用列表视图。

复选框列表视图

  • 控件是否用于从数据列表中选择零至多个项?若只需选择单个项目,请使用单选列表。

  • 多重选择对于任务是必要的还是仅仅常用的?如果是必须的,特别是在目标用户不是高级用户的情况下,使用复选框列表视图使多选特性可见。如果不是必须的,使用标准多选列表视图。复选框会将过多的注意力吸引到多重选择上,或者导致屏幕显示效果杂乱。

  • 多选效果的稳定性重要吗? 如果是,请使用复选框列表、列表生成器或添加 / 删除列表,因为单击一次只更改一个项。使用标准多选列表,很容易不小心就清空所有的选择。

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

应用范例

所有列表视图都支持单项选择(用户一次只能选择一个项目)和多项选择(用户可以选择零至任意数量的项目)。列表视图支持扩展选择模式,即用户可以分别通过拖动或Shift + click/Ctrl + click 来选择相邻或不相邻的值组进行扩展。与列表框不同,它们不支持多重选择模式,在这种模式下,单击任何项目都可以切换其选择状态而无需按住 Shift 或 Ctrl 键。

标准列表视图

列表视图控件支持五种标准视图:
1.磁块平铺/堆叠视图
项目缩略图以中等大小图标展示,标签名和项目细节说明在左边排列。

磁块平铺

2.大图标
每个项目都显示为一个超大、大或中等大小的图标,下面附有一个标签。
大图标视图

3.小图标
每个项目都以小图标加一个右边的标签展示。
小图标视图

4.列表项
每个项目都以小图标加一个右边的标签展示。在列表模式下,此视图对项目进行分栏排序,并使用水平滚动条。 相比之下,小图标视图模式按行排列项目,并使用垂直滚动条。
列表项视图

5.详细列表
类似表格格式,每个项目显示为一行。最左边的列包含项的可选图标和标签,后面的列包含附加信息,比如项的属性信息。此外,栏可以增加或者删减,也可以调整展示顺序或者宽度大小。行间可以分组,也可以按栏属性分类重排。
详细列表

列表视图的变种形式

1.栏选择器
列表视图有时包含太多栏,不适合全部显示。在这种情况下,最好的方法是默认显示最有用的栏信息,并允许用户根据需要添加或删除显示栏。

右击栏标签,以显示可供用户增加或删除列的内容面板

单击列的内容面板中的“更多”将显示“选择细节”对话框,该对话框允许用户添加或删除栏以及对栏排序。

2.复选框列表视图
允许用户多选选项。可多选的列表视图在外观上与单选列表视图完全相同,没有支持多选的可视线索。可以使用复选框列表视图清楚地表明列表可以进行多选。因此,这种模式应该用于必须进行多选或通常需要多选的任务。

在此示例中,小图标列表视图使用复选框代替,因为多选性的可见对任务至关重要。

  1. 分组列表视图
    详细列表视图通常支持按任意栏规则对数据进行排序,还允许用户将项目分组。分组的好处在于:
  • 除列表项视图外,所有列表视图模式都支持分组。例如,用户可以按照艺术家分类对超大图标视图的相册进行分组。
  • 组可以是高级集合,通常比直接按数据分组更有意义。例如,文件资源管理器按日期的分组为“今天”、“昨天”、“上周”、“今年早些时候”和“很久以前”。


    在此示例中,Windows 欢迎中心在列表视图中显示分组项。

设计指南

展示规则

  • 按逻辑顺序排序列表项。 按字母顺序排列姓名,按数字升序/降序排列数字,按时间顺序排列日期。

  • 尽可能允许用户更改排列顺序。 如果列表包含许多项,或者如果使用默认排序以外的排序方法,能帮助用户更有效地找到目标项目,那么设置用户排序功能就非常重要。

  • 使用“始终显示选中项”属性,这样即使控件没有焦点,用户也可以很容易地确定已选项。

  • 避免显示空列表视图。 如果用户从零创建列表,请使用用户可能需要的指令或示例项,填充初始列表。

    在此示例中,搜索列表视图最初显示指令。

  • 如果用户可以更改视图、组、按列排序,或者更改列及其宽度和顺序,请保留用户最近一次使用的设置,在下次显示列表视图时生效。 使它们在每个用户、每个列表视图上生效。

交互

  • 单击操作选中用户希望选择的选项。例外情况:对于命令链接列表模式,单击选择项不仅仅选中了项目,还可以关闭窗口或导航到下一页。

  • 考虑设置双击行为。双击应该有“选中该项并执行该项内容的设置”的含义。

  • 双击的作用应该是辅助性的。应该始终设置一个命令按钮或上下文菜单命令,具有与双击行为相同的效果。

  • 如果选项需要进一步解释说明,将解释说明放在信息提示中。使用完整的句子结构和句末标点符号表达解释说明。

    信息提示示例

  • 提供相关命令的关联菜单。这些命令包括剪切、复制、粘贴、移除或删除、重命名和属性设置。

  • 如果允许用户更改排序方式和分组,需要设置排序方式和分组方式的关联菜单。首次单击列名,按该列的升序对列表进行排序或分组,再次单击列名,则按降序对列表进行排序或分组。使用以前的顺序(来自另一列)作为辅助键。

    在此示例中,“排序方式”关联菜单可以供用户更改排序方式。 单击“名称”按名称升序排序。 再次单击“名称”则按名称降序排序。

  • 设置键盘可以访问列表视图的列标题。
    开发人员: 您可以通过将焦点设置在列标头控件上来实现这一点。这项功能是Windows Vista新增的。

  • 当列表视图被禁用时,与之相关的标签和命令按钮也都需要被一起禁用。

  • 避免出现横向滚动条。列表项视图模式使用水平滚动条。这种模式通常是展示最紧凑的,但水平滚动通常比垂直滚动更难使用。如果压缩展示空间不是很重要,可以考虑使用小图标视图。 但是,如果有许多按字母顺序排序的项,并且有足够的屏幕空间用于展示宽控件,则列表项模式是一个不错的选择。
    可行的样式

    在这个示例中,使用列表项模式是因为项目很多,也有足够的可用屏幕空间用于宽形控件。

可多选的列表

  • 考虑在列表下方显示已选中的项目数,尤其是在用户很有可能多选项目的时候。这些信息不仅提供了有用的反馈,而且清楚地表明列表视图支持多重选择。
    在此示例中,所选项目的数量显示在列表的下方。
  • 除了可以显示已选中的项目数,也可以给出其他可能更有意义的信息,例如所选项目所需占用的内存。


    示例
  • 对于复选框列表视图,如果可能有许多项,并且可能选择或清除所有项,则添加“全选”和“清空选项”命令按钮。
  • 使用混合状态复选框表示部分选中容器中的项。 混合状态不用作单个项的第三状态。

更改视图

如果允许用户更改视图:

  • 默认情况下展示最适宜的视图。 用户所做的任何更改都应该在每个列表视图和每个用户的基础上稳定不变。

  • 使用分裂式按钮(分裂式按钮有两个组成部分:标签和箭头。点击标签文字执行默认动作,点击箭头会展开其他可选动作选项)、菜单按钮或者下拉列表放置更改视图选项。在合适的情况下,在工具栏上使用分裂式按钮,并更改按钮标签以表明当前视图使用的是何种视图展示方式。

    该例中使用分裂式按钮来更改视图

  • 使用上下文菜单展示“视图”选项。

    上下文菜单示例

细节信息的展示

  • 考虑使用堆叠视图提高可读性。
    可接受的展示方式
    在该例中,数据太多,但是展示窗口、列表和栏宽都太小了,列表项有些难以阅读。

更好的展示方式

在该例中,堆叠视图完整地展示了数据

  • 选择适合最长项数据的长度作为默认栏宽。列表视图会自动截断长数据,附以省略号结尾,所以使用适当的列宽,可以减少省略号出现的次数。尽管用户可以调整列的宽度,但更好解决方案有:
    1.使每个列的宽度都能适应其数据。
    2.调整控件宽度,以适应其列宽和任何可能出现的滚动条。
    3.如果需要,使用横向滚动条。
    4.只为奇数宽度的项目或作为最后手段截断数据展示。

如果默认情况下必须截断正常宽度的数据,那么要将窗口和列表视图的大小设置为可调整。 对于要本地化的任何文本(但不包括数字) ,额外增加30% (对于较短的文本,增加200%)的宽度空间。

错误示例

示例中多数数据都被截断了。这明显表示控件以及列宽的大小是不够数据进行展示的

错误示例

该例中的数据毫无理由地被截断了

  • 设置合适的默认栏目顺序。一般的栏目顺序是;
    1.项目名称或者主数据;
    2.其他用于区别项目的有用数据;
    3.最有价值的数据(通常比较短,或者以固定长度展示);
    4.稍不那么重要的数据(通常比较短,或者以固定长度展示);
    5.很长并且长度不一的数据。

长的、长度不一的数据放在最后一列,以减少横向滚动的必要。在以上这些类别中,按照逻辑顺序将相关信息放在一起。

  • 适当时,允许用户添加、删除列,以及更改列顺序。 默认情况下显示最有展示价值的列。 这个操作可以通过头部拖放属性实现。

  • 选择适合数据属性的对齐方式来展示数据。具体规则是:
    1.数字、货币金额和时间右对齐。
    2.文本、 id (包括数字id)和日期左对齐。

  • 对于可排序的列标题,第一次单击标题按列的升序对列表进行排序,第二次单击按降序进行排序。使用(来自其他列的)上一次的排序方式作为第二次排序列的排序方式。

在该例中,第一次点击“名称”栏进行排序,第二次点击“类型”栏。故对“类型”这一栏的排序而言,点击第一次是按照类型升序排列,点击第二次是按照名称升序进行排列。
  • 使用“整行选中”属性,以便用户可以随时确定所有列中的选定项。
  • 除非可以对数据进行排序,否则不要使用可排序的列标题。
  • 如果只有一列并且不需要反向排序项目,则不要使用列标题。 只需要使用标签形式来说明数据用途。
    错误示例
正确示例

建议尺寸和间距

列表视图推荐的尺寸和间距
  • 设置能显示整数行项目的行高。避免竖向截断项目。
  • 设置合适的列表视图尺寸,以尽量避免所有支持视图上的横向和纵向上不必要的滚动条。列表视图应展示3-20个项目,如能避免滚动条,可尽量使列表视图大一些。为了更容易定位,可能有很多项目的列表应该至少显示五个项目,这样滚动一次能展示更多的选项,并使滚动条更方便定位。
  • 如果增大列表视图的尺寸对用户更友好,那么可以设置允许调整列表视图及其父窗口的大小。 这样做允许用户根据需要调整列表视图的大小。 但是,可调整大小的列表视图应该显示不少于三个项。

标签文字

控件标签

  • 所有列表视图都需要标签。用词语或者短语、而不是句子书写标签,整个标签使用静态文本,用冒号结尾。
  • 为每个标签设置单独的存取键。
  • 使用句式大小写规则。
  • 将标签文字置于控件上方并与之左对齐。
  • 对于可多选的列表视图,在标签文字中要清楚说明可多选。带复选框的列表视图,在标签文字上就可以更简洁一些。


    正确示例

    错误示例

    可接受示例
  • 在标签文字结尾可以用括号标明具体单位(秒等)。

标题标签

  • 标题标签应使用三个以下的单词描述以保持简洁。
  • 使用单个名词或名词短语,结尾不使用标点符号。
  • 使用句式大小写规则。
  • 用以与数据相同的方式对齐标题标签文字。

分组标签

  • 对高级集合使用以下组标签:

1.名称: 使用名称或字母范围的第一个字母。
2.大小: 未知大小,0 KB,0-10 KB,10-100 KB,100 KB-1 MB,1-16 MB,16-128 MB
3.日期: 今天,昨天,上周,今年早些时候,和很久以前。

  • 其他情况,组标签使用要分组的数据的确切文本,包括大小写和标点符号。

数据文字标签

  • 使用句式大小写规则。

说明文字

  • 如果需要添加关于列表视图的说明文本,请将其添加到整个列表视图的标签上方。使用带结束标点符号的完整句子。

  • 使用句式大小写规则。

  • 其他有用但不必要的信息应该保持简短。将这些信息放在标签和冒号之间的括号中,或者不带括号写在控件下方。

说明

当提到列表视图时:

  • 使用确切的标签文本,包括其大小写,但不要加上访问键下划线或冒号,并包括单词列表。不要将列表框引用为列表框、列表视图或字段。
  • 对于列表中的数据项目,请使用包含其大小写的确切数据文本。
  • 仅在编程和其他技术文档中将列表视图作为列表视图引用。
  • 要描述用户交互,请使用“选择数据项”,以及“单击标题”。
  • 如果可能,使用粗体文本格式化标签和列表选项。 否则,只有在需要时,才将标签和选项放在引号中,以避免混淆。
    例如: 在程序和服务列表中,选择文件和打印机共享

当提到列表视图中的复选框时:

  • 使用准确的标签文本,包括其大小写,并包含“复选框”文字说明。不要包含访问键的下划线。
  • 要描述用户交互,请使用“选择”和“清除选择(clear)”。
  • 如果可能,使用粗体文本格式化标签。 否则,只有在需要时才将标签加上引号,以防混淆。
    例如:选择下划线复选框。

你可能感兴趣的:(Windows桌面应用程序设计指南(控件篇9-列表视图))