树视图

备注

此设计指南是针对 Windows 7 创建的,并且尚未更新 Windows 的更新版本。 本指南中的大部分内容仍适用,但演示和示例并不反映我们 当前的设计指导

使用树视图,用户可以使用单个选择或多个选择来查看按层次结构排列的对象集合,并与之交互。

在树中,包含数据的对象称为叶节点,包含其他对象的对象称为容器节点。 单个顶级容器节点称为根节点。 用户可以通过单击加号和减号扩展器按钮来展开和折叠容器节点。

windows 资源管理器树视图的屏幕截图

典型树视图。

备注

布局菜单 相关的准则显示在单独的文章中。

这是正确的控件吗?

具有分层数据并不意味着必须使用树视图。 通常, 列表视图 是更简单、更强大的选择。 列表视图:

  • 支持多个不同的视图。
  • 支持详细信息视图中的任何列对数据进行排序。
  • 支持将数据组织到组中,形成了一个两级层次结构。

若要使用列表视图,可以使用以下方法平展分层信息:

  • 删除根节点(如果存在),因为它通常不是必需的。

  • 使用列表视图组、选项卡、 下拉列表可扩充标题 来替换顶级容器。

    列表-包含列表的视图组的屏幕截图

    在此示例中,列表视图组用于顶层容器。

    用于顶层容器的选项卡的屏幕截图

    在此示例中,选项卡用于顶层容器

    用作容器的下拉列表的屏幕截图

    在此示例中,下拉列表用于顶层容器。

  • 如果关联的控件显示所选容器的内容,则该控件可以显示层次结构的较低级别。

    目录窗格的屏幕截图

    在此示例中,低级别容器显示在文档窗口中。

如果需要显示两个以上级别的层次结构 (不包括根节点) ,则必须使用树视图。

若要确定树视图是否为正确的控件,请考虑以下问题:

  • 数据是否分层? 如果不是,请使用其他控件。
  • 层次结构是否至少有三个级别 (不包括根) ? 如果不是这样,请考虑一些替代方法,如列表视图组、选项卡、下拉列表或可扩充的标题。
  • 项是否具有辅助数据? 如果是这样,请考虑使用详细信息视图模式下的列表视图来充分利用辅助数据。
  • 较低级别的数据是否与独立的子任务相关? 如果是这样,请考虑在关联控件或单独的窗口中显示信息, (使用 命令按钮链接) 显示。
  • 目标用户是否高级? 高级用户更精通使用树。 如果你的应用程序面向初级用户,请避免使用树视图。
  • 这些项是否具有对大多数用户都非常熟悉的单个、自然的层次结构分类? 如果是这样,则数据非常适合用于树视图。 如果需要多个视图或排序,请改用列表视图。
  • 用户是否需要在某些但不是所有情况下查看较低级别的数据,或在某些情况下(不是所有时间)查看这些数据? 如果是这样,则数据非常适合用于树视图。

备注

有时,类似于树视图的控件是使用列表视图实现的。 在这种情况下,基于使用情况应用准则,而不是针对实现应用。

设计概念

树旨在组织数据并使其易于查找,但很难在树中轻松地发现数据。 确定树视图及其组织时,请牢记以下原则。

可预测性和可发现性

树视图基于对象之间的关系。 当对象形成清楚、众所周知、互相排斥的关系时,树的工作效果最好,其中每个对象都映射到一个易于确定的单个容器。

一个重要问题是对象可以出现在不同的节点中。 例如,用户希望找到播放音乐的硬件设备,具有较大的硬盘,并使用 USB 端口? 可能存在于多个不同容器节点中,如多媒体、存储、USB 和硬件资源。 一种解决方法是将每个对象放在单个最适合的容器下,而不考虑这种情况;另一种方法是将每个对象放在应用的所有容器下。 前者升级了一个简单、整洁的层次结构,后者的每个可发现性都有优点和潜在问题。

用户可能不会完全了解树的布局,但在与树进行交互后,它们将形成关系的心理模型。 如果该精神模型不正确,则会导致混淆。 例如,假设可以在多媒体、存储和 USB 容器中找到音乐播放器。 这种安排改善了可发现性。 如果用户首先在多媒体中查找设备,则用户可能会发现所有设备,如音乐播放器。 这样,用户就会希望在多媒体容器中显示类似的设备,如数码相机,如果不是这种情况,则会混淆。

设计树时,面临的挑战是在可预测的用户模型与最大程度上减少混淆之间实现可预测性。

广度与深度

可用性研究表明, 用户在查找树中的对象的速度比深度树中的对象更成功,因此,在设计树时,应优先使用广度。 理想情况下,树的级别应不超过四个 (不计算根节点) ,最常访问的对象应显示在前两个级别。

