編輯導(dǎo)語(yǔ)：一個(gè)體驗(yàn)感良好的數(shù)據(jù)檢索功能，能夠幫助用戶在海量的信息中快速定位到需要的內(nèi)容。本文作者從檢索方式、布局和樣式等多個(gè)維度，并結(jié)合實(shí)際案例，分享了在中后臺(tái)系統(tǒng)中列表頁(yè)的數(shù)據(jù)檢索功能設(shè)計(jì)，希望能給你帶來(lái)幫助。

在中后臺(tái)系統(tǒng)中，列表頁(yè)是使用最多的頁(yè)面形式之一。為了幫助用戶在海量的信息中快速定位到需要的內(nèi)容，我們會(huì)提供一些數(shù)據(jù)檢索工具來(lái)進(jìn)行輔助定位。那么將如何設(shè)計(jì)一個(gè)體驗(yàn)感良好的數(shù)據(jù)檢索功能呢？接下來(lái)我將從檢索方式、布局和樣式等多個(gè)維度并結(jié)合實(shí)際案例來(lái)解析相關(guān)設(shè)計(jì)。

一、有哪些檢索方式

我們?cè)趯?shí)際生活中逛店買(mǎi)東西時(shí)，如果想要找一件商品，大概率會(huì)有以下幾種方式:

1）如果這家店?yáng)|西沒(méi)那么多，直接的方式是從將整個(gè)店的東西從頭到尾看一遍，直到看見(jiàn)你需要的，這是最本能尋找信息的方式——直接查找。

2）如果你逛的是一家大型超市，直接查找顯然不切實(shí)際，但可以根據(jù)那件商品大致判斷出是屬于哪一類，先找到分類，在定位分類下的這個(gè)商品。這是第二種尋找信息的方式——按分類查找。

3）如果你買(mǎi)的商品有一些特殊標(biāo)記（如顏色是紅色），就可以直接去找對(duì)應(yīng)顏色，這種尋找信息的方式就是——按標(biāo)記查找。

綜上所述，在尋找信息時(shí)，會(huì)有三種行為模式：

1. 直接查找
2. 按信息分類查找
3. 按信息的標(biāo)記查找

而這三種行為模式剛好對(duì)應(yīng)著三種檢索方式：

1. 搜索
2. 導(dǎo)航
3. 篩選

二、搜索

搜索可以幫助用戶在巨大的信息池中縮小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。接下來(lái)將從搜索樣式和搜索結(jié)果的觸發(fā)方式，兩個(gè)維度來(lái)解析如何設(shè)計(jì)搜索功能。

1. 搜索樣式

從搜索目標(biāo)信息的路徑來(lái)說(shuō)，不同路徑對(duì)應(yīng)不同的展示樣式，主要有模糊搜索和分標(biāo)簽搜索。

1）模糊搜索

優(yōu)點(diǎn)：操作便捷，用戶想要什么輸就完事兒了。

缺點(diǎn)：容易把不相關(guān)的內(nèi)容搜出來(lái)，結(jié)果匹配不夠精準(zhǔn)。

2）分標(biāo)簽搜索

優(yōu)點(diǎn)：結(jié)果匹配較為精準(zhǔn)。

缺點(diǎn)：操作不方便，每次都需要先切換對(duì)應(yīng)標(biāo)簽在輸入搜索。

2. 結(jié)果觸發(fā)方式

結(jié)果觸發(fā)方式包含兩種：實(shí)時(shí)觸發(fā)和手動(dòng)觸發(fā)。

1）實(shí)時(shí)觸發(fā)

在輸入過(guò)程中實(shí)時(shí)匹配結(jié)果，對(duì)搜索結(jié)果即時(shí)反饋，引導(dǎo)性強(qiáng)，效率高。適用于搜索數(shù)據(jù)量小或本地?cái)?shù)據(jù)的情況。例如：數(shù)據(jù)量較少的列表。

