編輯導讀：篩選作為一個常用的功能，在B端産品設計中，篩選區的設置便于用戶進行數據查詢和數據定位，可以快速按照需要對數據進行查詢和篩選。本文作者圍繞篩選這個話題展開了分析，希望對你有幫助。

今天和大家分享的是項目改版中篩選區的功能設計。

一、那麼什麼是篩選？

篩選，也可以稱作過濾器，它屬于搜索框架的一部分主要用于内容提取，将一類數據展示，同時一類數據隐藏，可以整合很多的組件。

在B端産品設計中，篩選區的設置便于用戶進行數據查詢和數據定位，可以快速的按照需要對數據進行查詢和篩選。

在B端産品設計中，篩選的存在對于整個表單來說是非常重要的，它可以幫助用戶在表單茫茫多的數據當中進行快速的數據定位；可以對表單進行快速數據按照自己想要的方式進行劃分，縮短用戶對于數據的尋找時間。

二、篩選區有哪些展現形式？

篩選區常見到的有搜索、條件篩選這二類控件。搜索和篩選雖然同在篩選區，但是二者還是有所差異的。

通過百度百科我們可以了解到：

搜索，意思指仔細查找，搜尋。

篩選，篩選是利用篩子使物料中小于篩孔的細粒物料透過篩面，而大于篩孔的粗粒物料滞留在篩面上，從而完成粗、細料分離的過程。該分離過程可看作是物料分層和細粒透篩兩個階段組成的。物料分層是完成分離的條件，細粒适篩是分離的目的。

在B端系統界面設計中，搜索是通過指定任意條件，系統對此條件進行的檢索後，展示相對應内容，功能偏主動性；篩選是系統提供指定各種條件縮小範圍，可以選擇查找不同條件的内容，功能偏被動性。

無論被動性還是主動性，搜索和篩選這倆個功能都是讓用戶使用某個條件對内容進行區分，從而找到用戶想要的内容。二者在功能上相輔相成，在B端系統的頁面中僅靠搜索或者篩選作為内容篩選都是不夠的，這就需要組合篩選區了。

1. 搜索篩選

精确搜索：

優點：搜索準确率高，所要即所得。

缺點：需要用戶自己輸入，然後進行查詢。需要記憶搜索詳細信息。輸入框需要有提示輸入的内容，方便用戶填寫，以及确認輸入的類别或格式。

适用場景：适用于用戶有清晰的目标，同時需要有查詢/搜索按鈕，來執行篩選。搜索需要配合篩選固有類一起使用。

模糊搜索：

優點：模糊搜索可以用于搜索關鍵字的同義詞，提高搜索的精确性。字段匹配推薦搜索結果，減少記憶負擔，适用于不明确的信息篩選。

缺點：篩選出很多類似相關的内容，需要查找鑒别所要内容，不便捷。

适用場景：用戶對目标模糊，模糊是指不用關心輸入了什麼格式，哪怕錯了，系統也會推薦給用戶相對正确的；用戶需要浏覽操作過濾器提供的信息來輔助篩選達到目标。搜索需要配合篩選固有類一起使用。

搜索的設計原則：

關于搜索，幾乎沒有人不知道，哪怕是不從事設計、産品的人，他們也知道。同時每一個産品，随着規模變大，搜索一定必不可少。那麼如何設計好搜索呢？有哪些原則可以借鑒，總結了以下4個方面。

漸進呈現：

在我們設計搜索時，可以考慮漸進呈現的方式。這是指搜索結果不要一股腦兒都塞給用戶，而是使用逐步擴大的方式，讓用戶慢慢進入目标。但這裡要注意，漸進的層級不要太深，漸進的内容要做到足夠為用戶着想。

結構化：

結構化是指搜索結果呈現的形式要有歸納和整理的意圖，不能反饋給用戶的是沒有層次的内容。簡單來說，分類就是結構化呈現的體現，内容結構化後用戶查找和定位才會更快速。

可操作：

對于搜索結果，我們可以給予操作選擇，例如收藏、分享等，這将會大大提升用戶與搜索結果之間的後續聯系。

