今天和大家分享一個后臺文件管理demo，包括圖片管理、視頻管理、音樂管理、文檔管理和其它文件管理。這個demo也可以看做云盤、網(wǎng)盤的demo。

該原型交互效果齊全，使用也簡單，只需要填寫中繼器表格即可。所以推薦給大家使用，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

效果演示

1. 分類查看

2. 上傳文件

這里做了一個模擬上傳效果：

3. 單擊選中

4. 下載文件

5. 分享文件

6. 刪除文件

7. 刷新

8. 搜索

9. 查看圖片

10. 查看視頻

這里請打開電腦聲音：

11. 播放音樂

這里請打開電腦聲音，真的能聽到歌曲哦。

12. 查看文檔

13. 下載其他文件

因為其他文件沒辦法在網(wǎng)頁查看，所以下載下來打開。

使用說明

該原型填寫中繼器表格即可直接使用。

注意：除了圖片之外，其他文件要有url，即需要提前將文件上傳至網(wǎng)絡。

制作方法

1. 中繼器制作

中繼器內(nèi)材料，圖片*1，文本標簽*1，還有一個透明的背景框，如下圖擺放：

type：文件類型，用于之后的帥選；

picture：每項加載時，設置圖片=item.picture；

name：每項加載時，設置文本標簽=item.name；

url：分兩種情況，如果是圖片的話，不需要填寫，如果type是其他類型的話就需要在這里填上url。

鼠標單擊時：切換透明背景框選中狀態(tài)，讓他變色。如果選中，在中繼器中標記該行，啟用下載、分享、刪除按鈕，，如果取消選中，在中繼器中取消標記改行，則要看其他是否選中，如果全部都沒有權(quán)重，禁用下載、?分享和刪除按鈕。

鼠標雙擊組合時，如果是type=圖片，需要在中繼器外面做一個大圖，設置大圖的值=此圖片，并且顯示。如果type是視頻的話就播放視頻，文檔的話就查看文檔，音樂的話播放歌曲，其他的話就下載下來就可以了。詳細做法上一篇文章講的很清楚Axure教程：真的能播放視頻的視頻APP原型（抖音案例）

2. 篩選

首先要做一個側(cè)邊欄的目錄菜單，對于怎么做菜單大家可以參考我之前的文章?AXURE教程：三級菜單和標簽的交互使用。

然后主要講一下交互，點擊菜單的時候，按照菜單的文本對中繼器進行篩選即可，即菜單名=item.type，如果點擊全部文件即移除所有篩選。

3. 上傳

作者這里用了js做了一個模擬上傳的按鈕，axure8可以直接使用，axure9好像被禁用了，如果大家用axure9的話，其實也可以簡單做一下，用文本框，類型文件也可以做出來，但是樣式會沒那么好看。

4. 下載

這里的話也是做了一個模擬，預先把材料放到網(wǎng)上，鼠標單擊時打開網(wǎng)址既可以下載。這里注意，如果沒有選中的話，禁用該按鈕。

5. 分享

這里的話簡單用單選按鈕和文本標簽做個樣式就行了。

點擊取消時，隱藏該文本框，點擊創(chuàng)建鍵連接，顯示下面鏈接即可。

6. 刪除

點擊刪除按鈕，刪除標記行即可。

7. 搜索

點擊搜索按鈕的時候，對item.name進行模糊搜索。這里需要用到indexof的公式對中繼器進行篩選即可完成。

今天的分享就結(jié)束了，該原型交互效果齊全，使用也簡單，只需要填寫中繼器表格即可。所以推薦給大家使用，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議