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

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

效果演示

1. 分類查看

2. 上傳文件

這里做了一個(gè)模擬上傳效果：

3. 單擊選中

4. 下載文件

5. 分享文件

6. 刪除文件

7. 刷新

8. 搜索

9. 查看圖片

10. 查看視頻

這里請(qǐng)打開電腦聲音：

11. 播放音樂

這里請(qǐng)打開電腦聲音，真的能聽到歌曲哦。

12. 查看文檔

13. 下載其他文件

因?yàn)槠渌募]辦法在網(wǎng)頁查看，所以下載下來打開。

使用說明

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

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

制作方法

1. 中繼器制作

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

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

picture：每項(xiàng)加載時(shí)，設(shè)置圖片=item.picture；

name：每項(xiàng)加載時(shí)，設(shè)置文本標(biāo)簽=item.name；

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

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

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

2. 篩選

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

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

3. 上傳

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

4. 下載

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

5. 分享

這里的話簡單用單選按鈕和文本標(biāo)簽做個(gè)樣式就行了。

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

6. 刪除

點(diǎn)擊刪除按鈕，刪除標(biāo)記行即可。

7. 搜索

點(diǎn)擊搜索按鈕的時(shí)候，對(duì)item.name進(jìn)行模糊搜索。這里需要用到indexof的公式對(duì)中繼器進(jìn)行篩選即可完成。

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

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

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