文件目录树设计小记

文件目录树是界面设计中被广泛使用的组件之一，常用于以“树”的形式通过文件夹组织、整理文件，并向用户提供新建搜索、筛选、目录管理等能力。本文以 IDE 工具为例，记录了设计目录树组件时的一些心得体会。

如上图所示，左侧是一个典型的文件目录树。接下来，本文将分点梳理下目录树各功能的交互逻辑。

• 新建
• 搜索 & 筛选
• 节点操作
• 其他逻辑

新建

新建操作是目录树的基本操作之一，新增的对象一般为新的文件或文件夹。当前，选择新文件或文件夹的目标路径方式一般分两种：

两种新文件、文件夹的父目录选择方式

方式一：用户点击“新建” —— 显示弹出框 —— 用户输入名称并选择父目录 —— 在目录树相应位置新建文件或文件夹

• 当目录树非常庞大的时候适用

方式二：用户点击“新建” —— 在当前选中的树节点下，按新建逻辑新建文件或文件夹

• 当文件树较小时适用

总结上述两种新建方式，主要采用文件树的大小（层级、节点数）作为区分。当文件树较小时，两种新建方式的使用效率相差不大，而后者能给用户提供更为直观的操作体验（所见即所得），故采用后者；当文件树较大时，为了缓和 Web 端与服务器端的压力，常常需要做异步加载优化，此时后者的使用效率将降低：每一次的展开都需要等待、寻找目标路径（文件夹）时中途有大量无关信息（各种文件），故采用前者。

文件、文件夹新建逻辑

1. 📁若当前选中的是文件夹：新建时，创建该文件夹下的子文件、或子文件夹
2. 📃若当前选中的是文件：新建时，创建该文件同级的文件、文件夹

搜索 & 筛选

搜索与筛选用于协助用户快速查找目标文件与文件夹。

搜索

设计搜索逻辑时，需考虑两点间的平衡：

1. 用户查找的效率（速度）
2. 用户查找的准确性

一般而言，用户在使用目录树时，通常是“由浅入深”，”层层递进“的，查询的策略与「广度搜索」有些类似：即优先遍历同层级节点，直到找到“相关节点”，点击展开，重复这个过程直到找到目标文件。

因此，为提高用户的查找效率，可以采用「到点原则」展现搜索结果：展开展示目录树中所有包含关键字的节点（即上文所述的“相关节点”），若该节点为某关键字节点子树的叶子节点，且为文件夹，则收起展示。即：

这样一来，相当于系统帮用户做了一轮 “找到相关节点 —— 点击展开” 的操作，此时用户只需要浏览结果，找到目标文件即可。

最初设计的展示逻辑，采用了「向上汇总原则」，即包含搜索关键字的节点所形成的子树，将以收起的形式，仅展示根节点。

当时的考虑是：当目录树较大时，能在有限的展现面积内展现尽量多的耦合度低的文件夹（此处默认目录树中越靠近根节点，节点间的耦合度越低），使得用户能更快速地定位相关目录，深入，直到找到相应文件夹。与在字典中按拼音查找某个字的体验类似：从 A-Z 中找到该字拼音首字母 —— 找到对应的声母韵母组合成读音 —— 从同音字中找到对应的字。而不是一开始就从 “阿”（新华字典的首字）往下逐个遍历直到“做”（新华字典末字）。

但事实是：用户下探到较深层级时，由于耦合度增高，已经无法辨别到底那一条才是正确的路径，从而会进入「深度搜索」模式，非常地低效。

因此，我们在迭代中修正了展示策略。

查找准确性是设计搜索策略的另外一环。

为了追求最高效率，隐藏所有不包含关键字的节点是看似最好的选择，但如果搜索结果中仅仅展示包含关键字的节点，则会让用户疑惑：我到底选对了没有？如下：

隐藏所有不包含关键字的节点（右侧），会使用户感到疑惑。

因此，为了让用户能更明确自己的选择是否准确，我们需要展示匹配节点的关键路径，路径中不包含关键字的节点，默认以展开的形式展现：

如此一来，虽给搜索结果引入了一些不包含关键字的节点，但能有助于提升用户查找的准确性，提升操作的操控感。

筛选

在设计筛选时，需注意筛选器生效的示意，以及筛选项之间的“与”“或”关系。

• 筛选器生效时，筛选器图标高亮，示意生效。
• 筛选项内部，同模块内采用“或”的逻辑，模块之间采用“与”的逻辑。

节点操作

	? 文件	? 文件夹
onClick	选中任务	展开 / 收起
onDoubleClick	打开任务	展开 / 收起
onRightClick	展示右键菜单	展示右键菜单
onDrag	触发拖拽移动逻辑	触发拖拽移动逻辑

其他逻辑

（待补充）