相信所有的產(chǎn)品經(jīng)理以及有志于成為產(chǎn)品經(jīng)理的人對(duì)中繼器都不會(huì)很陌生，做為axure的兩大高端功能之一，對(duì)中繼器的了解往往可以檢測(cè)一個(gè)人的axure使用水準(zhǔn)。本教程將為大家介紹中繼器的使用，相信大家學(xué)習(xí)之后，在實(shí)際工作中可以少求一次他人。

既然說(shuō)中繼器是axure兩大難點(diǎn)之一，那么也有必要提一下另一個(gè)難點(diǎn)，即函數(shù)和變量的組合運(yùn)用。

當(dāng)然本文主要講的是中繼器的使用，至于函數(shù)和變量可以參照作者以前的文章，這些文章我將在末尾為大家附上鏈接，有興趣的讀者可以查看。

本案例體驗(yàn)地址：請(qǐng)點(diǎn)擊我。

1、認(rèn)識(shí)中繼器

中繼器可以在元件庫(kù)的基本元件中找到，作為新版的內(nèi)容以及最為復(fù)雜的元件排在最后一個(gè)，將其拖入工作面板之后可以看到如上圖所示的初始樣式。通過(guò)右上角的1我們知道中繼器初始就是擁有交互的。

其交互如上圖所示，可以看出其交互為設(shè)置文字，如果將交互刪除，效果如下圖所示：

簡(jiǎn)單來(lái)說(shuō)，即如果刪除了交互，列表中的內(nèi)容將不會(huì)被加載，上圖中左邊為有交互的中繼器，而右邊則為沒(méi)有交互的中繼器。上面的中繼器有1,2,3三個(gè)數(shù)字，表示該中繼器暫時(shí)顯示了三行，且每一行僅有一個(gè)數(shù)值。中繼器的操作有點(diǎn)類似于動(dòng)態(tài)面板，我們可以雙擊后進(jìn)行進(jìn)一步的設(shè)置。

2、中繼器的設(shè)置

1. 基本內(nèi)容的顯示

如上圖所示，我們雙擊進(jìn)入中繼器并在中繼器中畫兩個(gè)圓，左邊的圓命名為1，右邊的圓命名為2。接著在中繼器的設(shè)置中為其加上列m，設(shè)置m列的元素為a,b,c。這樣我們就得到了一個(gè)有6個(gè)元素的中繼器。

但現(xiàn)在的中繼器沒(méi)有顯示內(nèi)容的交互，所以發(fā)布后沒(méi)有什么變化，為了實(shí)現(xiàn)這個(gè)列表的顯示，還需要進(jìn)行一定的設(shè)置。

設(shè)置方式如上圖所示，讓橢圓1顯示第一列的內(nèi)容，橢圓2顯示第二列的內(nèi)容，這樣我們就可以得到最終的效果。

上圖為設(shè)置后的發(fā)布效果，可以發(fā)現(xiàn)，在左邊和右邊依次出現(xiàn)了第一列和第二列的內(nèi)容，我們填入中繼器中的內(nèi)容通過(guò)兩個(gè)橢圓顯示了出來(lái)。

2. 添加行

我們?cè)诮缑嬷屑尤胍粋€(gè)矩形，然后設(shè)置單擊后的交互，交互設(shè)置如上圖所示，單擊后添加一個(gè)行，第一列的內(nèi)容為4，第二列的內(nèi)容為d，讓我們?cè)囋囆Ч?/p>

3. 標(biāo)記以及刪除

標(biāo)記的操作如上所示，在中繼器中再加一個(gè)橢圓，對(duì)其進(jìn)行如上設(shè)置。當(dāng)鼠標(biāo)點(diǎn)擊這個(gè)橢圓的時(shí)候，選中this，并顯示文本“！”表示已經(jīng)選中了該選項(xiàng)。

接著新增按鍵刪除，刪除按鍵的交互如上所示，刪除已經(jīng)被標(biāo)記的行。

運(yùn)行一下如下所示：

3、頁(yè)面顯示設(shè)置

如上圖所示，在添加行中設(shè)置一個(gè)交互設(shè)置每頁(yè)數(shù)目為5，再增加兩個(gè)按鍵1和2，分別表示頁(yè)面1以及頁(yè)面二。

為這兩個(gè)按鍵分別設(shè)置交互，當(dāng)點(diǎn)擊2的時(shí)候，設(shè)置頁(yè)面為2。按鍵1的設(shè)置同理。

演示一下設(shè)置后的效果：

可以看到，當(dāng)添加行的時(shí)候，行數(shù)將會(huì)增加，但當(dāng)行數(shù)到達(dá)5的時(shí)候?qū)⒉粫?huì)在本頁(yè)增加，我們點(diǎn)擊1和2 可以發(fā)現(xiàn)多余的行切換至了第二頁(yè)。

總結(jié)

本文文字并不多，但對(duì)中繼器的各種設(shè)置基本都有提及，如果想要做更多的效果，那就需要再學(xué)習(xí)函數(shù)以及變量的內(nèi)容，單靠對(duì)中繼器的使用是無(wú)法完成的。

相關(guān)資料

《Axure教程｜使用中繼器制作可以保存記錄的秒表》

《Axure教程｜淘寶網(wǎng)商品圖片放大鏡效果制作》

《Axure教程｜完美的Banner輪播效果》

《Axure教程｜一個(gè)簡(jiǎn)單的密碼判斷實(shí)例》

《Axure教程｜簡(jiǎn)單但看起來(lái)厲害的微信原型》

《有趣的Axure案例：投籃游戲拋物線設(shè)計(jì)》

《有趣的Axure案例：像素鳥游戲的設(shè)計(jì)》

《有趣的Axure案例：打地鼠游戲的設(shè)計(jì)》

《有趣的Axure案例：釣魚游戲的設(shè)計(jì)》

#專欄作家#

馬璐，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注產(chǎn)品設(shè)計(jì)以及用戶體驗(yàn)，力求在技術(shù)一定的情況下將產(chǎn)品做到極致，充分發(fā)揮技術(shù)的潛能。

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

題圖來(lái)自 Pexels ，基于 CC0 協(xié)議