可操作性是最佳優先的好夥伴。同時給搜索結果添加使用類操作，這會讓用戶專注于目标。

可保存：

無論搜索任何内容，用戶都有權保存自己常用的搜索結果，保證用戶後續無需重複搜索。這點上已經有很多C端産品做的很好了，我們在B端産品上也可以考慮起來。

2. 條件篩選

下拉篩選：

優點：頁面的空間利用率高，同時下拉起到了很好的收納作用，不占據頁面空間。

缺點：由于下拉的局限性無法觀看到所有的篩選字段，需要操作點擊查看。

适用場景：下拉的篩選字段選項有限，可以明确的總結分類時，一般采用固定選項類。這種操作起來便捷，降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕，但是也有的産品是勾選即執行的。主要需要結合具體的使用場景去判定。

矩陣(平鋪)篩選：

優點：用戶可以直接看到篩選内容，支持輸入更多篩選條件，減少操作步驟提高了用戶篩選的效率。

缺點：平鋪的篩選類目占據頁面空間較大，空間利用率低，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不适合選項太多的情況。

适用場景：平鋪篩選控件的普适性為最強，當沒有其他更好想法時，用平鋪總是一個好的選擇。需要注意的是，篩選條件不要過多（遵循7±2 法則）。

當确實需要支持大量的篩選條件時，有兩種解決方案可供參考：

1. 用戶自行配置篩選條件：對用戶來說，單次篩選會用到的條件是有限的；通過可配置的篩選條件，實現檢索效率和信息噪音的平衡，對于用戶自定義項的體驗與應用都有更好的支持。
2. 隐藏低頻的篩選條件：這種方法需要對用戶需求有明确的把握，哪些篩選條件是高頻、哪些是低頻需要有明确的分界，優點是第一次使用時用戶能更快上手。

表頭篩選：

優點：通過表頭的點擊，簡潔、直觀的篩選當前表格列。

缺點：隻能篩選當前列的内容，篩選字段比較少，篩選形式比較單一。每個表頭都會有篩選的icon，影響用戶對于表頭的識别。表頭篩選學習成本最高，且和表頭排序容易沖突，篩選值展示也不夠直觀。

适用場景：表頭篩選類似Excel表格的操作，是一種相對高級的交互，适合表格列比較單一内容的篩選。

一般來說不推薦使用，僅建議在以下幾種情況考慮使用：

• 空間是在有限或者表格非常靈活；
• 用戶可能對每一列都有篩選需求（如數據報表、Excel）；
• 産品規劃時對于用戶篩選需求不夠明确，也可通過這種模式先采集數據，分析其使用頻次，對後期的界面優化進行指導。

TAB标簽：

優點：篩選條件一目了然，交互步驟少，一個Tab标簽代表一個緯度，平鋪展示篩選内容方便識别，學習成本低。

缺點：Tab标簽篩選字段數量有限制，不宜過多，分類需覆蓋選項，并且保證每一項沒有交集，空間占用多、不夠靈活，對用戶自定義項支持較差。

适用場景：Tab标簽切換一般用于和時間、狀态的流轉有關，且沒有交集的數據内容（可以是同性質，也可以是不同性質）。權重高，選項值不超過5個。

3. 組合篩選

在B端系統表格類頁面中，字段屬性很多，簡單的檢索方式很難準确定位到目标數據，所以在實際使用當中，常會将大量非交叉關系的屬性進行羅列，搜索、篩選、TAB标簽切換組合出現，形成多屬性的組合檢索。而篩選項互相組合，其展示方式有如下幾種：

平鋪式：

平鋪式是将所有篩選項羅列出來平鋪在頁面上，可以兼容多種數據格式比如數字、文本、标簽、枚舉值、布爾值等，包含但不限于日期選擇期、标簽切換、單選框、複選框等多種控件

優點：用戶能直接看到選項内容，方便用戶識别選項，且提高了用戶篩選的效率（節省了篩選操作），大而全的篩選字段最大限度避免篩選條件遺漏的問題。缺點：篩選項多會占據大量頁面空間，信息量過多都是重點等于沒有重點，增加用戶的決策時間，不利于表格數據的直觀展示，此類型一般配合“勾選即執行”使用。

