為了幫助用戶在海量的信息中快速定位，通常我們會(huì)提供一些工具來進(jìn)行輔助，而這其中最重要的就有篩選功能，再加上網(wǎng)上相關(guān)總結(jié)不是很多。所以，這次我就來聊聊篩選的設(shè)計(jì)邏輯。

背景

看到標(biāo)題，大家應(yīng)該知道我要講的主題了，再具體點(diǎn)就是介紹To B 系統(tǒng)列表的篩選功能。

最近在做的是 To B的醫(yī)療管理系統(tǒng)，不同的產(chǎn)品有它的業(yè)務(wù)特性。作為一款 SaaS 平臺類產(chǎn)品，效率和一致性是產(chǎn)品核心競爭力之一。所以實(shí)際工作中，提升工作人員的效率和保持系統(tǒng)一致性是關(guān)注的重點(diǎn)。

對于To B類的產(chǎn)品，最多出現(xiàn)的就是表格，表格通常都會(huì)含有很多的數(shù)據(jù)項(xiàng)，不方便查看。

為了幫助用戶在海量的信息中快速定位，通常我們會(huì)提供一些工具來進(jìn)行輔助，而這其中最重要的就有篩選功能。再加上網(wǎng)上相關(guān)總結(jié)不是很多。所以，這次我就來聊聊篩選的設(shè)計(jì)邏輯。

篩選到底是什么

在介紹篩選的具體功能之前，我想先跟大家聊聊篩選到底是什么？

篩選，也就是Filter，更多的人也稱它為過濾器，它屬于搜索框架的一部分；主要用于內(nèi)容提取，將一類數(shù)據(jù)展示，同時(shí)一類數(shù)據(jù)隱藏，可以整合很多的組件。

不過篩選也只是一類功能的稱呼，并不是只要加上這塊內(nèi)容就能對用戶產(chǎn)生實(shí)質(zhì)性的幫助，更多的還是需要對當(dāng)前所服務(wù)領(lǐng)域的理解以及對業(yè)務(wù)特性的輔助。

隨著互聯(lián)網(wǎng)的發(fā)展，篩選功能的使用也越來越被用戶所了解。從設(shè)計(jì)形式上來看并沒有特別大的差異，所以這次的分析將更著重于功能內(nèi)部的部分。

功能的好壞不僅僅關(guān)乎其本身，更重要的要看是否為解決實(shí)際問題而服務(wù)。

既然我們今天聊的是一個(gè) Design Pattern，那么我們需要先回歸到問題的本質(zhì)，先來思考一下篩選功能究竟解決的是什么問題？

究竟解決了什么問題

我們回到系統(tǒng)的角度，篩選的本質(zhì)其實(shí)是是來幫助用戶方便、快速的找到自己想要的信息。當(dāng)然，僅僅到這一步是不夠的，查找信息的目的是什么？解決什么問題呢？

有一個(gè)前提，就是我們的信息復(fù)雜既多層級又多維度，用戶不能快速找到想要的信息，如果是很簡單的信息，就沒必要用到篩選了。

1. 使用場景

首先我們可以結(jié)合用戶使用場景來進(jìn)行思考 為什么會(huì)有這個(gè)功能。

從場景中來，到場景中去。

對于To B 產(chǎn)品，更多強(qiáng)調(diào)的是業(yè)務(wù)場景，是用戶在他的職能角色下，需要做什么樣的操作完成他的工作；而對產(chǎn)品外觀、交互細(xì)節(jié)的偏好反而沒那么重要。

篩選的使用場景主要有以下兩種：

• 場景一：用戶通過選擇由系統(tǒng)定義的一些類型，獲取相同特征的塊狀信息。這是主要的使用場景。比如說，在發(fā)藥統(tǒng)計(jì)頁面，藥房老師想知道這一個(gè)月的發(fā)藥明細(xì)條數(shù)。這時(shí)候，時(shí)間區(qū)間就可以做為一個(gè)篩選項(xiàng)了。
• 場景二：用戶想獲取單一信息，但沒有關(guān)鍵字，通過篩選一些類型和特定字段進(jìn)行輔助查找。比如說，血庫老師想查找某一患者的用戶記錄，但不記得患者病歷號，無法進(jìn)行精確搜索，這時(shí)候就可以根據(jù)患者所在科室，患者狀態(tài)，血液狀態(tài)等特定類型進(jìn)行篩選，幫助用戶縮小查找范圍。

2. 解決的問題

