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

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

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

一、什么時候需要篩選/排序控件

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

（1）篩選控件有時會用于“頻道切換”。

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

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

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

二、篩選/排序控件類型

1. 高頻篩選低頻

針對我的項目中的問題，即一個高頻切換篩選，另一個非高頻切換篩選。

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

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

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

2. 多重組合篩選+排序

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

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

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

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

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

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

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

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

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

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

4. 兩個tab行的使用

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

我在競品研究過程中也找到了一些使用兩個tab行的案例：

這種兩個tab行都是存在于第一個tab行的選項不全有二級篩選的情況下的。

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

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

5. 橫向和縱向排布兩級篩選項

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

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

三、結(jié)語

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

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

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