中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

今天呢，我就帶大家一起來看一下Axure中如何實現這種效果。

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

下文將從3個方面來展開：

1. 需求分析

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

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

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

咱不方~

今天帶大家一起學習一個新的技能，那就是中繼器。

那什么是中繼器呢？

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

話不多說，咱繼續往下看。

2. Axure關鍵點分析

（1）中繼器

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

接著講上面框架中的字段與中繼器的字段關聯，其中，中繼器中的數據可以在Excel中編輯好然后復制粘貼。

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

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

（2）價格排序

下面講一下價格排序如何實現。

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

（3）條件篩選過濾

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

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

需要注意，這里的交互需要設置2個，選中時和取消選中時。這里的Lowerp是中繼器中的一個字段，標識商品是否為降價商品。

下面為選中時的交互設置：

取消選中時的交互設置：

3. 效果展示

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

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

題圖來自Unsplash，基于CC0協議