向前進(jìn)

當(dāng)我開(kāi)始認(rèn)真的做價(jià)值輸出的時(shí)候，那其實(shí)對(duì)于我或者你們來(lái)說(shuō)都是一個(gè)很恐怖的事情。成為大牛之前都會(huì)有一段慢慢長(zhǎng)夜需要我們獨(dú)自前行。我已經(jīng)在這長(zhǎng)夜里走了6個(gè)春秋了，之后希望你們的陪伴讓我在之后走的會(huì)不那么孤單。

1、篩選的意義

首先你待知道這個(gè)東西是干什么的，他存在的意義是什么。對(duì)用戶來(lái)說(shuō)他作用是設(shè)計(jì)，只有了解了這些我們?cè)谠O(shè)計(jì)的時(shí)候從底層出發(fā)才能更好的運(yùn)用和做好頁(yè)面的篩選功能

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

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

大部分時(shí)間我們?cè)俨僮飨到y(tǒng)時(shí)是帶著目的來(lái)的，頁(yè)面篩選可以幫助用戶對(duì)數(shù)據(jù)進(jìn)行快速的定位可分類，已解決用戶的需要。這樣可以更好的提上我們系統(tǒng)的服務(wù)質(zhì)量和水平。

-縮短路徑

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

-內(nèi)容分類

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

2、篩選類型

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

-基礎(chǔ)篩選組件

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

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

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

-高級(jí)篩選組件

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

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

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

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

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

-常規(guī)布局

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

-常規(guī)樣式

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

平鋪

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

折疊

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

tab篩選

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

單側(cè)篩選

在板式左右分布的時(shí)候可以采用單側(cè)的篩選。他可以是單側(cè)過(guò)個(gè)復(fù)雜篩選條件的方式。也可以是單側(cè)導(dǎo)航的方式（后臺(tái)菜單導(dǎo)航不也是一種對(duì)整個(gè)后臺(tái)內(nèi)容的一種篩選嗎，你想對(duì)不）

表頭

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

綜合

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

4、說(shuō)說(shuō)我的項(xiàng)目

在我做的SaaS項(xiàng)目里，那基本上本文所說(shuō)的各種篩選方式都用上了。是的在項(xiàng)目里基本是這樣的。因?yàn)楸旧砦覀傿端的業(yè)務(wù)邏輯比較復(fù)雜而且數(shù)據(jù)量比較大。畢竟我負(fù)責(zé)設(shè)計(jì)的SaaS平臺(tái)系統(tǒng)是一個(gè)服務(wù)全國(guó)4000＋企業(yè)的大平臺(tái)。真的是一點(diǎn)不比哪些大廠設(shè)計(jì)師差。

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

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

5、篩選的運(yùn)用原則

通常我會(huì)認(rèn)為篩選的使用大概可以從以下幾個(gè)方面去考慮。

-業(yè)務(wù)

你的篩選要符合業(yè)務(wù)需求的要求。有沒(méi)有提說(shuō)過(guò)沒(méi)有業(yè)務(wù)的設(shè)計(jì)都是耍流氓。

-效率

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

-學(xué)習(xí)成本

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

最后

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

寫到這里感覺(jué)還是沒(méi)有沒(méi)有把這個(gè)篩選聊的很清楚。如果要把他聊的在清楚一點(diǎn)，可能就不能單獨(dú)的說(shuō)篩選這個(gè)功能模塊。需要結(jié)合到生活場(chǎng)景、業(yè)務(wù)場(chǎng)景里面去探討。