做APP設(shè)計(jì)時(shí)，圖片多選上傳是非常常用的一個(gè)功能點(diǎn)，那如何用Axure進(jìn)行模擬設(shè)計(jì)呢？本文作者分享了完整的流程，希望可以幫到大家。

在移動(dòng)端應(yīng)用中，提供多選圖片上傳功能對(duì)于用戶(hù)體驗(yàn)和功能性具有重要意義，尤其是在像微信、微博等社交媒體平臺(tái)上。

例如用戶(hù)可以快速上傳多張圖片進(jìn)行分享，發(fā)布相冊(cè)或創(chuàng)建圖文并茂的動(dòng)態(tài)；賣(mài)家可以一次性上傳多個(gè)產(chǎn)品圖片，提高商品展示效果；房主或中介可以上傳多張房屋照片，提供更全面的房產(chǎn)展示；用戶(hù)可以上傳多張活動(dòng)照片，參與比賽或活動(dòng)分享。

所以今天作者就教大家怎么在Axure用中繼器制作多選上傳圖片的原型模板，具體效果如下所示：

一、效果展示

1. 點(diǎn)擊+號(hào)按鈕進(jìn)入相冊(cè)頁(yè)
2. 在相冊(cè)頁(yè)里可以選擇多個(gè)圖片，案例中限制數(shù)為9，達(dá)到限制數(shù)繼續(xù)選擇會(huì)彈窗提示
3. 點(diǎn)擊選擇按鈕后，將圖片設(shè)置會(huì)添加主頁(yè)面
4. 在主頁(yè)面點(diǎn)擊圖片可以顯示大圖，點(diǎn)擊刪除按鈕可以刪除選中
5. 如果選擇圖片小于就，可以再次點(diǎn)擊+號(hào)繼續(xù)添加

二、制作教程

制作這個(gè)主要分為三個(gè)部分，包括主頁(yè)面、相冊(cè)頁(yè)面（選擇圖片）、大圖頁(yè)面

1、主頁(yè)面

主頁(yè)面如下圖所示，我們用中繼器來(lái)制作，在中繼器里面添加圖片元件，選擇網(wǎng)格分布，每行3個(gè)，多頁(yè)顯示，一頁(yè)最多顯示9個(gè)

中繼器表格里我們需要兩3列內(nèi)容，no列用于對(duì)圖片的排序，picture列用于存放圖片，name列用于記錄圖片名。第一行no列默認(rèn)為0，導(dǎo)入+號(hào)的圖片。

中繼器載入時(shí)，我們用排序的交互，對(duì)no列進(jìn)行排序，按降序排列，這樣我們后續(xù)選中圖片，設(shè)置no值比0大，這樣添加按鈕就可以永遠(yuǎn)在最后一張圖，如果上傳了9張，因?yàn)槊宽?yè)顯示9，所以添加按鈕就到達(dá)第二頁(yè)，就默認(rèn)看不到了。

然后我們要讓中繼器picture列的圖片值設(shè)置到圖片元件里，如果是axure10的話(huà)，點(diǎn)擊鏈接，選擇圖片元件即可，如果是axure8、9就要在中繼器每項(xiàng)加載時(shí)，用設(shè)置圖片的交互，將picture列的值設(shè)置到對(duì)應(yīng)的圖片元件里。

2、相冊(cè)頁(yè)面

相冊(cè)頁(yè)面主要有中繼器，按鈕，矩形組成，如下圖所示擺放

中繼器里面包括圖片元件和多選按鈕，案例中多選按鈕由形狀制作而成，可以簡(jiǎn)單理解為一個(gè)選中的樣式（√），一個(gè)沒(méi)選中的樣式（圓圈）

中繼器表格里主要有以下幾列，picture列：用于存放圖片；name列：記錄圖片名；xuanzhong列：控制是否選中

在中繼器每項(xiàng)加載時(shí)，我們要讓中繼器picture列的圖片值設(shè)置到圖片元件里，如果是axure10的話(huà)，點(diǎn)擊鏈接，選擇圖片元件即可，如果是axure8、9就要在中繼器每項(xiàng)加載時(shí)，用設(shè)置圖片的交互，將picture列的值設(shè)置到對(duì)應(yīng)的圖片元件里。

我們用xuanzhong列的值控制多選按鈕是否選中，如果值等于1，就是選擇，否則就未選中。我們按照這個(gè)邏輯設(shè)置多選按鈕，用顯示和隱藏的交互，如果xuanzhong列的值等于1，就顯示選中、影藏未選中，否則就顯示未選中，隱藏選中

點(diǎn)擊選中按鈕時(shí)，我們要根據(jù)選中列的值來(lái)控制，是選中狀態(tài)還是未選中狀態(tài)，如果是選中狀態(tài)，點(diǎn)擊就是要變成未選中的狀態(tài)，那么我們就用更新行的交互，更新當(dāng)前行的值為0

如果選中列的值不為1，就是要從未選中變成選中，原則上我們也是用更新行的交互，將當(dāng)前行更新為1即可。不過(guò)這里有個(gè)邏輯要處理，因?yàn)槲覀冏疃嗌蟼?張，像微信朋友圈微博很多移動(dòng)端都是這個(gè)邏輯，所以我們還需要判斷選中了幾張

