最近看到的原型設(shè)計(jì)文章多數(shù)都是和中繼器相關(guān)，我也來(lái)湊個(gè)熱鬧，中繼器的排序的簡(jiǎn)單介紹。這次用手機(jī)淘寶商品列表為例進(jìn)行說(shuō)明。對(duì)咯，之前有發(fā)過(guò)以手機(jī)淘寶購(gòu)物車為例的文章，有興趣的歡迎點(diǎn)看（Axure教程｜購(gòu)物車商品增減刪除練習(xí)）~

準(zhǔn)備工作

先分析下手機(jī)淘寶列表頁(yè)的篩選排序功能，涉及兩塊內(nèi)容，一個(gè)點(diǎn)開(kāi)篩選項(xiàng)后會(huì)有子篩選項(xiàng)的顯示和隱藏（涉及動(dòng)態(tài)面板的使用），一個(gè)是選中任意篩選項(xiàng)后，列表按照一定規(guī)則進(jìn)行重新排序（涉及中繼器排序的使用）。

現(xiàn)在開(kāi)始添加列表頁(yè)該有的各種元素吧，對(duì)照著手機(jī)淘寶的列表頁(yè)將商品信息以上模塊元素添加完成后，拖出一個(gè)動(dòng)態(tài)面板，用來(lái)做點(diǎn)擊“綜合排序”后的子篩選項(xiàng)，商品信息模塊使用中繼器，拖出中繼器一個(gè)，雙擊后進(jìn)入中繼器編輯頁(yè)，添加商品圖片，商品標(biāo)題，商品價(jià)格，商品收貨人數(shù)。

注意：價(jià)格和收貨人數(shù)這里不需要填寫(xiě)內(nèi)容。給中繼器添加原始內(nèi)容，添加4列內(nèi)容，primary，price，sale，credit，分別代表初始排序，商品價(jià)格，商品銷量，信用，初始排序按照1-5填寫(xiě)，價(jià)格隨便寫(xiě)數(shù)字，銷量也隨便寫(xiě)，信用也是瞎寫(xiě)，我自己設(shè)置成10一下隨便填。

東西都添加擺放完成后，開(kāi)始給各個(gè)元素命名，動(dòng)態(tài)面板命名為排序，里面對(duì)應(yīng)的子篩選項(xiàng)依序命名為排序1-4，綜合排序命名綜合排序，銷量?jī)?yōu)先命名為銷量排序，中繼器命名商品列表，里面的商品價(jià)格和收貨人數(shù)命名為price和sale（這是為了和中繼器中的內(nèi)容對(duì)應(yīng)上，方便理解）

動(dòng)作分解實(shí)現(xiàn)

該準(zhǔn)備的都完成后，接下來(lái)就是分解動(dòng)作：一是篩選項(xiàng)選中后的自身的變化，二是對(duì)應(yīng)列表頁(yè)商品的排序變化。

動(dòng)作一是動(dòng)態(tài)面板的內(nèi)容，動(dòng)作二是中繼器排序的內(nèi)容。

先來(lái)分解動(dòng)作一：

• 列表頁(yè)默認(rèn)選中綜合排序進(jìn)行排序
• 點(diǎn)擊綜合排序展開(kāi)和隱藏子篩選項(xiàng)
• 點(diǎn)擊子篩選項(xiàng)任意一個(gè)，選項(xiàng)關(guān)閉且標(biāo)題對(duì)應(yīng)變成子選項(xiàng)名稱
• 選中任意選項(xiàng)，該選項(xiàng)顏色突出，其余選項(xiàng)為默認(rèn)色黑色

給每一個(gè)篩選項(xiàng)文本添加交互樣式，即選中部件后右鍵彈出菜單，選擇“交互樣式”，在“選中”下選擇文字顏色（大致選擇橙色即可）。

接下來(lái)添加子篩選項(xiàng)的顯示和隱藏，以及選中后選項(xiàng)名稱的對(duì)應(yīng)變化。

給綜合排序添加點(diǎn)擊用例，添加切換顯示/隱藏動(dòng)態(tài)面板”排序“，即子選項(xiàng)。

給動(dòng)態(tài)面板內(nèi)的4個(gè)子選項(xiàng)添加點(diǎn)擊用例，隱藏動(dòng)態(tài)面板”排序“，該子選項(xiàng)為選中狀態(tài)，其余子選項(xiàng)為非選中狀態(tài)，”綜合排序“的文字等于this（即為該子選項(xiàng)的文字）。

選項(xiàng)的動(dòng)作添加到此結(jié)束，下面說(shuō)下選中后，列表對(duì)應(yīng)排序的變化。

準(zhǔn)備階段中給中繼器添加4列標(biāo)題，是否還記得呢？其中有兩個(gè)標(biāo)題和商品價(jià)格，商品銷量的命名相同，還記得嗎？之所以相同，是為了方便理解它們的對(duì)應(yīng)關(guān)系。

在中繼器編輯頁(yè)面（雙擊中繼器即可），在”項(xiàng)目交互“中”每項(xiàng)加載時(shí)“添加用例，將中繼器中的列與商品價(jià)格和商品銷量對(duì)應(yīng)上。

中繼器對(duì)應(yīng)的添加完成后，返回來(lái)給篩選項(xiàng)添加中繼器的排序用例，在點(diǎn)擊時(shí)用例上添加排序。綜合排序按照primary的序號(hào)1-5升序排列，價(jià)格由高到低對(duì)應(yīng)價(jià)格的降序排列，價(jià)格由低到高則反之，銷量?jī)?yōu)先為收貨人的數(shù)量降序排列，信用為降序排列。

還有2點(diǎn)不要忘記了，動(dòng)態(tài)面板默認(rèn)選擇隱藏，綜合排序默認(rèn)選擇選中哦~

該做的都做完了，預(yù)覽看看是不是效果實(shí)現(xiàn)了呢？！在此基礎(chǔ)上大家還可以添加商品的滑動(dòng)效果，有童鞋無(wú)私分享過(guò)，大家可以嘗試下哈~

原型預(yù)覽：

http://5wtlcf.axshare.com

原型下載

作者源：http://pan.baidu.com/s/1sl3SZpV ?密碼：qikz

官方源：http://pan.baidu.com/s/1pLhC1jP 密碼: 4eqx

作者：Lprecious，成長(zhǎng)中的產(chǎn)品汪

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