01 篩選容器
02 篩選項
03 案例解析
04 總結
在設計移動端篩選時 ，有哪些體驗細節值得注意？本文搜集了一些主流App的篩選功能設計，從細節上進行拆解和分析。首先，我們把篩選拆分為2個部分來細看：篩選容器、篩選項。以層的形式出現，僅占據部分屏幕，後面是半透明的遮罩。這層遮罩讓用戶感覺自己並沒有離開當前頁面，沒有丟失正在瀏覽的內容，同時又能夠清晰預見接下來的步驟。▶ 優點：由於不需要刷新整個頁面的信息，半彈窗更加輕量、敏捷、跳轉感弱，能給用戶帶來敏捷的感受。▶ 適用場景：
頂部半彈窗這種樣式常用於篩選類別較少（不超過4項），篩選項數量不多的場景。以層的形式出現，占據整個屏幕。看起來像一個頁面，但通常會有明確的過渡動畫表示，這是一個浮層，而不是頁面跳轉。與半彈窗比，全局彈窗適合承載數量更多、層級更複雜的選項。與頁面有何區別，為什麼使用全局彈窗？雖然與頁面看起來差不多，但是不需要加載刷新頁面，因此響應速度更快，讓整個過程更加流暢。適用於主流程中的分支流程。篩選通常都是分支流程，因此對於內容量較大的篩選來說，全局彈窗是個不錯的選擇。
根據彈窗的彈出方式，篩選容器又可分為頂部彈出、底部彈出和側邊彈出。
彈出方式由篩選入口的位置和彈窗形態決定，由於現在大部分界面的篩選都在右上角，因此頂部和側邊彈出為主流的彈出形式。值得一提的是，底部彈出是比較特別的一種方式，入口不一定要位於底部。該彈窗具備了半彈窗輕量、跳轉感弱的優點，擁有更寬的展示位置，沒有頂部彈窗頭重腳輕的感覺，是一個值得考慮的形式。
根據彈窗的布局，篩選容器還可分為分組摺疊式和左右結構導航式。
將各組篩選歸類在同一屏的摺疊菜單下，可通過點擊展開更多選項。由於能在同一屏內展示多個類目下的選項，選項的瀏覽效率高；利於優化頁面信息展示，如展開高頻選項，對不常用的選項進行摺疊處理。▶ 適用場景：適用需要在多個類目下選擇選項的情況。將父子類目按左右結構進行排布，父類目固定在左側，可方便地切換類目。▶ 優點：層級結構清晰、一目了然；類目查找效率高。結合了前面說的兩種形式，用戶可以直接上下滾動頁面，按順序查看所有的類目和選項，也可以點擊左邊的標題直接定位到對應的類目位置。▶ 優點：結合了兩者的優點，有利於保證選項瀏覽效率和類目查找效率。▶ 適用場景：對於類目和選項都多的情況，可借鑑該布局。可在提交按鈕處，展示篩選的結果數。通過前置反饋讓用戶對操作結果有預先的判斷，方便他們及時調整操作。該功能的實現涉及到，用戶每做一個操作，就要加載一次數據。因此設計時需要注意按鈕的加載態、加載超時如何處理、沒有結果時該如何展示等等。
篩選項常用單選/複選（Radio/Checkbox）。複雜場景下也會用到數字輸入（InputNumber）、滑動輸入（Slider）等。選項豎向平鋪，符合閱讀習慣，適合檢索；但每屏能展示的數量較少。▶ 適用場景：在左右結構導航式中廣泛使用；當容器內只有單個篩選緯度時可使用。適用於有多個篩選分組的情況，且展示效率更高，一行最可展示多個選項（控制在4個以內）。
但要注意，每個組下的選項也不宜過多，否則會影響後方分組的展示；可以通過前置高頻選項，摺疊部分低頻選項的方式來控制選項初始數量。
在設計時可以外置一些高頻的篩選項——我稱之為快捷篩選；快捷篩選極大縮短了用戶路徑，無需進入到篩選容器中，便於用戶使用。在篩選項不多、對篩選依賴性較低的情況下，甚至不需要把選項都收在篩選容器中，直接將選項鋪在列表頁即可。小紅書app的內容流中，採用的都是快捷篩選，沒有設計篩選容器。右上角展示固定篩選按鈕，對內容類型（視頻/圖文）進行篩選；用橫滑標籤的形式，展示推薦的內容標籤。
在電商app中，「配圖+文案」的樣式也是一種快捷篩選，效果非常直觀。好比你在線下購物時，你說「我要買相機」，有一個導購則問你「你要買什麼相機呢？微單、單反還是...?」，這樣一步步幫用戶縮小需求範圍。有些用戶在做決策時是存在困難的，因此我們可以在選項上增加一些輔助描述，幫助用戶完成決策。
攜程app的酒店篩選模塊中，結合用戶選擇比例來推薦酒店位置，熱門位置一目了然。增加可視化的意符，以弱引導的方式，給用戶提供參考。如京東app，在按鈕的底色上展示可視化的百分比，以熱門程度的維度給用戶推薦選項。在美團外賣app中，通過滑動條上展示折線圖，展示篩選範圍內對應的結果數。其亮點在於它在不給原本的信息增負的同時，讓用戶很快感知到可以重點關注的選項。當然我們會發現，日常使用的app中，有很多的篩選設計都比上面說的要複雜得多。為什麼要設計成這樣呢？結合下面的案例我們感受一下。圖中的兩款產品，在價格區間的篩選上，提供了兩種控件輸入：單選框+滑動輸入/數字輸入。滑動輸入和數字輸入提供了自由的輸入範圍，但操作成本略高；單選框輸入範圍局限，但更高效快捷。因此兩者結合使用，會更加科學，既能照顧有精確需求的用戶，又能提供便捷的選項。左圖是大眾app美食類型的篩選器：默認為單選邏輯，右上角有個「多選」按鈕，點擊會轉化為多選邏輯。這個交互乍一看還有點複雜，但為什麼要設計成這樣，而不是像右圖一樣，設計成多選的樣式，既能同時滿足單選和多選的需求，界面也更簡單呢？▶ 1. 單選為高頻場景，多選為低頻場景也就是說大部分人都在使用單選，只有少部分人需要用到多選；但如果設計成多選的樣式，在高頻場景下，操作流程就變繁瑣了。優先為高頻場景考慮，不要一味追求統一性和界面精簡。當引入一個新功能時，如果無法確定效果，可以不覆蓋原本的邏輯，以免影響到老用戶的使用習慣。•半彈窗適用於結構較簡單的篩選；•全局彈窗適合複雜的結構 (如左右結構導航)
•分組摺疊式選項的瀏覽效率高，適合需要在多個類目下選擇選項的情況；•左右結構導航式類目查找效率高，適用於類目層級較多的情況。•列表式排布適合檢索，標籤式排布的展示效率更高；•合理外置高頻篩選項；•在選項上增加輔助描述有助於用戶決策。
點擊關注↓↓↓ASAK設計
持續獲取優質設計內容和團隊最新資訊
•網易大神App-H5創意案例合集•如何通過設計降低認知負荷？•《 第五人格 》2022線下賽項目美術製作總結•如何構建數據體系設計方法論？•可用性測試｜測試度量方法（文末福利）
Hi,我們是網易互娛ASAK設計團隊
AstroxAkira
定期分享優質設計內容和團隊最新資訊
如有幫助別忘了"分享、點讚、在看"呀👇
留言列表