在Axure原型設計中，中繼器（Repeater）是一個非常強大的動態數據組件，它允許我們模擬真實應用中數據列表與詳情頁之間的交互。本文將詳細介紹如何利用Axure中繼器實現從商品列表到商品詳情頁的數據傳遞，幫助你在原型設計中創建更加真實和動態的用戶體驗。

一、中繼器基礎與準備

中繼器本質上是一個數據集容器，它由三部分組成：數據集（Data Set）、項目交互（Item Interactions）和樣式（Style）。要模擬商品列表到詳情的流程，我們首先需要準備數據。

1. 創建商品數據集中繼器：在Axure中拖入一個中繼器組件，雙擊進入編輯模式。在數據集表格中，添加商品相關的字段，如：商品ID（id）、商品名稱（name）、價格（price）、描述（description）、圖片（image）等。每一行代表一個商品。

1. 設計列表項：在中繼器的項目交互區域，設計單個商品列表項的外觀。通常包括商品圖片、名稱、價格等元素，將這些元素與數據集中的對應字段綁定。

1. 設計商品詳情頁：創建一個新的頁面作為商品詳情頁，并設計好布局，預留顯示商品詳細信息的位置。

二、實現數據傳遞的關鍵步驟

實現從列表到詳情的數據傳遞，核心在于如何將列表中被點擊商品的數據“攜帶”到詳情頁。以下是具體實現方法：

方法一：使用全局變量傳遞數據

這是最常用且靈活的方法。

1. 設置全局變量：在項目菜單中，找到“項目”>“全局變量”，創建一個或多個變量來存儲需要傳遞的數據，例如：CurrentProductId, CurrentProductName等。

1. 為列表項添加交互：選中中繼器項目交互中的列表項（或其內部的某個點擊區域，如“查看詳情”按鈕），添加“單擊時”的交互事件。

• 設置變量值：在交互動作中，選擇“設置變量值”，將全局變量（如CurrentProductId）的值設置為[[Item.id]]（即當前點擊行對應的商品ID）。同理，可以設置其他需要傳遞的變量。

• 打開鏈接：接著，添加“打開鏈接”動作，鏈接到之前設計好的商品詳情頁面。

1. 在詳情頁加載數據：進入商品詳情頁，在“頁面載入時”事件中添加交互。

• 設置文本/圖像：為詳情頁中的各個元件（如商品名稱文本框）設置文本，文本值來自于之前設置的全局變量，例如[[CurrentProductName]]。這樣，當頁面打開時，就會自動顯示被點擊商品的信息。

方法二：通過URL參數傳遞數據

這種方法更適合模擬Web應用，數據通過頁面URL傳遞。

1. 在列表項交互中設置鏈接：同樣在列表項的點擊事件中，使用“打開鏈接”動作。但在設置鏈接時，選擇“鏈接到當前項目的某個頁面”，并在下方勾選“包含變量”。在變量設置中，將參數名（如productId）的值設置為[[Item.id]]。生成的鏈接類似：商品詳情頁?productId=001。

1. 在詳情頁接收參數：在商品詳情頁，使用“頁面載入時”事件。添加“設置文本”動作，但這次文本值使用函數[[PageParam]]來獲取URL中的參數，例如[[PageParam.productId]]。然后，你需要根據這個ID，去中繼器數據集中查找對應的商品完整信息并顯示。這通常需要配合使用“篩選”中繼器或通過函數匹配來實現，邏輯比方法一稍復雜。

三、進階技巧與優化

1. 使用單一中繼器管理所有商品數據：可以將商品數據集中存儲在一個“主”中繼器中，列表頁和詳情頁都從同一個中繼器獲取數據。在詳情頁，利用獲取到的商品ID，通過“篩選”功能，從該中繼器中過濾出唯一匹配的商品記錄，然后將其字段值賦予詳情頁的各個元件。

1. 實現動態圖片顯示：在數據集里，圖片字段可以存儲圖片的文件名或路徑。在詳情頁，通過設置圖片元件的“默認圖片”為[[Item.image]]來實現動態加載。注意需要將圖片文件導入到Axure的“資源”管理中。

1. 添加交互狀態：為列表項添加鼠標懸停、選中等狀態，增強原型的真實感。

四、

通過Axure中繼器結合全局變量或URL參數，我們可以高效地模擬出商品列表點擊跳轉并攜帶數據到詳情頁的完整流程。這種方法不僅限于電商場景，同樣適用于新聞列表、用戶列表、訂單列表等各種需要查看詳情的交互設計。掌握這一技巧，能極大地提升Axure原型的保真度和演示效果，使設計稿更能準確表達產品邏輯，方便與項目團隊成員及利益相關者進行溝通和測試。

在實踐中，建議先從簡單的全局變量法開始，熟練后再嘗試更復雜的URL傳參或數據篩選方案，從而構建出交互豐富、數據驅動的高保真原型。