交互設計的必修課——篩選功能設計，這篇文章全面拆解了篩選功能設計的交互細節，通過篩選容器、篩選項兩方面透徹解析了篩選功能交互設計的精髓，推薦對交互設計感興趣的童鞋閱讀。

目錄

1. 篩選容器
2. 篩選項
3. 案例解析
4. 總結

在設計移動端篩選時 ，有哪些體驗細節值得注意？

本文搜集了一些主流App的篩選功能設計，從細節上進行拆解和分析。首先，我們把篩選拆分為2個部分來細看：篩選容器、篩選項。

01 篩選容器

篩選容器，指的是承載著選項的彈窗。彈窗形態根據彈窗形態可分為半彈窗和全局彈窗。

1. 半彈窗

以層的形式出現，僅占據部分屏幕，后面是半透明的遮罩。這層遮罩讓用戶感覺自己并沒有離開當前頁面，沒有丟失正在瀏覽的內容，同時又能夠清晰預見接下來的步驟。

優點：

由于不需要刷新整個頁面的信息，半彈窗更加輕量、敏捷、跳轉感弱，能給用戶帶來敏捷的感受。

適用場景：

• 側邊半彈窗適用于篩選數量較多的情況；
• 頂部半彈窗這種樣式常用于篩選類別較少（不超過4項），篩選項數量不多的場景。

2. 全局彈窗

以層的形式出現，占據整個屏幕?？雌饋硐褚粋€頁面，但通常會有明確的過渡動畫表示，這是一個浮層，而不是頁面跳轉。與半彈窗比，全局彈窗適合承載數量更多、層級更復雜的選項。

與頁面有何區別，為什么使用全局彈窗？

雖然與頁面看起來差不多，但是不需要加載刷新頁面，因此響應速度更快，讓整個過程更加流暢。適用于主流程中的分支流程。篩選通常都是分支流程，因此對于內容量較大的篩選來說，全局彈窗是個不錯的選擇。

彈窗彈出方式根據彈窗的彈出方式，篩選容器又可分為頂部彈出、底部彈出和側邊彈出。

彈出方式由篩選入口的位置和彈窗形態決定，由于現在大部分界面的篩選都在右上角，因此頂部和側邊彈出為主流的彈出形式。

值得一提的是，底部彈出是比較特別的一種方式，入口不一定要位于底部。該彈窗具備了半彈窗輕量、跳轉感弱的優點，擁有更寬的展示位置，沒有頂部彈窗頭重腳輕的感覺，是一個值得考慮的形式。

彈窗布局根據彈窗的布局，篩選容器還可分為分組折疊式和左右結構導航式。

3. 分組折疊式

將各組篩選歸類在同一屏的折疊菜單下，可通過點擊展開更多選項。

優點：由于能在同一屏內展示多個類目下的選項，選項的瀏覽效率高；利于優化頁面信息展示，如展開高頻選項，對不常用的選項進行折疊處理。

適用場景：

適用需要在多個類目下選擇選項的情況。

4. 左右結構導航式

將父子類目按左右結構進行排布，父類目固定在左側，可方便地切換類目。

優點：層級結構清晰、一目了然；類目查找效率高。

適用場景：適用于類目層級較多的情況。

5. 組合式

結合了前面說的兩種形式，用戶可以直接上下滾動頁面，按順序查看所有的類目和選項，也可以點擊左邊的標題直接定位到對應的類目位置。

優點：結合了兩者的優點，有利于保證選項瀏覽效率和類目查找效率。

適用場景：對于類目和選項都多的情況，可借鑒該布局。

提交按鈕可在提交按鈕處，展示篩選的結果數。通過前置反饋讓用戶對操作結果有預先的判斷，方便他們及時調整操作。該功能的實現涉及到，用戶每做一個操作，就要加載一次數據。因此設計時需要注意按鈕的加載態、加載超時如何處理、沒有結果時該如何展示等等。

02 篩選項

篩選項常用單選/復選（Radio/Checkbox）。復雜場景下也會用到數字輸入（InputNumber）、滑動輸入（Slider）等。選項排布篩選項的排布可以分為列表式和標簽式。