優(yōu)點(diǎn)：效率高。

缺點(diǎn)：過(guò)程中匹配對(duì)計(jì)算能力要求高，若計(jì)算能力跟不上則需要加載等待，從而影響體驗(yàn)。

2）手動(dòng)觸發(fā)

輸入完成后，需回車鍵或點(diǎn)擊按鈕觸發(fā)搜索。適用于在大量信息中搜索，或需要單獨(dú)搜索結(jié)果頁(yè)的情況，例如：全局搜索、大量數(shù)據(jù)的表格等。

優(yōu)點(diǎn)：結(jié)果數(shù)據(jù)確定性高。

缺點(diǎn)：輸完多一步操作，成本略高。

三、導(dǎo)航

列表頁(yè)數(shù)據(jù)過(guò)濾場(chǎng)景下使用的導(dǎo)航，主要是指標(biāo)簽切換樣式，多用于和時(shí)間、狀態(tài)的流轉(zhuǎn)等高頻切換的場(chǎng)景，選項(xiàng)之間的數(shù)據(jù)一般互相獨(dú)立沒(méi)有交集。

優(yōu)點(diǎn)：劃分清晰，切換便捷。

缺點(diǎn)：需確保每一項(xiàng)的數(shù)據(jù)沒(méi)有交集，數(shù)量也不能過(guò)多，最好控制在5個(gè)以內(nèi)。

使用建議：默認(rèn)選中的標(biāo)簽最好是用戶最常用的選項(xiàng)。

四、篩選

篩選可以幫助用戶縮小數(shù)據(jù)范圍，逐步找到想要的內(nèi)容；或者當(dāng)用戶的目標(biāo)就是查看某一范圍的數(shù)據(jù)時(shí)，也可以通過(guò)篩選實(shí)現(xiàn)。

體驗(yàn)良好的篩選功能，需要充分考慮用戶的需求和具體的業(yè)務(wù)場(chǎng)景，選擇合適的篩選布局、樣式。除此之外，還要處理好與其他元素之間的關(guān)系。確保頁(yè)面各個(gè)元素之間的合理性。

1. 篩選區(qū)布局

設(shè)計(jì)篩選功能時(shí)，需結(jié)合整體頁(yè)面元素，思考與篩選功能之間的關(guān)系，尤其是與列表數(shù)據(jù)的布局關(guān)系。

1）上下布局

優(yōu)點(diǎn)：節(jié)省頁(yè)面橫向空間，尤其在使用表格展示數(shù)據(jù)時(shí)，能最大化利用橫向空間來(lái)展示表格字段，便于閱讀和操作。

缺點(diǎn)：當(dāng)篩選字段過(guò)多時(shí)會(huì)占用縱向高度，影響結(jié)果數(shù)據(jù)的查看。

使用建議：

• 當(dāng)篩選項(xiàng)或常用篩選項(xiàng)較少時(shí)使用
• 使用時(shí)，可以收起不常用的，保證篩選區(qū)不會(huì)占用太多縱向空間，同時(shí)將常用篩選項(xiàng)露出，以此來(lái)滿足用戶的業(yè)務(wù)需求和使用場(chǎng)景

2）左右布局

優(yōu)點(diǎn)：能將所有篩選字段都直接展示出來(lái)，節(jié)省頁(yè)面縱向空間，可對(duì)篩選條件和結(jié)果列表同時(shí)查看。當(dāng)篩選條件較多時(shí)可縱向滾動(dòng)，有較強(qiáng)的的擴(kuò)展性。

缺點(diǎn)：占用橫向空間。

使用建議：

• 常用篩選條件較多，且需要直觀展示出來(lái)的場(chǎng)景下使用。
• 需要頻繁切換篩選項(xiàng)，并需要對(duì)照查看篩選結(jié)果時(shí)使用。

3）浮層（彈窗/抽屜）

篩選功能通過(guò)頁(yè)面中收起的入口，點(diǎn)擊后以彈窗或抽屜的形式去承載篩選內(nèi)容。

