本章主要介紹如何使用Axure中繼器制作商品列表。

對(duì)于商城內(nèi)的產(chǎn)品，“商品列表頁(yè)”是很關(guān)鍵的一環(huán)。好的布局可以讓用戶(hù)快速尋找到目標(biāo)商品，文字or圖片更優(yōu)先？選擇合適的布局，可以大大增加用戶(hù)進(jìn)入到“商品詳情頁(yè)”的概率。

完成后效果如下圖，該例子包含商品圖片，名稱(chēng)，推薦人數(shù)，銷(xiāo)售數(shù)量，價(jià)格的商品模塊列表。

Axure 教程 – 用中繼器制作商品列表

1.拖拉中繼器到工作臺(tái)。

2.雙擊中繼器模板進(jìn)入編輯中繼器模塊。

3.添加圖片和三個(gè)矩形到操作臺(tái)（原先存在的一個(gè)矩形直接移動(dòng)作為單獨(dú)矩形使用），并且在檢查器中為相關(guān)模塊命名，在矩形內(nèi)為模塊標(biāo)注（標(biāo)注與命名不一樣）。

包含名稱(chēng)：

• ? ? ? ? ? ? ? ? ?文本標(biāo)簽（顯示商品名稱(chēng)）：GoodsName
• ? ? ? ? ? ? ? ? ?文本標(biāo)簽（顯示推薦人數(shù)）：GoodsRecommd
• ? ? ? ? ? ? ? ? ?文本標(biāo)簽（顯示商品銷(xiāo)量）：GoodsSales
• ? ? ? ? ? ? ? ? ?文本標(biāo)簽（顯示商品價(jià)格）：GoodsPeice
• ? ? ? ? ? ? ? ? ?圖片（顯示商品圖片）：GoodsImage

4.回到Home頁(yè)中繼器展示列表。

5.在檢視面板打開(kāi)數(shù)據(jù)集，添加行和列，并且填入每個(gè)商品名稱(chēng)，價(jià)格，推薦，銷(xiāo)量數(shù)據(jù)（隨便寫(xiě)）。中繼器里的數(shù)據(jù)會(huì)隨著數(shù)據(jù)集表格變化而變化。

6.右鍵GoodsImage點(diǎn)擊導(dǎo)入圖片添加圖片。

7.在本地文件中準(zhǔn)備好要插入的圖片并將其選中插入。

8.插入圖片成功后，開(kāi)始編輯用例。

9.以GoodsName（商品名稱(chēng)）為例，文本的值可以手動(dòng)輸入也可以選中“fx”進(jìn)行編輯。

10.點(diǎn)擊“fx”進(jìn)入編輯界面的時(shí)候插入數(shù)據(jù)集中的GoodsName。

11.變量值是由[[ ? ]]括起來(lái)的，在顯示時(shí)顯示其值。

12.按照添加商品名稱(chēng)的方式添加其他的三個(gè)（推薦，銷(xiāo)量，價(jià)格）文本值，可以添加相應(yīng)的標(biāo)注。

13.添加四個(gè)文本值成功。

14.添加圖片值也是按照“fx”添加，不過(guò)是在設(shè)置圖像的選項(xiàng)里添加。

15.添加成功后，數(shù)據(jù)集里的值全部上傳到了操作區(qū)中。

16.預(yù)覽效果如下。

本文由 @Arthur 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于CC0協(xié)議