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

2 評論 7091 瀏覽 24 收藏 8 分鐘

編輯導語:隨著5G的發(fā)展,在app上的ui越來越精致,圖片管理頁成為了app原型設計中不可或缺的一部分,特別對于內容分享型app(例如微博、qq空間、朋友圈)、電商(淘寶、京東)、聊天型app(微信、qq)、社交型app(探探、珍愛網)等。所以今天本文作者就為大家科普一下圖片管理包含哪些內容以及應用案例和設計思路,希望看后能夠對你有所幫助。

首先,什么是圖片管理呢?

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

一、上傳導入圖片

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

1. 單圖上傳的應用

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

2. 多圖上傳的應用

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

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

500

二、圖片管理——分享發(fā)送、收藏刪除圖片

分享發(fā)送圖片和上傳導入圖片的區(qū)別:上傳導入圖片一般上傳到本軟件的后臺,后臺需要保存圖片;但是分享發(fā)送圖片本平臺是不需要保存圖片的,只是簡單的將它發(fā)送出去。

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

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

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

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

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

批量管理的優(yōu)點是可以快速選擇多張圖片,并對其進行操作,給用戶一個快捷便利的操作體驗,一般應用于聊天時批量發(fā)圖。

400

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

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

三、設計思路

1. 制作材料

圖片管理的原型,我們選擇使用中繼器來制作,為什么使用中繼器呢?

因為中繼器制作完成之后,維護簡單,只需要像填寫excel表格那樣,填寫中繼器表格即可,交互自動實現(xiàn),復用性高,維護成本低,以后項目也可以用到。

中繼器內原件及擺放:圖片+復選按鈕(如果制作單圖的就不需要復選按鈕),如下圖所示:

? ? 大圖頁原件擺放

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

2. 中繼器表格

中繼器表格如下圖所示:

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

3. 交互事件

1)設置圖片事件

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

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

設置大圖=item.picture。

3)刪除事件

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

4)收藏事件

這里我們需要用到心型的矩形,我們直接用矩形制作既可以,點擊右上角可直接切換成心形

然后,我們要設置選中時變成紅色。

最后,設置點擊時切換選中狀態(tài)即可。

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

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

 

本文由 @秀 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 原型預覽及下載地址:
    https://axhub.im/ax9/9e5db40d03349b34

    來自廣東 回復
  2. 感謝分享

    回復