那好話不多說，我們正式開始～
在開始之前先來說說 什么是 B 端產品，我們通常也叫做管理后臺。
這里會有兩個問題：“它管理什么？到底如何管理？”給大家三秒鐘可以思考一下。
首先它管理的是數據，無論是 ERP 系統的訂單數據、CRM 的客戶數據、OA 的流程數據，你都會發現管理后臺就是在不停的對數據進行補充、整合。
那到底應該如何管理？簡單來說就是 數據的“增刪改查”，篩選其實就是查詢的一種重要方式。
比如一個客戶關系管理系統（CRM），銷售人員去拜訪客戶就會提前查詢客戶信息，來了解客戶關注內容進而去組織銷售話術。
那這里的篩選應該如何設計？怎樣設計既能高效便利，同時也具備擴展性？那今天我們系統盤點篩選組件究竟應該如何設計？
這里我們先來講講篩選的鄰居“搜索”，因為很多同學其實對于這兩者之間的差別不太了解，只知道它們都是在工具欄當中，都是在做查詢數據的工作。但在功能上是有明顯的區分：
搜索是對系統的關鍵詞進行精準匹配，比如用戶 ID、手機號、昵稱、地址等信息內容
篩選則是給出產品的固定條件選項，比如歸屬人、狀態、類型 等，你可以按需勾選條件，就能得出對應數據
這里稍微多說一句，因為所有的 B 端系統都是由字段組成，而在大的分類上，字段主要包含有輸入、選擇、上傳三大類型。
搜索服務于輸入類字段，比如剛才講到了 用戶 ID、手機號、昵稱、地址等 都是得讓用戶自行輸入才會得到，因此在表單里輸入，在表格當中也是輸入搜索，所以系統是關聯的。
篩選則是選擇類字段，也就是歸屬人、狀態、類型 等，在 B 端系統當中，選擇字段尤為重要，所以在表單處選擇同樣在篩選處也是相同邏輯。
理解篩選與搜索的差異后，我們再來說說篩選～
在篩選的過程當中，有著非常多重要的邏輯需要提前掌握，我們通過簡單的快問快答，幫助大家快速拆解。
第一題：什么是 且、或、非
這是篩選當中必須要了解的基礎運算條件。
且就是篩選的條件必須同時滿足才能出結果，比如一個電商數據分析師，需要篩選潛在高意向客戶，在篩選條件為「時間在近 30 天有支付訂單、近 30 天累計消費金額≥800 元、近 30 天訂單次數≥2 次」，必須同時滿足才會滿足用戶需求。
或就是這些條件滿足任意一個就能出結果，比如還是電商數據，需要尋找對產品有興趣的潛在客戶，就需要篩選「近 90 天內有過人工咨詢記錄、近 30 天內訪問產品詳情頁≥6 次、近 180 天內提交過試用申請」，三個條件滿足任意一個，這樣就能涵蓋更為全面。
非就是這些條件必須排除掉才能出結果，比如電商數據，因為涉及到刷單、退款的情況，需要將其進行清洗，因此在篩選條件上就需要滿足「訂單狀態≠測試訂單、支付狀態≠已退款、客戶類型≠內部員工」，需要同時排除這些數據。
所以對應的篩選運算規則，其實背后都是用戶在使用時需要深度分析使用的最為重要的工具～
第二題：在B端系統當中多個篩選條件默認的運算規則是什么？
A：且 B：或 C：非
在 B 端系統當中，最常用的運算規則就是且，也就是取多個篩選當中的交集。
比如下面這三個篩選項，所計算的呈現規則就是 「銷售負責人是李強」且「銷售時間是 近一個月」且「價值為高價值」的客戶，這樣就是一個典型的且的關系。
因為這種思維方式是最符合用戶的思考邏輯，這也是眾多 B 端系統當中的常見邏輯。
第三題：且、或、非可以同時存在于一個篩選組合當中嗎？
A.可以
B.不可以
它們可以出現在同一個篩選組合當中，因為實際的業務往往是“多條件、多邏輯” 的復合場景。
比如在教育管理系統當中，班主任要篩選 初三年級且數學月考不及格 或 非 住校生 的學生，來針對這兩類人群進行重點管理與監控。
但在篩選的設計當中，為了讓用戶理解邏輯，我們需要通過 條件組（如括號、層級縮進、虛線框）讓用戶直觀感知分組關系，避免依賴抽象的優先級規則。
第四題：如果你是一個設計師，應該如何降低成本表達這個關系？
因為邏輯較為復雜，所以在篩選時有些基礎辦法可以降低門檻。
① 可視化展示篩選運算，如果用戶對于且、或邏輯不太了解，可以使用圖標快速表示
② 實時校驗邏輯規則，不要出現相互矛盾的篩選邏輯
這個功能其實不太好做，但 ONES 做了一個最簡單的邏輯判斷。在且條件當中，同一篩選條件不得選擇兩次，這樣用于避免在且條件當中經常出現的相互矛盾的篩選邏輯。
好的，準備工作已經完成，我們就可以順利了解篩選的類型。
由于篩選的類型眾多，我們會按照 業務復雜度、容器差異 兩個維度，來對篩選進行歸類。
通過業務復雜度，將其分為：基礎篩選、高級篩選、自定義篩選
按照容器差異，將其分為：標簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選
基礎篩選是將 高頻使用（使用頻率≥80%）的篩選條件進行固定，一直保持在頁面中的核心位置，不折疊、不隱藏，讓用戶能夠直接看到的篩選類型。
這是一個最為基礎的篩選方式，在常見的 Ant Design、Arco Design 的頁面模板當中都會有基礎篩選的身影。
使用基礎篩選最為重要的便是 快速觸達，用戶打開頁面就會查看篩選條件，不需要點擊“更多”“展開” 等入口，這能滿足 B 端用戶 高效完成日常操作 的核心需求。
在使用基礎篩選時，我們需要注意以下問題：
① 基礎篩選條件的數量不宜過多，一般 3-4 個最為合適
因為篩選條件過多，就失去了常駐的意義。但在實際業務當中，我們也需要考慮 5 個、7 個這類極端場景，畢竟常駐是最為基礎的方案，難免會遇到特殊情況。（需要在篩選的規則當中進行梳理，將交互邏輯呈現清楚）
② 基礎篩選當中，排序規則會非常重要
一般按照 高頻-低頻 的方式，從左到右依次排列，對于高頻低頻的獲取方式，我們可以數據埋點、卡片分類、問卷調研等多種方式進行搜集。
③ 篩選基礎，樣式就不基礎
基礎篩選有著較多的篩選樣式，大家可以結合自身業務進行選擇，這里推薦樣式一與二，因為展示效率更高～
這里列舉一些常見的基礎篩選產品，大家可以一并查看：
高級篩選是較為復雜的篩選形式，它為了滿足更多 低頻、復雜、個性 的業務需求，通常會提供相對獨立篩選面板，展示更多的篩選條件。
獨立面板也就是我們后續會提到的 浮窗篩選、抽屜篩選、表頭篩選...，所以它們的關系也會相對復雜。
高級篩選與基礎篩選最大的區別在于：
基礎篩選只能覆蓋 3 個左右的高頻篩選，而高級篩選可支持 10 + 維度的靈活組合；常駐只能使用且的邏輯相對簡單，而高級可以有條件組嵌套支持復雜業務邏輯；常駐位置較為固定，而高級則有面板加持，可以更為靈活。
其實選擇高級篩選或者基礎篩選，最大的話語權還是場景。
如果你的篩選是簡單篩選幾個條件，那基礎篩選就已經足夠，反之對篩選條件、篩選效率有著更高要求，我們則會考慮更為復雜的篩選方式。
在使用高級篩選時，這些問題尤為重要：
① 因為高級篩選需要訪問獨立面板，因此在入口的設計就會尤為重要。一般會用文字鏈接或者圖標來提示用戶，便于尋找。
② 基礎篩選與高級篩選可以并存，因為角色不同、使用場景不同，常駐可以作為高頻使用的固定模塊，高級則作為特定角色需要更多篩選的補充，這部分放在下面 篩選的原則-篩選角色化 給大家詳細說明。
這里列舉一些常見的高級篩選產品，大家可以一并查看：
自定義篩選則是在高級篩選的基礎上，進一步業務化。
它是為了滿足 字段不固定、需求差異化 的業務場景，用戶能夠自定義選擇 篩選字段，配置字段的篩選規則。
使用自定義字段最重要的核心要素就是 突破固定字段限制，因為高級篩選是針對產品預設好的固定字段進行篩選，自定義則是用戶可以自行選擇字段，用于適配更為靈活、多變的業務場景，如 CRM 的客戶自定義字段、OA 的流程表單（因為不同的公司對于 流程、客戶信息的管理不太相同，因此需要提供自定義字段進行支持）
在設計自定義篩選時，我們的方案選擇主要受到“篩選頻率、條件復雜度、界面空間”的影響。
① 小入口+大彈窗，以篩選圖標作為入口，點擊過后彈窗展示所有篩選條件。這種方式適合 中低頻（每天 1-3 次）使用篩選，界面空間緊張用大彈窗容納復雜配置
② 展開收起式，當用戶點擊篩選后，將表格與工具欄之間的部分展開，用于呈現篩選條件。它能夠避免彈窗的跳轉感，篩選時用戶的視線可以無需離開表格區域，適用于 篩選條件數量多、高頻使用的場景
③ 固定常駐式，在頂部區域固定，默認展開，這樣就無需點擊入口，這樣更適合“篩選是核心工作流” 的場景
自定義篩選是最難設計的，在使用過程中會有 四大基本元素。
篩選入口：需要讓用戶快速找到入口，同時不干擾主界面。
邏輯運算區：主要就是 且、或 邏輯的展示，只是在運算區域里面，需要考慮切換時究竟應該如何做？
神策數據是通過文字方式，快速展示 且、或 邏輯，并且支持手動直接切換，這個方案目前看來是用戶最容易理解的。
字段選擇區：選擇你所需要篩選的字段，點擊 添加、選擇，整體邏輯較為簡單。
條件組管理區：篩選條件全部展示過的后續動作，比如保存，批量錄入 等相關動作都可以放在條件組管理當中，進行呈現。
接下來的 標簽篩選、折疊篩選、浮窗篩選、抽屜篩選，都是對容器進行分類。因此我們需要進行展開講解，窮舉一下不同容器的形式和變化。
先來說說標簽篩選（外露篩選）
標簽篩選是將重要的篩選選項設計成“可點擊的標簽按鈕”，將篩選過程當中的選項直接來進行展示，目的是為了能夠讓篩選條件，直接暴露出來給到用戶進行使用。
它最重要的是提升效率，針對高頻使用的篩選維度將其外露展示，將多步操作壓縮為 一步點擊，同時能夠凸顯當前的篩選狀態，避免用戶忘記自己選了什么。
在使用標簽篩選時，需要注意這些內容：
比如我想外露的內容是各種狀態，我就可以將其放在頂部，進行指標圖+篩選功能的雜糅，像在小紅書千帆系統當中，對于訂單的多種狀態，就會使用這一技巧，進行呈現。
折疊篩選則是用隱藏的方式，按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當中，點擊展開的篩選類型。
它最重要的價值是要平衡“空間與效率”的問題，當篩選條件 4-8 個時，如果全部平鋪頁面就會過于冗余，如果全部隱藏又會增加操作步驟，折疊篩選通過 “高頻展示 + 低頻折疊”，讓用戶既能快速操作高頻條件，又能按需調用低頻條件，兼顧 “便捷性” 與 “功能完整性”。
正因為這樣的特性，所以很多基礎固定的篩選一旦變多后，通常就會使用折疊的方式進行呈現。
浮窗其實是將篩選包起來，用浮窗進行承載，臨時喚起，用完即走。
在設計時首先會有一個統一的篩選入口，浮窗彈出后設置對應條件，然后點擊確認、取消，浮窗自動收起，不占用頁面只提示有篩選條件。
對于系統而言，它為什么需要浮窗篩選？本質上會有三個原因：
我們之前就有相同的業務，需要將桌面端的部分移植到 Pad 端與移動端，使用浮窗性價比就會更高。
抽屜篩選就是浮窗篩選的另一種表達，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實會發現現在的抽屜篩選已經沒有當年的雄風，感覺大家就避之不談，基本不會使用它。其實也會有幾個原因：
很多之前沿用抽屜篩選的產品，現在都在調整自己的交互方案。
并且因為抽屜的不穩定性，我們其實不太建議同學們使用抽屜進行選擇自己的選項條件。
表頭篩選是一種相對特殊的篩選形式，它是將篩選入口放置在頭部，提供給到用戶進行快捷的篩選操作。
本質上是在滿足長時間使用 Excel 用戶的使用習慣，因為在 Excel 當中表格眾多，對于篩選只能使用一種影響較小，最為通用的做法，隨著 B 端產品的發展，也會發現很多設計方式都被得到了延續。
在理解表頭篩選時，會有兩種使用場景：
① 空間較少，使用表頭篩選可以進行輕量的篩選動作。
這樣點擊篩選過后便可直接選擇篩選選項，執行篩選操作。你可以看到飛書文檔，在主頁列表中就會這樣設計便可以輕量滿足篩選需求。
② 字段太多，需要表頭篩選帶入更多篩選值，進行篩選安排。
這種方案本質上是針對高級篩選的體驗補充，記住！是需要高級篩選 or 自定義篩選時才會用到篩選策略。
因為在這兩種篩選當中，需要選擇篩選字段，有大量的選項，這對用戶來說會十分影響其正常使用，通過表頭處的點擊，就能夠將字段默認帶入，縮短篩選路徑，提高篩選效率。
這種方案的表頭篩選也會有相應弊端，首先是表頭空間問題，因為表頭本身需要展示的信息就相對較多，比如凍結、排序、等等，過多的操作會導致表頭過于復雜，如果還加上篩選，表頭空間就會更大，更不適合進行使用。
其次用戶理解成本也會相對過高，因為很多行業屬性相對較為簡單的 B 端產品并不會使用這類篩選，對于用戶初次使用也會有不小的負擔。但表頭篩選目前的普及率仍然比較低，使用比較頻繁的便是紛享銷客。
來到重點，AI 篩選。它不僅僅是未來篩選設計的大趨勢，更是能夠在產品層面解決 篩選復雜化的問題。
比如剛才的高級篩選、自定義篩選，無疑都是在增加用戶的操作層面，他們需要不斷的選擇，才會得到自己想要的結果。而 AI 篩選的價值在于它解決了 用戶自然語言與程序邏輯執行 之間的壁壘，讓篩選能夠響應用戶的自然語言訴求。
比如我想篩選最近一個月的高價值客戶，就只需要在 AI 輸入框中說出自己想法，然后就能得到篩選結果。
程序邏輯執行，程序就可以根據自身知識庫，對高價值客戶進行拆解，邏輯變為 客戶時間為：最近創建一個月客戶、類型為高價值。
這樣一來，其得到的結果就會更為簡單合理，但是在設計 AI 篩選時，它的難度還是會相對較大。
因為 AI 的結果可能會出現差錯，那對應的修改策略就會極為重要。
所以我們可以看到，像 Jira 對于 AI 篩選就會有更多的修改入口讓用戶對于篩選結果進行快速修正，同時在入口上也需要做更多的設計進行提示。
轉載：優設
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
在數字化產品設計愈發注重用戶體驗的當下，界面反饋早已不是單純的“操作提示”，而是串聯用戶行為、產品功能與體驗感知的核心紐帶，更是決定產品易用性、專業性與用戶留存度的關鍵細節。作為深耕UI/UE全鏈路設計十余年的專業團隊，蘭亭妙微UI設計公司（藍藍設計）長期聚焦B端后臺管理、大數據可視化、工業軟件、智能設備界面等多元場景，累計服務數百家中大型企業與行業龍頭客戶，在各類實戰項目中沉淀了一套完整、可落地的反饋設計方法論。
在界面設計中， 反饋（Feedback）是系統對用戶操作做出的即時、可感知的回應 。系統通過界面元素、動效、聲音或震動等方式，告知當前操作已被識別、系統狀態如何，以及后續可采取的行動。
用戶完成任務所需的關鍵反饋節點
用戶在過程中可能產生的系統判斷或用戶選擇其導致的反饋分支
狀態反饋：系統對用戶主動操作的即時狀態確認，消除用戶對操作是否生效的疑慮。
進度反饋：當操作無法即時生效且需一定時間處理時，通過進度反饋告知用戶當前任務進度。
確認反饋：對可能產生負面后果的操作，可以通過確認反饋向用戶提供上下文信息來解釋操作的后果，向用戶進行確認，從而防止發生錯誤。
結果反饋：用戶完成任務節點后，系統明確告知操作成功或失敗。
及時：反饋應在操作后即刻發生，讓用戶感知到系統已響應。
清晰：反饋信息應準確無誤，一目了然，明確告知“發生了什么”及“下一步行動”。
適度：反饋強度應與信息重要程度相匹配，避免過度干擾。
視覺反饋：通過界面元素的視覺變化傳達系統狀態，例如顏色變化、動畫效果、圖標提示、文字提示及高亮標記。
聽覺反饋：通過聲音信號增強用戶感知，例如系統音效、操作音效及語音提示。
觸覺反饋：通過設備震動提供物理層面的反饋，例如短震確認、長震警告。
接下來我“創作者音色復刻”項目中以兩個具體場景來真實項目中設計反饋表現的應用以上原則的設計與決策過程：
朗讀錯誤的具體位置在哪里？
下一步應該做什么？
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
智能家居開關面板的界面設計，核心是 “場景化交互、輕量化視覺、多感官反饋、生態化適配”.
頭部品牌界面設計核心特點與代表案例
|
品牌 |
界面設計核心特點 |
代表系列 / 功能 |
界面設計亮點 |
|
華為鴻蒙智家 |
鴻蒙分布式 UI + 蒙德里安美學，卡片化場景優先 |
蒙德里安系列、智能中控屏 |
1. 引力動效 + 膠囊 / 卡片組件，視覺統一；2. 金繕 / 月輝系列界面與面板材質呼應；3. 背光隨環境光自適應，低飽和配色 |
|
施耐德電氣 |
極致簡約 +“減感空間”，觸控與實體雙反饋 |
致鉑系列 |
1. 4.3mm 超薄面板 + 窄邊框，界面輕量化；2. 觸控按鍵僅操作時高亮，平時隱形；3. 1.5° 微動擺角，操作 “有感無聲” |
|
綠米 Aqara |
米家生態適配 + 場景化快捷入口 |
智能墻壁開關 H1 Pro |
1. 層級≤2 層，場景卡片（如 “回家 / 離家”）一鍵觸達；2. 圖標直觀（太陽 = 照明、月亮 = 睡眠）；3. 狀態色標低飽和，避免視覺干擾 |
|
羅格朗 |
藝術與科技融合，界面適配家裝風格 |
Arteor 系列 |
1. 異形面板 + 裝飾化界面（如時鐘 / 溫度嵌入）；2. 啞光涂層 + 同色系配色，弱化設備感；3. 場景模式替代多按鍵，操作元素少 |
|
公牛 |
性價比 + 易用性，適配大眾家裝 |
G56 系列 |
1. 大字體 / 圖標（≥8mm×8mm），適配老人 / 兒童；2. 黑白灰中性色，適配北歐 / 極簡風；3. 觸控 + 實體旋鈕雙兼容， |
操作邏輯：1 步觸達核心功能
設計避坑與落地建議
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
B 端界面的本質是 “業務流程的數字化延伸”，15 年服務經驗讓我們明確：其設計趨勢始終圍繞 “降本增效、賦能業務” 展開 —— 通過預判用戶需求、簡化操作層級、顯性化核心信息，讓工具從 “負擔” 變為 “助力”。
若您的企業正面臨 B 端系統效率低、用戶使用率差、業務適配性不足等問題，蘭亭妙微可提供定制化界面升級方案，結合行業特性與業務需求，打造 “貼合場景、高效易用” 的 B 端產品體驗。
配圖 2：8dp 網格系統示意圖，展示 4/8/16/24/32dp 間距的視覺層級，用不同顏色的矩形模塊排列，標注 “Material Design 3 間距標準”，底部配手機界面應用示例。
配圖 3：層級留白策略圖，分宏觀（界面邊緣 20pt 安全邊距）、中觀（模塊間距 24dp）、微觀（按鈕內邊距 16dp）三級，用手機界面剖面圖展示，不同層級留白區域用不同透明度的藍色填充。
配圖 4：響應式間距對比圖，左側為 320px 窄屏（16dp 基礎間距），右側為 1024px 平板屏（24dp 基礎間距），展示相同界面在不同設備上的間距適配效果，用紅色箭頭標注間距變化。
配圖 5：反常識設計案例，左側為 VS Code 代碼編輯區（最小行間距、零邊距），右側為 Spotify 播放界面（專輯封面與按鈕間距 20dp，按鈕組間距 16dp 的非對稱設計），用對比箭頭連接。
配圖 6：案例解析綜合圖，包含 Figma 工具欄間距（24dp）、Notion 段落排版（行高 1.5 倍）、Airbnb 搜索頁間距（搜索框與標簽 32dp），三個局部界面拼圖，用黃色線條標注關鍵間距數值。
蘭亭妙微（藍藍設計）m.dzxscac.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.dzxscac.cn
