本文帶大家一起來看一下Axure中如何商品列表及排序篩選，enjoy~

喜歡網(wǎng)購的小伙伴們可能會發(fā)現(xiàn)這樣一種現(xiàn)象——我們在電商平臺瀏覽商品的時(shí)候，這些商品會以方塊格子的形式展示一個(gè)個(gè)商品，每個(gè)格子的格式都是一樣的，都包含了商品圖片，價(jià)格以及評價(jià)數(shù)量等這些信息，而且在格子中的位置都是固定的，唯一不同的就是對應(yīng)的信息值不一樣。另外，用戶可以對這些商品列表按照價(jià)格排序以及篩選條件來過濾數(shù)據(jù)。

如果覺得光看文字很難理解，那我們就舉一個(gè)栗子，請看下面圖片：

今天呢，我就帶大家一起來看一下Axure中如何實(shí)現(xiàn)這種效果。

話不多說，還是按照我們以往的套路來講解。

下文將從3個(gè)方面來展開：

1. 需求分析

首先先來看一下這個(gè)具體的需求是什么？

需求比較簡單：做一個(gè)商品列表并且可以按照價(jià)格排序并且查看降價(jià)商品。

從上面的描述，我們看到關(guān)鍵詞“商品列表”，看到這里，有些小伙伴是不是有點(diǎn)懵有點(diǎn)方呢？

咱不方~

今天帶大家一起學(xué)習(xí)一個(gè)新的技能，那就是中繼器。

那什么是中繼器呢？

中繼器簡單來說就是類似于一個(gè)數(shù)據(jù)集合，有它固定的字段以及格式。設(shè)置好框架格式之后就可以重復(fù)利用，只需往里面新增合法的數(shù)據(jù)即可。

話不多說，咱繼續(xù)往下看。

2. Axure關(guān)鍵點(diǎn)分析

（1）中繼器

先搭好中繼器的整體框架，如：商品圖片、名稱、價(jià)格、銷量及推薦人數(shù)。

接著講上面框架中的字段與中繼器的字段關(guān)聯(lián)，其中，中繼器中的數(shù)據(jù)可以在Excel中編輯好然后復(fù)制粘貼。

設(shè)置商品列表顯示的格式，如是水平還是垂直顯示以及每排顯示的數(shù)量。

至此，一個(gè)常見的商品列表就搭建完畢。

（2）價(jià)格排序

下面講一下價(jià)格排序如何實(shí)現(xiàn)。

實(shí)際上，這里運(yùn)用的就是中繼器的排序功能，添加排序，可以設(shè)置需要排序的字段以及升序還是降序。

（3）條件篩選過濾

在中繼器中，我們也可以按照某些條件過濾顯示我們需要看到的數(shù)據(jù)而不是顯示所有數(shù)據(jù)。這里，用到的是中繼器的篩選功能。

這個(gè)案例中，我們可以篩選出降低的商品有哪些。

需要注意，這里的交互需要設(shè)置2個(gè)，選中時(shí)和取消選中時(shí)。這里的Lowerp是中繼器中的一個(gè)字段，標(biāo)識商品是否為降價(jià)商品。

下面為選中時(shí)的交互設(shè)置：

取消選中時(shí)的交互設(shè)置：

3. 效果展示

最后，我們來看一下最終效果，網(wǎng)址為：https://vm3p55.axshare.com

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

題圖來自Unsplash，基于CC0協(xié)議