圖片管理:簡單來說,就是用戶可以對圖片進行管理,包括上傳導入、分享發送、收藏刪除圖片等操作!下面將通過Axure原型軟件教會大家怎麽制作壹個移動端圖片管理原型!學會Axure,人人都是產品經理!這句話,想必對於準備自學Axure或者正在自學Axure的小夥伴們來說並不陌生!而想要完全掌握Axure成為產品經理,可能也並非容易,入門簡單,但是交互原理可並不簡單!因此提供了系列的Axure自學視頻課,可以全面的學習Axure軟件基礎以及交互原型案例實操~
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怎麽設計移動端圖片管理原型?”的全部內容精彩分享了,希望能夠幫助到妳!更多Axure精彩分享,盡在Axure相關文章~如果妳此時正在猶豫Axure去哪學、怎麽學的話,那我不妨建議妳直接學習體驗壹下我們的Axure自學自學課,專業講師授課,可以從基礎的知識點開始學起,逐步深入掌握哦~