起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計指南：中后臺系統數據檢索功能
編輯導語：一個體驗感良好的數據檢索功能，能夠幫助用戶在海量的信息中快速定位到需要的內容。本文作者從檢索方式、布局和樣式等多個維度，并結合實際案例，分享了在中后臺系統中列表頁的數據檢索功能設計，希望能給你帶來幫助。
在中后臺系統中，列表頁是使用最多的頁面形式之一。為了幫助用戶在海量的信息中快速定位到需要的內容，我們會提供一些數據檢索工具來進行輔助定位。那么將如何設計一個體驗感良好的數據檢索功能呢？接下來我將從檢索方式、布局和樣式等多個維度并結合實際案例來解析相關設計。
一、有哪些檢索方式
我們在實際生活中逛店買東西時，如果想要找一件商品，大概率會有以下幾種方式:
1）如果這家店東西沒那么多，直接的方式是從將整個店的東西從頭到尾看一遍，直到看見你需要的，這是最本能尋找信息的方式——直接查找。
2）如果你逛的是一家大型超市，直接查找顯然不切實際，但可以根據那件商品大致判斷出是屬于哪一類，先找到分類，在定位分類下的這個商品。這是第二種尋找信息的方式——按分類查找。
3）如果你買的商品有一些特殊標記（如顏色是紅色），就可以直接去找對應顏色，這種尋找信息的方式就是——按標記查找。
綜上所述，在尋找信息時，會有三種行為模式：
- 直接查找
- 按信息分類查找
- 按信息的標記查找
而這三種行為模式剛好對應著三種檢索方式：
- 搜索
- 導航
- 篩選
二、搜索
搜索可以幫助用戶在巨大的信息池中縮小目標范圍，快速而準確的定位到目標數據，并速獲取需要的信息。接下來將從搜索樣式和搜索結果的觸發方式，兩個維度來解析如何設計搜索功能。
1. 搜索樣式
從搜索目標信息的路徑來說，不同路徑對應不同的展示樣式，主要有模糊搜索和分標簽搜索。
1）模糊搜索
優點：操作便捷，用戶想要什么輸就完事兒了。
缺點：容易把不相關的內容搜出來，結果匹配不夠精準。
2）分標簽搜索
優點：結果匹配較為精準。
缺點：操作不方便，每次都需要先切換對應標簽在輸入搜索。
2. 結果觸發方式
結果觸發方式包含兩種：實時觸發和手動觸發。
1）實時觸發
在輸入過程中實時匹配結果，對搜索結果即時反饋，引導性強，效率高。適用于搜索數據量小或本地數據的情況。例如：數據量較少的列表。
優點：效率高。
缺點：過程中匹配對計算能力要求高，若計算能力跟不上則需要加載等待，從而影響體驗。
2）手動觸發
輸入完成后，需回車鍵或點擊按鈕觸發搜索。適用于在大量信息中搜索，或需要單獨搜索結果頁的情況，例如：全局搜索、大量數據的表格等。
優點：結果數據確定性高。
缺點：輸完多一步操作，成本略高。
三、導航
列表頁數據過濾場景下使用的導航，主要是指標簽切換樣式，多用于和時間、狀態的流轉等高頻切換的場景，選項之間的數據一般互相獨立沒有交集。
優點：劃分清晰，切換便捷。
缺點：需確保每一項的數據沒有交集，數量也不能過多，最好控制在5個以內。
使用建議：默認選中的標簽最好是用戶最常用的選項。
四、篩選
篩選可以幫助用戶縮小數據范圍，逐步找到想要的內容；或者當用戶的目標就是查看某一范圍的數據時，也可以通過篩選實現。
體驗良好的篩選功能，需要充分考慮用戶的需求和具體的業務場景，選擇合適的篩選布局、樣式。除此之外，還要處理好與其他元素之間的關系。確保頁面各個元素之間的合理性。
1. 篩選區布局
設計篩選功能時，需結合整體頁面元素，思考與篩選功能之間的關系，尤其是與列表數據的布局關系。
1）上下布局
優點：節省頁面橫向空間，尤其在使用表格展示數據時，能最大化利用橫向空間來展示表格字段，便于閱讀和操作。
缺點：當篩選字段過多時會占用縱向高度，影響結果數據的查看。
使用建議：
- 當篩選項或常用篩選項較少時使用
- 使用時，可以收起不常用的，保證篩選區不會占用太多縱向空間，同時將常用篩選項露出，以此來滿足用戶的業務需求和使用場景
2）左右布局
優點：能將所有篩選字段都直接展示出來，節省頁面縱向空間，可對篩選條件和結果列表同時查看。當篩選條件較多時可縱向滾動，有較強的的擴展性。
缺點：占用橫向空間。
使用建議：
- 常用篩選條件較多，且需要直觀展示出來的場景下使用。
- 需要頻繁切換篩選項，并需要對照查看篩選結果時使用。
3）浮層（彈窗/抽屜）
篩選功能通過頁面中收起的入口，點擊后以彈窗或抽屜的形式去承載篩選內容。
優點：節省空間，可以兼容任何形組件及各種組件組合。
缺點：浮層會遮擋一部分表單數據，會影響用戶的判斷，由于篩選區域與結果展示區域不在同一頁面，整個篩選過程將會存在較強的打斷感和割裂感。
使用建議：
- 頁面空間有限，且篩選功能不是很高頻使用。
- 篩選內容較多，且形式較為復雜時使用。
2. 篩選模式
1）平鋪式
平鋪式將篩選條件對應的選項全部或者部分平鋪展示出來。
優點：很直觀，操作效率高。且在選中多個選項后，用戶仍能清晰知道他的選中項是什么、備選項有哪些，一目了然。
缺點：太占空間，導致首屏內容信息呈現量大打折扣，從而影響結果數據的展示。
使用建議：
- 篩選條件較少（2行以內），且需要直觀展示的篩選項的場景下可以使用。
- 用于信息密集型產品，需要在篩選項中頻繁切換以定位目標信息，如：電商、視頻網站。
2）收折式
優點：非常節省空間，并且對多種數據格式兼容，例如：日期、地址、時間等。
缺點：無法直觀看到篩選項，已選項與對應篩選條件也無法很好對應起來，使用時需要點擊后才能選擇選項，不夠快捷。
使用建議：
- 有大量篩選條件要展示，且需頁面空間有限的場景下使用。
- 使用該方式，由于已選項的可見性不太好，因此，需要通過其他方式彌補已選項可見性。
3）錄入式
錄入式即下拉框樣式，比起平鋪式和收折式，錄入式能夠在空間利用率和信息獲取效率上取得較好的平衡。
優點：空間利用率比平鋪要高，形式簡單易理解。同時可以兼容多種數據格式（數字、文本、標簽、布爾值、枚舉值等）。
缺點：無法直觀看到備選項，需要點擊下拉框后才能選擇選項，不夠快捷。
4）表頭篩選
優點：篩選當前列，比較直觀。
缺點：篩選的內容僅限于特定、單次列的篩選，對于首次使用者來說交互形式需要學習。且在每個表頭都會有一個icon，影響用戶對于表頭信息的識別。
使用建議：
- 用于頁面有表格時，但受到表頭信息的限制，篩選條件僅限于特定、單次列的內容。
- 篩選前和篩選后，需要在表頭上樣式上給用戶明確區分。
五、如何設計
為了幫助用戶在海量的信息中快速定位到需要的內容，搜索雖然是最直接的檢索方式，但當結果信息的層級和維度都較復雜時需要結合篩選和導航，去收窄信息范圍，提高尋找的效率。
因此在復雜表格數據中，經常會將幾種檢索方式結合起來使用。那么，我們在設計的時候該從哪些維度去思考呢？體驗設計的本質是建立在以用戶為中心的基礎之上，而對于使用中后系統的用戶來說，核心訴求是穩定和效率。
數據檢索是為了解決用戶“查數據”的問題，因此需要確保用戶查詢結果的準確和檢索過程的高效?；谶@兩點出發，總結了以下幾點在設計中的思考維度。
1. 用戶認知
衡量體驗的好壞，最重要的一點就是，是否符合用戶認知。尤其在模式相對固定的當下，讓用戶適應并習慣新的模式并非易事。
因此在使用一些新奇的模式時，需要慎重考慮用戶群體的接受度。
2. 使用頻率
用戶使用頻率是界面設計的一個重要考量因素，我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。
同理，對于篩選模式，我們也會依據篩選條件的高低頻進行設計。例如：高頻使用的篩選條件我們會優先使用平鋪的篩選模式。
3. 頁面空間
在有限的頁面空間中，需要確保用戶對核心信息的瀏覽。上文已經提到，一些模式的出現就為了應對界面空間不足的情況，而我們也需要基于有限的界面空間選擇合適的篩選模式。
但在節省頁面空間的同時，也需要平衡其他可用性問題，例如：
- 篩選入口與承載的篩選控件在空間關系上關聯較弱，導致用戶的操作路徑被延長和信息隔離的問題。
- 當篩選功能被收起在一個小入口時，它的可見性也會隨之降低的問題。
4. 可見性
針對篩選模式的可見性，可以分三個點去考慮：篩選條件本身的可見性、篩選項的可見性和選中項的可見性。
篩選條件的可見性通常是由使用頻率來決定的，但有時候，不同用戶對信息的需求會不一致，這時就很難判斷哪個頻率更高。面對這種情況，只能將所有的篩選條件展示出來供用戶選擇。
篩選項的可見性影響模式的選擇，平鋪式篩選的可見性比下拉式更高，但有些業務場景并不需要讓用戶看見篩選項。當然，我們還需要結合具體業務場景考慮，如：用戶是否熟悉備選項？是否期望強化備選項？
選中項的可見性即當選中選項后再次查看選中項的難易程度，可以從兩點去考慮：
- 用戶進入該頁面，系統是否已經默認有選中某些選項，那么這種狀態需要讓用戶感知。
- 用戶對自己選擇的選項，是否需要回看。
5. 性能
數據量大才需要查詢工具，而數據量大也伴隨著性能問題。在查詢控件中，有兩種：
- 需要設置條件后點擊“確認/查詢”按鈕，才能觸發結果。適用于用戶一次性添加多個條件，一并進行查詢，對應的結果肯定是用戶需要的結果。
- 查詢一個條件后實時出結果，適用于用戶需要基于結果判斷是否需要添加查詢條件?；诓樵儣l件一點一點收窄結果，直到找出目標。
六、案例解析
在微盟電商零售業務的舊版商家后臺中，列表頁篩選存在較多體驗問題，需進行優化。
1. 問題梳理
從上圖可以看出，主要問題如下：
- 篩選模式難理解：使用開關控制篩選條件的顯示/隱藏
- 功能分區不明確：篩選和操作混排在一起
- 空間利用率太低：篩選項全部平鋪，影響結果數據的查看
- 體驗路徑不連貫：彈窗篩選無法明顯感知內容變化，切換條件時成本過高
- 體驗缺乏一致性：更多篩選條件有的用彈窗承載，有的在當前頁平鋪
總結起來，以上的問題主要影響了信息獲取效率，提高了數據過濾的操作成本，影響了篩選體驗一致性。因此，接下來的優化方向如下：
- 優化信息結構
- 優化操作路徑
- 考慮方案擴展性
2. 競品分析
為了更讓競品分析更具有參考意義，選擇了相似業務場景的幾款產品：有贊商城、千牛商家后臺、拼多多商家后臺。
接下來通過以下幾個維度進行分析：篩選布局、篩選模式、篩選結果觸發方式、多個篩選條件的處理方式，與其他元素的關系。
3. 分析總結
- 篩選條件的使用頻率：最主要的幾個業務場景（商品、訂單），存在一部分條件常用，一部分不常用。有頻率的差異性，因此，可根據需要進行顯示/隱藏。
- 用戶對備選項的預判：基于主要業務場景（商品、訂單），用戶不存在認知問題，再結合空間利用率綜合考慮，下拉框模式是個很好的選擇。
- 更多篩選條件：從已有業務場景來看，篩選條件的數據格式都較為簡單（輸入、選擇、日期），這種情況下，折疊展開方式就能較好的承載，并且要比彈窗/抽屜展開更流暢?？紤]到篩選條件過多，展開后會影響列表數據的展示，因此需要處理好縱向空間和擴展問題。
- 頁面橫向空間：左側已被導航占據了較寬的空間，右側又多為復雜表格（如商品、訂單列表），上下布局是最好的選擇。
- 已選項：基于主要業務場景（商品、訂單），用戶每次進來目標基本上是比較明確的，如：我就是要找這一類商品或這一類訂單。假如篩選結果為空，我就會認為沒有這一類數據。盡管沒有找到目標，但我的任務也已經結束，所以回看選中項的可能性也不大。
- 性能：商品和訂單數據都較大較復雜，加上查詢商品和訂單更多場景是一次性添加多個條件，一并進行查詢，因此使用點擊按鈕后查詢更合適。
商家后臺業務中存在需要基于狀態查看的訂單/商品，由于操作較為高頻，下拉框篩選樣式雖然更能平衡效率與空間問題，但效率較低，因此特殊場景下需要配合標簽切換的方式。
4. 優化方案
1）優化信息結構
舊版：搜索、篩選和更多篩選條件排列無序，不符合閱讀習慣。
新版：篩選區信息組合方式基于用戶行為路徑：搜索 → 篩選 →更多篩選。
舊版：篩選、全局操作、批量操作混合在一起，難以識別，操作效率低。
新版：清晰區分篩選和批量操作，保持操作與操作對象（表格數據）的親密性。
2）優化操作路徑
舊版：部分頁面使用彈窗承載篩選條件，有打斷感，且搜索和其他條件組合篩選場景下要在不同地方選擇，成本較高。
新版：在當前位置直接展開，篩選后實時感知結果數據變化。設置最大高度，確保表格信息能正常瀏覽。
舊版：常用的狀態過濾（如訂單狀態、商品審核狀態）收在高級篩選中，加長用戶的操作路徑。
新版：在原來基礎上篩選上結合了標簽切換模式，更加高效便捷。
七、總結
本文從數據檢索的方式、篩選功能的布局模式及設計中的思考點等多個維度，并結合了實際案例，分享了在中后臺系統中列表頁的數據檢索功能設計。
但由于業務的復雜性，仍有一些尚未提及，如報表類的數據過濾、自定義篩選條件等復雜的篩選模式。篇幅有限，暫不做擴展。
以上更多是從用戶可用性角度去思考和分析數據過濾功能，可能不能適用于所有的業務場景。我想說的是，在實際業務中，我們還需要站在產品和業務的角度去分析和思考，以此找到最合適的方案。
參考文獻：
[1]表格數據檢索（一）
[2]B端體驗設計專題——表格篇
本文由 @大青哥 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
作者對整個中后臺系統數據檢索功能設計流程非常明晰易懂。