今天，我又用Axure中繼器功能做了一個(gè)交互原型，就是對(duì)列表頁添加排序和篩選功能，可以對(duì)列表中的項(xiàng)進(jìn)行排序或者篩選，希望對(duì)大家制作原型有一定的幫助。

還是先來看看效果

以商品列表為例，點(diǎn)擊價(jià)格排序，可以對(duì)商品進(jìn)行價(jià)格由低到高或由高到低排序，點(diǎn)擊品牌，可以篩選出小米品牌手機(jī)或者蘋果品牌手機(jī)。

詳細(xì)步驟

1.1首先我們要畫出大體框架，商品列表使用中繼器制作，如下圖所示

中繼器如何使用參考我之前寫的：Axure中繼器：制作可交互的“APP音樂播放列表頁”

1.2然后制作“價(jià)格”點(diǎn)擊變?yōu)榧t色，且彈出“價(jià)格由低到高”“價(jià)格由高到底”菜單，設(shè)置“價(jià)格”選中狀態(tài)為紅色；畫出彈出菜單，轉(zhuǎn)化成動(dòng)態(tài)面板，命名為“price”，設(shè)置為隱藏；添加用例，點(diǎn)擊“價(jià)格”時(shí)，“價(jià)格”選中狀態(tài)為Ture，且動(dòng)態(tài)面板“price”向下滑動(dòng)顯示

“品牌”點(diǎn)擊時(shí)也發(fā)生同樣的交互，品牌彈出菜單動(dòng)態(tài)面板命名為“pinpai”，制作就不一一詳細(xì)說了，注意：價(jià)格和品牌點(diǎn)擊彈出菜單只能有唯一一個(gè)觸發(fā)，我們把文案變紅唯一性通過設(shè)置“價(jià)格”和“品牌”為選項(xiàng)組，然后根據(jù)這個(gè)唯一性再設(shè)置當(dāng)“價(jià)格”或“品牌”未選中時(shí)，彈出菜單向上滑動(dòng)隱藏即可，這樣就只能觸發(fā)唯一一個(gè)彈出菜單了。

1.3制作當(dāng)滑出價(jià)格排序菜單，點(diǎn)擊由低到高或由高到底，商品按照價(jià)格高低排序，雙擊“price”，打開面板，設(shè)置“價(jià)格由低到高”點(diǎn)擊時(shí)，向上滑動(dòng)隱藏“price”，并且設(shè)置中繼器添加排序，名稱自定義為價(jià)格由低到高，屬性是數(shù)據(jù)集中的“Price”（區(qū)別于動(dòng)態(tài)面板“price”，不是一個(gè)東西，我這邊可能命名有點(diǎn)問題），排序類型選擇“Number”，順序是升序，確認(rèn)就可以達(dá)到點(diǎn)排序的效果了。

價(jià)格由高到底同樣如此設(shè)置，只不過順序改為“降序”。注意：之前設(shè)置“價(jià)格”未選中時(shí)，隱藏動(dòng)態(tài)面板“price”，反過來，我們也應(yīng)該設(shè)置動(dòng)態(tài)面板“price”隱藏時(shí)，“價(jià)格”選中狀態(tài)為False。

1.4制作當(dāng)滑出“品牌”彈出菜單時(shí)，點(diǎn)擊小米或者蘋果，篩選出這個(gè)品牌的商品，首先我們?cè)跀?shù)據(jù)集里為每個(gè)商品項(xiàng)目添加品牌屬性Label，有利于下一步動(dòng)作的設(shè)置，如下圖所示

雙擊“pinpai”動(dòng)態(tài)面板你，打開面板，設(shè)置“小米”點(diǎn)擊時(shí)，向上滑動(dòng)隱藏“pinpai”，并且設(shè)置中繼器添加篩選，名稱自定義為篩選小米，條件是[[Item.Label==’小米’]]（之前設(shè)置過Label），確認(rèn)就可以達(dá)到點(diǎn)擊篩選小米品牌商品的效果了。篩選蘋果也是同樣的設(shè)置原理。

注意：不勾選Remove other filters，意為當(dāng)有多個(gè)篩選條件時(shí)，確保能夠多條件篩選。

好了，生成一下Html看一下吧。

今天主要說了中繼器設(shè)置添加排序和添加篩選的功能，你可以嘗試著玩一下其它的如移除排序或移除篩選什么的，主要是多練多想就好了，希望大家一起交流學(xué)習(xí)。

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