今天想分享的界面模式它好像很次要，經(jīng)常被埋沒，但當(dāng)我們迷失在信息洪流中時(shí)，我們不得不使用它——我們最熟悉不過(guò)的篩選組件。

一、從尋找信息開始說(shuō)起

不妨回想一下，在日常生活中，我們是怎樣尋找信息的？可以想象以下場(chǎng)景：當(dāng)我們看完一本書后，覺得一句話說(shuō)得特別好，想再回味一下，這時(shí)會(huì)怎么做？當(dāng)然，最直接的方式是從頭翻一遍直到找出原話（如果這本書足夠?。?，這是我們最本能的尋找信息方式：直接查找。

然而，書一般很厚，直接查找顯然不切實(shí)際，但我可以根據(jù)那句話的大概意思判斷其在書中哪一章哪一節(jié)，再定位到該小節(jié)查找原句。這是我們尋找信息的第二種方式：按分類查找。

再假如，我在讀書時(shí)已經(jīng)做了標(biāo)記（畫下劃線并寫筆記），那么我就可以直接查找?guī)в袠?biāo)記的句子，這種尋找信息的方式可以定義為：按標(biāo)記查找。

綜上，在尋找信息時(shí)，我們會(huì)有三種行為模式：直接查找、按信息分類查找、按信息的標(biāo)記查找；而這三種行為模式剛好對(duì)應(yīng)著三種界面模式：搜索、導(dǎo)航和篩選。

二、搜索、導(dǎo)航還是篩選？

顯然，在尋找信息時(shí)，搜索是最直接的界面模式，但由于信息實(shí)在太復(fù)雜既多層級(jí)又多維度，搜索無(wú)法覆蓋所有場(chǎng)景，所以才有了導(dǎo)航和篩選模式，去收窄信息范圍，提高尋找的效率。

那么導(dǎo)航跟篩選有什么區(qū)別？如果是一個(gè)低層級(jí)信息界面的話，兩者幾乎沒有區(qū)別，如圖1，兩種界面模式都好理解，只是操作上稍有不同。

圖1

但如果是一個(gè)多層級(jí)信息界面的話，單純地使用一種界面模式，可能會(huì)有非常詭異的現(xiàn)象發(fā)生。圖2左的紅框內(nèi)的信息分類維度不同于父級(jí)，而且沒有真正的父子關(guān)系，這種導(dǎo)航會(huì)讓用戶很疑惑。

圖2右的紅框內(nèi)的分類有強(qiáng)關(guān)聯(lián)關(guān)系，一旦切換了分類選項(xiàng)，另一個(gè)分類則會(huì)完全不同，這種篩選同樣也會(huì)讓用戶很疑惑。

圖2

通過(guò)對(duì)比可以發(fā)現(xiàn)篩選有以下特性：

1. 篩選是更細(xì)顆粒度的信息分類，而導(dǎo)航則是更粗顆粒度的分類；
2. 篩選往往是收窄信息范圍的最后一步；
3. 篩選可以更多維度地尋找信息，而導(dǎo)航則是單維多層級(jí)地尋找信息；
4. 篩選的維度之間互不干擾，相互獨(dú)立。滿足以上條件的信息，即可以用到篩選模式。

三、現(xiàn)有的篩選模式

事先解釋幾個(gè)名詞，因?yàn)橄挛臅?huì)經(jīng)常提及，如圖3：

• 篩選條件：即用戶可以設(shè)置的篩選維度，通常是一個(gè)組件；
• 篩選項(xiàng)：即用戶在每個(gè)篩選條件中所有可選擇的項(xiàng)目；
• 選中項(xiàng)：即用戶已經(jīng)選擇的篩選項(xiàng)；
• 備選項(xiàng)：即用戶還沒有選擇的篩選項(xiàng)。

圖3

1. 頁(yè)簽式（PC端/移動(dòng)端）

上文說(shuō)過(guò)，在低層級(jí)的界面，篩選和導(dǎo)航?jīng)]有清晰的界限，所以用于導(dǎo)航的界面模式也可以用來(lái)篩選信息。

比如，頁(yè)簽式篩選、同類型的有標(biāo)簽形式、切換按鈕形式、縱向頁(yè)簽形式等等，它們都同屬一類模式。

