.net 树形结构排序_PC端多层级结构交互设计 —— 树形结构

树形通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。
用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景。

树在PC端的的几种用途：

一、树形筛选项

筛选项中使用树形控件，具有展开收起选择等交互功能，可以完整清晰的展现其中的层级关系。

树形下拉选项

二、树形导航

1、固定的导航

固定的导航，用户不能够对导航进行添加删除等操作，只是起到了快速定位信息分类的作用，常见于左侧网站的左/顶部导航栏等。

网站左侧导航

2、可自定义的树形导航

此种形式通常与列表共同使用，便于对列表中数据的筛选、展示与分类等，例如试题内容会根据树形导航中的选中项来进行展示。

树形导航

下面重点看下树形结构：

三种树形导航

对于结构区可能存在一些操作：拖动顺序、上移、下移、升级、降级、添加同级/子级、重命名、删除等操作。

当操作比较少的时候，可以直接在属性结构鼠标hover展示操作状态，操作过多时可以根据实景场景采用后续两种展示方式，同时可以根据功能的不同对功能进行分组，形成另一个“树”，是不是很神奇？“操作树”可以根据业务需求来自定义一些内容。比如，最多层级（定义好最多层级，对于操作中的部分内容，也要进行相应的置灰或者隐藏）。

重点说下拖动排序，上述三种情况都是可以支持拖动排列，只能拖动到某一层级的同级或者下级。另外，能够解决新增父层级的需求。实现方式：新建一个一级层级，将另外一级层级内容拖动到新建层级下。

三、树形列表

树形列表分为目录型和数据型

设计树形列表时，首先要了解创建列表的用户的心智模型，用户是否心中有“树”。如果列表内容顺序和前台相关时，也要考虑前台用户的实际使用场景和使用习惯，要综合考虑各种因素根据实际场景采用不同的设计方式。

那么，我们应该如何设计布局呢 ？

1、数据型列表：

数据型列表

添加数据操作是在表头内部还是外部？

（1）放在外部：和前台展示无直接关联的，添加的顺序按照列表中的展示规则，统一放在上面。

（2）放在内部：与列表中数据关联更加紧密，可以直观传达给用户添加的顺序、位置和所要添加的内容。

对于一些没有什么特殊要求的列表，添加操作可以统一放在上方，即（1）处的位置

2、目录型列表：

目录型列表，树形列表，主要是解释一下添加层级位置不同的优缺点：

（1）添加层级操作位于列表下方

添加操作位于列表下方

• 优点：

① 在首次创建添加导航时，不至于层级过多，添加导航被划出屏幕

② 从上到下按结构添加，清晰地知道要添加到的位置，并且添加按钮与树形结构整体更加统一

• 缺点：

① 当添加的层级过多并且每下级层数过少，会占用过多的垂直空间

② 不能够满足其中一层级为选填的场景

③ 所要添加的层级过多时，都放在下方，不能够很明确告知用户添加到哪个上个层级，并且每次都需要拖到最下面。

④修改时，添加导航需要划动到底部，比较麻烦

（2）添加层级操作位于表头上方

添加操作位于列表上方

• 优点：

① 不会占用屏幕的竖向空间，操作吸顶能够防止子导航层级过多时，操作方便

② 明显告知用户添加导航的层级位置：首先选中再点击添加导航操作，明确告知用户添加在哪一层级导航下

③ 当层级较少时，添加操作不至于显得过多

• 缺点：

① 添加时，需要先点击某一层级之后再添加，操作较麻烦

• 扩展：

添加拖动功能，对列表中内容进行排序、切换层级。此时，添加层级和添加子层级操作就可以合并为一个操作

（3）添加层级操作位于列表右侧

添加操作位于列表右侧

添加导航的操作可以根据是否常用，将不常用的操作隐藏到其他操作中。

• 优点

① 不会占用页面的垂直空间

② 明显告知用户添加导航的层级位置

• 缺点：

① 当下一层级目录超过一屏时，添加导航的操作就会超出屏幕，再次添加时，必须上划后再添加

② 当右侧操作较多时，可将添加操作放在列表上下方

③ 当二级导航为选填、三级导航为必填时，需要在一级导航操作区同时存在“添加二级导航、添加三级导航”两个操作

（4）思维发散：

将以上三种方式自由组合，结合右键显示添加层级移动等操作

① 将（1）和（2）结合，成列表上下都存在添加导航操作，是否就能够解决层级过多添加导航划出屏幕的问题，但是否会引发新的问题 ？

② 将（2）和（3）结合，操作存在于列表上方和右侧（操作过多时可以悬停出现），是否可以解决（2）中必须点一下才能添加的问题 ？

③ 右键显示添加导航等操作，是否可和以上三种形式进行结合 ？

拖动功能能够解决为某级导航导航添加父级导航的问题：

新建一层级导航，将另一导航拖动到新建导航之下，变为二级导航。

----------------------------------------- 重要提醒 ----------------------------------------

同一个设计方式满足所有场景是不可能的~，在实际应该过程中，应该结合自身的业务需求，从实际场景出发，根据用户的操作习惯采用合适的设计方式。

在此特意感谢王向杜贡献自己的脑细胞，提供“奇葩”的想法。