Windows桌面应用程序设计指南（控件篇20-树状视图）

在树状图下，用户可选择使用单选或多选，和按竖向等级排列的对象集进行浏览和交互。
在树状图中，包含数据的对象称为叶节点，包含其他对象的对象称为容器节点。最顶端的单个容器节点称为根节点。用户可以通过单击加减号扩展按钮来展开和折叠容器节点。

一个典型的树状图

何时使用该控件？

并不是所有具有层级结构的数据都需要使用树状视图。通常列表视图是更加简洁有力的选择。列表视图：

支持按照不同方式展示；
在详细视图中支持按照任意栏的次序对数据进行排列；
支持按组对对象进行分类，形成两级层级结构。

当使用列表视图时，可以使用以下方法简化层级结构：

展示时隐藏根节点，通常它们不重要；
使用列表视图的组、标签页、下拉列表或可扩展性标题来作为一级容器进行展示。

列表组作为一级展示容器

标签页作为一级展示容器

下拉列表作为一级展示容器

如果有关联控件来显示所选容器的内容，则该控件在层级上应该显示为较低级别。

该例中，更低级别的容器在文件窗口中展示

如果除根节点之外，层级结构的层级数大于2，则需要使用树状结构来展示。

要决定是否使用树状视图，思考以下几个问题：

数据是否具有层级结构？如果不是，请使用其他控件。
除去根节点，层级结构是否至少有三层？如果不是，考虑使用其他控件，如列表组、标签页、下拉列表或可扩展标题（即点击标题，可向下展开详细内容）等。
项目是否含有补充数据？如果是，请考虑在详细视图模式中使用列表，以充分展示补充数据。
低级数据是否和其他独立次级任务相关联？这种情况，考虑将信息展示在相关联的控件中，或者另外的独立窗口中（使用命令按钮或链接展示）。
目标用户是否是高级用户？高级用户对使用树状图更加在行。如果应用的目标用户是初学者，则尽量不要使用树状视图。
项目是否有大多数用户都熟悉的单一的、自然的层次分类？如果是这样，数据非常适合使用树状视图展示。如果需要应用多个视图或排序方式，则使用列表视图。
用户是否在某些、而不是所有场景和时间，对查看低级节点数据有需求？如果这样，该数据类型适合使用树状视图。

设计思路

树状图用于管理数据，使数据易于查找。但树状图中的数据并不容易被轻易看到。在梳理树状图数据结构时，记住以下几条原则。

可预测性和可见性

树状视图的存在建立在对象间的关系上。当对象形成清晰的、用户所熟悉的、对象间互斥的关系，且每个对象映射到一个明确的容器时，树状图的效果最好。

一个重要的问题是，一个对象可以出现在不同的节点上。例如，用户希望找到一个播放音乐的硬件设备，有一个大的硬盘，并使用 USB 端口，该硬件设备选项会在哪里？它可能位于多个不同的容器节点中，如多媒体、存储、 USB，也可能位于硬件资源中。一种解决方案是将该对象放在单个最合适的容器下，而忽略其他相关节点; 另一种方法是将对象多次放在所有相关容器下。前者主张的是简单、干净的层级结构，而后者强调的是可见性。这两种方案都有优点和潜在的问题。

用户可能并不能完全理解树的层级结构，但他们在与树状图交互一段时间后，也会形成对于对象间关系的心理模型。如果用户的心理模型是错的，将会导致混乱。例如，假如在多媒体、存储和USB容器中都可以找到音乐播放器，这种设计提升了音乐播放器项目的可见性。如果用户第一次是通过多媒体找到了音乐播放设备，用户或许会总结为，其他类似设备也能在多媒体中找到。如果用户想象中类似的设备，如数码相机，没有出现在多媒体容器中，用户将会感到困惑。

设计树状图的挑战是在可见性和可预测的用户模型之间找到平衡点，从而最大限度地减少混乱。

宽度vs.深度

可用性测试显示，用户在较宽的树状图中，比在较深的树状图中更容易找到需要的对象。所以在设计树状图时，尽量拓展宽度而不是深度。理想状态下，不算根节点，树的层级不要超过四层，其中最常使用的项目应该安排在前两个层级中。

其他原则