這里我們需要在中繼器每項(xiàng)加載時(shí)用一個(gè)文本來(lái)記錄，在第一行加載的時(shí)候，設(shè)置文本值為0，如果選中列的值為1就用設(shè)置文本的交互，將他設(shè)置為原來(lái)的值+1，這樣就可以記錄到有選中了幾個(gè)，再用設(shè)置文本的交互，將已選數(shù)量設(shè)置到選擇按鈕上。

那回到前面的交互，如果點(diǎn)擊選中列的值不為1，就是要從未選中變成選中，我們就要判斷選中了幾個(gè)，如果小于9，就用更新行的交互，更新當(dāng)前行的值為1，這樣就可以選中了，如果選中的數(shù)量為9，就是已經(jīng)選滿(mǎn)了，不能再選了，我們就用顯示的交互，顯示提示彈窗

然后我們就要把選中的圖片信息添加到主頁(yè)的中繼器里，這里我們用添加行的交互即可，在選中的條件下，即xuanzhong列的值等于1，我們用添加行的交互，將當(dāng)前中繼器表格里的值設(shè)置添加到主頁(yè)的中繼器即可，添加行的時(shí)候no列的值填寫(xiě)1，比0大就可以了。

這里需要注意的是，因?yàn)槊看胃轮欣^器都會(huì)重新讀取，為了避免重復(fù)添加，我們用在中繼器開(kāi)始加載時(shí)，要先做刪除行的操作，刪除的條件就是除了no列=0的其他列刪除

我們把中繼器右鍵轉(zhuǎn)為動(dòng)態(tài)面板，如果圖片太多，超過(guò)一個(gè)頁(yè)面的高度，我們還可以再次轉(zhuǎn)為動(dòng)態(tài)面板，然后用拖動(dòng)外面板移動(dòng)內(nèi)面板的交互，讓他可以上下拖動(dòng)選擇更多。

然后我們把這個(gè)頁(yè)面所有內(nèi)容右鍵轉(zhuǎn)為動(dòng)態(tài)面板，右鍵固定在左上角，鼠標(biāo)單擊關(guān)閉按鈕或者選擇按鈕時(shí)，用隱藏的交互，將該面板隱藏即可。

主頁(yè)如果點(diǎn)擊中繼器里的+號(hào)圖片，就是no值為0的圖片元件，我們用顯示的交互，顯示這個(gè)動(dòng)態(tài)面板就可以了，因?yàn)檫@個(gè)面板后面還有第二個(gè)狀態(tài)（大圖頁(yè)），所以，我們用設(shè)置面板狀態(tài)，設(shè)置他到相冊(cè)頁(yè)這個(gè)狀態(tài)，設(shè)置的時(shí)候可以勾選隱藏時(shí)顯示，就不用多寫(xiě)一個(gè)顯示的交互了。

3、大圖頁(yè)面

大圖頁(yè)面包含圖片元件，刪除和返回按鈕，文本標(biāo)簽，矩形等，如下圖所示擺放，放在上面相冊(cè)頁(yè)面的第二個(gè)狀態(tài)頁(yè)里

回到上面說(shuō)的，主頁(yè)頁(yè)如果點(diǎn)擊中繼器里不是+號(hào)圖片，就是想查看大圖，所以，我們用設(shè)置面板狀態(tài)，設(shè)置他到大圖頁(yè)這個(gè)狀態(tài)，設(shè)置的時(shí)候可以勾選隱藏時(shí)顯示，就不用多寫(xiě)一個(gè)顯示的交互了。

然后用設(shè)置圖片的交互，將中繼器里當(dāng)前行的圖片值設(shè)置到大圖元件里，然后用設(shè)置文本交互，將name列的值設(shè)置到標(biāo)題元件里。這里還需要一個(gè)默認(rèn)隱藏用于記錄名稱(chēng)的元件，把名字設(shè)置進(jìn)去，這樣后續(xù)離開(kāi)中繼器后才知道要更新那條數(shù)據(jù)。

鼠標(biāo)點(diǎn)擊刪除按鈕時(shí)，就是要從主頁(yè)刪除這張照片，那主要圖片的顯示與否，是通過(guò)相冊(cè)頁(yè)中繼器是否選中來(lái)控制的，所以我們用更新行的交互，條件是相冊(cè)中繼器里name列的值等于記錄名稱(chēng)的值，我們把它選中列的值更新為0，就是從選中變成未選中，這樣在主頁(yè)就不會(huì)出現(xiàn)這張圖片了，在相冊(cè)頁(yè)頁(yè)不會(huì)選中，最后我們用隱藏的交互，隱藏動(dòng)態(tài)面板即可

如果點(diǎn)擊返回按鈕，我們就不用刪除，直接用隱藏的交互隱藏動(dòng)態(tài)面板即可。

這樣我們就完成了移動(dòng)端多選圖片上傳的原型模板了，后續(xù)使用也很方便，只需要在中繼器表格里導(dǎo)入圖片填寫(xiě)對(duì)應(yīng)的信息，預(yù)覽后即可自動(dòng)生成對(duì)應(yīng)的效果。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。