編輯導(dǎo)語(yǔ)：上傳圖片是在手機(jī)的使用中經(jīng)常會(huì)遇到的場(chǎng)景，本文作者便分享了用中繼器制作移動(dòng)端圖片上傳效果的方法，一起來看一下吧。

在手機(jī)app、小程序里，經(jīng)常會(huì)出現(xiàn)上傳圖片的場(chǎng)景，例如上傳頭像、上傳證件照、發(fā)送圖片……

所以作者今天就教大家在Axure中，如何運(yùn)用中繼器，制作出高保真的上傳效果。

一、制作完成后應(yīng)具備以下效果

• 點(diǎn)擊箭頭按鈕，可以查看相冊(cè)（中繼器）里的所有圖片
• 在相冊(cè)（中繼器）里選擇圖片后，可以將圖片回顯到對(duì)應(yīng)頭像圖片內(nèi)

二、制作材料準(zhǔn)備

1. 手機(jī)設(shè)備的組合素材

手機(jī)設(shè)備素材包括：手機(jī)外框，時(shí)間文本標(biāo)簽，圖標(biāo)（信號(hào)、電量、wife）等，這部分內(nèi)容是非必要，可以替換的，而且素材都可以在網(wǎng)上找到，所以就不詳細(xì)展開了。

2. 動(dòng)態(tài)面板

我們這里需要用到動(dòng)態(tài)面板，新建兩個(gè)state，第一個(gè)是個(gè)人信息頁(yè)，第二個(gè)是相冊(cè)頁(yè)。

1）個(gè)人信息頁(yè)

標(biāo)題文字、返回按鈕、添加按鈕、頭像圖片、箭頭（選擇）按鈕、其他文本標(biāo)簽說明文字……你們可以按照需求擺放整齊，案例中擺放如下圖所示：

2）相冊(cè)頁(yè)

關(guān)閉按鈕、中繼器，單選按鈕、其他文本標(biāo)簽說明文字……

中繼器內(nèi)需需要放置一個(gè)圖片元件，表格列名改為picture，在中繼器表格里面右鍵導(dǎo)入本地圖片，或者輸入圖片的在線鏈接。布局選擇網(wǎng)格排布，每行4項(xiàng)。

注意：如果中繼器內(nèi)部圖片較多，簡(jiǎn)單來說就是超過了手機(jī)的尺寸，這時(shí)我們就要轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)檫@里是移動(dòng)端，所以操作上我們不應(yīng)該調(diào)出滾動(dòng)條，因?yàn)槭謾C(jī)沒有鼠標(biāo)可以滾動(dòng)。

所以合理的設(shè)計(jì)，應(yīng)該是用動(dòng)態(tài)面板可以設(shè)置在面板拖動(dòng)時(shí)，移動(dòng)中繼器整個(gè)組合上下移動(dòng)。由于這里有點(diǎn)復(fù)雜，我們?cè)谶@個(gè)案例里不詳細(xì)展開，有興趣的同學(xué)可以研究一下。

三、交互制作

1. 中繼器每項(xiàng)加載時(shí)

相冊(cè)頁(yè)的中繼器每項(xiàng)加載時(shí)，我們要用設(shè)置圖片的交互，將中繼器表格里存放的圖片，設(shè)置在中繼器內(nèi)的圖片元件，設(shè)置圖片的時(shí)候我們選擇值，然后填入item.picture，這里代表中繼器表格里對(duì)應(yīng)的圖片。

2. 中繼器內(nèi)圖片元件鼠標(biāo)單擊時(shí)

中繼器內(nèi)圖片元件鼠標(biāo)單擊時(shí)，即選中了該圖片為頭像，所以我們也是用設(shè)置圖片的交互，將鼠標(biāo)單擊圖片對(duì)應(yīng)的值，設(shè)置到頭像圖片里，又因?yàn)閳D片的值是存放在中繼器表格內(nèi)容，所以簡(jiǎn)單來說，其實(shí)對(duì)應(yīng)的圖片值即item.picture。

設(shè)置圖片完成后，我們用設(shè)置動(dòng)態(tài)面板的交互，將動(dòng)態(tài)面板設(shè)置到個(gè)人信息頁(yè)面即可。

3. 相冊(cè)頁(yè)關(guān)閉按鈕鼠標(biāo)點(diǎn)擊時(shí)

鼠標(biāo)點(diǎn)擊關(guān)閉按鈕時(shí)，即取消更換頭像，這里我們用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到個(gè)人信息頁(yè)面即可。

4. 個(gè)人信息頁(yè)面右箭頭鼠標(biāo)單擊時(shí)

鼠標(biāo)點(diǎn)擊個(gè)人信息信息頁(yè)面的右箭頭時(shí)，即需要更換頭像，所以我們用設(shè)置面板狀態(tài)的交互，將動(dòng)態(tài)面板設(shè)置到相冊(cè)頁(yè)面即可。

這里有同學(xué)可能會(huì)問為什么不把這個(gè)交互設(shè)置到個(gè)人信息頁(yè)面的圖片里呢。其實(shí)都可以，看你們個(gè)人的習(xí)慣，因?yàn)樽髡叩南矚g是點(diǎn)擊圖片顯示大圖的效果，這些效果都是可以后續(xù)自行增加的，所以就把這個(gè)交互設(shè)置到右箭頭里，市面上大多數(shù)app都是這樣操作的，當(dāng)然了，你們也可以根據(jù)自己的需求進(jìn)行修改。

那么我們就完成了用中繼器制作移動(dòng)端圖片上傳效果的原型模板了，下次使用時(shí)，我們只需要導(dǎo)入圖片即可自動(dòng)生成交互，是不是很方便呢？感興趣的同學(xué)們可以動(dòng)手試試哦。

那本期的教程就到此為止了，感謝您的閱讀，我們下期見，88~

本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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