優(yōu)點(diǎn)：節(jié)省空間，可以兼容任何形組件及各種組件組合。

缺點(diǎn)：浮層會(huì)遮擋一部分表單數(shù)據(jù)，會(huì)影響用戶的判斷，由于篩選區(qū)域與結(jié)果展示區(qū)域不在同一頁(yè)面，整個(gè)篩選過(guò)程將會(huì)存在較強(qiáng)的打斷感和割裂感。

使用建議：

• 頁(yè)面空間有限，且篩選功能不是很高頻使用。
• 篩選內(nèi)容較多，且形式較為復(fù)雜時(shí)使用。

2. 篩選模式

1）平鋪式

平鋪式將篩選條件對(duì)應(yīng)的選項(xiàng)全部或者部分平鋪展示出來(lái)。

優(yōu)點(diǎn)：很直觀，操作效率高。且在選中多個(gè)選項(xiàng)后，用戶仍能清晰知道他的選中項(xiàng)是什么、備選項(xiàng)有哪些，一目了然。

缺點(diǎn)：太占空間，導(dǎo)致首屏內(nèi)容信息呈現(xiàn)量大打折扣，從而影響結(jié)果數(shù)據(jù)的展示。

使用建議：

• 篩選條件較少（2行以內(nèi)），且需要直觀展示的篩選項(xiàng)的場(chǎng)景下可以使用。
• 用于信息密集型產(chǎn)品，需要在篩選項(xiàng)中頻繁切換以定位目標(biāo)信息，如：電商、視頻網(wǎng)站。

2）收折式

優(yōu)點(diǎn)：非常節(jié)省空間，并且對(duì)多種數(shù)據(jù)格式兼容，例如：日期、地址、時(shí)間等。

缺點(diǎn)：無(wú)法直觀看到篩選項(xiàng)，已選項(xiàng)與對(duì)應(yīng)篩選條件也無(wú)法很好對(duì)應(yīng)起來(lái)，使用時(shí)需要點(diǎn)擊后才能選擇選項(xiàng)，不夠快捷。

使用建議：

• 有大量篩選條件要展示，且需頁(yè)面空間有限的場(chǎng)景下使用。
• 使用該方式，由于已選項(xiàng)的可見(jiàn)性不太好，因此，需要通過(guò)其他方式彌補(bǔ)已選項(xiàng)可見(jiàn)性。

3）錄入式

錄入式即下拉框樣式，比起平鋪式和收折式，錄入式能夠在空間利用率和信息獲取效率上取得較好的平衡。

優(yōu)點(diǎn)：空間利用率比平鋪要高，形式簡(jiǎn)單易理解。同時(shí)可以兼容多種數(shù)據(jù)格式（數(shù)字、文本、標(biāo)簽、布爾值、枚舉值等）。

缺點(diǎn)：無(wú)法直觀看到備選項(xiàng)，需要點(diǎn)擊下拉框后才能選擇選項(xiàng)，不夠快捷。

4）表頭篩選

優(yōu)點(diǎn)：篩選當(dāng)前列，比較直觀。
缺點(diǎn)：篩選的內(nèi)容僅限于特定、單次列的篩選，對(duì)于首次使用者來(lái)說(shuō)交互形式需要學(xué)習(xí)。且在每個(gè)表頭都會(huì)有一個(gè)icon，影響用戶對(duì)于表頭信息的識(shí)別。
使用建議：

• 用于頁(yè)面有表格時(shí)，但受到表頭信息的限制，篩選條件僅限于特定、單次列的內(nèi)容。
• 篩選前和篩選后，需要在表頭上樣式上給用戶明確區(qū)分。

五、如何設(shè)計(jì)

為了幫助用戶在海量的信息中快速定位到需要的內(nèi)容，搜索雖然是最直接的檢索方式，但當(dāng)結(jié)果信息的層級(jí)和維度都較復(fù)雜時(shí)需要結(jié)合篩選和導(dǎo)航，去收窄信息范圍，提高尋找的效率。

