Axure RP 作為一款強(qiáng)大的原型設(shè)計(jì)工具，其高級(jí)組件——中繼器（Repeater），為設(shè)計(jì)師提供了模擬動(dòng)態(tài)數(shù)據(jù)和復(fù)雜交互的能力，極大地提升了原型的真實(shí)感和交互深度。本教程將深入探討中繼器的核心概念、設(shè)置方法以及高級(jí)應(yīng)用技巧。

一、中繼器基礎(chǔ)：是什么與為什么

中繼器本質(zhì)上是一個(gè)數(shù)據(jù)集容器，可以存儲(chǔ)多行數(shù)據(jù)（類似于表格），并能根據(jù)這些數(shù)據(jù)動(dòng)態(tài)生成重復(fù)的視覺元素。例如，你可以用它輕松創(chuàng)建商品列表、用戶評(píng)論墻、數(shù)據(jù)表格或任何需要重復(fù)結(jié)構(gòu)但內(nèi)容不同的模塊。其核心優(yōu)勢(shì)在于：一次設(shè)計(jì)樣式，多處重復(fù)使用，且能通過交互動(dòng)態(tài)更新數(shù)據(jù)，避免了手動(dòng)復(fù)制粘貼的繁瑣和低效。

二、核心設(shè)置三步走

1. 數(shù)據(jù)結(jié)構(gòu)定義：在右側(cè)面板的【中繼器】標(biāo)簽頁，你可以看到一個(gè)默認(rèn)的表格。通過添加列（如：image, name, price, description）并填入示例數(shù)據(jù)，來定義你的數(shù)據(jù)結(jié)構(gòu)。每行數(shù)據(jù)將對(duì)應(yīng)生成一個(gè)“項(xiàng)”。

1. 樣式設(shè)計(jì)：雙擊進(jìn)入中繼器內(nèi)部，設(shè)計(jì)單個(gè)項(xiàng)目的視覺樣式。例如，拖入一個(gè)矩形作為背景，一個(gè)圖片元件（用于顯示商品圖），幾個(gè)文本標(biāo)簽（用于顯示名稱、價(jià)格等）。關(guān)鍵一步是：將這些元件與中繼器的數(shù)據(jù)列進(jìn)行綁定。選中圖片元件，在右側(cè)【交互】面板的【中繼器】下，設(shè)置其默認(rèn)圖片來源為“值”，然后在下拉菜單中選擇對(duì)應(yīng)的列（如：image）。文本標(biāo)簽同理，設(shè)置文本值為對(duì)應(yīng)的數(shù)據(jù)列。

1. 交互與篩選：中繼器的強(qiáng)大之處在于其交互能力。你可以通過【添加排序】或【添加篩選】來組織數(shù)據(jù)的顯示。例如，可以創(chuàng)建一個(gè)按鈕，為其添加點(diǎn)擊事件，動(dòng)作為【添加篩選】，設(shè)置規(guī)則為“price > 100”，即可實(shí)現(xiàn)按價(jià)格篩選。你還可以通過【更新行】動(dòng)作來動(dòng)態(tài)修改中繼器內(nèi)的數(shù)據(jù)，模擬編輯操作。

三、高級(jí)應(yīng)用技巧

• 分頁顯示：結(jié)合【每頁顯示項(xiàng)目數(shù)量】設(shè)置和【添加篩選】動(dòng)作，可以實(shí)現(xiàn)分頁效果。創(chuàng)建“上一頁”、“下一頁”按鈕，通過改變篩選條件來切換顯示的數(shù)據(jù)范圍。
• 主從視圖聯(lián)動(dòng)：這是中繼器的經(jīng)典應(yīng)用場(chǎng)景。例如，一個(gè)中繼器顯示商品列表（主視圖），點(diǎn)擊某個(gè)商品項(xiàng)時(shí)，通過【設(shè)置面板狀態(tài)】或【設(shè)置文本/圖片】動(dòng)作，將該項(xiàng)的詳細(xì)數(shù)據(jù)（從中繼器當(dāng)前行獲取數(shù)據(jù)）顯示在另一個(gè)詳情區(qū)域（從視圖）。
• 動(dòng)態(tài)添加/刪除項(xiàng)：通過【添加行】和【刪除行】動(dòng)作，可以模擬用戶新增或刪除一條數(shù)據(jù)記錄的效果，使原型具備CRUD（增刪改查）的交互模擬能力。
• 與內(nèi)聯(lián)框架結(jié)合：當(dāng)中繼器項(xiàng)需要展示復(fù)雜獨(dú)立頁面時(shí)（如點(diǎn)擊新聞標(biāo)題彈出詳細(xì)文章），可以配合內(nèi)聯(lián)框架使用，通過設(shè)置框架鏈接到對(duì)應(yīng)的頁面。

四、實(shí)戰(zhàn)注意事項(xiàng)

• 數(shù)據(jù)驅(qū)動(dòng)思維：設(shè)計(jì)中繼器時(shí)，始終思考“數(shù)據(jù)如何驅(qū)動(dòng)視圖”。先規(guī)劃好數(shù)據(jù)結(jié)構(gòu)，再設(shè)計(jì)單一樣式。
• 命名規(guī)范：為中繼器的列、元件以及交互事件設(shè)置清晰易懂的名稱，便于后期維護(hù)和團(tuán)隊(duì)協(xié)作。
• 性能考量：當(dāng)中繼器數(shù)據(jù)行非常多時(shí)（如上百行），可能會(huì)影響原型的運(yùn)行流暢度。在演示時(shí)，可先用少量數(shù)據(jù)，或通過分頁來優(yōu)化體驗(yàn)。

掌握中繼器，意味著你的Axure原型設(shè)計(jì)能力邁上了一個(gè)新臺(tái)階。它不僅能展示靜態(tài)布局，更能生動(dòng)地模擬出真實(shí)產(chǎn)品的數(shù)據(jù)流動(dòng)和交互邏輯，讓設(shè)計(jì)評(píng)審、用戶測(cè)試和開發(fā)溝通都變得更加高效和準(zhǔn)確。多加練習(xí)，從簡(jiǎn)單的列表開始，逐步嘗試更復(fù)雜的聯(lián)動(dòng)效果，你將成為原型設(shè)計(jì)的高手。