在Axure中，中繼器可以與自建部件庫搭配著來使用，中繼器的優點是可以添加交互事件來實現想要的動效，缺點則是制作起來相對復雜。自建部件庫則能很好的解決這個缺點，因為可以將添加了交互事件的中繼器制作成自建部件，這樣就只需要復雜一次，以后在需要使用的時候就可以直接引用。
本文主要分為以下四部分，中繼器案例、中繼器是什么、中繼器的基本構成以及中繼器的案例實踐。
一．中繼器案例
中繼器是Axure中相對而言比較復雜的元件，上手難度相對較高，但是中繼器的功能也是比較強大的，除了可以直接進行復用和數據的批量操作，還可以對數據進行增加、刪除、篩選、修改等操作，掌握了中繼器之后，能夠做出很多我們常見的一些動效，先簡單的看幾個利用中繼器做出來的效果。
1. 簡單列表頁
下圖是利用中繼器做出來的一個列表頁，列表頁在App中使用的情況非常多，比如圖文列表（常見于各種App，如微信聊天列表、今日頭條列表、商品列表等）、文字列表（個人信息、地址、商品詳情）、二級列表菜單等。
利用中繼器制作列表頁之后，可以將中繼器做成自建部件，這樣在進行列表頁創建的時候就能夠直接拿來復用，另外利用中繼器創建的列表頁也無需進行重復排版，直接在中繼器里修改數據即可。
2. 添加與刪除數據
下圖為一個數據列表的添加與刪除數據效果圖，在實際的使用中可能是某一列表的添加與刪除，比如用戶信息的添加與刪除、比如外賣的地址信息的添加與刪除等，除了純文本的添加與刪除，中繼器也能夠實現圖文列表的添加與刪除。
3. 排序與篩選
下圖為簡單的排序與篩選效果，Axure中繼器中支持日期、數字和文本的排序，篩選則需要使用函數，利用中繼器可以實現條件篩選的效果，比如在App中通過距離、價格、銷量等數據來進行篩選。
4. 分頁與頁面跳轉
分頁與切換是將列表頁進行分頁設置每頁顯示的數據量，然后進行上一頁、下一頁、首頁、尾頁等這些頁面之間的跳轉操作。
5. 動態搜索
動態搜索在一些搜索的頁面用到的比較多，比如各種搜索框中都會通過關鍵字的匹配來實現動態的搜索，從而減少用戶的輸入，以達到更好的用戶體驗，在Axure中就可以利用中繼器實現這樣的效果。
看完中繼器的可以實現的一些動效之后，有沒有躍躍欲試，想直接嘗試的小伙伴可以直接跳到文章的中繼器案例實踐部分，接下來會先介紹一下中繼器相關的知識，最后才是中繼器案例實踐。
二．中繼器是什么
中繼器（英文名Repeater）是Axure RP 7.0推出的新功能，中繼器相當于程序開發中的小型數據庫，用于存放同種結構的數據，可對其中的數據進行刪除，增加與更新，以及根據設定好的條件對呈現的數據組進行過濾等操作，學習它的使用有助于我們快速設計一些復雜的交互界面。
中繼器在Axure的默認部件庫里，拖入到操作區中之后顯示的是一個簡單3行表格，在中繼器外部無法對中繼器進行操作，雙擊后進入中繼器內部進行操作，中繼器內部的一個部件對應著外部元件的一個縱列，對單一部件進行修改，則會在中繼器外部的整個縱列產生修改。
三．中繼器的基本構成
中繼器主要分為數據集、交互、樣式三大部分
1. 數據集
數據集是中繼器的數據來源，可以通過在數據集中添加數據，然后將數據賦值給中繼器的具體元件來實現賦值的效果，如果需要在中繼器中添加圖像，點擊右鍵選擇【導入圖像】即可。如下圖所示，最上面是數據列的名稱，只支持英文命名，中間的部分是中繼器的數據，兩側分別是新增列與新增行。
一個元件的數據值會對應中繼器數據集中一列的數據，所以在命名的時候，最好將元件的名稱與中繼器數據集中的列的名稱保持一致，這樣在進行賦值的時候會比較方便，在上圖中可以看到我在對元件進行命名的時候，元件的名稱與中繼器數據集的列名稱是保持一致的。
2. 交互
1）數據賦值
在中繼器的數據集中添加的數據，是不會自動填充到中繼器里的，需要在中繼器中添加交互之后，才會將數據集中數據賦值給具體的元件。具體賦值操作如下，在中繼器交互中的【每項加載時】添加用例，然后將中繼器中數據列的值，賦給具體的元件。
在【步驟1】中進行文本的設置，如果是設置圖像，則選擇設置圖像即可，如果說需要將文本進行其他的處理，比如字體、顏色等進行變更，則將【步驟4】中的值更換為富文本即可。
賦值后的結果如下圖所示，其中【刪除】操作是富文本，標題為單獨的元件，下方的紅線區域為中繼器部分。
2）添加交互
在中繼器中主要的交互分為兩大塊，一塊是針對中繼器整體的，一塊是關于數據集的，見下圖 ：
可以看到在關于中繼器的部分中，有著排序、過濾、分頁這些功能，在關于中繼器中有著新增、標記、取消標記、更新、刪除行這些操作，相對來說這些操作比較簡單，稍微摸索一下就能夠掌握，就不贅述了。
3. 樣式
中繼器的樣式主要分為布局、背景、分頁、間距這些功能，布局就是選擇列表的縱向和橫向排列，以及每一列顯示幾個數據即換行，分頁功能則是將數據集中的數據進行分頁展示。例如數據集中有30行數據，設置每頁顯示3個，則能夠顯示10頁，稍微摸索一下就能夠掌握，不贅述。
四．中繼器案例實踐
1. 簡單列表頁
先在中繼器中選擇需要賦值的元件，將元件的名稱修改為自定義的名稱，然后在中繼器的數據集中添加需要的數據
添加完數據之后，將數據集中的數據賦值給相應的元件
最后實現的效果如下：
2. 添加與刪除數據
在添加與刪除數據中首先需要對中繼器進行賦值，前文已講述，不贅述，將中繼器賦值完之后，需要將個文本輸入框的值與中繼器中對應的列的數據進行綁定，然后在【添加】按鈕上添加交互事件“新增行到中繼器”，具體如下操作。
首先將輸入信息的輸入框進行命名，并且在中繼器的【每項加載時】里添加交互事件：
然后是將每個輸入框的值與中繼器中的列的值進行綁定，與中繼器的賦值非常相似，將輸入框的值賦值給中繼器的數據集：
最后在【添加】按鈕上新增交互事件，“點擊新增行至中繼器”，刪除操作需要在中繼器的內部添加交互事件，添加“刪除行從中繼器”。
3. 排序與篩選
排序與篩選都是在中繼器數據集添加好數據的基礎上的，選擇新增排序和篩選規則即可，至于重置，選擇移除排序或者篩選即可。
4. 分頁與頁面跳轉
在按鈕上添加交互事件，然后在中繼器的交互中添加分頁的設置即可實現中繼器的分頁效果，移除分頁之后，中繼器的顯示的內容就會恢復至原狀，在不同的按鈕上設置跳轉至不同的中繼器的頁數，就可以實現切換的效果。
5. 動態搜索
動態搜索相對而言會復雜一點，因為動態搜索用到了中繼器中的一些函數，首先在中繼器中填充相應的數據，然后將中繼器轉化為動態面板，并且將它進行隱藏，之后是在輸入框中添加交互事件“當文字長度改變時”觸發交互事件：
當觸發交互事件時，進行條件判斷：
如果輸入框內的文字長度大于等于1時，則新增過濾器：
新增局部變量，在數據集中截取0到輸入框內輸入的文字長度的數據，如果截取的數據值與文本輸入框中輸入的值相等，則顯示隱藏狀態下的中繼器：
如果截取的值與文本輸入框的值不相等，則隱藏中繼器。
以上就是最近關于中繼器使用的一些心得體會，還有很多中繼器的函數并不會使用，還有一些功能掌握的也不全面，望諸位不要見笑，歡迎斧正、指點、拍磚…
文中出現的案例的RP文件下載鏈接為： 點擊立刻下載！
關于我：王家郴，喜歡網球和騎行的產品汪。 公眾號（產品經理從0到1） ，每周都會在公眾號上寫點東西，歡迎關注,求指教、求分享、求交流。目前奔走在產品的道路上，漫漫產品路，與君共勉。
Tags: 設計
文章來源：http://www.chanpin100.com/article/101157