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