篩選雖然是一個較小的設計模塊，但對于整個
B 端系統來說非常重要。
因為篩選的設計形式看上去單一，但其實內在的變化還是非常之多，導致很多時候我們在做設計的時候，就會非常迷茫。
其實早在 2019 年的時候，篩選就是我寫過的第一篇文章，不知道還有沒有從那篇文章就關注的讀者，應該都是老粉了，可以評論區里留一下言讓我看看。
那個時候 B 端的整體要求比較簡單，也就導致對于篩選的內容剖析并不深入，隨著這些年的行業發展，你會發現篩選的變化非常之大。
既然我是從篩選開始講起的，那我們就嘗試重新將整個篩選進行相應的梳理，帶領大家重新認識整個 B 端組件，B 端設計。
它主要用于系統中數據量較大的情況，會根據數據的
條件、屬性進行細致的分類，以便于縮小數據的結果范圍。在去使用時，會存在有幾個重要知識點：
在使用篩選時，一定是系統當中表格會存在大量數據。但由于在一個系統當中，我們很難做到對用戶的真實數據進行預判，因此在設計表格頁面時就需要搭配設計篩選，它幾乎是一個必要條件。
在用戶使用多個篩選條件時，系統會默認使用 "AND"的條件關系。
除了 AND 之外，還會存在 "OR"以及"NOT"條件關系（也就是：且、或、非），如果要同時使用 且、或、非 的關系，則需要使用復雜篩選組件才能滿足（在文章后半段會講）
比如用戶填寫表單用了
商品類型、商品分類、商品類目
等選擇類組件時，在表格當中就會使用篩選進行檢索；用戶填寫表單用了 商品名稱、商品條碼 等輸入類組件，在表格當中就會使用搜索框進行檢索。
在去做篩選需求，我認為最重要是理解用戶使用表格的目的與習慣。
比如，我們現在你是一名 HR，在表格處會有 800 份簡歷，你的任務是找到 10 份合適的簡歷。
由于數據太多，你不能一個個去查看，因此就需要通過篩選來去做快速的尋找，會有那些篩選條件呢？
所以你會發現想要做好篩選，就必須得去明確表格的真實場景。因為每一個人的工作習慣不同，對于系統理解不同，因此需要去尋找到一個最折中的解決方案。
而在設計時，我們會更關注用戶的使用習慣，也就是通過數據埋點、現場觀察的方式，通過定性、定量的方式去做系統的分析。
篩選的布局，也就是篩選會與表格如何進行搭配呈現。我們先來了解一下不同的布局形式：
上下布局是最常使用的一種布局方式，將篩選放在表格內容上方，用戶可以操作篩選條件并閱讀數據。
上下布局本身沒有字段的限制，如果字段較少，就能占據在表格上方，能夠讓用戶快速操作；如果字段較多，就會讓用戶使用 收折、自定義 等方式進行優化，盡可能減少頁面占比。
通常建議篩選高度不宜過高，如果超過三行（100px左右）就要通過設計進行處理。
左右布局是系統當中較為特殊的方式，因為會將其放置在頁面的左右兩側，讓用戶優先進行篩選操作，再閱讀數據。
但由于左右布局通常都是縱向排列，在篩選項的呈現上會更為容易，因此會更適配篩選條件較多的情況。
通過 彈窗、抽屜、氣泡卡片 等方式，將篩選條件進行呈現。在頁面當中由于是非常駐的情況，因此只能適配非高頻使用的場景。
在這里大家一定要先明白一個概念，頁面當中的布局，其實會與整個用戶的屏幕尺寸（表格可使用尺寸）密切相關。
如果要明確篩選在哪個位置？我們必須優先了解幾種數據：
這里要解決大家一個誤區，在篩選當中我們更關注的是表格內容所能呈現的具體尺寸，而非屏幕尺寸。
（如果對屏幕尺寸不太了解，之前寫過一篇詳細的文章，感興趣大家可以跳轉查看。）
如果表格尺寸以寬屏為主，那我們就可以考慮使用左右布局方式排列；如果表格尺寸以方屏為主，那我們就可以將布局進行上下排列；如果表格尺寸本身太小，屏效很低，那我們就可以進行收折排列。
關于屏效，其實就是表格所占用整體面積的大小比例，計算公式為：頁面面積 / 表格面積 = 屏效比
在之前的文章中寫到過，系統一共會分為四類，不同的類型對應的用戶群體并不相同。
如果是 運營管理型、行業屬性型 的產品，比如 ：有贊、小鵝通、美團商家后臺、小紅書千帆... 由于用戶水平各異，導致我們再去設計的時候，需要去考慮將交互的難度降低，因此在設計的篩選的時候會更為簡單。
如果是一些復雜系統，則會采取更難、占比更低的呈現形式，比如 容器布局，將篩選信息收折，因為一方面時復雜系統信息不可控，因此 使用容器會更容易解決篩選當中的多字段的情況；另一方面是復雜系統的信息密度很高，很難騰出大量空間去呈現篩選。
隨著時間的推移，你會發現篩選的類型非常多不同的形式。很多設計師都會根據自己的業務情況，開始自定義不同的類型形式。
因此我們就嘗試將其進行總結～ 希望能夠有一個更為完整的類型表幫助大家進行理解。
表單篩選就是將篩選模塊通過表單的形式進行呈現，通常位于頁面頂部，能夠使用戶快速點擊。它的門檻很低，幾乎所有的產品都可以使用表單篩選。
當然，在頂部空間有限的情況下，我們也可以使用左右兩側的方式，去呈現表單內容。
如果表單過長，我們就會去考慮通過收折的方式進行排布，這幾乎是每一個表單篩選的必備選項。
如果篩選字段本身不多，又想讓篩選的樣式變得很好，也可以考慮將整個篩選作為一個標簽，放置在輸入框內，這會和表單輸入框形成區分，能夠讓用戶快速知道這是篩選的內容。
外露篩選嚴格來說是表單篩選當中的一個分支，其更加強調在篩選中的選項內容直接外露展示，能夠更快更高效地進行數據選擇。
比如在京東網頁端搜索完一件商品后，就會提供較多的外漏選項來幫助我們提前進行數據的聚焦。
在這里其實就是由于搜索出來的結果過于寬泛，并且很難針對用戶提供個性化的推送，因此可以將外露的篩選放置出來，盡可能的精準搜索的結果。
當然在目前的 B 端產品當中，由于外露的方式所占的空間過大，因此目前在行業中存在兩種解法：
1.像有贊一樣，基于傳統的表單篩選。但會提供部分高頻使用的篩選項進行外露，進而可以提高效率。
比如在 淘寶、京東的網頁端，它們在商品價格處提供了金額的快捷選擇，外露的方式會比用戶單獨進行金額的輸入效率要高。
2.像紛享銷客一樣，由于本身的篩選邏輯異常復雜，會將選項外露的權限給到用戶，讓其進行自定義，從而解決用戶高頻使用的情況。
嚴格意義上來說，指標算不上一種篩選類型，只是想把它拎出來，給到同學們進行學習。
在使用時，就是當用戶想要確切了解不同類型中的具體數值時，可以使用指標圖+篩選融合的方式，實現高效地操作。
比如在一個 HRM 系統當中，候選人表格里 HR 最關注的便是
候選人當前的進度狀態
。這時候我們就可以將指標圖放置在表格頂部，幫助用戶進行點擊，從而快速實現篩選操作，同時也會有數據下鉆的感覺，比起讓用戶重新進行下拉選擇，易用性會更強。
如果你要去使用復雜篩選，也就意味著你的系統當中會存在有非常多的自定義字段，用戶在篩選時會使用 且、或、非 等篩選條件，這時候你的篩選就沒辦法只能這么復雜。
比如
紛享銷客、Coding、ONES、明道云、簡道云
... 它們其實都是在系統當中，提供大量的自定義字段需要用戶進行配置，因此只能使用復雜篩選進行呈現。
比如在 ONES 當中，由于自己是一個研發管理產品，每一個企業的研發流程與字段屬性配置并不相同，因此會使用自定義字段讓用戶自行配置自己的業務。
那自定義字段里面如何進行篩選操作就會非常頭疼，大多數情況下就只能使用復雜篩選來解決問題，因此就會出現下面的這種情況。
這里需要解釋一下復雜篩選的基本結構，第一個選擇器為 篩選字段的選擇、第二個為 篩選對應的運算符、第三個為 所篩選對應的值。
對于復雜篩選來說，我們也會去考慮在設計上對其進行優化。
表頭篩選其實也是我們的老朋友，早在 19 年的時候我們就曾聊到過。
它就是在表格的表頭處提供篩選的入口，當用戶點擊過后去執行篩選的操作。不過在表頭篩選當中，會存在部分特殊情況。
1.為復雜篩選進行優化，因為復雜篩選需要進行復雜的篩選項選擇，而用戶所關注的數據通常也是表格當中的前半段數據，因此便可以實現點擊表頭，添加篩選項的操作。
2.在表頭直接篩選，點擊篩選圖標后，直接展示下拉選項。這就和 Excel 的表格篩選如出一轍，使用門檻也會相對較低。
表頭篩選其實也是篩選過程當中的一種補充，算是篩選不好用時我們可以考慮的一個范疇，比如在復雜篩選時，就可以與表頭篩選進行結合。
既然篩選很麻煩，那如果我每天進入到一個系統當中，都會去使用某一類篩選條件，那有什么辦法嗎？這時候就會去考慮「篩選組」
它其實就是將自己常用的多個篩選條件，通過保存的方式在系統當中記錄下來，這樣就能實現日常高配篩選的快速訪問。
比如在飛書招聘當中，由于候選人的數據字段很多，每一個 HR 的使用習慣并不相同，因此在篩選中你會發現可以添加篩選值以及保存當前篩選數據放置在左側，能夠快速呼出自己想創建的數據。
除了飛書，在紛享銷客也有類似情況，我們可以添加篩選，保存對應的篩選條件，不過在紛享銷客上它們做的更極致，能夠去配置表格的 排序方式、表格中每一個字段的順序，這樣會使整個功能更強大。
當然在 ONES 當中也會存在類似情況，不過他們的解法不一樣，會將保存的篩選組放在頂部，進行 tab 展示，這也會是一種不錯的解決方案。
隨著 AI 能力的不斷擴充，你會發現 AI 與 篩選 之間，存在著一種不可描述的魔力。
因為在業務當中，想要去做數據的篩選分析本身就比較復雜，因此可以通過 AI 的加持，使整個篩選的難度降低，為產品創造出新的機會點。
比如 JIRA 當中，我們可以通過 AI 篩選的方式，將復雜的程序篩選邏輯變為更簡單的直接篩選方式，明顯的效率更高。
在有贊當中，也會有類似的 AI 功能提供給用戶進行對話操作，進而執行篩選。
其實對于常規的字段篩選以外，我們在日常工作中還會有圖片類的篩選情況。
比如我們在監控系統當中，我們就可以使用對應的圖片篩選去精準數據結果，這類型在日常工作中比較少見，因此提供給到大家作為一個參考。
這句話聽上去有些奇怪，但做過篩選的同學就知道，因為我們除了在表格中會使用篩選之外，還會將它與其他很多地方進行關聯。
比如在數據分析頁面當中，我們就需要通過篩選的方式，結合圖表得到我們想要的數據內容。
再到規則的配置頁面中，我們很多數據條件配置選項，也可以使用復雜的篩選得到解決。
落地到實際的業務，比如我需要去做相應的廣告投放，也會通過篩選來配置相應的投放規則。
因此你會發現，雖然我們剛開始只會去講它與表格之間的關系，但真正落地時，它的使用場景會非常的多。這也就導致了我們在做設計的時候，不能僅僅局限于一個維度。
你需要考慮不同場景當中可能會存在的解決方案，不過在前期時可以理解為篩選維度單一，因此將方案收斂一下，做得更為簡單。
因為篩選本身，它能以非常多不同的方式呈現。只要是選擇類的組件，我們都可以使用篩選的方式來進行設計。但由于思維的慣性，導致我們從一開始只會去考慮下拉選擇。而一些常見的交互變種，能夠給我們帶來意想不到的收獲。
比如滑塊，它就能在一些特定的篩選場景中進行使用。因此，需要大家有較為敏銳的嗅覺，同時要在工作中收集足夠多的篩選內容和案例，為后面的設計方案做足準備。
在設計篩選功能時，我們不能期待一勞永逸的解決方案。每個產品都有其獨特的特性和需求，這意味著沒有一種萬能的策略能夠適用于所有場景。
因此，我們必須根據每個產品的具體情況，有針對性地規劃和構建篩選功能的框架。
設計篩選功能應該是一個逐步推進的過程，既要有短期內可實現的計劃，也要有長遠的視角。這要求我們具備前瞻性，能夠預測業務發展中可能遇到的問題，并據此靈活調整設計策略。只有這樣，我們才能確保篩選功能不僅能夠滿足當前的需求，還能適應未來的發展，保持其擴展性和靈活性。
在產品開發的早期階段，如果產品的功能和字段較少，我們應該避免將篩選功能設計得過于復雜。簡化設計不僅可以提升用戶的使用效率，還能有效降低開發成本。
隨著產品的不斷迭代和業務需求的增長，我們可以逐步引入更高級的篩選條件，以此來不斷優化用戶體驗并提升產品的整體性能。這種逐步演進的策略，才是最為合理和有效的。
關于篩選，我認為更多是需要設計師在組件層面上做更多的了解，然后再進行拓展。
在產品初期，我們需要使用表單篩選來盡可能滿足產品的通用性，讓整個項目能夠快速上線。
在產品成長期，我們就可以對表單進行更多特殊樣式的定制，比如外露指標，以優化表單篩選所帶來的不足。
在產品成熟期，就可以使用更多更為復雜的篩選來滿足產品的上限，以獲得更多的可能性。
當然，不同產品的情況可能還是會有所不同，因此這里只能提供一個建議，大家還是需要根據自己的情況來做出相應的調整。
作者：CE青年
鏈接：https://www.zcool.com.cn/article/ZMTYzNTY4MA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
藍藍設計(www.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。