本章主要介紹如何使用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.預覽效果如下。

本文由 @Arthur 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議