今天和大家分享一个后台文件管理demo,包括图片管理、视频管理、音乐管理、文档管理和其它文件管理。这个demo也可以看做云盘、网盘的demo。

该原型交互效果齐全,使用也简单,只需要填写中继器表格即可。所以推荐给大家使用,喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦。

原型预览及下载地址:https://axhub.im/pro/a05595dde4968774

 

效果演示

 

1. 分类查看

 

透明背景视频 python_透明背景视频 python

 

 

2. 上传文件

这里做了一个模拟上传效果:

 

透明背景视频 python_透明背景视频 python_02

 

 

3. 单击选中

 

透明背景视频 python_文本标签_03

 

 

4. 下载文件

 

透明背景视频 python_透明背景视频 python_04

 

 

5. 分享文件

 

透明背景视频 python_上传_05

 

 

6. 删除文件

 

透明背景视频 python_文本标签_06

 

 

7. 刷新

 

透明背景视频 python_文本标签_07

 

 

8. 搜索

 

透明背景视频 python_上传_08

 

 

9. 查看图片

 

透明背景视频 python_搜索_09

 

 

10. 查看视频

这里请打开电脑声音:

 

透明背景视频 python_透明背景视频 python_10

 

 

11. 播放音乐

这里请打开电脑声音,真的能听到歌曲哦。

 

透明背景视频 python_搜索_11

 

 

12. 查看文档

 

透明背景视频 python_透明背景视频 python_12

 

 

13. 下载其他文件

因为其他文件没办法在网页查看,所以下载下来打开。

 

透明背景视频 python_搜索_13

 

 

使用说明

该原型填写中继器表格即可直接使用。

注意:除了图片之外,其他文件要有url,即需要提前将文件上传至网络。

 

透明背景视频 python_透明背景视频 python_14

 

 

制作方法

 

1. 中继器制作

中继器内材料,图片*1,文本标签*1,还有一个透明的背景框,如下图摆放:

 

透明背景视频 python_搜索_15

 

type:文件类型,用于之后的帅选;

picture:每项加载时,设置图片=item.picture;

name:每项加载时,设置文本标签=item.name;

url:分两种情况,如果是图片的话,不需要填写,如果type是其他类型的话就需要在这里填上url。

鼠标单击时:切换透明背景框选中状态,让他变色。如果选中,在中继器中标记该行,启用下载、分享、删除按钮,,如果取消选中,在中继器中取消标记改行,则要看其他是否选中,如果全部都没有权重,禁用下载、 分享和删除按钮。

鼠标双击组合时,如果是type=图片,需要在中继器外面做一个大图,设置大图的值=此图片,并且显示。如果type是视频的话就播放视频,文档的话就查看文档,音乐的话播放歌曲,其他的话就下载下来就可以了。详细做法上一篇文章讲的很清楚Axure教程:真的能播放视频的视频APP原型(抖音案例)

 

2. 筛选

首先要做一个侧边栏的目录菜单,对于怎么做菜单大家可以参考我之前的文章 AXURE教程:三级菜单和标签的交互使用。

然后主要讲一下交互,点击菜单的时候,按照菜单的文本对中继器进行筛选即可,即菜单名=item.type,如果点击全部文件即移除所有筛选。

 

3. 上传

作者这里用了js做了一个模拟上传的按钮,axure8可以直接使用,axure9好像被禁用了,如果大家用axure9的话,其实也可以简单做一下,用文本框,类型文件也可以做出来,但是样式会没那么好看。

 

4. 下载

这里的话也是做了一个模拟,预先把材料放到网上,鼠标单击时打开网址既可以下载。这里注意,如果没有选中的话,禁用该按钮。

 

5. 分享

这里的话简单用单选按钮和文本标签做个样式就行了。

 

透明背景视频 python_文本标签_16

 

点击取消时,隐藏该文本框,点击创建键连接,显示下面链接即可。

 

透明背景视频 python_搜索_17

 

 

6. 删除

点击删除按钮,删除标记行即可。

 

7. 搜索

点击搜索按钮的时候,对item.name进行模糊搜索。这里需要用到indexof的公式对中继器进行筛选即可完成。