向前進

當我開始認真的做價值輸出的時候，那其實對于我或者你們來說都是一個很恐怖的事情。成為大牛之前都會有一段慢慢長夜需要我們獨自前行。我已經(jīng)在這長夜里走了6個春秋了，之后希望你們的陪伴讓我在之后走的會不那么孤單。

1、篩選的意義

首先你待知道這個東西是干什么的，他存在的意義是什么。對用戶來說他作用是設(shè)計，只有了解了這些我們在設(shè)計的時候從底層出發(fā)才能更好的運用和做好頁面的篩選功能

我們在B端設(shè)計里，對于一個平臺或工具系統(tǒng)而言其包含的數(shù)據(jù)往往是邏輯復雜其龐大的。在這龐大的數(shù)據(jù)海里，我們能有用精準的篩選方式來定位我們所需要的數(shù)據(jù)。這是一個系統(tǒng)所要具備最基礎(chǔ)的功能，也是提升用戶體驗的關(guān)鍵。

-定位數(shù)據(jù)

大部分時間我們再操作系統(tǒng)時是帶著目的來的，頁面篩選可以幫助用戶對數(shù)據(jù)進行快速的定位可分類，已解決用戶的需要。這樣可以更好的提上我們系統(tǒng)的服務質(zhì)量和水平。

-縮短路徑

對數(shù)據(jù)進行劃分，進而縮短查找路徑和時間，幫助用戶快速找到自己想要的數(shù)據(jù)。解決用戶需求

-內(nèi)容分類

頁面內(nèi)容過于復雜可以用篩選和分類結(jié)合，進行頁面內(nèi)容的分類劃分。

2、篩選類型

在篩選類型上我們根據(jù)不同的場景，可以把篩選分為，這個分類是是比較粗暴的，如果細分我們在基礎(chǔ)篩選里就還可以分出N多了。我的分類原則是不復雜的在各大B端系統(tǒng)組件庫（ant design；TD DESIGN ; 阿科design等）里有的拿來就能用的都歸類為基礎(chǔ)。需要根據(jù)業(yè)務場景需求定制的篩選組件都歸到高級篩選。因為這部分是你需要花心思理解需求的。

-基礎(chǔ)篩選組件

通常有多個篩選條件組合而成，系統(tǒng)預設(shè)好的字段，用戶無法修改。
適用場景：針對特定的業(yè)務和場景，除了關(guān)鍵詞之外還有其他查詢限定詞，既支持模糊搜索也滿足精準定位。大部分的系統(tǒng)場景基本這個基礎(chǔ)篩選都可以搞定。

分類：篩選無非就是、單選、多多選、tep、輸入框、下拉選擇。這些數(shù)據(jù)方式組合成的限定條件，對我們的數(shù)據(jù)或其他進行快速的定位查找。進而縮短我們的需求解決路徑提升我們的用戶體驗。

這些篩選的設(shè)計的組件元素，我在項目里基礎(chǔ)都用過。

-高級篩選組件

篩選條件自定義組合（靈活且占空間?。?。高級篩選占用空間比較小，用戶可以根據(jù)需要自定義篩選條件，不必將所有篩選條件都展示在界面中。使用更靈活，界面更美觀。

高級篩選主要就是靈活多變能夠根據(jù)當前業(yè)務定制符合用戶需求的篩選。我把這一類的定制化的篩選組件都歸結(jié)到高級里。

這是我做的一個項目里對展示內(nèi)容篩選填充字段內(nèi)容的彈窗。

3、篩選的基本板式和常規(guī)樣式

樣式是隨著頁面板式的不同，并不一個一成不變的東西。不要把東西學太死嗎。只要用戶看的懂，有利于提升我們系統(tǒng)的效率。那就怎么簡潔明了怎么來整就完事了。我在項目中就因為要滿足業(yè)務方還要權(quán)衡用戶使用行為習慣做過各種其他的篩選組合和方式。

-常規(guī)布局

