从更广义的角度上来说，树状构造（Tree structure），又可称为树形构造，或称树状图，其是一种将层次构造式的布局性子，以图象办法表现出来的方法。以树的象征来表现出布局之间的关系，不过在图象的呈现上，它是一个高下颠倒的树，其根部在上方，是内容的开头，而下方的内容称为枝干与叶子。
在树状构造中的基本单位，称为节点（Node）。节点之间的链接，称为分支（branch）。节点与分支形成树状，构造的开端，称为根（root），或根结点。根节点之外的节点，称为子节点（child）。没有链接到其他子节点的节点，称为叶节点（Leaf）。
在进行先容之前，我们先做一个小测试，如图：
树形构造的CheckBox该当位于折叠icon的前面，还是后面？
这里就不解释答案了，相信读完这篇文章，你会有明确的答案。
二、构造
树形构造是一种层次嵌套的构造。一个树形构造的外层和内层有相似的构造， 以是，这种构造多可以递归的表示。树状构造只是一个观点，可以用许多种不同形式来展现。
相对来说，树状构造是一个比较繁芜的交互组件，包括多少组成部分。标准的树状构造包括选中状态、节点展开/折叠按钮、单选框或复选框选择器、类型图标、描述笔墨、计数器、带有编辑、导航或删除等操作的附加按钮等。设计师也可以根据需求，在树状构造内定制任意的组件。
树形构培养像一个包含分层数据的列表，充当物品的容器，可以展开和折叠节点。当用户展开节点时，树形构造会根据当前显示的级别数，动态变动每个级别的缩进。
由于场景不同，树形构造所含的元素也有所差异。标准的组织树该当包括但不限于以上元素，
根据需求，用户可以通过基本元素组合成所须要的树形构造。
三、运用办法
树形构造的运用范围很广，常见的运用办法包括导航、定位、选择、组织等。在不同的运用处景下，树形构造的表现形式、所包含的元素、可用的操作都有所不同。
接下来，我们就详细先容一下这四种场景的运用办法及把稳事变：
3.1 导航
导航是树形构造在web端最常见的运用办法，以至于很多人都不清楚其严格意义上算是树形构造，特殊是包含多级导航左侧导航，常见于B端产品后台页面和一些繁芜数据的展示页面。
如语雀的个人中央文档列表。
该运用处景下的树形构造只具有子节点、叶节点以及折叠标识，而且折叠标识位于节点的后方。节点的操作也比较大略，只有选择与折叠，较少具有删除、拖动等其他操作。
3.2 组织
组织，常见的有行政组织、空间组织等，是树形构造形式、功能最完全、全面的表现形式。如ERP、采购系统、财务系统中都会包含的职员管理，每每都因此组织的形式进行管理、展示。如企业微信、钉钉中，职员的部门构造。
这种场景下，树形构造是产品的根本核心，所有的职员权限操作都是寄托于组织。在职员管理中，行政组织每每会被抽离出来，作为树形构造，成为导航，用以对职员的管理。除此之外，还须要对组织本身的管理，包括新增、合并、删除、导入/出、排序等。
3.3 选择
树形构造的选择场景多用于下拉选择框，可以是一个，也可以分配到多个下拉选择中。选择功能并不是页面或功能层面的须要，每每是下拉选择的选项过多，且具有相应的从属关系，因此对选项进行层级组织显示，便于用户选择。
该场景下的树形构造操作较为丰富，可以包括单选、多选、折叠，但不支持节点的移动、删除、编辑操作等。这种类型的树形构造有一个特有的名称-treeSelect(树选择）。
如下图：
在移动端中，则被称为级联选择，常见的运用办法有地理位置的选择。如图京东、淘宝的收货地址管理的编辑页面。用户在选择地址时，须要根据地理区域的层级关系，逐步选择到目标区域。
3.4 定位
定位，与导航的功能类似，差异在与导航实现的是页面之间的跳转，而定位实现的是单一页面内的内容展示，其多用于数据页面的展示，位于页面右侧，每每与左侧导航联动利用。
定位功能的树形构造取决于展示页面的数据构造，将其构造映射到定位功能的树形构造上。
该场景下的树形构造操作与导航类似，定位的形式根据页面数据的构造进行展示，或单级、或多级、或展开、或折叠展示。其余，在一些产品官网的宣扬页面，也会采取这种定位功能，虽然展现形式不同，但实质上是同等的。
如在阿里云产品先容页面，顶部的Tab是可以点击，并使页面滚动到目标区域，可以利用户精确定位须要查看的信息，同时，减少用户的滚动操作。
3.5 其他
除了以上提到的四种运用处景，还有两种场景也是较为常见的树形构造的表达形式，分别是数表格与思维导图。
树表格类似复合表格，树表格多用于显示和处理大量分层数据，具有一定的数据聚合功能，表示了高数据密度。因此，具有较为明显的繁芜性，然而运用处景和状态较为大略，不具有多面的操作运用。
思维导图是基于树状构造的最原始的运用办法，思维导图是一种将思维形象化的方法。从构造本身而言，这种场景较为大略，更加看重节点的编辑、删除等功能，可归为组织的编辑状态。
四、交互办法
根据不同的浸染工具，树形构造的交互办法也有所不同。树形构造的交互办法树形构造的交互分为两大类，宏不雅观操作与微不雅观操作。
4.1 宏不雅观操作
宏不雅观操作，是对树形构造本身的行为与交互，紧张包括滚动、选择、排序、搜索等。一样平常情形下，该类操作不会对树形构造本身变更，每每树形构造的不同展示形式。
宏不雅观操作多属于一级操作，用户通过宏不雅观操作为后续的微不雅观操作做铺垫。同时，宏不雅观操作多属于常规操作，用户对这些交互办法也较为熟习。
4.2 微不雅观操作
微不雅观操作，又可称为二级操作，通过宏不雅观操作后，用户找到相应的目标子节点，从而进行下一步操作。其紧张包括有展开/折叠、选中态、导航、编辑、单击、拖放等。
五、键盘操作
基于Web真个B类产品，更多的场景是鼠标操作，树形构造也多为鼠标操作，但也该当充分考虑键盘操作，以知足分外场景下的功能实现及体验。
基本操作该当包括：
→（右向箭头）进入下一级节点
↑（上向箭头）在同一级节点，向上切换同级节点，顺序进入已展开一个同级子节点
↓（下向箭头）在同一级节点，向下切换同级节点，顺序进入已展开一个同级子节点
←（左向箭头）返回上一级节点
↩︎（回车键）选中子节点时，点击回车键进行切换折叠与展开
上文给出的是基本操作，但设计师可以定义自己产品的键盘操作，但不要与用户的认知有太大差异，否则会造成不必要的误解
六、设计运用履历
经由多年的B端产品设计沉淀，在树形构造方面有一些共性的运用履历分享。
6.1 树形构造的横向扩展与纵向扩展
由于树形构造为多层嵌套形式，因此会存在横向与纵向的扩展，横向扩展决定了树形构造的高度，深度则决定了树形构造的宽度。
原则上，树形构造的横向扩展不受限定，而纵向扩展不应该超过四级。由于在页面中，树形构造区域的宽度是一定的，常日状态下，由于层级缩进，随着深度的增加，节点字段的显示空间会受到挤压，更有甚者会涌现横向滚动。过深的层级构造，一方面会增加用户的操作本钱，另一方面也会造成字段显示不全，对用户的识别增加包袱。
6.2 数据加载
数据加载可分为两种加载办法：同步加载与异步加载，即同步树与异步树。数据加载要考虑树形构造的整体加载与部分加载，要明确用户当前的加载节点，加载完成后该当立即删除加载状态指示。
当存在大量数据或数据存在做事器时，常日采取采取异步加载，根据用户点击展示点击节点的数据，可有效的减少因加载非用户所需而产生的韶光花费，提高用的操作体验。与此相反，可采取同步加载。
6.3 初始状态显示
树状构造的初始状态是指加载完成后，树形构造的折叠与展开状态。如果树形构造的根节点下有大量的子节点，那么折叠的初始状态可能更加符合用户的认知。
相反，该当让树形构造处于展开状态。
6.4 缺点警告状态
任何操作都须要系统给与用户反馈，无论是显性的亦或是隐形的。同样的，树形构造也包含了相应的操作反馈和状态反馈。个中，树形构造中的子节点操作反馈状态分为两类。
其一，轻量型的提示该当就近的显示在树形构造内部，让操作与反馈存在页面上的关联。部分模块的非常状态，并不影响其他功能的操作，因此也不必打断用户的操作。
其二，重量型提示如导入二次确认等，须要非模态弹窗提示，其目的在于，可以打断用户的操作路径，让用户停下来关注提示内容，从而避免误操作。
6.5 树形构造的节点数量限定
为了产品的利用体验，一样平常项目一次显示最好不超过200个节点，对付较大数据构造可考试测验横向扩展树形构造，并采取分布加载的办法，减少用户的等待焦虑。同时，该当确保用户可以过滤和检索数据。
6.6 自动排序
作为数据展示的框架时，树形构造可以保留一定的自动排序功能，将数据以某种规则进行展示，便于用户查看与探求，如树作为选择功能时。作为某种页面或者内容构造时，最好屏蔽自动排序功能。如作为导航利用时。
其余，还有一些须要根据运用处景，来判断如何实现的设计细节。
例如，是否须要展示过滤结果的组织构造及过滤后的结果展示？该当如何拖拽规则及拖拽的运用范围，是否包括组织变更？弹窗添加还是就地编辑？如何决定组织树的批量操作……
这些都须要设计师根据业务场景的实际需求，进行定制化的考量。
七、写在末了
从实质上说，树形构造只是一种帮助用户查找分层信息的工具。通过树形构造用户可以是快速、轻松地到达用户想要到达的地方，也可以是打开、关闭、滚动和浏览。但是，不虞味着仅仅由于信息是分层，树形构培养是最佳的展示办法，设计师该当进行基于场景业务的定制化设计。
#专栏作家#
弘毅道，"大众年夜众号：UIUX设计事情坊，大家都是产品经理专栏作家。关注to B业务，尤其善于后台程序界面设计，包括需求沟通，原型设计以及后期的设计评审等。
本文原创发布于大家都是产品经理。未经容许，禁止转载
题图来自Unsplash，基于CC0协议
