Axure原型設計：移動端圖片管理原型

首先，什麼是圖片管理呢？

簡單來説，就是用户可以對圖片進行管理，包括上傳導入、分享發送、收藏刪除圖片等操作，下面將會以案例的方式給大家展開。

一、上傳導入圖片

上傳圖片的一版分為單圖上傳和多圖上傳：

1. 單圖上傳的應用

單圖上傳一般應用於各種軟件上傳頭像、或者上傳身份證、銀行卡等資料進行身份認證，如下圖所示就是單圖上圖頭像的一個案例原型：

2. 多圖上傳的應用

多圖上傳應用的場景就比較多了，商品介紹的圖片、微博、朋友圈分享的內容、文章的插圖等等。

下圖是微博、朋友圈的分享案例，一般而言多圖分享都有分享圖片限制，其中以9張居多。

二、圖片管理——分享發送、收藏刪除圖片

分享發送圖片和上傳導入圖片的區別：上傳導入圖片一般上傳到本軟件的後台，後台需要保存圖片；但是分享發送圖片本平台是不需要保存圖片的，只是簡單的將它發送出去。

圖片管理同樣也是可以分為單圖管理和批量管理，當然現在更多的是兩種形式的結合。

1. 單圖管理——分享發送、收藏刪除

單圖管理方式是：直接左右滑動查看大圖，看到喜歡的點擊收藏，系統保存到對應的文件夾，方便下次快速找到；如果看到不喜歡的可以直接刪除圖片；需要分享時，選擇分享方式既可進行分享。

這種一般用於類似相冊或者記錄，可以一張張圖仔細瀏覽。

2. 批量管理——分享發送、收藏刪除

批量管理的優點是可以快速選擇多張圖片，並對其進行操作，給用户一個快捷便利的操作體驗，一般應用於聊天時批量發圖。

3. 圖片管理——結合單圖和批量管理

如下圖所示，現在一般的圖片管理原型會做成可單選查看大圖，也可以多選進行批量操作，同時滿足用户兩種需求。

三、設計思路1. 製作材料

圖片管理的原型，我們選擇使用中繼器來製作，為什麼使用中繼器呢？

因為中繼器製作完成之後，維護簡單，只需要像填寫excel表格那樣，填寫中繼器表格即可，交互自動實現，複用性高，維護成本低，以後項目也可以用到。

中繼器內原件及擺放：圖片+複選按鈕（如果製作單圖的就不需要複選按鈕），如下圖所示：

大圖頁原件擺放

只需要圖片原件即可，背景色可用矩形制作，如下圖所示：

2. 中繼器表格

中繼器表格如下圖所示：

• picture：代表圖片，鼠標右鍵單擊導入圖片即可，或者ctrl+ c、ctrl+v複製黏貼也可以。
• name：圖片的名字，非必要，大圖顯示時可以設置顯示，也可以不顯示。
• 其他內容：如圖片大小、日期等等內容可以自行添加。

3. 交互事件

1）設置圖片事件

中繼器加載時，設置中繼器內圖片=item.picture。

2）鼠標單擊圖片查看大圖

設置大圖=item.picture。

3）刪除事件

點擊刪除按鈕，刪除中繼器行內容。

4）收藏事件

然後，我們要設置選中時變成紅色。

最後，設置點擊時切換選中狀態即可。

以上就是本期關於移動端圖片管理原型設計的全部內容了，主要是基於我個人在實際工作中需要用到的原型，而設計出來的Axure組件。大家在設計原型的時候，可以根據實際情況需要選擇使用。

如果大家有所收穫，希望可以點贊鼓勵一下，也歡迎大家交流，謝謝。

本文由 @秀 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議