優(yōu)勢(shì)在于用戶可以快速切換篩選項(xiàng)目并在首屏即可了解篩選項(xiàng)有哪些。但缺陷也很明顯，維度單一難以駕馭復(fù)雜的信息，所以也衍生了二級(jí)頁(yè)簽，橫縱向頁(yè)簽同時(shí)使用等解決方案，如圖4；第二個(gè)缺點(diǎn)是，它可展示的篩選項(xiàng)有限，當(dāng)篩選項(xiàng)目過(guò)多時(shí)，盡管采用可滾動(dòng)的方法，使用效率也會(huì)大大降低。

圖4

2. 矩陣式（PC端/移動(dòng)端）

矩陣式的篩選模式常見于信息密集型的產(chǎn)品，比如電商、視頻網(wǎng)站、O2O平臺(tái)等等，如圖5。

相對(duì)于頁(yè)簽式篩選，矩陣式可以承載更多維的信息，并且在選中多個(gè)選項(xiàng)后，用戶仍能清晰知道他的選中項(xiàng)是什么、備選項(xiàng)有哪些，理解成本低。但矩陣式占用太多頁(yè)面空間，導(dǎo)致首屏內(nèi)容呈現(xiàn)量大打折扣，所以在某些場(chǎng)景下，會(huì)被折疊起來(lái)。

圖5

3. 下拉式（PC端/移動(dòng)端）

下拉式篩選在移動(dòng)端很常見，是一個(gè)非常靈活的篩選模式，能與其他界面模式如搜索和排序等完美兼容，如圖6。

而且通過(guò)多個(gè)下拉的組合可以應(yīng)對(duì)多維的信息篩選，還有，對(duì)篩選項(xiàng)的數(shù)據(jù)格式也能很好兼容，比如日期，地址，時(shí)間等。

當(dāng)然，缺點(diǎn)在于篩選項(xiàng)隱藏較深，加大了操作門檻，對(duì)于一些高頻的篩選操作不夠友好，而且用戶難以知道備選項(xiàng)有什么。

圖6

4. 錄入式（PC端）

常見于B端產(chǎn)品，其交互方式與表單輸入非常類似，形式簡(jiǎn)單容易理解，如圖7。

可以兼容多種數(shù)據(jù)格式（數(shù)字、文本、標(biāo)簽、布爾值、枚舉值等），便于從各個(gè)維度篩選，應(yīng)對(duì)各種復(fù)雜的篩選情況。但需要配合鍵盤輸入，操作比較繁瑣，同樣占用較多空間。

圖7

5. 浮層式/抽屜式（PC端/移動(dòng)端）

從嚴(yán)格意義來(lái)講，浮層式不算是一種篩選模式，它是一個(gè)放置篩選組件的載體，但這種組合方式會(huì)帶來(lái)不同操作體驗(yàn)，如圖8。

由于界面空間有限，篩選類型多樣，篩選組件經(jīng)常沒有地方可放置，而浮層式正可解決此問(wèn)題，而且浮層可以兼容任何形組件及各種組件組合。但，與此同時(shí)放置在浮層里的組件也更難被用戶發(fā)現(xiàn)。

圖8

6. 彈窗式（PC端）

常見于PC端，而且B端產(chǎn)品使用較多，移動(dòng)端則很少見，是浮層式的升級(jí)版，因?yàn)槊娣e更大，可承載的內(nèi)容更多，各種組件可以任性放置。

但彈窗式會(huì)有很強(qiáng)的打斷感，讓用戶感到不流暢。篩選與內(nèi)容分別位于界面的不同層，有較強(qiáng)的割裂感。

7. 折疊式（PC端）

折疊式是浮層式的精簡(jiǎn)版，折疊低頻篩選，顯示高頻篩選，能滿足大多場(chǎng)景下不占用太多空間，針對(duì)有更多篩選需求的用戶也有更好的引導(dǎo)性。

8. 混合式

篩選模式差不多以上幾種，當(dāng)然，對(duì)于一個(gè)復(fù)雜的頁(yè)面，不可能用一種篩選模式就可以搞定；所以能經(jīng)常看到各種篩選模式的變體和組合，如圖9。

圖9

四、一些思考點(diǎn)

