蘭亭妙微ui設(shè)計(jì)公司帶您了解篩選功能設(shè)計(jì)
前言
“少即是多” 是設(shè)計(jì)的常用理念，但產(chǎn)品簡(jiǎn)化到一定程度，必然會(huì)出現(xiàn)
不可簡(jiǎn)化的復(fù)雜性。
諾曼曾說(shuō)：
復(fù)雜是世界的一部分，但它不應(yīng)該令人困惑。
篩選控件，就是讓用戶
自主管理復(fù)雜信息的核心工具 —— 只要符合用戶行為，合理的復(fù)雜反而會(huì)被用戶接受。
蘭亭妙微UI設(shè)計(jì)公司從類(lèi)型、場(chǎng)景、維度、準(zhǔn)則五個(gè)維度，完整拆解移動(dòng)端篩選設(shè)計(jì)，幫你快速選對(duì)、用好篩選控件。
一、先搞懂：篩選是什么？為什么要用？
1. 篩選的定義
篩選 = 用戶通過(guò)
一個(gè) / 多個(gè)條件，在海量?jī)?nèi)容里
快速縮小范圍，隱藏不匹配信息，高效找到目標(biāo)。
篩選是
過(guò)濾器，屬于搜索框架的一部分。
2. 篩選 vs 搜索（核心區(qū)別）
- 篩選：系統(tǒng)提供條件，用戶被動(dòng)選擇 → 縮小范圍
- 搜索：用戶主動(dòng)輸入明確關(guān)鍵詞 → 精準(zhǔn)查找
簡(jiǎn)單記：搜索找結(jié)果，篩選縮范圍。
3. 什么時(shí)候必須加篩選？
- 系統(tǒng)定義篩選（一級(jí)篩選）
大方向快速切換，如：訂單（待支付 / 待發(fā)貨）、優(yōu)惠券（未使用 / 已過(guò)期）。
- 用戶自定義篩選（二級(jí) / 精細(xì)化篩選）
在一級(jí)結(jié)果里進(jìn)一步精準(zhǔn)，如：價(jià)格、品牌、發(fā)貨地、評(píng)分等。
最佳組合：一級(jí)分類(lèi) + 二級(jí)精細(xì)化 + 排序。
二、5 種最常用篩選樣式（直接對(duì)應(yīng)場(chǎng)景）
1. Tab 篩選
- 形態(tài)：橫向 / 縱向常駐展示
- 優(yōu)點(diǎn)：一目了然、隨時(shí)切換、無(wú)學(xué)習(xí)成本
- 場(chǎng)景：內(nèi)容大類(lèi)劃分（新聞?lì)l道、視頻分類(lèi)、商品一級(jí)類(lèi)目）
- 缺點(diǎn)：結(jié)果偏模糊，需搭配二次篩選
2. 彈窗式篩選
- 形態(tài)：入口隱藏，點(diǎn)擊蒙層彈出
- 優(yōu)點(diǎn)：省空間、多維度平鋪、不占頁(yè)面
- 場(chǎng)景：電商列表、外賣(mài)、出行等高頻精細(xì)化篩選
- 適用：條件不多、操作快
3. 折疊式篩選
- 形態(tài)：入口隱藏，點(diǎn)擊展開(kāi)、常駐頁(yè)面
- 優(yōu)點(diǎn)：比 Tab 省空間，比彈窗更可控
- 場(chǎng)景：中度篩選需求，需反復(fù)調(diào)整條件
4. 高級(jí)篩選（新頁(yè)面）
- 形態(tài)：跳轉(zhuǎn)到獨(dú)立頁(yè)面
- 優(yōu)點(diǎn)：無(wú)干擾、可放大量細(xì)顆粒條件
- 場(chǎng)景：汽車(chē)、房產(chǎn)、招聘、復(fù)雜 B 端篩選
- 適用：條件多、層級(jí)深、需專注操作
5. 篩選 + 排序組合（移動(dòng)端標(biāo)配）
- 形態(tài)：篩選按鈕 + 綜合 / 價(jià)格 / 銷(xiāo)量等排序
- 優(yōu)點(diǎn)：一步完成 “縮小范圍 + 重新排列”
- 場(chǎng)景：幾乎所有商品 / 內(nèi)容列表
- 代表：美團(tuán)、餓了么、淘寶、京東
三、3 個(gè)篩選維度（決定怎么布局）
1. 單維度篩選
- 一次只選一個(gè)條件，觸發(fā)即生效
- 標(biāo)簽簡(jiǎn)短（≤5 字）、語(yǔ)義清晰
- 場(chǎng)景：訂單狀態(tài)、內(nèi)容分類(lèi)
2. 多維度篩選
- 支持單選 / 多選 / 區(qū)間 / 滑塊
- 需配：確定 + 重置按鈕
- 移動(dòng)端建議：一級(jí)維度≤9 個(gè)，多余整合到二級(jí)
3. 多等級(jí)篩選
- 層級(jí)：一級(jí)分類(lèi) → 二級(jí)屬性 → 三級(jí)參數(shù)
- 移動(dòng)端最多 3 級(jí)，避免迷路
- 適合：類(lèi)目復(fù)雜的電商、后臺(tái)系統(tǒng)
四、篩選設(shè)計(jì) 3 大核心準(zhǔn)則（必遵守）
1. 以用戶效率為目標(biāo)
篩選的本質(zhì)不是 “好看”，而是幫用戶更快找到。
- 不知道要什么的用戶：靠分類(lèi) + 篩選引導(dǎo)
- 知道要什么的用戶：靠精準(zhǔn)條件快速鎖定
- 最終目標(biāo)：降低時(shí)間成本，提升轉(zhuǎn)化與留存
2. 按產(chǎn)品類(lèi)型定制條件
不要抄通用模板：
- 電商：品牌、價(jià)格、銷(xiāo)量、評(píng)分、服務(wù)
- 新聞 / 內(nèi)容：熱度、時(shí)間、偏好、標(biāo)簽
- 工具 / B 端：狀態(tài)、時(shí)間區(qū)間、負(fù)責(zé)人、關(guān)鍵字
3. 按使用頻率排優(yōu)先級(jí)
高頻條件前置，低頻條件隱藏 / 后置。
- 買(mǎi)手機(jī)：品牌→內(nèi)存→容量→價(jià)格
- 買(mǎi)日用品：價(jià)格→銷(xiāo)量→（品牌放高級(jí)）
五、總結(jié)（一句話記住）
篩選的核心價(jià)值：
用最簡(jiǎn)單的交互，幫用戶最高效縮小信息范圍。
選型只看兩點(diǎn)：
用戶需求 +
使用場(chǎng)景。
- 簡(jiǎn)單分類(lèi) → Tab
- 常規(guī)精篩 → 彈窗
- 復(fù)雜深篩 → 高級(jí)頁(yè)面
- 列表標(biāo)配 → 篩選 + 排序
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.aknz.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