其他原则

  • 当用户找到要查找的内容时,他们将停止查找。 它们不会查看其他对象可能会找到的位置,因为它们不需要。 这些用户可能会认为他们找到的第一个路径是唯一的路径。
  • 用户在大型复杂树中查找对象时遇到问题。 用户不会执行详尽的手动搜索来查找此类树中的对象;一旦他们认为他们付出了合理的努力,就会停止。 因此,需要使用其他访问方法(如 word 搜索、索引或筛选)来补充大型复杂树。
  • 某些程序允许用户创建自己的树。 虽然这种自设计的树可能与用户的心理模型保持一致,但它们常常是随意创建的,并且不太维护。 例如,尽管 "文件系统"、"电子邮件程序" 和 "收藏夹" 列表通常存储类似类型的信息,但用户很少使用相同的方式对其进行组织。

如果只做一件事 .。。

仔细权衡使用树视图的优点和缺点。 分层排列的数据并不意味着您需要使用树视图。

使用模式

树视图有多种使用模式:

使用情况 示例
仅具有容器节点的树视图
用户可以一次查看一个容器并与其交互。
通常,这些树视图具有一个关联的控件,该控件显示选定容器的内容,因此用户一次只能与一个容器交互。
"容器" 窗格和 "内容" 窗格的屏幕截图
在此示例中,树视图只有容器节点。 所选节点的内容将显示在关联的列表视图控件中。
具有容器和叶节点的树视图
用户可以查看容器和叶,并与之交互。
通常,这些树视图具有一个关联的控件,该控件显示选定容器或叶的内容。 允许用户与叶交互通常会使用户能够支持多个选择。
树-视图窗格和 "内容" 窗格的屏幕截图
此示例中的树视图同时具有容器节点和叶节点。 由于支持多个选择,因此使用关联控件中的选项卡显示打开的项的内容。
或者,树视图可以有一个组织列表,其中容器是标题,叶是选项。
具有标题和选项的树视图的屏幕截图
此示例中,树叶是选项,容器是选项类别。
复选框树视图
用户可以选择任意数目的项,包括"无"。
复选框清楚地指示可能有多个选择。 当多个选择是必需的或常用的时,请使用此树模式。
带复选框的树视图屏幕截图
此示例中,复选框树视图允许启用或关闭功能选择。
树视图生成器
用户可以通过一次添加一个容器或叶并选择性地设置顺序来创建树。
用户可以创建或修改许多树。 某些树是使用上下文菜单和拖放式 ((如 Windows 资源管理器) 中的文件夹)构建的,而其他树是使用专用对话框构建的 (如 Windows Internet Explorer) 中的收藏夹列表。
"收藏夹"对话框的屏幕截图
在此示例Internet Explorer,用户可以使用对话框生成自己的收藏夹列表。
具有替代访问方法的树视图
用户可以通过除使用分层树外的其他方式查找对象。
如前所述,用户在大型复杂树中查找对象时遇到问题,因此,此类树应该通过其他访问方法(如词搜索、索引或筛选)进行补充。
内容、索引和收藏夹选项卡的屏幕截图
本示例中,用户还可使用目录、索引和收藏夹来访问信息。 对于某些用户,索引和搜索选项卡比"内容"选项卡更有用。
Windows 开始菜单和搜索框的屏幕截图
本示例还允许用户Windows "开始"菜单搜索框中键入名称的一部分来访问程序、文件和网页。

指南

呈现

  • 在容器中,按逻辑顺序对项进行排序。 按字母顺序对名称进行排序,按数字顺序对数字进行排序,并按时间顺序对日期进行排序。

  • 使用"始终显示选择 "属性,以便用户能够轻松确定所选项,即使控件没有输入焦点。

  • 如果树充当目录,请使用"单一展开"属性来简化树的管理。 这样,只会展开树的相关部分。

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

    Internet Explorer 收藏夹列表的屏幕截图

    此示例中,列表最初提供示例。

  • 如果用户没有折叠原因,请勿使容器节点可折叠。 这样做会增加不必要的复杂性。

  • 如果负载性能有问题,则默认情况下仅显示树的第一级和第二级容器。 然后,当用户展开树中的分支时,可以按需加载其他数据。

  • 如果用户展开或折叠容器,则使该状态保持,以便下次显示树视图时生效,除非用户可能希望以默认状态启动。 持久性应基于每树视图(按用户)。

  • 如果高级容器具有类似的内容,请考虑使用视觉线索来区分它们。

    不正确:

    具有不同图标的 Outlook 项的屏幕截图

    此示例中,邮箱和存档文件夹具有类似的内容。 树进一步展开后,用户很难知道它们位于树中何处,从而导致混淆。 在不同部分中使用略有不同的图标可解决此问题。

  • 重新连接线路。 尽管这些行清楚地显示了容器节点和叶节点之间的关系,但会添加视觉混乱,而不会显著帮助理解。 具体而言,当节点靠近在一起时,它们没有帮助,当节点距离如此远(需要滚动)时,它们也没有帮助。

    正确:

    具有连接线的树视图的屏幕截图

    良好:

    没有连接线条的树视图的屏幕截图

    连接线对帮助理解没有帮助。

