2023-10-27 ui設計分享達人
當我開始認真的做價值輸出的時候，那其實對于我或者你們來說都是一個很恐怖的事情。成為大牛之前都會有一段慢慢長夜需要我們獨自前行。我已經(jīng)在這長夜里走了6個春秋了，之后希望你們的陪伴讓我在之后走的會不那么孤單。
首先你待知道這個東西是干什么的，他存在的意義是什么。對用戶來說他作用是設計，只有了解了這些我們在設計的時候從底層出發(fā)才能更好的運用和做好頁面的篩選功能
我們在B端設計里，對于一個平臺或工具系統(tǒng)而言其包含的數(shù)據(jù)往往是邏輯復雜其龐大的。在這龐大的數(shù)據(jù)海里，我們能有用精準的篩選方式來定位我們所需要的數(shù)據(jù)。這是一個系統(tǒng)所要具備最基礎的功能，也是提升用戶體驗的關鍵。
大部分時間我們再操作系統(tǒng)時是帶著目的來的，頁面篩選可以幫助用戶對數(shù)據(jù)進行快速的定位可分類，已解決用戶的需要。這樣可以更好的提上我們系統(tǒng)的服務質(zhì)量和水平。
對數(shù)據(jù)進行劃分，進而縮短查找路徑和時間，幫助用戶快速找到自己想要的數(shù)據(jù)。解決用戶需求
頁面內(nèi)容過于復雜可以用篩選和分類結(jié)合，進行頁面內(nèi)容的分類劃分。
在篩選類型上我們根據(jù)不同的場景，可以把篩選分為，這個分類是是比較粗暴的，如果細分我們在基礎篩選里就還可以分出N多了。我的分類原則是不復雜的在各大B端系統(tǒng)組件庫（ant design；TD DESIGN ; 阿科design等）里有的拿來就能用的都歸類為基礎。需要根據(jù)業(yè)務場景需求定制的篩選組件都歸到高級篩選。因為這部分是你需要花心思理解需求的。
通常有多個篩選條件組合而成，系統(tǒng)預設好的字段，用戶無法修改。
適用場景：針對特定的業(yè)務和場景，除了關鍵詞之外還有其他查詢限定詞，既支持模糊搜索也滿足精準定位。大部分的系統(tǒng)場景基本這個基礎篩選都可以搞定。
分類：篩選無非就是、單選、多多選、tep、輸入框、下拉選擇。這些數(shù)據(jù)方式組合成的限定條件，對我們的數(shù)據(jù)或其他進行快速的定位查找。進而縮短我們的需求解決路徑提升我們的用戶體驗。
這些篩選的設計的組件元素，我在項目里基礎都用過。
篩選條件自定義組合（靈活且占空間?。?。高級篩選占用空間比較小，用戶可以根據(jù)需要自定義篩選條件，不必將所有篩選條件都展示在界面中。使用更靈活，界面更美觀。
高級篩選主要就是靈活多變能夠根據(jù)當前業(yè)務定制符合用戶需求的篩選。我把這一類的定制化的篩選組件都歸結(jié)到高級里。
這是我做的一個項目里對展示內(nèi)容篩選填充字段內(nèi)容的彈窗。
樣式是隨著頁面板式的不同，并不一個一成不變的東西。不要把東西學太死嗎。只要用戶看的懂，有利于提升我們系統(tǒng)的效率。那就怎么簡潔明了怎么來整就完事了。我在項目中就因為要滿足業(yè)務方還要權(quán)衡用戶使用行為習慣做過各種其他的篩選組合和方式。
篩選功能大部分的布局都會位于、頁面的頂部和左側(cè)。這樣的布局在，用戶視覺和操作上面，都是一種相對效率更高和簡潔的選擇。我做的我們的系統(tǒng)。篩選模塊基本都是統(tǒng)一的安排在頁面的頂部。
雖然篩選的樣式可以根據(jù)自己的業(yè)務搞得花里胡哨，但是還是有幾個基礎樣式可以參考的。平鋪；折疊；Tab篩選；單側(cè)選擇；表頭；綜合
字面意思，就是把你的篩選條件的選擇都平鋪出來。這樣最大的優(yōu)點就是在操作上直觀高效。缺點就是占用地方太大導致屏效降低。最終體驗得不嘗試。（我們系統(tǒng)大部分頁面都是平鋪篩選，我是很反對的可是沒毛用）
這是我比較認同的一種篩選方式的樣式。理解起來就是把用戶高頻的篩選條件放出來。把低頻的篩選條件折起來。這樣就兼顧了效率又提上了屏效。這種方式最大的問題是你永遠不知道用戶的想法和你的設計差的會有多夸張。永遠不知知道自己在用戶眼里有多蠢。
多用于區(qū)分內(nèi)容分類。兩標簽內(nèi)容區(qū)分比較大的情況。這個也會用的很多。本質(zhì)上就是一種分類。
在板式左右分布的時候可以采用單側(cè)的篩選。他可以是單側(cè)過個復雜篩選條件的方式。也可以是單側(cè)導航的方式（后臺菜單導航不也是一種對整個后臺內(nèi)容的一種篩選嗎，你想對不）
就是在頁面列表里，對第一字段在表頭上對狀態(tài)或排列方式等的一種數(shù)據(jù)篩選方式。
就是以上的多種篩選方式，綜合在一個頁面里使用。
在我做的SaaS項目里，那基本上本文所說的各種篩選方式都用上了。是的在項目里基本是這樣的。因為本身我們B端的業(yè)務邏輯比較復雜而且數(shù)據(jù)量比較大。畢竟我負責設計的SaaS平臺系統(tǒng)是一個服務全國4000＋企業(yè)的大平臺。真的是一點不比哪些大廠設計師差。
是的在項目里，大部分時間是很難統(tǒng)一用一種篩選方式去處理所有業(yè)務問題的。所以在我的項目里，篩選的設計運用就是在一個大的框架原則下做到盡量的保持頁面的視覺表現(xiàn)。
在我項目里這個大的框架原則是什么呢。保證業(yè)務流程的通暢、系統(tǒng)操作邏輯的合理。
通常我會認為篩選的使用大概可以從以下幾個方面去考慮。
你的篩選要符合業(yè)務需求的要求。有沒有提說過沒有業(yè)務的設計都是耍流氓。
在滿足業(yè)務的同時你也要考慮用戶的操作效率。怎么的頁面篩選方式才能讓用戶更高效的達成解決自己的需求。
你不要覺得沒有學習成本就是一個好的系統(tǒng)。在現(xiàn)階段B端系統(tǒng)沒有學習成本是一個不可能的事情。但是過高的學習成本，是會極大的降低用戶體驗的。所以要考慮學習成成本和通用性。
篩選個功能其實很簡單。多看看這幾個大廠的組件庫和頁面參考，大部分情況的業(yè)務都是可以解決的。希望這篇文章可以幫到你。
寫到這里感覺還是沒有沒有把這個篩選聊的很清楚。如果要把他聊的在清楚一點，可能就不能單獨的說篩選這個功能模塊。需要結(jié)合到生活場景、業(yè)務場景里面去探討。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢～希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司