那么到底什么情況下使用何種篩選模式？我們?cè)谠O(shè)計(jì)篩選的時(shí)候可以如何思考？顯然，使用頻率和界面空間是兩個(gè)非常重要的評(píng)判維度，除此之外，我們還可以以可見性、系統(tǒng)性能和用戶認(rèn)知等維度去深入思考，下面將逐一分析。

1. 頻率

使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素，我們通常都會(huì)把高頻使用的功能放在顯眼且容易操作的位置。同理，對(duì)于篩選模式，我們也會(huì)依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。

例如，高頻使用的條件優(yōu)先使用頁(yè)簽式篩選或矩陣式篩選，或者將低頻使用的條件收納在浮層式篩選里。

如去哪兒APP中，同樣是時(shí)間篩選組件，訂火車票的界面與訂酒店的界面卻截然不同，如圖10。

雖然在預(yù)定前用戶都已經(jīng)有較明確的目的，但車票供給量少，當(dāng)天車票很容易被搶光，所以用戶妥協(xié)并切換到前后一天的概率會(huì)比較大；但酒店的供給量大很多，酒店全滿的情況少很多，此場(chǎng)景下用戶更換時(shí)間的概率就少得多。

所以訂車票界面的時(shí)間組件使用了頁(yè)簽式篩選，而訂酒店界面則使用了下拉篩選。頻率除了影響使用什么模式外，還會(huì)影響篩選條件及篩選項(xiàng)的排列順序，這里就不多敘述了。

圖10

2. 界面空間

上文已提及，一些界面模式的出現(xiàn)就為了應(yīng)對(duì)界面空間不足的情況，而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過(guò)的事。但一些容易被忽略的可用性問(wèn)題也會(huì)隨之產(chǎn)生。

1. 入口與調(diào)出的界面相距太遠(yuǎn)，導(dǎo)致用戶的操作路徑被延長(zhǎng)；
2. 調(diào)出界面后返回成本太高，導(dǎo)致用戶不知道如何回去原來(lái)的界面，比如，用戶點(diǎn)擊篩選浮層外的區(qū)域仍不能關(guān)閉浮層，用戶展開折疊后不知如何收起等等；
3. 可見性太弱，當(dāng)篩選條件都被收納在一個(gè)個(gè)小小的入口按鈕時(shí)，它的可見性也會(huì)隨之降低，尤其在PC端，一個(gè)大屏幕下更難發(fā)現(xiàn)。

3. 可見性

既然說(shuō)到可見性，不妨展開講講?？梢娦允且豁?xiàng)重要的設(shè)計(jì)原則之一（想了解更多的設(shè)計(jì)原則可以參考我的另外一篇文章）。

一個(gè)明顯的道理是，可見總比不可見好，但由于界面空間限制，我們不得不取舍。那么如何取舍才能保證可用性仍然友好？針對(duì)篩選模式的可見性，我們可以分三個(gè)要點(diǎn)去考慮：篩選條件本身的可見性、篩選項(xiàng)的可見性和選中項(xiàng)的可見性；用戶越難發(fā)現(xiàn)，即可見性越低。

通常，我們都可以以使用頻率來(lái)決定篩選條件的可見程度，但有時(shí)候也會(huì)失效；因?yàn)檎缟衔乃峒?，到了篩選這一步通常是顆粒度比較細(xì)的分類，否則我們可以用導(dǎo)航解決。但顆粒度越細(xì)，用戶對(duì)信息的需求就越不一致。

比如，挑一件衣服，有人希望按品牌篩選、有人希望按價(jià)格、有人希望按顏色，我們很難判斷哪個(gè)頻率更高。面對(duì)這種情況，只能將所有的篩選條件平鋪出來(lái)供用戶選擇。例如，淘寶天貓等電商產(chǎn)品往往會(huì)使用矩陣式的篩選，而一些數(shù)據(jù)格式更多樣的B端產(chǎn)品則直接使用輸入式的篩選。

篩選項(xiàng)的可見性同樣影響模式的選擇。頁(yè)簽式和矩陣式篩選的可見性比下拉式更高，因?yàn)橛脩艨梢灾苯涌吹胶Y選項(xiàng)。但篩選項(xiàng)一定要讓用戶看見嗎？對(duì)于這個(gè)問(wèn)題，可直接以篩選項(xiàng)的多少去決策（少則可見，多則不可見），比如一些B端產(chǎn)品，如果將備選項(xiàng)都全平鋪出來(lái)可能一個(gè)屏幕都放不下，所以只能將所有篩選項(xiàng)收起。

