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

首先，我們把篩選拆分為2個(gè)部分來細(xì)看：篩選容器、篩選項(xiàng)。

篩選容器

篩選容器，指的是承載著選項(xiàng)的彈窗。

彈窗形態(tài)

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

半彈窗

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

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

? 適用場景：

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

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

全局彈窗

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

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

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

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

彈窗彈出方式

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

彈出方式由篩選入口的位置和彈窗形態(tài)決定，由于現(xiàn)在大部分界面的篩選都在右上角，因此頂部和側(cè)邊彈出為主流的彈出形式。
值得一提的是，底部彈出是比較特別的一種方式，入口不一定要位于底部。該彈窗具備了半彈窗輕量、跳轉(zhuǎn)感弱的優(yōu)點(diǎn)，擁有更寬的展示位置，沒有頂部彈窗頭重腳輕的感覺，是一個(gè)值得考慮的形式。

左右滑動(dòng)查看 ▲

彈窗布局

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

分組折疊式

將各組篩選歸類在同一屏的折疊菜單下，可通過點(diǎn)擊展開更多選項(xiàng)。

? 優(yōu)點(diǎn)：

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

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

? 適用場景：適用需要在多個(gè)類目下選擇選項(xiàng)的情況。

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

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

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

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

組合式

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

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

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

提交按鈕

可在提交按鈕處，展示篩選的結(jié)果數(shù)。通過前置反饋?zhàn)層脩魧Σ僮鹘Y(jié)果有預(yù)先的判斷，方便他們及時(shí)調(diào)整操作。
該功能的實(shí)現(xiàn)涉及到，用戶每做一個(gè)操作，就要加載一次數(shù)據(jù)。因此設(shè)計(jì)時(shí)需要注意按鈕的加載態(tài)、加載超時(shí)如何處理、沒有結(jié)果時(shí)該如何展示等等。

篩選項(xiàng)

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

選項(xiàng)排布

篩選項(xiàng)的排布可以分為列表式和標(biāo)簽式。

列表式排布

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

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

標(biāo)簽式排布

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

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

快捷篩選

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

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

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

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

案例2：購物等強(qiáng)篩選場景

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

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

增加輔助描述

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

案例1

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

案例2

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

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

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

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

案例解析

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

案例1

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

為什么要這樣做呢？

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

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

案例2

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

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

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

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

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

? 2. 多選是個(gè)新功能

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

總結(jié)

? 彈窗形態(tài)：

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

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

? 彈窗布局：

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

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

? 篩選項(xiàng)：

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

?合理外置高頻篩選項(xiàng)；

?在選項(xiàng)上增加輔助描述有助于用戶決策。