在任意一個(gè)B端系統(tǒng)中，都會(huì)涉及到數(shù)據(jù)篩選模塊的應(yīng)用。那么如何設(shè)計(jì)，才能保證該模塊在實(shí)際使用場(chǎng)景中的適用性呢？本文作者分析了“數(shù)據(jù)篩選”模塊的設(shè)計(jì)思路，一起來(lái)看一下吧。

在任意一個(gè)B端系統(tǒng)中，必然都會(huì)涉及到數(shù)據(jù)篩選模塊的應(yīng)用。

那么如何設(shè)計(jì)，才能保證該模塊在實(shí)際使用場(chǎng)景中的適用性？

“用戶需求”“需求匹配”。

透過(guò)現(xiàn)象看本質(zhì)，數(shù)據(jù)篩選模塊的本質(zhì)就是一個(gè)工具。

而對(duì)于一個(gè)工具適用性的判斷，最直接的標(biāo)準(zhǔn)，就是看是否能解決對(duì)應(yīng)的問(wèn)題。

對(duì)應(yīng)到模塊設(shè)計(jì)中，就是看能否解決用戶的需求，所以用戶需求的確定是我們?cè)O(shè)計(jì)時(shí)的首要任務(wù)。

在了解了用戶的需求后，接下來(lái)需要做的就是需求匹配。

現(xiàn)階段對(duì)于需求的匹配一般會(huì)采用兩種方法：新工具的創(chuàng)造，老工具的適配。

新工具的創(chuàng)造，就是根據(jù)用戶當(dāng)前的需求，從0到1設(shè)計(jì)出一個(gè)可以解決當(dāng)前問(wèn)題的產(chǎn)品。

老工具的適配，就是通過(guò)對(duì)于現(xiàn)有工具的評(píng)估篩選，從而選出可以解決當(dāng)前用戶需求的產(chǎn)品。

一、用戶需求

在數(shù)據(jù)篩選模塊的使用場(chǎng)景下，用戶的需求是什么？

進(jìn)行信息的查詢？

對(duì)于信息進(jìn)行分類(lèi)查看？

還是需要對(duì)信息進(jìn)行排列組合？

以上這些“需求”，只是在用戶需求實(shí)現(xiàn)過(guò)程中，所采用的不同的實(shí)現(xiàn)方法。

若是對(duì)這些方法進(jìn)行歸納總結(jié)就可以發(fā)現(xiàn)，其背后存有一個(gè)共同目標(biāo)：“信息的獲取”。

在探析用戶需求時(shí)，需要透過(guò)現(xiàn)象看本質(zhì)，從表面的需求中，抽象出更為本質(zhì)性的需求。

二、需求匹配

在了解了用戶本質(zhì)性需求后，需要做的就是針對(duì)這一需求，給出對(duì)應(yīng)的解決方案。

對(duì)于“信息獲取”來(lái)說(shuō)，市面上的解決方案已經(jīng)比較成熟。

所以在實(shí)際設(shè)計(jì)時(shí)，我們需要做的就是去衡量現(xiàn)有方案與用戶需求的適配度。

市面上的解決方案可以大致分成兩大類(lèi)：搜索模塊、篩選模塊。

1. 搜索模塊

定義：用戶輸入任意條件后，將輸入的條件與數(shù)據(jù)庫(kù)中已有的數(shù)據(jù)進(jìn)行檢索對(duì)比，從而給出一個(gè)精確的搜索結(jié)果。

特點(diǎn)：支持信息的精確定位，過(guò)程簡(jiǎn)潔高效。

適用場(chǎng)景：信息點(diǎn)明確，目標(biāo)感強(qiáng)，有短時(shí)間內(nèi)獲取到對(duì)應(yīng)信息需求。

對(duì)于習(xí)慣通過(guò)搜索模塊獲取信息的用戶，可以將其畫(huà)像概括為“上街購(gòu)物的男生”：

需求清晰，目標(biāo)明確，到了商場(chǎng)就會(huì)直奔對(duì)應(yīng)的店鋪進(jìn)行商品的購(gòu)買(mǎi)。整個(gè)過(guò)程簡(jiǎn)潔明了，不會(huì)有多余的動(dòng)作。

2. 篩選模塊

定義：通過(guò)各種條件對(duì)于數(shù)據(jù)進(jìn)行分類(lèi)，通過(guò)一步步的分類(lèi)篩選，最終給出一個(gè)范圍性結(jié)果。

特點(diǎn)：可供用戶進(jìn)行篩選的維度多，篩選過(guò)程較復(fù)雜。

適用場(chǎng)景：對(duì)于信息有獲取的需求但信息點(diǎn)不明確，需要借助外界已有的一些規(guī)則進(jìn)行信息點(diǎn)的進(jìn)一步篩選，從而才能做出對(duì)應(yīng)的選擇。