适用場景：普适性為最強，當沒有其他更好想法時，用平鋪總是一個好的選擇。适用于從各個緯度篩選的場景，多維度篩選對信息篩選的顆粒度需求不一緻，同時希望備選項被選中。

折疊式：

折疊式篩選是平鋪式篩選的改進，一種簡單直接的篩選形式，對平鋪的篩選項進行收納，如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的，可以通過折疊的方式将這部分篩選字段隐藏起來，高頻篩選字段外露。

優點：高頻篩條件可優先快速篩選、一定程度上減少用戶的認知負荷，同時占用空間較小。缺點：不好劃分不同用戶的高頻篩選項，當高頻篩選項過多時，頁面同樣會出現信息冗雜、空間占比大等問題。

适用場景：折疊低頻篩選，顯示高頻篩選，能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導性。

4. 篩選區的布局有哪些？

從位置上來說，組合篩選一般有如下幾種常見類型：上下布局水平篩選區、左右布局的垂直側邊篩選區、 内嵌的的表頭篩選區。

上下布局水平篩選區：

最常用的上下布局，篩選區放置在表格頁面的上方，方便用戶識别選項，提高了用戶篩選的效率，明确哪些數據是用戶所需的。上下布局的篩選區也方便用戶進行閱讀，對于那些由不同數據結構組成的頁面，是一個很好的選擇。

上下布局的篩選區的可擴展性差，當篩選項目少于五個的情況下，最常使用的就是上下布局，而當篩選項目多的時候，會占據大量頁面空間，内容在較多時，推薦增加收起功能，這樣保證篩選整體面積不會很大，提升屏效比。

左右布局的垂直側邊篩選區：

左右布局的篩選區一般是以字段選擇進行篩選，篩選區的位置較固定，不會因為篩選項過多而影響頁面中主要内容的位置，可擴展性強，可在收起部分嵌套更多的字段值。

左右布局的好處就是能夠将篩選的所有條件都直接的展示出來，可以适應很多場景，但是這種類型篩選器可以影響整個頁面。我們需要确保頁面上的每個元素都有效地受到篩選的影響，避免造成混亂。

内嵌的表頭篩選區：

表頭篩選是一種複雜的篩選形式，常見于列表中，是一種列表内置篩選形式，适合表格列比較單一内容的篩選，其最開始是源于Excel的篩選形式，點擊表單的篩選按鈕，可以将表頭的篩選字段直接帶入，方便用戶。

5. 篩選區的反饋

篩選區有兩種不同的反饋模式：數據實時更新反饋和數據手動更新反饋。

數據實時更新反饋：

界面将與所有設置的篩選相匹配并對結果進行實時更新。

這種模式的優點是在執行篩選時為用戶提供了一種方便簡單的體驗，可以在每次點擊後立即看到結果。适用于較低風險的交互，一旦處理多選過濾器或更複雜的輸入時可能會造成混亂。當然還需要考慮處理數據的多少，如果應用中數據量巨大，每次更新時間較長，反而會降低用戶的使用效率。

手動更新反饋：

在手動更新反饋模式下，過濾結果隻有在用戶點擊查詢時才會更新。如果用戶想在每次更改後查看結果，必須單擊查詢按鈕。

這種模式适合多緯度複雜的篩選，所有篩選字段設置完畢之後，統一執行操作，和實時反饋結果相比降低篩選等待時間，尤其是在大量數據進行篩選中，優化了用戶體驗。

6. 篩選需要注意哪些問題

什麼情況不适合用篩選？

選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話号碼，注冊用戶郵箱這種無明顯規則的就不适合用篩選組件去查找，用搜索會更好。

篩選分類條件有什麼要求？

一是分類需符合大衆認知的條件。如：按照年月日的認知來選擇，地理位置按照省市區街道…

二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。

高頻篩選操作怎麼樣方便用戶操作？