因此在復(fù)雜表格數(shù)據(jù)中，經(jīng)常會(huì)將幾種檢索方式結(jié)合起來(lái)使用。那么，我們?cè)谠O(shè)計(jì)的時(shí)候該從哪些維度去思考呢？體驗(yàn)設(shè)計(jì)的本質(zhì)是建立在以用戶為中心的基礎(chǔ)之上，而對(duì)于使用中后系統(tǒng)的用戶來(lái)說(shuō)，核心訴求是穩(wěn)定和效率。

數(shù)據(jù)檢索是為了解決用戶“查數(shù)據(jù)”的問(wèn)題，因此需要確保用戶查詢結(jié)果的準(zhǔn)確和檢索過(guò)程的高效。基于這兩點(diǎn)出發(fā)，總結(jié)了以下幾點(diǎn)在設(shè)計(jì)中的思考維度。

1. 用戶認(rèn)知

衡量體驗(yàn)的好壞，最重要的一點(diǎn)就是，是否符合用戶認(rèn)知。尤其在模式相對(duì)固定的當(dāng)下，讓用戶適應(yīng)并習(xí)慣新的模式并非易事。

因此在使用一些新奇的模式時(shí)，需要慎重考慮用戶群體的接受度。

2. 使用頻率

用戶使用頻率是界面設(shè)計(jì)的一個(gè)重要考量因素，我們通常都會(huì)把高頻使用的功能放在顯眼且容易操作的位置。

同理，對(duì)于篩選模式，我們也會(huì)依據(jù)篩選條件的高低頻進(jìn)行設(shè)計(jì)。例如：高頻使用的篩選條件我們會(huì)優(yōu)先使用平鋪的篩選模式。

3. 頁(yè)面空間

在有限的頁(yè)面空間中，需要確保用戶對(duì)核心信息的瀏覽。上文已經(jīng)提到，一些模式的出現(xiàn)就為了應(yīng)對(duì)界面空間不足的情況，而我們也需要基于有限的界面空間選擇合適的篩選模式。

但在節(jié)省頁(yè)面空間的同時(shí)，也需要平衡其他可用性問(wèn)題，例如：

• 篩選入口與承載的篩選控件在空間關(guān)系上關(guān)聯(lián)較弱，導(dǎo)致用戶的操作路徑被延長(zhǎng)和信息隔離的問(wèn)題。
• 當(dāng)篩選功能被收起在一個(gè)小入口時(shí)，它的可見(jiàn)性也會(huì)隨之降低的問(wèn)題。

4. 可見(jiàn)性

針對(duì)篩選模式的可見(jiàn)性，可以分三個(gè)點(diǎn)去考慮：篩選條件本身的可見(jiàn)性、篩選項(xiàng)的可見(jiàn)性和選中項(xiàng)的可見(jiàn)性。

篩選條件的可見(jiàn)性通常是由使用頻率來(lái)決定的，但有時(shí)候，不同用戶對(duì)信息的需求會(huì)不一致，這時(shí)就很難判斷哪個(gè)頻率更高。面對(duì)這種情況，只能將所有的篩選條件展示出來(lái)供用戶選擇。

篩選項(xiàng)的可見(jiàn)性影響模式的選擇，平鋪式篩選的可見(jiàn)性比下拉式更高，但有些業(yè)務(wù)場(chǎng)景并不需要讓用戶看見(jiàn)篩選項(xiàng)。當(dāng)然，我們還需要結(jié)合具體業(yè)務(wù)場(chǎng)景考慮，如：用戶是否熟悉備選項(xiàng)？是否期望強(qiáng)化備選項(xiàng)？

選中項(xiàng)的可見(jiàn)性即當(dāng)選中選項(xiàng)后再次查看選中項(xiàng)的難易程度，可以從兩點(diǎn)去考慮：

