篩選/排序控件在設(shè)計(jì)中是不可或缺的一部分，如何結(jié)合產(chǎn)品特性進(jìn)行設(shè)計(jì)也是常見的問(wèn)題。作者將結(jié)合自身經(jīng)驗(yàn)為我們分析，設(shè)計(jì)篩選/排序控件該怎么設(shè)計(jì)。

最近做的一個(gè)項(xiàng)目中涉及兩種篩選維度的組合篩選，難點(diǎn)是：其中一種維度是高頻切換的，另一種維度是低頻切換的，做成兩個(gè)tab行或者平行的兩個(gè)下拉菜單都不太合適。

于是梳理了一下競(jìng)品都是怎么設(shè)計(jì)篩選/排序控件的，幫助大家在使用篩選/排序時(shí)選擇更適合自己的場(chǎng)景。

一、什么時(shí)候需要篩選/排序控件

篩選的作用是縮小展示范圍，排序的作用是更改展示順序。這兩個(gè)控件本質(zhì)上是為了幫助用戶更快速地找到自己想要的信息。

（1）篩選控件有時(shí)會(huì)用于“頻道切換”。

比如：內(nèi)容型或電商產(chǎn)品，用tab切換不同頻道，每個(gè)頻道內(nèi)有自己的形態(tài)。

（2）而篩選和排序控件共同出現(xiàn)時(shí)，更多的是用于列表——即有相同字段的一系列信息。不論是搜索結(jié)果的展示，還是已有的列表，比如訂單列表的展示，都有可能用到篩選和排序。

比如：餐廳列表，有價(jià)格、地理位置、評(píng)價(jià)這些字段，所以可以用這些維度去進(jìn)行篩選限制或者排序，從而找到用戶想去的餐廳。

二、篩選/排序控件類型

1. 高頻篩選低頻

針對(duì)我的項(xiàng)目中的問(wèn)題，即一個(gè)高頻切換篩選，另一個(gè)非高頻切換篩選。

競(jìng)品通常把非高頻的篩選控件放在了右上角，也就是title bar的title旁邊（圖中紫色圈出）：

還有一種，像京東的訂單，把高頻切換的“訂單狀態(tài)”放出來(lái)，把非高頻切換的“訂單類型”篩選入口放到了title bar的title上：

總之，一個(gè)高頻篩選另一個(gè)低頻篩選，宗旨是把高頻的篩選項(xiàng)直接用tab展示，把低頻的篩選項(xiàng)收起，只保留一個(gè)入口。

2. 多重組合篩選+排序

這種控件常出現(xiàn)在電商類的搜索結(jié)果列表中，從多個(gè)維度進(jìn)行篩選，再加上一種排序方式的選擇：

• 大眾點(diǎn)評(píng)的是最常規(guī)的一種做法，把所有的篩選和排序控件排成一排形成組合。
• 飛豬除了有大眾點(diǎn)評(píng)的這一排組合外，還增加了一行常用的特殊要求篩選。用戶點(diǎn)選后可以快速進(jìn)行特殊條件的限定，相當(dāng)于不用展開右上角的那個(gè)“篩選”，也就是我標(biāo)為“低頻篩選”的下拉菜單，就可以進(jìn)行快捷操作了，減少了用戶步長(zhǎng)。
• 餓了么的組合方式是篩選和排序選項(xiàng)全部展開——第一行是展開的常規(guī)篩選選項(xiàng)，可滑動(dòng)或點(diǎn)擊下箭頭查看更多選項(xiàng)；第二行同樣是展開的排序方式選項(xiàng)；第三行還提供了常用的特殊要求篩選項(xiàng)。餓了么這種處理方式使得篩選+排序控件占用了三行，而第一行的美食類型也并不能在一屏顯示全。個(gè)人不推薦這種形式。

建議多重篩選+排序最多占用兩行，再多就有些混亂了。

從上面這三個(gè)例子中倒是可以發(fā)現(xiàn)一個(gè)有趣的現(xiàn)象：篩選和排序控件混合在一起，無(wú)論怎么混合，對(duì)于用戶來(lái)說(shuō)其實(shí)影響都不大，只要是最終能幫用戶找到他們想要的結(jié)果就夠了。

在這三個(gè)產(chǎn)品中，排序控件都是穿插在了篩選控件中間，但是絲毫不影響用戶的理解和使用。

3. 另一種對(duì)于多重篩選的處理方法

同樣是從多個(gè)維度進(jìn)行篩選，在愛奇藝和優(yōu)酷等視頻app的“電視劇”篩選頁(yè)面上方直接展開所有維度的篩選項(xiàng)，有5-6行，一行一個(gè)維度，一屏顯示不下時(shí)可左滑。

用戶設(shè)置好篩選條件后，上滑時(shí)，頂部出現(xiàn)一行篩選條，顯示用戶選擇的條件；點(diǎn)擊這個(gè)篩選條，回到頂部，可重新設(shè)置篩選條件。

“電視劇”這個(gè)頁(yè)面是從愛奇藝首頁(yè)的電視劇頻道的“篩選”入口進(jìn)入的。所以用戶進(jìn)入這個(gè)頁(yè)面時(shí)，是有明確的篩選目的的。一般的列表頁(yè)可能不適合一上來(lái)就出現(xiàn)5-6行的篩選項(xiàng)。

所以，這種篩選控件適用于一進(jìn)入這個(gè)頁(yè)面就有明確的篩選目標(biāo)，并且篩選后不常更換的場(chǎng)景。

4. 兩個(gè)tab行的使用

文章開頭我提到了對(duì)于兩個(gè)維度的篩選，做成兩個(gè)tab行的方案在我的項(xiàng)目中不太適用。那么，是不是就不能用兩個(gè)篩選行了呢？

我在競(jìng)品研究過(guò)程中也找到了一些使用兩個(gè)tab行的案例：

這種兩個(gè)tab行都是存在于第一個(gè)tab行的選項(xiàng)不全有二級(jí)篩選的情況下的。

像百度中，搜索結(jié)果的“資訊”、“貼吧”、“音樂(lè)”等，就沒有二級(jí)篩選項(xiàng)；蝦米音樂(lè)的“樂(lè)庫(kù)”“推薦”和“視頻”中也沒有二級(jí)篩選項(xiàng)。

如果每個(gè)一級(jí)篩選項(xiàng)都有二級(jí)，就適合用下方展示的級(jí)聯(lián)下拉框了：

5. 橫向和縱向排布兩級(jí)篩選項(xiàng)

最后講一種競(jìng)品分析過(guò)程中見到的比較特殊的篩選方式：用橫向和縱向排布兩級(jí)篩選項(xiàng)，篩選結(jié)果展示在右下方區(qū)域：

這種展現(xiàn)樣式只適用于列表單條內(nèi)容項(xiàng)所包含的信息比較少的時(shí)候。

三、結(jié)語(yǔ)

總結(jié)一下，使用哪一種篩選/排序控件取決于篩選邏輯、使用場(chǎng)景和列表的內(nèi)容項(xiàng)本身。設(shè)計(jì)時(shí)可以靈活使用和做合適的變動(dòng)。

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

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