感謝導(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)具備以下效果箭頭按鈕，可以查看相冊(cè)（中繼器）里得所有支持在相冊(cè)（中繼器）里選擇支持后，可以將支持回顯到對(duì)應(yīng)頭像支持內(nèi)

原型地址：wg7da2.axshare/#g=1

二、制作材料準(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)橹С值弥凳谴娣旁谥欣^器表格內(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)時(shí)

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

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

鼠標(biāo)個(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是支持顯示大圖得效果，這些效果都是可以后續(xù)自行增加得，所以就把這個(gè)交互設(shè)置到右箭頭里，市面上大多數(shù)app都是這樣操作得，當(dāng)然了，你們也可以根據(jù)自己得需求進(jìn)行修改。

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

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

感謝由 等AI產(chǎn)品人 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止感謝

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