編輯導語：隨着5G的發展，在app上的ui越來越精緻，圖片管理頁成為了app原型設計中不可或缺的一部分，特別對於內容分享型app（例如微博、qq空間、朋友圈）、電商（淘寶、京東）、聊天型app（微信、qq）、社交型app（探探、珍愛網）等。所以今天本文作者就為大家科普一下圖片管理包含哪些內容以及應用案例和設計思路，希望看後能夠對你有所幫助。
首先，什麼是圖片管理呢？
簡單來説，就是用户可以對圖片進行管理，包括上傳導入、分享發送、收藏刪除圖片等操作，下面將會以案例的方式給大家展開。
一、上傳導入圖片上傳圖片的一版分為單圖上傳和多圖上傳：
1. 單圖上傳的應用單圖上傳一般應用於各種軟件上傳頭像、或者上傳身份證、銀行卡等資料進行身份認證，如下圖所示就是單圖上圖頭像的一個案例原型：
多圖上傳應用的場景就比較多了，商品介紹的圖片、微博、朋友圈分享的內容、文章的插圖等等。
下圖是微博、朋友圈的分享案例，一般而言多圖分享都有分享圖片限制，其中以9張居多。
分享發送圖片和上傳導入圖片的區別：上傳導入圖片一般上傳到本軟件的後台，後台需要保存圖片；但是分享發送圖片本平台是不需要保存圖片的，只是簡單的將它發送出去。
圖片管理同樣也是可以分為單圖管理和批量管理，當然現在更多的是兩種形式的結合。
1. 單圖管理——分享發送、收藏刪除單圖管理方式是：直接左右滑動查看大圖，看到喜歡的點擊收藏，系統保存到對應的文件夾，方便下次快速找到；如果看到不喜歡的可以直接刪除圖片；需要分享時，選擇分享方式既可進行分享。
這種一般用於類似相冊或者記錄，可以一張張圖仔細瀏覽。
批量管理的優點是可以快速選擇多張圖片，並對其進行操作，給用户一個快捷便利的操作體驗，一般應用於聊天時批量發圖。
如下圖所示，現在一般的圖片管理原型會做成可單選查看大圖，也可以多選進行批量操作，同時滿足用户兩種需求。
圖片管理的原型，我們選擇使用中繼器來製作，為什麼使用中繼器呢？
因為中繼器製作完成之後，維護簡單，只需要像填寫excel表格那樣，填寫中繼器表格即可，交互自動實現，複用性高，維護成本低，以後項目也可以用到。
中繼器內原件及擺放：圖片+複選按鈕（如果製作單圖的就不需要複選按鈕），如下圖所示：
大圖頁原件擺放
只需要圖片原件即可，背景色可用矩形制作，如下圖所示：
中繼器表格如下圖所示：
- picture：代表圖片，鼠標右鍵單擊導入圖片即可，或者ctrl+ c、ctrl+v複製黏貼也可以。
- name：圖片的名字，非必要，大圖顯示時可以設置顯示，也可以不顯示。
- 其他內容：如圖片大小、日期等等內容可以自行添加。
1）設置圖片事件
中繼器加載時，設置中繼器內圖片=item.picture。
2）鼠標單擊圖片查看大圖
設置大圖=item.picture。
3）刪除事件
點擊刪除按鈕，刪除中繼器行內容。
4）收藏事件
然後，我們要設置選中時變成紅色。
最後，設置點擊時切換選中狀態即可。
以上就是本期關於移動端圖片管理原型設計的全部內容了，主要是基於我個人在實際工作中需要用到的原型，而設計出來的Axure組件。大家在設計原型的時候，可以根據實際情況需要選擇使用。
如果大家有所收穫，希望可以點贊鼓勵一下，也歡迎大家交流，謝謝。
本文由 @秀 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議