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

5 評論 11624 瀏覽 59 收藏 6 分鐘

本章主要介紹如何使用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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 為什么我一個圖片都沒有加載出來……

    回復
  2. 求rp地址 ,949993152@qq.com謝謝大神!

    來自湖北 回復
  3. 花這么多時間畫一個原型完全是本末倒置

    來自上海 回復
    1. 如果是畫原型的話的確如此,所以本意不在原型而在于把原型當例子介紹中繼器的用法。

      來自浙江 回復
    2. 2分鐘的事情

      回復