本章主要介紹如何使用Axure中繼器製作商品列表。
對於商城內的產品，“商品列表頁”是很關鍵的一環。好的佈局可以讓用戶快速尋找到目標商品，文字or圖片更優先？選擇合適的佈局，可以大大增加用戶進入到“商品詳情頁”的概率。
完成後效果如下圖，該例子包含商品圖片，名稱，推薦人數，銷售數量，價格的商品模塊列表。
Axure 教程 - 用中繼器製作商品列表
1.拖拉中繼器到工作臺。
2.雙擊中繼器模板進入編輯中繼器模塊。
3.添加圖片和三個矩形到操作檯（原先存在的一個矩形直接移動作爲單獨矩形使用），並且在檢查器中爲相關模塊命名，在矩形內爲模塊標註（標註與命名不一樣）。
包含名稱：
- 文本標籤（顯示商品名稱）：GoodsName
- 文本標籤（顯示推薦人數）：GoodsRecommd
- 文本標籤（顯示商品銷量）：GoodsSales
- 文本標籤（顯示商品價格）：GoodsPeice
-
圖片（顯示商品圖片）：GoodsImage
![]()
![]()
4.回到Home頁中繼器展示列表。
5.在檢視面板打開數據集，添加行和列，並且填入每個商品名稱，價格，推薦，銷量數據（隨便寫）。中繼器裏的數據會隨着數據集表格變化而變化。
6.右鍵GoodsImage點擊導入圖片添加圖片。
7.在本地文件中準備好要插入的圖片並將其選中插入。
8.插入圖片成功後，開始編輯用例。
9.以GoodsName（商品名稱）爲例，文本的值可以手動輸入也可以選中“fx”進行編輯。
10.點擊“fx”進入編輯界面的時候插入數據集中的GoodsName。
11.變量值是由[[ ]]括起來的，在顯示時顯示其值。
12.按照添加商品名稱的方式添加其他的三個（推薦，銷量，價格）文本值，可以添加相應的標註。
13.添加四個文本值成功。
14.添加圖片值也是按照“fx”添加，不過是在設置圖像的選項裏添加。
15.添加成功後，數據集裏的值全部上傳到了操作區中。
16.預覽效果如下。