交互

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

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

  • 如果项需要进一步说明 ,请通过信息提示 提供说明

    具有一项信息提示的收藏夹屏幕截图

    此示例中,信息提示提供了进一步的信息。

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

  • 禁用树视图时,还禁用任何关联的标签和命令按钮。

树组织

  • 使用大多数用户熟悉的自然层次结构。
  • 如果无法使用此结构,请尝试将可发现性与可预测用户模型进行平衡,以最大程度地减少混淆。
  • 若要安全地提高可发现性,在:
    • 该项与任何其他类似项 (因此用户不会因为不正确的关联而) 。
    • 只有一些此类冗余的项 (因此树不会变得) 。
  • 使用效果良好的最简单的层次结构。 为此,请执行以下操作:
    • 将最常访问的对象放在树的前两个级别 (不计算根节点) ,将不太常访问的对象放在层次结构的更下一层。
    • 消除不必要的或合并冗余的中间级容器。
  • 首选广度,而首选深度。 理想情况下,树的级别不应超过四个,最常访问的对象应出现在前两个级别中。
  • 确定是否确实需要根节点。 如果用户需要能够在整个树上执行命令,请提供根节点 (根节点上的上下文菜单) 。 否则,如果没有树,树会更简单、更易于使用。
  • 如果树具有替代访问方法(如单词搜索或索引),请通过专注于最有用的内容来优化树以浏览。 使用替代访问方法时,树的内容不必全面。 通过简化树,用户可以更轻松地找到最有用的内容。

复选框树视图

  • 在列表下方显示所选项的数量, 尤其是在用户可能选择多个项时。 此反馈可帮助用户确认其选择正确。

    所选项数的屏幕截图

    此示例中,所选项的数量显示在树下。 显然,未选择两个项。

  • 如果可能有许多项,并且可能选择或清除所有项,请添加"全选"和"清除所有命令"按钮。

  • 使用混合状态复选框可指示容器中项的部分选择。

    正确:

    带混合状态复选框的窗口屏幕截图

    本示例使用混合状态复选框来指示部分选择。

树视图大小调整和间距的屏幕截图

树视图控件的建议大小调整和间距。

  • 选择树视图宽度,避免 在树完全展开时对大多数项进行水平滚动。

  • 额外包含30% 的用于本地化。

  • 选择可消除不必要垂直滚动的树视图高度。 如果这样做,请考虑使树视图略长 (甚至更多,以便在有可用空间时) 如果这样做,则可以减少垂直滚动条的需求。

    不正确:

    简短的窄树形视图控件屏幕截图

    在此示例中,在大多数情况下,使树视图略大于或更长会使滚动条变得更长。 在此特定树中,一次只能打开一个容器。

  • 如果用户受益于使树视图变得更大,则使树视图及其父窗口可调整大小。 这样,用户便可以根据需要调整树视图的大小。

标签

控件标签

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

  • 指定唯一的访问密钥。 有关分配准则,请参阅 键盘

  • 使用句式大写。

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

  • 对于多选树视图,请编写标签,以便清楚地选择可以进行多个选择。 复选框树视图标签可以不太明确。

    不正确:

    包含组件标签的树状视图的屏幕截图

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

    良好:

    带有 "一个或多个" 标签的树视图的屏幕截图

    在此示例中,标签清楚地表明可能存在多个选择。

    确切

    带有复选框的树视图的屏幕截图

    在此示例中,此复选框清楚地指示可能有多个选择,因此标签不必是显式的。

数据文本

  • 使用句式大写。

说明文本

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

  • 使用句式大写。

  • 有帮助但不必要的补充说明应该保持简短。 将此信息放置在标签和冒号之间的括号中,如果使用的是主指令而不是标签,则放置在控件下方。

    树视图下面的说明屏幕截图

    在此示例中,补充说明位于控件下方。

文档

当引用树视图时:

  • 使用确切的标签文本(包括其大小写),但不要包含访问键下划线或冒号。 如果上下文需要与常规列表进行区分,则包括单词列表或层次结构列表。
  • 对于树项,请使用准确的项文本,包括其大小写。
  • 仅在编程和其他技术文档中将树视图作为树视图引用。 在其他任何位置,使用列表或层次结构列表,因为术语树对大多数用户感到困惑。
  • 若要描述用户交互,请使用 "选择数据" 并展开和折叠 "+" 和 "减号" 按钮。
  • 如果可能,请使用粗体文本设置标签和树项的格式。 否则,请仅在需要时才将标签和项放在引号中以防止混淆。

示例:在 内容 列表中,选择 " 用户界面设计"。

当引用树视图中的复选框时:

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

示例:在 " 要备份的项 " 列表中,选中 " 我的文档 " 复选框。