Axure中繼器應用實例:如何設計商品信息列表?

5 評論 12153 瀏覽 43 收藏 6 分鐘

文章通過設計商品信息列表的實例,簡單介紹了中繼器的使用方法,一起來學下。

一、概念解析

Axure部件Repeater,一直覺得這個單詞用的很形象,是使一條條數據在頁面上重復顯示(repeat)的部件,因此叫repeater,所以每當需要將數據條目顯示在頁面上時,很容易想到要使用repeater。

在中文版中,repeater部件被翻譯成為中繼器,所謂“中繼”的含義更廣,不光是把數據在頁面上顯示的“中繼”,也是可以對數據進行操作的“中繼”。

因此,中繼器大體上有兩部分功能,數據顯示和數據存儲:

  • 在數據顯示方面,和其他部件一樣,可以直接對其布局,例如是行還是列,是條目還是卡片,是否要分頁,顯示的風格樣式等。
  • 在數據庫方面,中繼器提供了最基本的增,減,改,查,以及排序功能,這些功能在axure動作里面都有提供。

中繼器是在Axure RP7.0開始加入的,通常用來顯示一些列表信息,如商品列表、用戶信息列表等。中繼器中有兩個概念需要大家了解,數據集、項:

  • 數據集:中繼器里存放的數據,可以使文本、頁面鏈接或圖片。比如所有的商品信息數據。
  • 項:中繼器里重復顯示的內容,比如商品信息列表中,要顯示n次商品的名稱、圖片、價格等等這些內容。

二、應用實例

下面通過設計商品信息列表的實例,來介紹中繼器的使用方法:

我們先做三列數據看看效果:商品名、價格、購買時間。

1.拖入一個中繼器元件,命名為list。雙擊該中繼器,進入到中繼器設計區域,設計區域中的元件就是中繼器的項,也就是要重復顯示的內容,它默認顯示了一個矩形。如下圖:

2.一共拖入三個矩形分別命名為name、price、date,在右側的中繼器數據集中,把第一列重命名為name,新建兩列分別命名為price、date,注意數據集中的列名和元件名可以不同,在數據集中填充數據,如下圖。

3.把數據集內容和中繼器的項綁定,雙擊每項加載時Case 1,設置三個矩形的文字對應為中繼器的列名,如下圖:

4.預覽效果

5.下面我們再繼續來做另一種效果

這種效果不是傳統的幾行幾列的表格形式,這種效果怎么做呢?大家思考一下,中繼器是用來存放數據的,至于它顯示出來的樣子,是由“中繼器的項”的排版所決定的,所以我們還是先把數據存進去,當然還是在中繼器數據集中新建幾列,填充數據即可。注意添加圖片的方法是:在對應的列下面右鍵-導入圖片-選擇圖片即可。

接下來我們雙擊中繼器,進入設計區域,拖入要重復顯示的元件,并命名,按照上面的方法把文字元件和數據集綁定。綁定圖片的方法是:雙擊每項加載時-設置圖片-選擇圖片列-選擇default下拉框中的“值”-點擊fx選擇中繼器中的圖片列。

關閉設計區域,預覽效果。

歡迎關注我的公眾號:yeemoon

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 設置圖片的時候,旁邊就沒有list 這個中繼器了,咋回事呢?求解一下,謝謝。

    來自四川 回復
    1. 要在中繼器里加一個圖片的元件

      來自廣東 回復
    2. 嗯嗯,果然。謝謝大神!

      來自四川 回復
  2. 請教一個問題,如果繼續往下做一層,做出商品詳情頁的話,還能用同一個中繼器實現嗎?

    來自北京 回復
    1. 可以的,中繼器里面加一列或者幾列商品詳情的數據,加一個動態面板,動態面板的內容再加載商品詳情數據,然后隱藏面板,點擊顯示就OK了

      來自廣東 回復