树形|树形结构-那些被忽略的设计细节( 二 ) facebook|宇宙|meta|元宇宙公司|

文章插图
这种场景下，树形结构是产品的基础核心，所有的人员权限操作都是依附于组织。在人员管理中，行政组织往往会被抽离出来，作为树形结构，成为导航，用以对人员的管理。除此之外，还需要对组织本身的管理，包括新增、合并、删除、导入/出、排序等。
3.3 选择树形结构的选择场景多用于下拉选择框，可以是一个，也可以分配到多个下拉选择中。选择功能并不是页面或功能层面的需要，往往是下拉选择的选项过多，且具有相应的隶属关系，因此对选项进行层级组织显示，便于用户选择。

文章插图
该场景下的树形结构操作较为丰富，可以包括单选、多选、折叠，但不支持节点的移动、删除、编辑操作等。这种类型的树形结构有一个特有的名称-treeSelect(树选择）。
如下图：

文章插图
在移动端中，则被称为级联选择，常见的应用方式有地理位置的选择。如图京东、淘宝的收货地址管理的编辑页面。用户在选择地址时，需要根据地理区域的层级关系，逐步选择到目标区域。
3.4 定位定位，与导航的功能类似，区别在与导航实现的是页面之间的跳转，而定位实现的是单一页面内的内容展示，其多用于数据页面的展示，位于页面右侧，往往与左侧导航联动使用。

文章插图
定位功能的树形结构取决于展示页面的数据结构，将其结构映射到定位功能的树形结构上。
该场景下的树形结构操作与导航类似，定位的形式根据页面数据的结构进行展示，或单级、或多级、或展开、或折叠展示。另外，在一些产品官网的宣传页面，也会采用这种定位功能，虽然展现形式不同，但本质上是一致的。
如在阿里云产品介绍页面，顶部的Tab是可以点击，并使页面滚动到目标区域，可以使用户精确定位需要查看的信息，同时，减少用户的滚动操作。

文章插图
3.5 其他除了以上提到的四种应用场景，还有两种场景也是较为常见的树形结构的表达形式，分别是数表格与思维导图。

文章插图
树表格类似复合表格，树表格多用于显示和处理大量分层数据，具有一定的数据聚合功能，体现了高数据密度。因此，具有较为明显的复杂性，然而应用场景和状态较为简单，不具有多面的操作应用。
思维导图是基于树状结构的最原始的应用方式，思维导图是一种将思维形象化的方法。从结构本身而言，这种场景较为简单，更加注重节点的编辑、删除等功能，可归为组织的编辑状态。
四、交互方式根据不同的作用对象，树形结构的交互方式也有所不同。树形结构的交互方式树形结构的交互分为两大类，宏观操作与微观操作。

文章插图
4.1 宏观操作宏观操作，是对树形结构本身的行为与交互，主要包括滚动、选择、排序、搜索等。一般情况下，该类操作不会对树形结构本身变更，往往树形结构的不同展示形式。
宏观操作多属于一级操作，用户通过宏观操作为后续的微观操作做铺垫。同时，宏观操作多属于常规操作，用户对这些交互方式也较为熟悉。
4.2 微观操作微观操作，又可称为二级操作，通过宏观操作后，用户找到相应的目标子节点，从而进行下一步操作。其主要包括有展开/折叠、选中态、导航、编辑、单击、拖放等。