交互設(shè)計(jì)的必修課——篩選功能設(shè)計(jì)，這篇文章全面拆解了篩選功能設(shè)計(jì)的交互細(xì)節(jié)，通過篩選容器、篩選項(xiàng)兩方面透徹解析了篩選功能交互設(shè)計(jì)的精髓，推薦對(duì)交互設(shè)計(jì)感興趣的童鞋閱讀。

目錄

1. 篩選容器
2. 篩選項(xiàng)
3. 案例解析
4. 總結(jié)

在設(shè)計(jì)移動(dòng)端篩選時(shí) ，有哪些體驗(yàn)細(xì)節(jié)值得注意？

本文搜集了一些主流App的篩選功能設(shè)計(jì)，從細(xì)節(jié)上進(jìn)行拆解和分析。首先，我們把篩選拆分為2個(gè)部分來(lái)細(xì)看：篩選容器、篩選項(xiàng)。

01 篩選容器

篩選容器，指的是承載著選項(xiàng)的彈窗。彈窗形態(tài)根據(jù)彈窗形態(tài)可分為半彈窗和全局彈窗。

1. 半彈窗

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

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

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

適用場(chǎng)景：

• 側(cè)邊半彈窗適用于篩選數(shù)量較多的情況；
• 頂部半彈窗這種樣式常用于篩選類別較少（不超過4項(xiàng)），篩選項(xiàng)數(shù)量不多的場(chǎng)景。

2. 全局彈窗

以層的形式出現(xiàn)，占據(jù)整個(gè)屏幕。看起來(lái)像一個(gè)頁(yè)面，但通常會(huì)有明確的過渡動(dòng)畫表示，這是一個(gè)浮層，而不是頁(yè)面跳轉(zhuǎn)。與半彈窗比，全局彈窗適合承載數(shù)量更多、層級(jí)更復(fù)雜的選項(xiàng)。

與頁(yè)面有何區(qū)別，為什么使用全局彈窗？

雖然與頁(yè)面看起來(lái)差不多，但是不需要加載刷新頁(yè)面，因此響應(yīng)速度更快，讓整個(gè)過程更加流暢。適用于主流程中的分支流程。篩選通常都是分支流程，因此對(duì)于內(nèi)容量較大的篩選來(lái)說(shuō)，全局彈窗是個(gè)不錯(cuò)的選擇。

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

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

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

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

3. 分組折疊式

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

優(yōu)點(diǎn)：由于能在同一屏內(nèi)展示多個(gè)類目下的選項(xiàng)，選項(xiàng)的瀏覽效率高；利于優(yōu)化頁(yè)面信息展示，如展開高頻選項(xiàng)，對(duì)不常用的選項(xiàng)進(jìn)行折疊處理。

適用場(chǎng)景：

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

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

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

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

適用場(chǎng)景：適用于類目層級(jí)較多的情況。

5. 組合式

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

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

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

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

02 篩選項(xiàng)

篩選項(xiàng)常用單選/復(fù)選（Radio/Checkbox）。復(fù)雜場(chǎng)景下也會(huì)用到數(shù)字輸入（InputNumber）、滑動(dòng)輸入（Slider）等。選項(xiàng)排布篩選項(xiàng)的排布可以分為列表式和標(biāo)簽式。

1. 列表式排布

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

適用場(chǎng)景：

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

2. 標(biāo)簽式排布

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

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

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

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

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

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

案例2：購(gòu)物等強(qiáng)篩選場(chǎng)景

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

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

案例1

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

案例2

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

如京東app，在按鈕的底色上展示可視化的百分比，以熱門程度的維度給用戶推薦選項(xiàng)。在美團(tuán)外賣app中，通過滑動(dòng)條上展示折線圖，展示篩選范圍內(nèi)對(duì)應(yīng)的結(jié)果數(shù)。其亮點(diǎn)在于它在不給原本的信息增負(fù)的同時(shí)，讓用戶很快感知到可以重點(diǎn)關(guān)注的選項(xiàng)。

03 案例解析

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

案例1

圖中的兩款產(chǎn)品，在價(jià)格區(qū)間的篩選上，提供了兩種控件輸入：?jiǎn)芜x框+滑動(dòng)輸入/數(shù)字輸入。為什么要這樣做呢？

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

案例2

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

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

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

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

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

04 總結(jié)

? 彈窗形態(tài)：

• 半彈窗適用于結(jié)構(gòu)較簡(jiǎn)單的篩選；
• 全局彈窗適合復(fù)雜的結(jié)構(gòu) (如左右結(jié)構(gòu)導(dǎo)航)

? 彈窗布局：

• 分組折疊式選項(xiàng)的瀏覽效率高，適合需要在多個(gè)類目下選擇選項(xiàng)的情況；
• 左右結(jié)構(gòu)導(dǎo)航式類目查找效率高，適用于類目層級(jí)較多的情況。

? 篩選項(xiàng)：

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