【Axure教程】上傳圖片列表

0 評論 2353 瀏覽 4 收藏 7 分鐘

本文詳細介紹了如何在Axure中創建一個上傳圖片列表的原型模板,包括具體的操作步驟和交互設計,對于需要在產品原型中實現圖片上傳功能的產品經理和設計師來說,這是一個非常實用的教程。閱讀本文,你將學會如何制作一個交互式的圖片上傳列表,希望對你有所幫助。

上傳圖片列表常用于許多不同類型的應用和系統中,包括社交媒體平臺、電子商務網站、博客和內容管理系統、在線相冊和圖像存儲服務、項目管理工具等,發揮著重要作用,幫助用戶管理、組織和展示他們上傳的圖片,從而豐富內容、提高用戶體驗,并支持各種業務需求。

所以今天作者就教大家怎么在Axure制作一個上傳圖片列表的原型模板,具體效果如下所示:

一、原型效果

1、點擊上傳方框,打開顯示本地資源的窗口,里面可以選擇本地的資源。

2、如果選擇的不是圖片格式,彈出彈窗提示。

3、如果選擇的是圖片格式,將圖片回顯,然后顯示下一個上傳方框。

 

二、制作教程

1. 材料準備

這里需要的材料很簡單主要包括一個上傳框的圖片,一個文本框和一個文本標簽。

圖片我們命名為vigopic1,文本框命名為vigotext1,文本標簽命名為click1。

圖片默認選擇上傳框的圖片。

文本標簽,用于觸發后續交互。

文本框輸入類型選擇輸入框,我們通過js代碼可以調用選擇本地圖片,選擇圖片后進行回顯,之前在上傳圖片那章教程里面,有詳細講解,大家可以先去學習那章教程,然后再回來學習上傳之后怎么觸發繼續上傳新的圖片。

整體擺放如下圖所示,只顯示圖片,文本標簽和文本框放置在圖片底部,用圖片遮擋著他倆。

如果想做成列表,我們需要總共上傳多少個,就復制幾個,例如朋友圈案例是最多上傳9個,那就復制多8個,總數九個,前面只有第一個默認顯示,后面的默認隱藏即可,然后擺放整齊就可以了,本演示案例是做了一個最多上傳12張圖片的案例,如果有需要更多的,也可以按照下面方法自行添加。

對了,因為js代碼是根據元件名來上傳和回顯的,所以文件名要唯一,前面第一個組合,我們把圖片命名為vigopic1,文本框命名為vigotext1,文本標簽命名為click1;那第二個組合就要改成圖片命名為vigopic2,文本框命名為vigotext2,文本標簽命名為click2;那第3個組合就要改成圖片命名為vigopic3,文本框命名為vigotext3,文本標簽命名為click3……如此類推。

2. 交互制作

在原有的代碼基礎上,我們可以增加一個判斷,就是上傳的是否為圖片格式,常見的圖片格式包括png、jpg、jpeg,案例中用的是這三種格式,如果需要增加其他圖片格式,可以自行添加代碼如:

if(fileType==”image/png”||fileType==”image/jpeg”||fileType==”image/jpg”)

如果上傳不符合格式,我們用 alert代碼,調出系統彈窗提示即可,例如 alert( “請上傳圖片(格式JPG、JPEG、PNG)!”);

如果上傳的格式符合,那就回顯圖片,這里和之前上傳圖片不同的是,回顯之后,我們要顯示下個一個上傳框,以第一個上傳框上傳回顯后為例,我們要從代碼回到axure的元件里面,這里我們需要借助文本標簽click1,我們在文本標簽鼠標單擊時,我們用顯示的交互,將第二個組合顯示出來就可以了。

現在剩下的問題就是,上傳回顯完之后,怎么觸發這個文本標簽鼠標單擊的事件呢?

我們可以在代碼里增加一行,用jQuery 事件 – click() 方法,模擬點擊按鈕(或執行點擊按鈕時的操作),我們要選擇Axure里名為click1的元件,相當于選擇頁面中標有 data-label 屬性值為 ‘click1′ 的元素,所以整行代碼是(“[data-label=’click1’]”).click();選擇頁面中標有 data-label 屬性值為 ‘click1’ 的元素,并模擬用戶對這個元素的點擊,點擊之后就觸發上面單擊時的交互,顯示第一個組合。

組合2的話也是同一個原理,我們把圖片命名為vigopic1、文本框命名為vigotext1、文本標簽命名為click1的目的也是為了方便后續修改,在第二個組合里的,我只需要代碼和名字里的’1’改成’2’,然后交互事件顯示組合2改成顯示組合3就可以了,改起來也非常方便。

后續的345678……組合,也是同一個道理。

那以上就是本期教程的全部內容,感興趣的同學們可以動手試試哦,感謝您的閱讀,我們下期見。

本文由人人都是產品經理作者【AI產品人】,微信公眾號:【Axure高保真原型】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!