從上面的業(yè)務(wù)場景，得出篩選解決的問題是：提供指定條件下的一些類型，用戶可以選擇查看符合一類或多類條件下的內(nèi)容，從而獲得塊狀信息，從而進(jìn)行進(jìn)一步的整體分析。

對用戶產(chǎn)生的價(jià)值是幫助用戶縮小信息范圍，提高查找的效率。

接下來結(jié)合一些工作中的示例，看看是如何應(yīng)用篩選功能的。

哪些可以作為篩選項(xiàng)？

要想讓用戶使用他們，需要吸引用戶的注意。為了顯而易見，同時(shí)滿足人的視覺習(xí)慣，篩選模塊的位置常常呈現(xiàn)在列表、搜索結(jié)果頁上部。

而且它在功能頁面上的基本框架實(shí)際上都是一致的，只是在“如何做篩選”上會(huì)有一些差異。而這些差異很多是因?yàn)闃I(yè)務(wù)特性所產(chǎn)生的，接下來會(huì)展開講。

用戶想要什么？先弄清楚。別忘了你的出發(fā)點(diǎn)是解決用戶需求。

前面說過篩選主要是獲取塊狀信息，這是我們最常見的一對多關(guān)系。當(dāng)進(jìn)行篩選操作時(shí)，代表著選擇一個(gè)條件，得出對應(yīng)的多個(gè)結(jié)果。

我們也有提到一些特定字段，那么具體是哪些會(huì)作為篩選項(xiàng)呢？

1. 狀態(tài)

B端業(yè)務(wù)復(fù)雜，使用系統(tǒng)的工作人員眾多，角色分工也多。

如果要確定一條數(shù)據(jù)的狀態(tài)變化節(jié)點(diǎn)，則要從角色關(guān)心數(shù)據(jù)的什么，關(guān)心到哪入手。節(jié)點(diǎn)的設(shè)定要結(jié)合實(shí)際的業(yè)務(wù)流程。還有就是有關(guān)聯(lián)到系統(tǒng)數(shù)據(jù)變化的操作才能作為節(jié)點(diǎn)觸發(fā)狀態(tài)的變更。

舉個(gè)醫(yī)院血液閉環(huán)的例子：

一袋血從血站處發(fā)血到輸給患者，血袋回收前，輸血閉環(huán)的流程應(yīng)該有：血站發(fā)血、入庫——醫(yī)生申請、審核——護(hù)士執(zhí)行、打印、采集、送檢——血庫接收、篩查、配血、發(fā)血——護(hù)士接收、開始輸血、復(fù)核輸血、結(jié)束輸血——血袋回收。

再細(xì)化到入庫流程：一批血產(chǎn)品（產(chǎn)品種類和數(shù)量確定）在入庫前用一個(gè)流轉(zhuǎn)單號來記錄它在倉庫的流轉(zhuǎn)狀態(tài)，那么以輸血科的視角來看，這個(gè)流轉(zhuǎn)單號（這批血）的狀態(tài)應(yīng)該有：

• 已生成單號（初始狀態(tài)）；
• 待（已）接收；
• 待（已）入庫。

狀態(tài)的變化和完結(jié)節(jié)點(diǎn)的存在是為了完成任務(wù)的交接，讓管理者可以追蹤定責(zé)到具體環(huán)節(jié)。有關(guān)部門有更詳細(xì)的工作流程和規(guī)范，管理上也更加細(xì)致，從而提高各環(huán)節(jié)的工作效率。所以狀態(tài)是篩選的首選類型。

2. 日期

每個(gè)需求場景都是由事件觸發(fā)的，對于事件的設(shè)計(jì)離不開時(shí)間選擇，比如患者什么時(shí)候住院、醫(yī)生什么時(shí)候開的申請單、什么時(shí)候?qū)徍?、護(hù)士什么時(shí)候采血等等。

日期選擇控件（選擇器）是讓用戶在應(yīng)用中選擇（填入）日期或時(shí)間的一類控件。尤其是在B端產(chǎn)品中非常常見，主要用于數(shù)據(jù)篩選，一般作用于過去已發(fā)生事情；如查詢一周內(nèi)的訂單量、過去一天的發(fā)血量等。

一般設(shè)計(jì)之前會(huì)跟用戶聊一聊：

（1）日期選擇器是用來做什么的？

“看性能數(shù)據(jù)，我希望可以方便地看到每個(gè)特定時(shí)間段的報(bào)告。”

（2）你是需要選擇日期還是日期范圍？

