中繼器（Repeater）是現(xiàn)代UI/UX設(shè)計工具（如Axure、Figma等）中的一個核心功能，它允許設(shè)計師通過數(shù)據(jù)集快速生成和交互式管理重復(fù)的列表或內(nèi)容塊。無論是制作商品列表、用戶信息卡片，還是動態(tài)表格，中繼器都能極大提升設(shè)計效率和原型保真度。本教程將帶你從零開始，掌握中繼器的基本概念與列表制作流程。

一、 什么是中繼器？

你可以把中繼器想象成一個智能的“模板工廠”。它由兩部分構(gòu)成：

1. 數(shù)據(jù)集：一個類似表格的數(shù)據(jù)源，每一行是一條記錄，每一列是一個屬性（例如：姓名、價格、圖片鏈接）。
2. 項模板：一個設(shè)計好的視覺單元，用于展示數(shù)據(jù)集中的一條記錄。你可以將數(shù)據(jù)集的列“綁定”到模板中的具體元素（如文本框、圖片框）上。

當(dāng)你修改數(shù)據(jù)集或為模板添加交互時，所有基于該模板生成的項都會自動同步更新。

二、 制作一個基礎(chǔ)列表的步驟

我們以制作一個簡單的“產(chǎn)品列表”為例。

步驟1：創(chuàng)建中繼器并設(shè)計項模板
1. 在畫布上放置一個“中繼器”元件。
2. 進(jìn)入中繼器內(nèi)部，你會看到一個默認(rèn)的矩形項。這就是你的“模板”。
3. 設(shè)計這個模板：例如，放入一個圖片框（用于產(chǎn)品圖）、兩個文本框（用于產(chǎn)品名和價格），并排版美觀。

步驟2：填寫數(shù)據(jù)集
1. 選中中繼器，在屬性面板中找到“數(shù)據(jù)集”。
2. 默認(rèn)有3列（Column0,1,2）和3行數(shù)據(jù)。你可以：
* 修改列名：雙擊列名，改為更有意義的名稱，如 productImage, productName, price。

• 添加行/列：點擊“+”按鈕。

• 填寫數(shù)據(jù)：在單元格中直接輸入。對于圖片列，可以填入圖片文件的路徑或URL。

步驟3：將數(shù)據(jù)綁定到模板元件
這是最關(guān)鍵的一步，讓數(shù)據(jù)“活”起來。

1. 選中模板內(nèi)的圖片框，在屬性面板中，找到“圖像”設(shè)置，選擇“值”為“中繼器/數(shù)據(jù)集”，然后在下拉菜單中選擇對應(yīng)的列（如 productImage）。
2. 同理，選中產(chǎn)品名文本框，在文本屬性中，選擇“值”為“中繼器/數(shù)據(jù)集”，并綁定 productName 列。為價格文本框綁定 price 列。

完成綁定后，你會發(fā)現(xiàn)中繼器自動生成了與數(shù)據(jù)行數(shù)相同的多個項，并且每個項都正確顯示了對應(yīng)的數(shù)據(jù)，一個基礎(chǔ)的列表就誕生了。

三、 常見交互與進(jìn)階技巧

靜態(tài)列表只是開始，中繼器的強(qiáng)大在于交互。

• 排序：可以為中繼器添加交互，例如“點擊價格標(biāo)題時，按價格升序/降序排列列表”。這通常通過“添加排序”動作，并指定排序的數(shù)據(jù)列來實現(xiàn)。
• 篩選/搜索：可以設(shè)置條件，只顯示符合條件的數(shù)據(jù)行。例如，創(chuàng)建一個搜索框，輸入文本后，觸發(fā)中繼器“添加篩選”，規(guī)則為“productName 包含搜索框文字”。
• 動態(tài)新增/刪除項：通過交互，向數(shù)據(jù)集“添加行”或“標(biāo)記行/刪除已標(biāo)記行”，可以模擬用戶添加購物車或刪除列表項的效果。
• 分頁與布局：調(diào)整中繼器的布局屬性，可以設(shè)置為“水平”或“垂直”流動，并設(shè)置每頁項數(shù)，輕松實現(xiàn)分頁效果。

四、 最佳實踐與注意事項

1. 規(guī)劃先行：在動手前，先規(guī)劃好數(shù)據(jù)集需要哪些列，模板需要哪些元件，做到心中有數(shù)。
2. 命名清晰：為數(shù)據(jù)集列、模板內(nèi)的元件都起一個清晰易懂的名字，便于后續(xù)綁定和交互設(shè)置。
3. 樣式復(fù)用：善用“樣式”功能。為模板中的文本框設(shè)置好默認(rèn)樣式（如字體、顏色），這樣新增的項會自動繼承，保持視覺統(tǒng)一。
4. 從簡開始：先實現(xiàn)基礎(chǔ)的數(shù)據(jù)顯示，再逐步添加排序、篩選等復(fù)雜交互，一步步調(diào)試。

###

掌握中繼器，是邁向高保真、可交互原型設(shè)計的關(guān)鍵一步。它打破了靜態(tài)設(shè)計的局限，讓你能模擬真實的數(shù)據(jù)驅(qū)動界面。開始時可能會覺得步驟繁瑣，但一旦熟悉其“數(shù)據(jù)-模板-交互”的核心邏輯，你將能快速構(gòu)建出復(fù)雜而逼真的列表、目錄、儀表盤等界面，極大地提升設(shè)計溝通與測試的效率。現(xiàn)在，就打開你的設(shè)計工具，創(chuàng)建一個中繼器，開始你的列表制作之旅吧！