当用户找到他们需要的项目之后，就会停止寻找。用户不会再去别的路径看看该项目会不会出现在其他地方，因为没这个必要。所以用户会认为第一次发现目标的路径就是唯一路径。
用户在庞大、复杂的树状图中是很难找到对象的。用户不会在树形结构中进行繁重的手工查找；当他们觉得找得太累了之后就不会再找了。所以相应的，大型的复杂树状图需要辅助以其他搜索方式，例如文字搜索、索引或筛选项等。
有些程序允许用户自行创建树状图。虽然这种自行设计的树状图可能与用户的心理模型一致，但它们通常是随意创建的，可维护性很差。例如，虽然文件系统、电子邮件程序和收藏夹列表通常存储类似类型的信息，但用户很少用同样的合理方式来组织它们。

记住一件事：
仔细权衡使用树状图的优缺点。并非所有具有层级关系的数据都要使用树状图。

应用范例

树状图有以下几种应用范例：
只包含容器节点的树状图：用户一次可以查看和操作一个容器。通常这种树状图包含能够展示所选容器内容的附属控件，这样用户就可以一次只与一种容器进行交互。

在本例中，树状图只有容器节点。所选节点的内容将显示在关联的列表视图控件中。

包含容器节点和叶节点的树状图：用户可以查看并操作容器节点和叶节点。通常这种树状图包含能够展示所选容器节点和叶节点内容的附属控件，同时因为能够对叶节点进行操作，这就要求树状图控件支持多选操作。

在本例中，树状图同时具有容器节点和叶节点。由于支持多重选择，所以使用关联控件中的选项卡显示打开项的内容。或者，树状图也可以是一个有组织的列表，其中容器节点是标题，叶节点是选项。

在该例中，叶节点是选项，而容器节点是选项的集合

多选型树状图：用户可以选择零至任意多个项目。复选框能向用户明确表达具有多选功能。当多选功能必要或者常用时，可使用这种树状图。

在该例中，多选型树形图可以开启或关闭功能选项

树状图生成器：用户可以通过一次生成一个容器节点或叶节点的方式，创造自己的树状图（同时也可以对顺序进行设置）。许多树形图都可以被用户创建和修改。有些树状图是使用上下文菜单和拖放操作(如文件资源管理器中的文件夹)构建的，而其他树状图是使用专门的对话框(如 Internet Explorer 中的收藏夹列表)构建的。

在这个例子中，用户可以通过对话框操作生成自己的收藏列表

有多重检索方式的树状图：除了展开竖向层级，用户可以使用其他方式找到自己的所需项目。
正如之前提到的，用户在大而复杂的树状图中很难找到自己想要的项目，因此树状图应结合其他检索方式，例如文本检查找、目录索引或筛选器等进行辅助。

在本例中，用户还可以使用目录、索引和收藏夹来访问信息。对于某些用户来说，索引和搜索选项卡比内容选项卡更有用。

在该例中，Windows允许用户通过在开始菜单搜索框中输入部分文字找到程序、文件或页面

设计指南

展示规范

在容器内，按一定逻辑顺序排列项目。名称按首字母排序，数字按照升序或降序，日期按照线性时间顺序。
高亮已选择项，这样用户即使在控件没有输入焦点的情况下也可以随时确定所选项。
如果树状图充当目录，使用单项展开属性简化树状图的管理。这样，树形图上只有有关部分需要展开。
不要展示空的树状图。如果需要用户从零开始创建树状图，使用引导说明或者用户可能会用到的示例项目来初始化展示树状图。

在该例中，树状图列表中的项目都是示例项
如果用户没有理由收起容器节点，则不要使其可收起。这样做会增加不必要的复杂性。
如果加载性能有负担，默认情况下只显示树的第一级和第二级容器。当用户展开树状图中的分支时，可以根据需要加载更多数据。
如果用户展开或收起了一个容器节点，保持该状态不变，在下次显示树状图依样展示，除非用户可能更喜欢以默认状态开始操作。对每个树状图和每个用户尽量保持展示的持续性。
如果高级容器节点下都有类似的内容，可以考虑使用视觉线索来区分它们。

错误示例：在该例中，Mailbox和Achieve Folders节点下的内容相似。当树状图进一步展开时，用户很难分辨他们处于树状图的什么位置，这会导致认知混乱。在不同的部分使用稍微有些区分度的icon来标识节点能够很好地解决这个问题。
慎重使用连接线。尽管连接线能够清楚表明容器节点和叶节点之间的关系，但是它们对用户理解度的提升并没有明显帮助，同时还增加了视觉冗余。具体来说，当节点靠得很近时，它们不起作用，当节点相距很远以至于需要滚动时，它们也不起作用。

