在設(shè)計移動端篩選時 ，有哪些體驗細節(jié)值得注意？本文搜集了一些主流App的篩選功能設(shè)計，從細節(jié)上進行拆解和分析。

首先，我們把篩選拆分為2個部分來細看：篩選容器、篩選項。

?

?

?

篩選容器

篩選容器，指的是承載著選項的彈窗。

?

彈窗形態(tài)

根據(jù)彈窗形態(tài)可分為半彈窗和全局彈窗。

?

?

半彈窗

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

? 優(yōu)點：由于不需要刷新整個頁面的信息，半彈窗更加輕量、敏捷、跳轉(zhuǎn)感弱，能給用戶帶來敏捷的感受。

? 適用場景：

側(cè)邊半彈窗適用于篩選數(shù)量較多的情況；

頂部半彈窗這種樣式常用于篩選類別較少（不超過4項），篩選項數(shù)量不多的場景。

?

全局彈窗

以層的形式出現(xiàn)，占據(jù)整個屏幕。看起來像一個頁面，但通常會有明確的過渡動畫表示，這是一個浮層，而不是頁面跳轉(zhuǎn)。

與半彈窗比，全局彈窗適合承載數(shù)量更多、層級更復(fù)雜的選項。

與頁面有何區(qū)別，為什么使用全局彈窗？
雖然與頁面看起來差不多，但是不需要加載刷新頁面，因此響應(yīng)速度更快，讓整個過程更加流暢。適用于主流程中的分支流程。

篩選通常都是分支流程，因此對于內(nèi)容量較大的篩選來說，全局彈窗是個不錯的選擇。

?

?

彈窗彈出方式

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

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

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

左右滑動查看 ▲

?

?

彈窗布局

根據(jù)彈窗的布局，篩選容器還可分為分組折疊式和左右結(jié)構(gòu)導(dǎo)航式。

?

分組折疊式

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

? 優(yōu)點：

由于能在同一屏內(nèi)展示多個類目下的選項，選項的瀏覽效率高；

利于優(yōu)化頁面信息展示，如展開高頻選項，對不常用的選項進行折疊處理。

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

?

左右結(jié)構(gòu)導(dǎo)航式

將父子類目按左右結(jié)構(gòu)進行排布，父類目固定在左側(cè)，可方便地切換類目。

? 優(yōu)點：層級結(jié)構(gòu)清晰、一目了然；類目查找效率高。

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

?

組合式

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

? 優(yōu)點：結(jié)合了兩者的優(yōu)點，有利于保證選項瀏覽效率和類目查找效率。

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

?

?

提交按鈕

可在提交按鈕處，展示篩選的結(jié)果數(shù)。通過前置反饋讓用戶對操作結(jié)果有預(yù)先的判斷，方便他們及時調(diào)整操作。

該功能的實現(xiàn)涉及到，用戶每做一個操作，就要加載一次數(shù)據(jù)。因此設(shè)計時需要注意按鈕的加載態(tài)、加載超時如何處理、沒有結(jié)果時該如何展示等等。

?

?

篩選項

篩選項常用單選/復(fù)選（Radio/Checkbox）。復(fù)雜場景下也會用到數(shù)字輸入（InputNumber）、滑動輸入（Slider）等。

?

選項排布

篩選項的排布可以分為列表式和標簽式。

?

?

列表式排布

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

? 適用場景：在左右結(jié)構(gòu)導(dǎo)航式中廣泛使用；當容器內(nèi)只有單個篩選緯度時可使用。

?

標簽式排布

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

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

?

?

快捷篩選

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

?

案例1：內(nèi)容消費等弱篩選場景

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

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

?

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

在電商app中，“配圖+文案”的樣式也是一種快捷篩選，效果非常直觀。

好比你在線下購物時，你說“我要買相機”，有一個導(dǎo)購則問你“你要買什么相機呢？微單、單反還是...?”，這樣一步步幫用戶縮小需求范圍。

?

?

增加輔助描述

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

?

案例1

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

?

案例2

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

如京東app，在按鈕的底色上展示可視化的百分比，以熱門程度的維度給用戶推薦選項。

在美團外賣app中，通過滑動條上展示折線圖，展示篩選范圍內(nèi)對應(yīng)的結(jié)果數(shù)。

其亮點在于它在不給原本的信息增負的同時，讓用戶很快感知到可以重點關(guān)注的選項。

?

?

案例解析

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

?

案例1

圖中的兩款產(chǎn)品，在價格區(qū)間的篩選上，提供了兩種控件輸入：單選框+滑動輸入/數(shù)字輸入。

為什么要這樣做呢？

滑動輸入和數(shù)字輸入提供了自由的輸入范圍，但操作成本略高；單選框輸入范圍局限，但更高效快捷。

因此兩者結(jié)合使用，會更加科學(xué)，既能照顧有精確需求的用戶，又能提供便捷的選項。

?

案例2

左圖是大眾app美食類型的篩選器：默認為單選邏輯，右上角有個“多選”按鈕，點擊會轉(zhuǎn)化為多選邏輯。

這個交互乍一看還有點復(fù)雜，但為什么要設(shè)計成這樣，而不是像右圖一樣，設(shè)計成多選的樣式，既能同時滿足單選和多選的需求，界面也更簡單呢？

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

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

優(yōu)先為高頻場景考慮，不要一味追求統(tǒng)一性和界面精簡。

?

? 2. 多選是個新功能

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

?

?

總結(jié)

? 彈窗形態(tài)：

?半彈窗適用于結(jié)構(gòu)較簡單的篩選；

?全局彈窗適合復(fù)雜的結(jié)構(gòu) (如左右結(jié)構(gòu)導(dǎo)航)

?

? 彈窗布局：

?分組折疊式選項的瀏覽效率高，適合需要在多個類目下選擇選項的情況；

?左右結(jié)構(gòu)導(dǎo)航式類目查找效率高，適用于類目層級較多的情況。

?

? 篩選項：

?列表式排布適合檢索，標簽式排布的展示效率更高；

?合理外置高頻篩選項；

?在選項上增加輔助描述有助于用戶決策。

?