但這是一種極端的情況，缺乏說(shuō)服力。我們可以再分兩點(diǎn)去考慮：

第一，用戶對(duì)備選項(xiàng)是否足夠熟悉？比如對(duì)于一個(gè)尺碼的下拉框，我很清楚自己能選擇什么，但對(duì)于一個(gè)衣服風(fēng)格的下拉框，由于我對(duì)風(fēng)格不熟悉，不能預(yù)判這個(gè)篩選條件能起什么作用，很可能會(huì)將其忽略

第二，我們是否期望備選項(xiàng)能被用戶選中？比如，電商產(chǎn)品將品牌的備選項(xiàng)平鋪出來(lái)，可以增加品牌的曝光度，這無(wú)疑是一個(gè)可帶來(lái)利益的隱形廣告位。

選中項(xiàng)的可見性，即當(dāng)我選中某幾項(xiàng)后再次查看選中項(xiàng)的難易程度。我們也可以從兩種情況考慮。

首先，用戶如何落地到此頁(yè)面？如果用戶落地到這個(gè)頁(yè)面時(shí)，系統(tǒng)已經(jīng)默認(rèn)了一些選中項(xiàng)，那么這種狀態(tài)必須能讓用戶感知。這種情況很好決策。

其次，如果用戶落地到此頁(yè)面時(shí)沒有默認(rèn)選中項(xiàng)，我們可以思考用戶是否需要回看選中項(xiàng)。試想一下，當(dāng)我們?cè)谑状魏Y選后即可找到目標(biāo)，那么我們就不需要回看選中項(xiàng)，因?yàn)槟繕?biāo)已經(jīng)達(dá)到。只有當(dāng)首次篩選找不到目標(biāo)時(shí)，才會(huì)有可能回看選中項(xiàng)。

但這時(shí)仍需分不同情況：當(dāng)找我們不到目標(biāo)時(shí)，可能會(huì)有怎樣的心理活動(dòng)？假如目標(biāo)是相對(duì)模糊的，如“我想看看近期有什么好萊塢科幻電影”，那么我會(huì)按國(guó)家、時(shí)間和電影類型三個(gè)維度去篩選，當(dāng)沒有發(fā)現(xiàn)合適的電影時(shí)，就會(huì)想：“為什么找不我想要的電影呢？”然后想：“是不是篩選條件設(shè)置錯(cuò)了？”或者想“是不是篩選范圍太窄了？”又或者想“要不換換別的電影看吧”。

無(wú)論哪種反應(yīng)，我都需要回看選中項(xiàng)，并對(duì)其修改。但如果用戶目標(biāo)非常明確，如“我就想看今年的奧斯卡最佳電影”，假如篩選結(jié)果為空，我就會(huì)認(rèn)為電影還沒上架。盡管沒有找到目標(biāo)，但我的任務(wù)也已經(jīng)結(jié)束，所以回看選中項(xiàng)的可能性也不大。

可見，在一些場(chǎng)景下，信息可見的重要性會(huì)相對(duì)較弱，如圖11，如此一來(lái)設(shè)計(jì)就可以在其它地方上做更多的嘗試。

圖11

4. 性能

數(shù)據(jù)量大才需要篩選，而數(shù)據(jù)量大必然會(huì)有性能問(wèn)題。在不同場(chǎng)景下，用戶會(huì)發(fā)生不同的行為，對(duì)性能的要求也會(huì)不一樣。我們能經(jīng)常發(fā)現(xiàn)一些篩選模式會(huì)帶有“確認(rèn)”按鈕，當(dāng)用戶設(shè)置完篩選條件后不會(huì)即時(shí)刷新，而需點(diǎn)擊按鈕才能觸發(fā)。而有的篩選模式則沒有“確認(rèn)”按鈕。這分別對(duì)應(yīng)著兩種不同的場(chǎng)景。