1. 列表式排布

選項豎向平鋪，符合閱讀習慣，適合檢索；但每屏能展示的數量較少。

適用場景：

在左右結構導航式中廣泛使用；當容器內只有單個篩選緯度時可使用。

2. 標簽式排布

適用于有多個篩選分組的情況，且展示效率更高，一行最可展示多個選項（控制在4個以內）。

但要注意，每個組下的選項也不宜過多，否則會影響后方分組的展示；可以通過前置高頻選項，折疊部分低頻選項的方式來控制選項初始數量。

快捷篩選在設計時可以外置一些高頻的篩選項——我稱之為快捷篩選；快捷篩選極大縮短了用戶路徑，無需進入到篩選容器中，便于用戶使用。

案例1：內容消費等弱篩選場景

在篩選項不多、對篩選依賴性較低的情況下，甚至不需要把選項都收在篩選容器中，直接將選項鋪在列表頁即可。

小紅書app的內容流中，采用的都是快捷篩選，沒有設計篩選容器。右上角展示固定篩選按鈕，對內容類型（視頻/圖文）進行篩選；用橫滑標簽的形式，展示推薦的內容標簽。

案例2：購物等強篩選場景

在電商app中，“配圖+文案”的樣式也是一種快捷篩選，效果非常直觀。好比你在線下購物時，你說“我要買相機”，有一個導購則問你“你要買什么相機呢？微單、單反還是…?”，這樣一步步幫用戶縮小需求范圍。

增加輔助描述有些用戶在做決策時是存在困難的，因此我們可以在選項上增加一些輔助描述，幫助用戶完成決策。

案例1

攜程app的酒店篩選模塊中，結合用戶選擇比例來推薦酒店位置，熱門位置一目了然。

案例2

增加可視化的意符，以弱引導的方式，給用戶提供參考。

如京東app，在按鈕的底色上展示可視化的百分比，以熱門程度的維度給用戶推薦選項。在美團外賣app中，通過滑動條上展示折線圖，展示篩選范圍內對應的結果數。其亮點在于它在不給原本的信息增負的同時，讓用戶很快感知到可以重點關注的選項。

03 案例解析

當然我們會發現，日常使用的app中，有很多的篩選設計都比上面說的要復雜得多。為什么要設計成這樣呢？結合下面的案例我們感受一下。

案例1

圖中的兩款產品，在價格區間的篩選上，提供了兩種控件輸入：單選框+滑動輸入/數字輸入。為什么要這樣做呢？

滑動輸入和數字輸入提供了自由的輸入范圍，但操作成本略高；單選框輸入范圍局限，但更高效快捷。因此兩者結合使用，會更加科學，既能照顧有精確需求的用戶，又能提供便捷的選項。

案例2

左圖是大眾app美食類型的篩選器：默認為單選邏輯，右上角有個“多選”按鈕，點擊會轉化為多選邏輯。這個交互乍一看還有點復雜，但為什么要設計成這樣，而不是像右圖一樣，設計成多選的樣式，既能同時滿足單選和多選的需求，界面也更簡單呢？

促成這種設計的可能性有很多，以下為可能的原因：

1. 單選為高頻場景，多選為低頻場景也就是說大部分人都在使用單選，只有少部分人需要用到多選；但如果設計成多選的樣式，在高頻場景下，操作流程就變繁瑣了。

優先為高頻場景考慮，不要一味追求統一性和界面精簡。

2. 多選是個新功能當引入一個新功能時，如果無法確定效果，可以不覆蓋原本的邏輯，以免影響到老用戶的使用習慣。

04 總結

? 彈窗形態：

• 半彈窗適用于結構較簡單的篩選；
• 全局彈窗適合復雜的結構 (如左右結構導航)

? 彈窗布局：

• 分組折疊式選項的瀏覽效率高，適合需要在多個類目下選擇選項的情況；
• 左右結構導航式類目查找效率高，適用于類目層級較多的情況。

? 篩選項：

• 列表式排布適合檢索，標簽式排布的展示效率更高；
• 合理外置高頻篩選項；
• 在選項上增加輔助描述有助于用戶決策。