“日期范圍，比如6小時(shí)內(nèi)或者一周內(nèi)這樣的。”

（3）有比較常用的日期范圍嗎？

“嗯，我經(jīng)常需要6小時(shí)段的數(shù)據(jù)，有時(shí)候也會(huì)用一個(gè)月內(nèi)的數(shù)據(jù)?！?/p>

（4）只需要選擇日期嗎？還是具體的時(shí)間也要選擇的？

“日期肯定是要的，時(shí)間也需要，不然我怎么選6小時(shí)內(nèi)的數(shù)據(jù)？”

（5）關(guān)于日期選擇器，目前您使用的產(chǎn)品有讓您覺得體驗(yàn)不好的地方嗎？

“我必須點(diǎn)擊數(shù)據(jù)表中的頁面，才能查看過去的報(bào)告。這挺麻煩的，不過我也習(xí)慣了?！?/p>

（6）你需要選擇很久以前的日期嗎？

“我有時(shí)候需要查看去年的數(shù)據(jù)，看看性能的變化?！?/p>

通過用戶訪談，我們可以獲取一些基本的信息，然后就開始構(gòu)建日期選擇器了。

一般會(huì)有以下幾個(gè)特點(diǎn)：

• 一般起始日期和終止日期使用一個(gè)組件展示，因?yàn)锽端用戶有一定的知識積累，更加注重使用的效率，可以降低用戶的操作成本和視覺成本（認(rèn)知成本>操作成本>視覺成本）。
• 常用于對已過去日期的選擇，此時(shí)不排除用戶會(huì)先選擇終止日期（因終止日期距離當(dāng)前日期較近），根據(jù)終止日期倒推起始日期，因此點(diǎn)擊不分先后，不會(huì)強(qiáng)制用戶先點(diǎn)起始日期。
• 主要以提高效率為主（效率型），提高使用者的效率即是為企業(yè)節(jié)約成本。

舉個(gè)例子：

比如輸血記錄頁面，主要是發(fā)血后更新輸血相關(guān)數(shù)據(jù)，便于輸血科工作人員查看相關(guān)信息。

血液的篩查定型是有有效期的，為了加強(qiáng)用血安全，所以時(shí)間粒度會(huì)精確到秒，即日期時(shí)間選擇器（年月日時(shí)分秒）。輸血科每天都會(huì)有一定量的發(fā)血工作，為了避免數(shù)據(jù)量過大，以及方便觀察輸血后病人的情況，所以時(shí)間區(qū)間默認(rèn)是過去一周。

3. 選擇性的屬性

由系統(tǒng)提供選項(xiàng)，用戶通過選擇的方式完成錄入的屬性類型被稱為選擇性屬性，比如性別，是由系統(tǒng)提供的三個(gè)選項(xiàng)，男/女/不詳，由用戶來選擇一個(gè)；地區(qū)也是由系統(tǒng)提供的地區(qū)信息，用戶從中選擇。

選擇性屬性是指用戶的屬性。用戶屬性是用戶狀態(tài)與標(biāo)簽的記錄，由指定的事件賦值/更新，屬性的最新值會(huì)伴隨著之后的所有事件發(fā)送至平臺。用戶屬性的定義來源不同，主要有選擇性屬性和自定義屬性。簡單點(diǎn)說，用戶屬性就是用戶身上的標(biāo)簽。

與選擇性的屬性對應(yīng)的是自定義屬性，也就是由用戶按照自己想法輸入的內(nèi)容，比如：姓名、病歷號等等。

列表篩選項(xiàng)比較常見的就是選擇性屬性，因?yàn)榱斜淼暮芏嘧侄味际怯袑傩缘?，屬性一旦確定，基本上終身不變或者變更速度極慢，這也是作為篩選項(xiàng)的一個(gè)原因。同時(shí)，給用戶選擇的范圍，而不是讓用戶自定義，會(huì)給用戶一種確定性。

比如說，員工就有他的角色屬性，是醫(yī)生還是護(hù)士，所屬的科室是哪一個(gè)。血產(chǎn)品的屬性就有是否有效，血型，Rh(d)等等。

其實(shí)在各個(gè)需要幫助快速查找信息領(lǐng)域都可以見到類目屬性體系的身影。比如：教育行業(yè)里面的課程分類，醫(yī)療行業(yè)的疾病和醫(yī)院分類。當(dāng)我們把用戶查找的信息看做一個(gè)個(gè)實(shí)體的時(shí)候，對實(shí)體分類以幫助快速定位查找就是一個(gè)非常通用的方法。