第一種場(chǎng)景，如B端產(chǎn)品中的查詢報(bào)表場(chǎng)景。我需要找出符合條件A、B、C的所有信息，并進(jìn)行對(duì)比分析，那么我就會(huì)設(shè)置篩選條件A、B、C后一并篩選出來(lái)，這種情況是一步到位的，我不需要再額外添加條件D或E，所以有“確認(rèn)”按鈕的篩選模式更符合此場(chǎng)景。反而即時(shí)刷新會(huì)在我設(shè)置篩選條件時(shí)造成干擾。

另外一種場(chǎng)景，常見于B端產(chǎn)品中的查詢列表場(chǎng)景。如果我想找到信息α，通過(guò)篩選A后得出10個(gè)信息，那么憑肉眼即可找出信息α，任務(wù)結(jié)束，但如果篩選A后得出1000個(gè)信息，我可能會(huì)再添加篩選條件B、C或D，直到篩出的信息能讓我一眼分辨出信息α。

換句話說(shuō)，這時(shí)候我的心理模式是即時(shí)滿足的，只要信息縮窄到一定范圍我就會(huì)停止添加篩選條件，否則我會(huì)繼續(xù)添加篩選條件。所以即時(shí)刷新能更符合此場(chǎng)景，但與此同時(shí)就需要考慮到性能問(wèn)題。

另外，我們也可從變更頻次和變更概率這兩個(gè)維度進(jìn)行思考。變更頻次是指用戶反復(fù)使用篩選的次數(shù)，變更概率是指用戶使用篩選的可能性，一般來(lái)說(shuō)，高頻次必然大概率，但大概率不一定高頻次，而這兩種情況對(duì)性能的要求是不同的。

還是以報(bào)表和列表為例，在列表中，雖然很大概率會(huì)使用篩選來(lái)尋找信息，但由于用戶是即時(shí)滿足的，而且滿足即可，所以不會(huì)重復(fù)變更篩選條件。

而在報(bào)表中，雖然用戶會(huì)一次性設(shè)置篩選條件，但需要分析的數(shù)據(jù)不只一種，所以會(huì)高頻更換篩選項(xiàng)，回想一下我們?nèi)シ治鲎约寒a(chǎn)品或競(jìng)品的日活月活等數(shù)據(jù)時(shí)，是不是會(huì)高頻地切換數(shù)據(jù)來(lái)分析比對(duì)？所以，高頻次的篩選就會(huì)對(duì)性能有更強(qiáng)的要求，而為了避免性能問(wèn)題，往往也會(huì)加上“確認(rèn)”按鈕。

5. 用戶認(rèn)知

最難解決的其實(shí)是用戶的認(rèn)知問(wèn)題，尤其在模式相對(duì)固定的當(dāng)下，讓用戶適應(yīng)并習(xí)慣新的模式并非易事。

以我個(gè)人為例，騰訊視頻的搜索，其實(shí)已經(jīng)可以部分替代篩選的功能：當(dāng)我搜索“2016 喜劇”時(shí)，能搜出16年的喜劇電影，而不僅僅是標(biāo)題有“2016喜劇”字段的視頻，如圖12。

然而在我日常使用的時(shí)候，我還是按以前的老路，通過(guò)篩選來(lái)找電影，因?yàn)樵谖业恼J(rèn)知里，搜索就只能按電影名找出電影，不能通過(guò)分類來(lái)尋找。這種認(rèn)知可能需要我刻意地練習(xí)才能改變。

所以，用戶的認(rèn)知仍然是高不可攀，在我們想出一些創(chuàng)新性的篩選模式時(shí)，不要忽略用戶的認(rèn)知。

圖12

五、寫在最后

本文從各個(gè)維度分享了自己對(duì)于篩選這一界面模式的思考，但仍有一些思考點(diǎn)尚未提及，比如拓展性、排版布局和信息層級(jí)等等，由于篇幅限制只能止步于此。

我更想強(qiáng)調(diào)的是，本文通篇以可用性的角度去思考難免有失偏頗，在實(shí)際業(yè)務(wù)中我們還應(yīng)以在產(chǎn)品的角度分析并得出最合適的方案。

作者：genrry，公眾號(hào)：設(shè)計(jì)師阿余。熱愛設(shè)計(jì)，關(guān)注用戶體驗(yàn)，分享設(shè)計(jì)思考。

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

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