首先高頻篩選操作不是産研團隊自己主觀臆斷出來的，需要有數據支撐。很多産品為了滿足用戶快捷操作，會在篩選區幫用戶集成常用的快捷操作入口。比如很多電商産品的新品、包郵等快捷篩選。根據不同産品用戶習慣下操作整理出快捷操作入口能提高用戶體驗方便度。

篩選和搜索的區别？

主要區别在于用戶對目标的清晰度不同，需要選用不同組件功能來達到其目的。

在B端系統界面設計中，搜索是通過指定任意條件，系統對此條件進行的檢索後，展示相對應内容；篩選是系統提供指定各種條件縮小範圍，可以選擇查找不同條件的内容。

搜索和篩選都是讓用戶使用某個條件對内容進行區分，從而找到用戶想要的内容。

三、工作中的設計思考

在設計組合篩選的時候，篩選區的設計需要根據業務實際情況進行設計，考慮每個篩選字段和業務場景，來安排合理的篩選展示方式。

那麼到底什麼情況下使用何種篩選模式？我們在設計篩選的時候可以如何思考？顯然，使用頻率和界面空間是兩個非常重要的評判維度。除此之外，我們還可以以可見性、系統性能和用戶認知等維度去深入思考，下面将逐一分析。

頻率：

使用頻率是界面設計的一個重要考量因素，我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理，對于篩選模式，我們也會依據篩選條件的高低頻進行設計。頻率除了影響使用什麼模式外，還會影響篩選條件及篩選項的排列順序，這裡就不多叙述了。

界面空間：

一些界面模式的出現就為了應對界面空間不足的情況。而我們基于有限的界面空間選擇合适的篩選模式是件再正常不過的事。

可見性太弱，當篩選條件都被收納在一個個小小的入口按鈕時，它的可見性也會随之降低，尤其在PC端，一個大屏幕下更難發現。

可見性：

既然說到可見性，不妨展開講講。可見性是一項重要的設計原則之一。一個明顯的道理是，可見總比不可見好，但由于界面空間限制，我們不得不取舍。那麼如何取舍才能保證可用性仍然友好？

針對篩選模式的可見性，我們可以分三個要點去考慮：

1）篩選條件本身的可見性

用戶越難發現，即可見性越低。通常，我們都可以以使用頻率來決定篩選條件的可見程度。但有時候也會失效，因為正如上文所提及，到了篩選這一步通常是顆粒度比較細的分類，否則我們可以用導航解決。但顆粒度越細，用戶對信息的需求就越不一緻。比如，挑一件衣服，有人希望按品牌篩選，有人希望按價格，有人希望按顔色，我們很難判斷哪個頻率更高。面對這種情況，隻能将所有的篩選條件平鋪出來供用戶選擇。例如，淘寶天貓等電商産品往往會使用矩陣式的篩選，而一些數據格式更多樣的B端産品則直接使用輸入式的篩選。

2）篩選項的可見性

篩選項的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高，因為用戶可以直接看到篩選項。但篩選項一定要讓用戶看見嗎？對于這個問題，可直接以篩選項的多少去決策（少則可見，多則不可見），比如一些B端産品，如果将備選項都全平鋪出來可能一個屏幕都放不下，所以隻能将所有篩選項收起。但這是一種極端的情況，缺乏說服力。

用戶對備選項是否足夠熟悉？比如對于一個尺碼的下拉框，我很清楚自己能選擇什麼，但對于一個衣服風格的下拉框，由于我對風格不熟悉，不能預判這個篩選條件能起什麼作用，很可能會将其忽略。

3）選中項的可見性

選中項的可見性，即當我選中某幾項後再次查看選中項的難易程度。

性能：

數據量大才需要篩選，而數據量大必然會有性能問題。在不同場景下，用戶會發生不同的行為，對性能的要求也會不一樣。我們能經常發現一些篩選模式會帶有“确認”按鈕，當用戶設置完篩選條件後不會即時刷新，而需點擊按鈕才能觸發。而有的篩選模式則沒有“确認”按鈕。這分别對應着兩種不同的場景。