4. 多條件篩選

（1）聯(lián)動(dòng)

當(dāng)篩選項(xiàng)是多維度的時(shí)候，需考慮篩選項(xiàng)間的聯(lián)動(dòng)關(guān)系。并且在篩選的過程中給予用戶及時(shí)的反饋。

聯(lián)動(dòng)主要是指應(yīng)用程序用戶界面上的控件之間發(fā)生互相關(guān)聯(lián)的變化，這些控件包括下拉框、文本框、標(biāo)簽、菜單等。多級聯(lián)動(dòng)簡稱級聯(lián)，參數(shù)級聯(lián)查詢是查詢控件之間的一種互動(dòng)方式，比如在某個(gè)下拉框選定選項(xiàng)后，另一個(gè)下拉框里的選項(xiàng)范圍會(huì)隨之變化。

也許有人還不知道級聯(lián)查詢是什么，那么我來解釋一下。比如說我們在淘寶或者京東上要添加一個(gè)自己的收貨地址，那么當(dāng)我們選擇省份的時(shí)候，它會(huì)自動(dòng)將本省的城市列出來，當(dāng)我們選擇好市以后，它又會(huì)把該市所包含的區(qū)都列出來，這個(gè)效果就是級聯(lián)查詢。

比如，我們的系統(tǒng)是給多院區(qū)的機(jī)構(gòu)使用的，那么醫(yī)院的院區(qū)字段和科室字段，它們就是從屬關(guān)系，不同的院區(qū)類型下對應(yīng)的科室數(shù)據(jù)集是不同的。

整個(gè)機(jī)構(gòu)下的數(shù)據(jù)量是很大的，為了提升工作效率，快速查詢出某一科室下的數(shù)據(jù)。我們可以限制用戶必須先篩選院區(qū)，系統(tǒng)會(huì)自動(dòng)將該院區(qū)下的科室列表展示出來，再選擇該院區(qū)下的科室。

（2）組合篩選

由m個(gè)不同的元素中取出n個(gè)并成一組，不論次序，其中每組所含成分至少有一個(gè)不同，所得到的結(jié)果叫做由m中取n個(gè)的組合。

組合篩選也就是從所有篩選項(xiàng)中選擇多個(gè)條件進(jìn)行組合，從而得到交集后的列表結(jié)果。

前面我們提過效率是To B 系統(tǒng)能力的一個(gè)核心指標(biāo)。所以需要可以滿足各種字段組合篩選查詢。

比如下面這個(gè)患者綜合查詢功能下的實(shí)際場景：

主任醫(yī)師：小黃你看下這個(gè)月我們科室的入院人數(shù)。

小黃：好的主任。

可能不到1分鐘，小黃可以把這個(gè)數(shù)據(jù)匯報(bào)給主任。

但是，如果主任這樣問呢？

主任醫(yī)師：小黃你看下最近一周入院我們科室的干部病區(qū)，年齡在30-45歲區(qū)間的女性患者有多少人，列個(gè)名單給我

小黃：…..

綜上對話得知，滿足多字段（個(gè)人信息所有字段）組合篩選查詢及導(dǎo)出，可幫助醫(yī)生在各種場景根據(jù)需要快速得知一系列數(shù)據(jù)。

• 可查詢現(xiàn)在有多少位在院患者
• 可查詢干部病區(qū)有多少位女性在院患者
• 可查詢干部病區(qū)30-45歲的女性在院患者有多少位
• 可查詢干部病區(qū)的30-45歲的女性在院患者，且血型是A型的有多少位
• 可查詢xx等等等等等…..包含個(gè)人信息都可以組合篩選查詢及導(dǎo)出

總結(jié)一下，使用哪一種篩選形式取決于篩選邏輯、使用場景和列表的內(nèi)容項(xiàng)本身，產(chǎn)品設(shè)計(jì)時(shí)，可以靈活運(yùn)用。

最終目的都是讓用戶用某條件對內(nèi)容進(jìn)行區(qū)分（過程），從而找到用戶想要的內(nèi)容（目的）。

THE END

以上就是關(guān)于篩選功能的一些思考。總的來說，我們可以通過功能分析，從而加深對產(chǎn)品更深的理解。

明確輸入和輸出，倒推出用戶的使用場景，進(jìn)而得到用戶的需求。

最后，希望大家保持思考，努力生活！

作者：Shinran，個(gè)人公眾號：產(chǎn)品人Shinran ( pmshinran2020 )

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

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