1. 用戶進(jìn)入該頁(yè)面，系統(tǒng)是否已經(jīng)默認(rèn)有選中某些選項(xiàng)，那么這種狀態(tài)需要讓用戶感知。
2. 用戶對(duì)自己選擇的選項(xiàng)，是否需要回看。

5. 性能

數(shù)據(jù)量大才需要查詢工具，而數(shù)據(jù)量大也伴隨著性能問(wèn)題。在查詢控件中，有兩種：

1. 需要設(shè)置條件后點(diǎn)擊“確認(rèn)/查詢”按鈕，才能觸發(fā)結(jié)果。適用于用戶一次性添加多個(gè)條件，一并進(jìn)行查詢，對(duì)應(yīng)的結(jié)果肯定是用戶需要的結(jié)果。
2. 查詢一個(gè)條件后實(shí)時(shí)出結(jié)果，適用于用戶需要基于結(jié)果判斷是否需要添加查詢條件。基于查詢條件一點(diǎn)一點(diǎn)收窄結(jié)果，直到找出目標(biāo)。

六、案例解析

在微盟電商零售業(yè)務(wù)的舊版商家后臺(tái)中，列表頁(yè)篩選存在較多體驗(yàn)問(wèn)題，需進(jìn)行優(yōu)化。

1. 問(wèn)題梳理

從上圖可以看出，主要問(wèn)題如下：

• 篩選模式難理解：使用開(kāi)關(guān)控制篩選條件的顯示/隱藏
• 功能分區(qū)不明確：篩選和操作混排在一起
• 空間利用率太低：篩選項(xiàng)全部平鋪，影響結(jié)果數(shù)據(jù)的查看
• 體驗(yàn)路徑不連貫：彈窗篩選無(wú)法明顯感知內(nèi)容變化，切換條件時(shí)成本過(guò)高
• 體驗(yàn)缺乏一致性：更多篩選條件有的用彈窗承載，有的在當(dāng)前頁(yè)平鋪

總結(jié)起來(lái)，以上的問(wèn)題主要影響了信息獲取效率，提高了數(shù)據(jù)過(guò)濾的操作成本，影響了篩選體驗(yàn)一致性。因此，接下來(lái)的優(yōu)化方向如下：

• 優(yōu)化信息結(jié)構(gòu)
• 優(yōu)化操作路徑
• 考慮方案擴(kuò)展性

2. 競(jìng)品分析

為了更讓競(jìng)品分析更具有參考意義，選擇了相似業(yè)務(wù)場(chǎng)景的幾款產(chǎn)品：有贊商城、千牛商家后臺(tái)、拼多多商家后臺(tái)。

接下來(lái)通過(guò)以下幾個(gè)維度進(jìn)行分析：篩選布局、篩選模式、篩選結(jié)果觸發(fā)方式、多個(gè)篩選條件的處理方式，與其他元素的關(guān)系。

3. 分析總結(jié)