正确示例

更佳示例

连接线对提升用户的理解度帮助很小。

交互

考虑设置双击行为。双击应该具有与选择一个项目和执行其默认命令相同的效果。
双击操作应该是补充性的。应该总是有一个命令按钮或上下文菜单命令具有和双击相同的效果。
如果一个项目需要进一步的解释，使用信息提示展示解释文字。

示例
为菜单内容设置相应命令。这些命令包括剪切、复制、粘贴、移动或删除、重命名和属性设置等。
当禁用一个树状图时，也要禁用与之相关的所有标签文字和命令按钮。

树状图的结构组织

使用大多数用户熟知的自然层级结构。
如果无法找到这样的结构，试着在可见性和可预测的用户模型之间取得平衡，这样可以最大限度地减少混乱。
为了可靠地提升可见性，以下情况可以将同一项目放置在多个容器节点下：
1.这个项目与其他任何类似的项目都没有关系(因此用户不会被错误的关联关系误导)。
2.这样位置冗余的项目数量极少(树状图不会因此而臃肿)。
最简单的层级结构效果最好。为了达到这一点：
1.将用户最常用到的对象放在树的前两个层级（不算上根节点），将不常用的项目放在更深的层级。
2.减少节点，将中间层级的冗余节点合并。
可以更宽，不要更深。理想的树形图结构不应该超过四个层级，并且用户经常用到的项目应该位于前两个层级中。
思考是否真的需要根节点。当用户需要对整个树形图进行某种操作时，展示根节点（可以在根节点上展示内容菜单）。其他情况下，没有根节点的树状图是更加简单易用的。
如果树状图有文字搜索框或索引等其他检索方式，那么通过关注最有用的内容来优化树状图的检索过程。在有其他补充的检索方法，树的内容展示不一定要很全面。简化树可以使用户更容易地找到最有用的内容。

多选型树状图

在列表下方显示已选项目数，特别是在用户很可能多选的情况下。这样的反馈能够帮助用户确认自己的操作是否正确。

该例中，已选项目数量展示在了列表下方。显然有两个项目未被选中。
如果用户有可能选择或清除很多甚至所有项目，则添加“全选”和“清空选项”命令按钮。
使用复选框的混合状态表示容器中的项被部分选中。

正确示例:混合态复选框表示容器中的部分项被选中

建议尺寸和间距

树状图的建议尺寸和间距

当树状图完全展开时，根据多数项目的长度设置合适的树状图宽度，尽量避免横向滚动。
为适应本地化文本翻译留出30%的横向空间。
为尽量减少竖向滚动，设置合适的树状图高度。在空间允许的情况下，可以将树状图设置得稍微长一点，以避免使用竖向滚动条。

错误示例：在该例中，在大多数情况下，稍稍增大树状图的长和宽会消除滚动条。另外在这个特定的树中，一次只能展开一个容器。
如果较大的树状图对用户更友好，那么树状图及其父窗口的大小应该是可调整的。允许用户根据需要调整树状图的大小。

说明

当提到树状图时：

使用标签文字（连带大小写样式）指代该树状图，但不包括访问键下划线或冒号。如果上下文需要与其他常规列表作区分，则附加使用“列表”或“层级列表”描述。
对于树状图中的项目，使用确切的项目文本，包括其大小写样式。
仅在编程和其他技术文档中将树状图称为树状图。在其他任何地方，都要使用列表或层级列表，因为树状图这个术语会让大多数用户感到困惑。
要描述用户交互，请使用 select for the data 选择项目数据，并使用“扩展”和“收起”描述 plus 加号和 minus 减号按钮操作。
尽量使用粗体文本格式化标签和树状图项目。否则，只有在需要时，才将标签和项目放在引号中，以防混淆。

例如：在内容列表中，选择用户界面设计。

当提到树状图中的复选框时：

使用标签文字（连带大小写样式）和“复选框”指代该复选框。不要附带访问键和下划线。
要描述用户交互，请使用 select选择和 clear清除选项。
尽量使用粗体文本格式化标签。否则，只有在需要时才将标签加上引号，以防混淆。