第一種場景，如B端産品中的查詢報表場景。我需要找出符合條件A、B、C的所有信息，并進行對比分析，那麼我就會設置篩選條件A、B、C後一并篩選出來，這種情況是一步到位的，我不需要再額外添加條件D或E，所以有“确認”按鈕的篩選模式更符合此場景。反而即時刷新會在我設置篩選條件時造成幹擾。

另外一種場景，常見于B端産品中的查詢列表場景。如果我想找到信息α，通過篩選A後得出10個信息，那麼憑肉眼即可找出信息α，任務結束，但如果篩選A後得出1000個信息，我可能會再添加篩選條件B、C或D，直到篩出的信息能讓我一眼分辨出信息α。換句話說，這時候我的心理模式是即時滿足的，隻要信息縮窄到一定範圍我就會停止添加篩選條件，否則我會繼續添加篩選條件。所以即時刷新能更符合此場景，但與此同時就需要考慮到性能問題。

另外，我們也可從變更頻次和變更概率這兩個維度進行思考。

變更頻次是指用戶反複使用篩選的次數，變更概率是指用戶使用篩選的可能性，一般來說，高頻次必然大概率，但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報表和列表為例，在列表中，雖然很大概率會使用篩選來尋找信息，但由于用戶是即時滿足的，而且滿足即可，所以不會重複變更篩選條件。而在報表中，雖然用戶會一次性設置篩選條件，但需要分析的數據不隻一種，所以會高頻更換篩選項，回想一下我們去分析自己産品或競品的日活月活等數據時，是不是會高頻地切換數據來分析比對？所以，高頻次的篩選就會對性能有更強的要求，而為了避免性能問題，往往也會加上“确認”按鈕。

用戶認知：

最難解決的其實是用戶的認知問題，尤其在模式相對固定的當下，讓用戶适應并習慣新的模式并非易事。我們想出一些創新性的篩選模式時，不要忽略用戶的認知。

案例1：篩選區内容樣式進化-高級篩選

最近公司的系統正在進行整體疊代改版，其中涉及到很多篩選頁面的改造，篩選需要适用于不同用戶角色從各個維度篩選的場景，應對各種複雜的篩選情況。

現有的篩選形式都不完全滿足于需要，從現有業務出發，篩選功能的做法，需要考慮可擴展性，滿足不同用戶角色不同的篩選場景需求；其中影響篩選控件最重要的是用戶的使用頻率，因為用戶的使用頻率和使用方式，直接影響到篩選的形式。

如何解決不同角色不同篩選場景的需求？

對于不同角色不同篩選場景，我們從個性化入手，通過配置篩選來解決用戶想要的篩選，是否可以根據B端系統中的角色、權限來配置？

這種方式可以，通過B端系統的用戶角色權限，綁定篩選字段分類；這種方式看上去很美好，但是應用起來卻比較麻煩，首先對于每個用戶角色所需的篩選字段需要做大量的調研，做到篩選字段适用于用戶，其中無法避免篩選字段與用戶角色不搭配的問題。

其次在用戶角色分配權限上，系統管理員需要配置大量的篩選權限信息，操作比較繁瑣，尤其是中、大型B端系統、後台類會更加繁瑣耗時，這些都不符合B端降本增效的本質。

既然通過角色、權限配置不可取，那麼我們順着篩選可配置的思路來考慮……

那麼是否可以在篩選區進行個性化配置？

我們嘗試下，在篩選區增加設置功能，放個設置按鈕。

設置按鈕已經放置了，可以設置篩選字段的排序、可以開啟、關閉篩選字段。不同的用戶可以根據自己的需要設置個性化的篩選區，這就是高級篩選，解決了不同角色不同篩選場景的需求。

四、總結

關于篩選區的文章到這就結束啦～

本文介紹了關于篩選區的一些内容，在具體項目中，你可能需要根據産品特性和用戶需求進行調整。我也隻是将自己的一段時間的工作進行總結，說的不正确，歡迎大家指正。

正文結束。

推薦：

B端産品垂直性比較強，這裡推薦一些B端設計師和頁面設計推薦，多看多積累。

1、

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部