• 篩選條件的使用頻率：最主要的幾個(gè)業(yè)務(wù)場(chǎng)景（商品、訂單），存在一部分條件常用，一部分不常用。有頻率的差異性，因此，可根據(jù)需要進(jìn)行顯示/隱藏。
• 用戶對(duì)備選項(xiàng)的預(yù)判：基于主要業(yè)務(wù)場(chǎng)景（商品、訂單），用戶不存在認(rèn)知問(wèn)題，再結(jié)合空間利用率綜合考慮，下拉框模式是個(gè)很好的選擇。
• 更多篩選條件：從已有業(yè)務(wù)場(chǎng)景來(lái)看，篩選條件的數(shù)據(jù)格式都較為簡(jiǎn)單（輸入、選擇、日期），這種情況下，折疊展開(kāi)方式就能較好的承載，并且要比彈窗/抽屜展開(kāi)更流暢?？紤]到篩選條件過(guò)多，展開(kāi)后會(huì)影響列表數(shù)據(jù)的展示，因此需要處理好縱向空間和擴(kuò)展問(wèn)題。
• 頁(yè)面橫向空間：左側(cè)已被導(dǎo)航占據(jù)了較寬的空間，右側(cè)又多為復(fù)雜表格（如商品、訂單列表），上下布局是最好的選擇。
• 已選項(xiàng)：基于主要業(yè)務(wù)場(chǎng)景（商品、訂單），用戶每次進(jìn)來(lái)目標(biāo)基本上是比較明確的，如：我就是要找這一類商品或這一類訂單。假如篩選結(jié)果為空，我就會(huì)認(rèn)為沒(méi)有這一類數(shù)據(jù)。盡管沒(méi)有找到目標(biāo)，但我的任務(wù)也已經(jīng)結(jié)束，所以回看選中項(xiàng)的可能性也不大。
• 性能：商品和訂單數(shù)據(jù)都較大較復(fù)雜，加上查詢商品和訂單更多場(chǎng)景是一次性添加多個(gè)條件，一并進(jìn)行查詢，因此使用點(diǎn)擊按鈕后查詢更合適。

商家后臺(tái)業(yè)務(wù)中存在需要基于狀態(tài)查看的訂單/商品，由于操作較為高頻，下拉框篩選樣式雖然更能平衡效率與空間問(wèn)題，但效率較低，因此特殊場(chǎng)景下需要配合標(biāo)簽切換的方式。

4. 優(yōu)化方案

1）優(yōu)化信息結(jié)構(gòu)

舊版：搜索、篩選和更多篩選條件排列無(wú)序，不符合閱讀習(xí)慣。

新版：篩選區(qū)信息組合方式基于用戶行為路徑：搜索 → 篩選 →更多篩選。

舊版：篩選、全局操作、批量操作混合在一起，難以識(shí)別，操作效率低。

新版：清晰區(qū)分篩選和批量操作，保持操作與操作對(duì)象（表格數(shù)據(jù)）的親密性。

2）優(yōu)化操作路徑

舊版：部分頁(yè)面使用彈窗承載篩選條件，有打斷感，且搜索和其他條件組合篩選場(chǎng)景下要在不同地方選擇，成本較高。

新版：在當(dāng)前位置直接展開(kāi)，篩選后實(shí)時(shí)感知結(jié)果數(shù)據(jù)變化。設(shè)置最大高度，確保表格信息能正常瀏覽。

舊版：常用的狀態(tài)過(guò)濾（如訂單狀態(tài)、商品審核狀態(tài)）收在高級(jí)篩選中，加長(zhǎng)用戶的操作路徑。

新版：在原來(lái)基礎(chǔ)上篩選上結(jié)合了標(biāo)簽切換模式，更加高效便捷。

七、總結(jié)

本文從數(shù)據(jù)檢索的方式、篩選功能的布局模式及設(shè)計(jì)中的思考點(diǎn)等多個(gè)維度，并結(jié)合了實(shí)際案例，分享了在中后臺(tái)系統(tǒng)中列表頁(yè)的數(shù)據(jù)檢索功能設(shè)計(jì)。

但由于業(yè)務(wù)的復(fù)雜性，仍有一些尚未提及，如報(bào)表類的數(shù)據(jù)過(guò)濾、自定義篩選條件等復(fù)雜的篩選模式。篇幅有限，暫不做擴(kuò)展。

以上更多是從用戶可用性角度去思考和分析數(shù)據(jù)過(guò)濾功能，可能不能適用于所有的業(yè)務(wù)場(chǎng)景。我想說(shuō)的是，在實(shí)際業(yè)務(wù)中，我們還需要站在產(chǎn)品和業(yè)務(wù)的角度去分析和思考，以此找到最合適的方案。

參考文獻(xiàn)：
[1]表格數(shù)據(jù)檢索（一）
[2]B端體驗(yàn)設(shè)計(jì)專題——表格篇

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

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