對(duì)于習(xí)慣通過(guò)篩選模塊進(jìn)行信息獲取的用戶，其用戶畫(huà)像可以概括成“逛街的女生”：

有整體大的方向，但沒(méi)有明確的目的。最終是否要購(gòu)買(mǎi)，是在不斷的篩選嘗試后，才做出的決定。

三、可優(yōu)化點(diǎn)

需求的匹配，只是幫助我們確定了一個(gè)概括性的解決方案。

在具體設(shè)計(jì)時(shí)，根據(jù)用戶需求點(diǎn)的不同，還可以對(duì)于解決方案進(jìn)行更細(xì)致的優(yōu)化。

1. 篩選項(xiàng)的折疊問(wèn)題

篩選項(xiàng)的外在顯露，目的是為了讓用戶可以第一時(shí)間對(duì)于篩選項(xiàng)進(jìn)行操作，減少用戶使用路徑。

但如果用戶所需要篩選的篩選項(xiàng)較多，在設(shè)計(jì)時(shí)就需要考慮篩選項(xiàng)的折疊問(wèn)題。

篩選項(xiàng)顯示的越多，用戶通過(guò)篩選模塊所獲取的結(jié)果就會(huì)越精確。

但更多的篩選項(xiàng)同時(shí)也意味著，需要更多的空間進(jìn)行排列展示，這樣屏效性就會(huì)直線下降。

如何對(duì)于用戶需求與用戶體驗(yàn)做出平衡？這就需要產(chǎn)品經(jīng)理進(jìn)行決策。

這里先行給出我自己的一下見(jiàn)解供大家參考：

• 對(duì)于所有的篩選項(xiàng)，按照用戶使用頻率、篩選項(xiàng)重要程度進(jìn)行優(yōu)先級(jí)排序，之后再結(jié)合整體UI樣式以及屏占比，優(yōu)先平鋪展示那些優(yōu)先級(jí)高的篩選項(xiàng)
• 對(duì)于排序較低的篩選項(xiàng)，可以將其折疊，待點(diǎn)擊后再次展開(kāi)
• 如果初始狀態(tài)有默認(rèn)選中的篩選項(xiàng)，優(yōu)先外露這些篩選項(xiàng)

2. 篩選結(jié)果的展示

對(duì)于篩選結(jié)果的展示，一般有兩種交互方式：手動(dòng)篩選、實(shí)時(shí)自動(dòng)篩選。

（1）手動(dòng)篩選

用戶完成選項(xiàng)選擇后，手動(dòng)點(diǎn)擊查詢按鈕，從而顯示對(duì)應(yīng)的篩選結(jié)果。

手動(dòng)篩選最大的特點(diǎn)，在其結(jié)果的穩(wěn)定性與確定性。

用戶是在確認(rèn)了一個(gè)或幾個(gè)篩選條件進(jìn)行的檢索，其結(jié)果必然更為精確，更符合用戶心理預(yù)期。

（2）實(shí)時(shí)自動(dòng)篩選

用戶在選擇任意一個(gè)篩選項(xiàng)，篩選結(jié)果都會(huì)進(jìn)行同步更新。

實(shí)時(shí)自動(dòng)篩選最大的特點(diǎn)，就在其最終結(jié)果的遞進(jìn)性。

用戶經(jīng)過(guò)一層層的選項(xiàng)確認(rèn)，一個(gè)個(gè)商品的篩選后，才決定自己最終目標(biāo)。

Tips：

• 手動(dòng)篩選適合對(duì)于自己需求非常明確的用戶
• 實(shí)時(shí)自動(dòng)篩選適合哪些有信息獲取需求，但對(duì)于信息又不是十分明確的用戶
• 兩種方式在后端實(shí)現(xiàn)上大差不差，而在前端實(shí)現(xiàn)上，實(shí)時(shí)的自動(dòng)篩選每次都需要調(diào)用對(duì)應(yīng)的接口，如果數(shù)據(jù)量較大，就會(huì)造成頁(yè)面的卡頓

3. 篩選項(xiàng)的突出

將已選的選項(xiàng)突出展示，方便用戶對(duì)于選項(xiàng)的尋找與查詢，優(yōu)化用戶使用體驗(yàn)。

同時(shí)將已選項(xiàng)突出展示，也可以提高屏幕的屏效性，方便篩選結(jié)果的展示。

4. 重置按鈕的設(shè)置

重置按鈕的添加，目的是對(duì)于已選項(xiàng)進(jìn)行一鍵清理，從而是用戶可以更為快速的開(kāi)始新一輪的篩選，減少整個(gè)篩選過(guò)程的時(shí)間。