我用 Axure 做了一个云盘

以下是云盘界面的截图，有兴趣的朋友可以通过原型体验一下，传送门>>

本文主要分享这个项目的设计中最核心的两个要点：如何用 Axure 中继器实现目录分级和动态路径。

目录分级

我们在资源管理器或云盘中访问一个文件的时候，如果这个文件被放在多个文件夹下，我们需要一层一层展开文件夹，直到找到文件为止，这个层层嵌套的结构，就是目录分级。

接下来看一下在 Axure 中，如何实现这样的效果。

首先在工作区添加一个中继器，里面放一个文件夹的图标，图标下放一个文本，用来显示文件夹名称，如下：

中继器的结构和数据如下：

file_name 是目录名称；id 是当前目录的唯一标识；parent_id 是当前目录的上一级目录的唯一标识。

这里想要实现的效果是在根目录下有一个“新建文件夹 1”目录，“新建文件夹 1”下有两个目录，分别是“1.1”和“1.2”，“1.1”下又有两个目录，分别是“1.1.1”和“1.1.2”

但填入数据之后我们会发现，所有目录都在同一级，并没有按我们的想法进行分级：

别急，接下来的操作才是重点。

首先，我们添加一个全局变量 search_id，用来保存当前正在访问的目录的 id（默认值为0，也就是说，初始化的时候，访问的是根目录）：

接着，我们给中继器添加载入时进行筛选的交互，筛选条件就是 parend_id = search_id：

在浏览器中预览就可以看到现在只显示根目录下的“新建文件夹 1”一个目录：

最后一步，我们要来实现点击目录的时候，打开当前目录的下一级的效果。

进入中继器，选择中继器内的文件夹图标，给图标添加单击事件，首先将当前点击的目录的 id 赋值给 search_id，然后触发中继器的载入事件：

这样中继器会按新的 id 重新筛选一次，就能够实现出逐层打开目录的效果：

动态路径

动态路径的核心是一个面包屑，我们访问目录时，每往下一层，就需要增加一层路径，因此，我们可以利用中继器的添加行交互来完成。

在刚刚的项目中，再添加一个中继器，放在目录上方：

中继器內添加一个按钮，作为路径的一级：

中继器共两列：

file_name 用来保存路径名，id 用来保存路径的唯一标识，中继器內添加一行根目录的默认数据。

由于我们是展开目录的时候添加路径的，所以交互还要到目录的中继器內去写，找到中继器内的文件夹图标，在原有的单击事件中添加交互：

点击的时候，给路径的中继器添加一行数据，路径名和 id 分别是当前目录的文件名和 id。

完成之后我们可以来看看效果：

接下来我们还需要添加一个功能，就是通过路径直接回到历史访问过的任意一级目录，由于我们在路径的中继器中保存了每一级路径的 id，所以可以很轻松地通过 id 来返回到历史路径的任意一级目录。

进入路径中继器，给中继器內的按钮添加单击事件：

这里将路径的 id 赋值给 search_id，然后触发目录中继器的载入事件，就可以实现跳转到指定目录的效果，同时需要注意，跳转回历史路径的时候，需要删除掉后面的路径，这里只需要将序号（index）大于当前序号的数据删掉即可，再来看看效果：

以上便是本文的全部内容，感谢阅读！