感謝導(dǎo)語：上傳支持是在手機(jī)得使用中經(jīng)常會遇到得場景，感謝便分享了用中繼器制作移動端支持上傳效果得方法，一起來看一下吧。

在手機(jī)app、小程序里，經(jīng)常會出現(xiàn)上傳支持得場景，例如上傳頭像、上傳證件照、發(fā)送支持……

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

一、制作完成后應(yīng)具備以下效果箭頭按鈕，可以查看相冊（中繼器）里得所有支持在相冊（中繼器）里選擇支持后，可以將支持回顯到對應(yīng)頭像支持內(nèi)

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

二、制作材料準(zhǔn)備1. 手機(jī)設(shè)備得組合素材

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

2. 動態(tài)面板

我們這里需要用到動態(tài)面板，新建兩個state，第壹個是個人信息頁，第二個是相冊頁。

1）個人信息頁

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

2）相冊頁

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

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

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

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

三、交互制作1. 中繼器每項加載時

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

2. 中繼器內(nèi)支持元件鼠標(biāo)單擊時

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

設(shè)置支持完成后，我們用設(shè)置動態(tài)面板得交互，將動態(tài)面板設(shè)置到個人信息頁面即可。

3. 相冊頁關(guān)閉按鈕鼠標(biāo)時

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

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

鼠標(biāo)個人信息信息頁面得右箭頭時，即需要更換頭像，所以我們用設(shè)置面板狀態(tài)得交互，將動態(tài)面板設(shè)置到相冊頁面即可。

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

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

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

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

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