篩選功能大部分的布局都會位于、頁面的頂部和左側(cè)。這樣的布局在，用戶視覺和操作上面，都是一種相對效率更高和簡潔的選擇。我做的我們的系統(tǒng)。篩選模塊基本都是統(tǒng)一的安排在頁面的頂部。

-常規(guī)樣式

雖然篩選的樣式可以根據(jù)自己的業(yè)務搞得花里胡哨，但是還是有幾個基礎(chǔ)樣式可以參考的。平鋪；折疊；Tab篩選；單側(cè)選擇；表頭；綜合

平鋪

字面意思，就是把你的篩選條件的選擇都平鋪出來。這樣最大的優(yōu)點就是在操作上直觀高效。缺點就是占用地方太大導致屏效降低。最終體驗得不嘗試。（我們系統(tǒng)大部分頁面都是平鋪篩選，我是很反對的可是沒毛用）

折疊

這是我比較認同的一種篩選方式的樣式。理解起來就是把用戶高頻的篩選條件放出來。把低頻的篩選條件折起來。這樣就兼顧了效率又提上了屏效。這種方式最大的問題是你永遠不知道用戶的想法和你的設(shè)計差的會有多夸張。永遠不知知道自己在用戶眼里有多蠢。

tab篩選

多用于區(qū)分內(nèi)容分類。兩標簽內(nèi)容區(qū)分比較大的情況。這個也會用的很多。本質(zhì)上就是一種分類。

單側(cè)篩選

在板式左右分布的時候可以采用單側(cè)的篩選。他可以是單側(cè)過個復雜篩選條件的方式。也可以是單側(cè)導航的方式（后臺菜單導航不也是一種對整個后臺內(nèi)容的一種篩選嗎，你想對不）

表頭

就是在頁面列表里，對第一字段在表頭上對狀態(tài)或排列方式等的一種數(shù)據(jù)篩選方式。

綜合

就是以上的多種篩選方式，綜合在一個頁面里使用。

4、說說我的項目

在我做的SaaS項目里，那基本上本文所說的各種篩選方式都用上了。是的在項目里基本是這樣的。因為本身我們B端的業(yè)務邏輯比較復雜而且數(shù)據(jù)量比較大。畢竟我負責設(shè)計的SaaS平臺系統(tǒng)是一個服務全國4000＋企業(yè)的大平臺。真的是一點不比哪些大廠設(shè)計師差。

是的在項目里，大部分時間是很難統(tǒng)一用一種篩選方式去處理所有業(yè)務問題的。所以在我的項目里，篩選的設(shè)計運用就是在一個大的框架原則下做到盡量的保持頁面的視覺表現(xiàn)。

在我項目里這個大的框架原則是什么呢。保證業(yè)務流程的通暢、系統(tǒng)操作邏輯的合理。

5、篩選的運用原則

通常我會認為篩選的使用大概可以從以下幾個方面去考慮。

-業(yè)務

你的篩選要符合業(yè)務需求的要求。有沒有提說過沒有業(yè)務的設(shè)計都是耍流氓。

-效率

在滿足業(yè)務的同時你也要考慮用戶的操作效率。怎么的頁面篩選方式才能讓用戶更高效的達成解決自己的需求。

-學習成本

你不要覺得沒有學習成本就是一個好的系統(tǒng)。在現(xiàn)階段B端系統(tǒng)沒有學習成本是一個不可能的事情。但是過高的學習成本，是會極大的降低用戶體驗的。所以要考慮學習成成本和通用性。

最后

篩選個功能其實很簡單。多看看這幾個大廠的組件庫和頁面參考，大部分情況的業(yè)務都是可以解決的。希望這篇文章可以幫到你。

寫到這里感覺還是沒有沒有把這個篩選聊的很清楚。如果要把他聊的在清楚一點，可能就不能單獨的說篩選這個功能模塊。需要結(jié)合到生活場景、業(yè)務場景里面去探討。