大廠案例 | 10 分鐘教你如何選擇篩選組件
▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)
轉(zhuǎn)自：Alibaba Cloud TxD
編輯：張夢(mèng)如
共 3195 字，預(yù)計(jì)閱讀 8 分鐘
篩選組件的作用是幫助人們?cè)诿鎸?duì)大量信息時(shí)，通過更高效的篩選方式提升決策效率。廣義的篩選組件還包括搜索欄及 Tab 欄，本文暫不分析。
組件包括篩選按鈕與篩選器，篩選器包含類別及各類別下的篩選項(xiàng)。使用頻次高低、篩選條件的數(shù)量都是決定篩選組件樣式的因素。
本文通過案例分析，從篩選組件的樣式、使用場(chǎng)景等方面來解析篩選組件在手機(jī)端場(chǎng)景的設(shè)計(jì)。
一. 位于 Tab 欄的篩選組件
組件樣式
篩選按鈕位置：一般位于 Tab 欄最右側(cè)視覺薄弱區(qū)域。
篩選器形式：點(diǎn)擊按鈕，篩選器以抽屜形式從 Tab 欄底部向下展開篩選條件，或以浮層形式從屏幕最右側(cè)向左滑出篩選條件。
樣式分析
當(dāng)界面使用 Tab 欄時(shí)，已為內(nèi)容做了第一層篩選，多數(shù)情況下已滿足用戶對(duì)內(nèi)容的篩選需求。
當(dāng)篩選類別較多且復(fù)雜時(shí)，就需要在 Tab 欄增加篩選組件來提供更詳細(xì)的篩選能力。而這里的篩選組件較于 Tab 欄其他條件優(yōu)先級(jí)較低，屏幕右側(cè)為視覺薄弱區(qū)域，這也解釋了為什么大多數(shù) Tab 欄的篩選組件都位于最右側(cè)。
案例一
案例來源于美團(tuán) App 。此頁面是對(duì)美食品類的選擇，這里的篩選組件在 Tab 中是最常見的樣式。對(duì)于用戶而言，選擇商家店鋪優(yōu)先考慮地域、美食類別、價(jià)格及綜合評(píng)價(jià)，而用餐人數(shù)與餐廳服務(wù)等只是輔助選擇條件。
篩選器使用了抽屜形式，如要選擇此樣式，建議在篩選條件不多且不超過一屏的場(chǎng)景使用。
案例二
案例來源于淘寶 App 。當(dāng)用戶從首頁全局搜索后，出現(xiàn)此頁。篩選按鈕位于二級(jí) Tab 欄。
當(dāng)用戶點(diǎn)擊篩選按鈕后，由于篩選條件較多，很難一頁展示完，用戶往往需要上下滑動(dòng)屏幕查看全部，因此使用右側(cè)浮層展開的形式較適合。
案例三
案例來源于嗶哩嗶哩 App 。全局搜索后， Tab 欄默認(rèn)展開綜合 Tab 內(nèi)容，用戶對(duì)排序、時(shí)長(zhǎng)、分區(qū)的篩選需求較高，因此直接把篩選類別放在了二級(jí) Tab 欄，相比通過點(diǎn)擊篩選按鈕再展開類別的交互方式更簡(jiǎn)單直白。
點(diǎn)擊篩選類別后，篩選器使用抽屜式。此種篩選組件樣式一般用于篩選類別較少 （不超過 4 項(xiàng)），篩選項(xiàng)數(shù)量不多的場(chǎng)景。
二. 底部按鈕型篩選組件
組件樣式
篩選按鈕位置：以按鈕或浮層形式固定在界面底部，便于用戶操作。
篩選器形式：點(diǎn)擊按鈕，篩選器以抽屜形式從按鈕底部向上展開篩選條件，或以界面浮層形式從底部向上展開篩選條件。
樣式分析
使用底部篩選按鈕的界面，內(nèi)容區(qū)類別相對(duì)單一，通過篩選組件就能滿足篩選需求，并對(duì)篩選的需求較大。而底部按鈕作為常見的按鈕形式，用戶點(diǎn)擊更方便，因此承載篩選組件較合適。
若使用此樣式，點(diǎn)擊篩選按鈕后，篩選器的出現(xiàn)優(yōu)先考慮從底部向上出現(xiàn)的抽屜式浮層。
案例一
案例來源于旅游類 App Expedia 。輸入旅游目的地后進(jìn)入此列表頁，用戶目的性明確，就是要查看結(jié)果。底部的篩選按鈕是為了幫助用戶更快的篩選結(jié)果，方便用戶觸達(dá)。并且篩選條件較多，無法一頁展示完，使用了界面浮層的形式。
這里還有 2 個(gè)細(xì)節(jié)：
1. 由于篩選類別較多，手動(dòng)清除單個(gè)篩選條件太過繁瑣，于是篩選器底部增加了清除按鈕，操作更簡(jiǎn)便。但底部按鈕一般為 “確定” 操作， “清除” 放在底部樣式上沒有做誤操作提示，可能會(huì)增加誤操作機(jī)率。
2. 篩選后，篩選按鈕處會(huì)顯示已選擇的篩選類別數(shù)量，給用戶帶來良好的使用反饋。
案例二
案例來源為 dribbble 設(shè)計(jì)師稿，當(dāng)前頁為地點(diǎn)搜索。需要先進(jìn)行篩選操作，內(nèi)容區(qū)再出現(xiàn)結(jié)果。篩選按鈕位于底部浮層，篩選類別代替篩選按鈕平鋪展現(xiàn)，篩選器使用抽屜式從浮層底部向上展開。
此樣式一般適合篩選類別較少，并且每個(gè)類別的篩選項(xiàng)不多的場(chǎng)景。優(yōu)點(diǎn)是減少操作步驟，提高用戶操作效率。并且可以學(xué)習(xí)一些體驗(yàn)細(xì)節(jié)：在篩選器中選擇一個(gè)選項(xiàng)后，在其篩選類別處同步修改為該選項(xiàng)；篩選項(xiàng)與篩選類別選中狀態(tài)一致，增加關(guān)聯(lián)度。
三. 浮層按鈕型篩選組件
組件樣式
篩選按鈕位置：以浮層按鈕的形式位于界面右下方，占用空間較少。
篩選器形式：點(diǎn)擊按鈕，篩選器以浮層形式為主，或在篩選按鈕下方展開篩選條件。
樣式分析
浮層型篩選按鈕的優(yōu)點(diǎn)是增大內(nèi)容區(qū)的縱向空間，比底部按鈕型篩選組件的層級(jí)要弱一些。但當(dāng)用戶需要操作時(shí)，它的位置也便于用戶點(diǎn)擊。
設(shè)計(jì)時(shí)按鈕用色需要區(qū)別于內(nèi)容區(qū)，內(nèi)容形式盡量精簡(jiǎn)直觀。若使用案例 3 中的扇形篩選器，則要求篩選類別為 1-2 類，篩選項(xiàng)數(shù)量少切文案精簡(jiǎn)。
案例一
案例來源為 dribbble 概念稿。篩選按鈕位于界面右下方緊貼于右側(cè)屏邊，浮于被篩選內(nèi)容上層，滑動(dòng)屏幕時(shí)消失。點(diǎn)擊篩選按鈕后，從屏幕右側(cè)展開篩選浮層，原篩選按鈕變?yōu)榇_認(rèn)按鈕。
這種按鈕形式最大限度的讓出空間留給內(nèi)容區(qū)，且右下角為用戶關(guān)注薄弱區(qū)，這樣的位置關(guān)系可讓用戶按需操作。關(guān)于篩選器使用右側(cè)浮層前面的案例也提到過，適用于篩選條件較多的場(chǎng)景。并且使用側(cè)邊欄形式的浮層與篩選按鈕關(guān)聯(lián)性較高，相對(duì)符合用戶認(rèn)知。體驗(yàn)細(xì)節(jié)上可學(xué)習(xí)的點(diǎn)還有按鈕功能的改變，使得體驗(yàn)更便捷。
案例二
案例來源為 dribbble 設(shè)計(jì)師稿。篩選按鈕位于界面右下方但沒有貼屏邊，篩選器以底部分層形式從底部向上展開。這里的篩選條件不多，因此使用了底部分層形式。
案例三
案例來源為 dribbble 設(shè)計(jì)師稿。篩選按鈕形式與上一案例相似，不同的是篩選按鈕處直接顯示篩選條件，可得知此內(nèi)容區(qū)目前被篩選維度為 “30M” 。此樣式適用于篩選條件為同一維度的場(chǎng)景。
點(diǎn)擊按鈕后，從按鈕下層展開扇形篩選器，滑動(dòng)選擇篩選條件。此種篩選器樣式使用場(chǎng)景較局限，多為選擇時(shí)長(zhǎng)或數(shù)量，并且單選居多。因此篩選器不需要 “確定按鈕” ，只需放 “關(guān)閉按鈕” 即可。這里的篩選器也可根據(jù)不同的場(chǎng)景選擇其他的形式。
四. 舉一反三
接下來我們拿個(gè)案例練練手。
下圖界面中內(nèi)容區(qū)為概覽與各監(jiān)控?cái)?shù)據(jù)圖表，需要設(shè)計(jì)一個(gè)篩選組件對(duì)內(nèi)容區(qū)進(jìn)行不同時(shí)段的篩選。
在設(shè)計(jì)之前需要確定幾個(gè)需求：篩選組件的使用頻次、篩選類別的數(shù)量、篩選項(xiàng)的數(shù)量，單復(fù)選關(guān)系、篩選條件之間的優(yōu)先級(jí)
進(jìn)一步明確需求
篩選類別只有 1 項(xiàng)為時(shí)間段，篩選數(shù)量不固定，為多項(xiàng)，單選關(guān)系。當(dāng)用戶進(jìn)入此頁，根據(jù)用戶使用需求判斷 “1 小時(shí)” 基本滿足用戶查看數(shù)據(jù)的需求，默認(rèn)展示 “1 小時(shí)” 的篩選。因此篩選組件此場(chǎng)景使用 “1 小時(shí)” 時(shí)段基本滿足用戶查看數(shù)據(jù)的需求，可判斷用戶使用篩選組件的頻次不高。
方案解析
方案一. Tab欄形式
Tab 是對(duì)整頁的篩選，多為不同維度，而這里只有時(shí)段一個(gè)維度。
Tab 所處位置為視覺熱點(diǎn)區(qū)域附近，但用戶對(duì)篩選組件的需求并不高，放在此位置占用了概覽區(qū)空間。
方案二. 底部按鈕形式
底部按鈕位于用戶的習(xí)慣操作區(qū)，放這里使用層級(jí)略高，并且會(huì)使內(nèi)容區(qū)的整體高度減少。
方案三. 浮層按鈕形式
位于右下角的浮層按鈕在頁面中屬于視覺薄弱區(qū)域，可以使用戶瀏覽時(shí)不受按鈕影響；但按鈕擁有強(qiáng)對(duì)比色，在有篩選需求時(shí)滿足使用需求。
篩選器以時(shí)間選擇器形式出現(xiàn)，可滿足篩選項(xiàng)數(shù)量較多的場(chǎng)景。
五. 小結(jié)
以上內(nèi)容是我對(duì)常見篩選組件的思考，每一種樣式都有其優(yōu)缺點(diǎn)。但我們?cè)O(shè)計(jì)篩選組件的最終目的是幫助用戶篩選信息，高效決策。這就需要設(shè)計(jì)師根據(jù)篩選需求、用戶習(xí)慣等設(shè)計(jì)符合用戶使用場(chǎng)景的操作體驗(yàn)。
