近期我們對一個(gè)電商平臺的高級篩選進(jìn)行迭代，希望能提高玩家的選購效率乙墙。作為交互，在這次迭代中遇到不少令人糾結(jié)的地方生均，于是整理了幾個(gè)小感悟听想，希望和大家聊聊到底該如何設(shè)計(jì)篩選器。

篩選器是一個(gè)在APP中俯拾即是的模塊马胧，從電商到酒旅汉买，甚至在社交產(chǎn)品中，都能找到它的影子佩脊。它常出沒于信息量大的地方蛙粘，為的是幫助用戶“更準(zhǔn)更快”的找到想要的玩意兒。但如此常見的模塊卻并不簡單威彰，同樣是價(jià)格篩選卻以不同的樣式在不同類型的產(chǎn)品中百花齊放出牧，一味的“向競品致敬”很難解決工作中的實(shí)際問題，只能從頭探究一下其中奧妙歇盼。

什么是篩選器

假象一下舔痕，你年會中了大獎(jiǎng)，在眾人的“祝福聲”中做出請大家吃大餐的艱難決定豹缀。你打開XX點(diǎn)評APP - 選擇 美食 - 設(shè)置 熱門商圈天河 - 選擇 按人氣排序 - 又咬咬牙在篩選欄按下『100-300元』伯复，切換了幾次菜式，終于選定目標(biāo)邢笙。摸摸荷包倒吸幾口氣后啸如，固作鎮(zhèn)定的在群里說咱們?nèi)ミ@里吧，大家敞開了吃鸣剪，別客氣~?

以上便是從使用場景到消費(fèi)決策的完整流程组底，篩選器在其間占了舉足輕重的作用。每一步選擇筐骇，都澆筑了你的良苦用心和美好祝愿债鸡。你是誰，為啥來這里铛纬，期望找點(diǎn)啥厌均，都或多或少影響了你的選擇。所以說告唆，好的篩選器是各自不同的棺弊，但設(shè)計(jì)目標(biāo)又是各自相同的：幫助目標(biāo)用戶晶密，既快又準(zhǔn)的找到東西。

篩選器的類型

隨意打開手機(jī)中幾個(gè)常用的APP模她，整理了下常見的選擇控件樣式稻艰，真是出乎意料的多（見下圖）。

仔細(xì)一琢磨侈净，諸多條件間尊勿，并沒有明確的優(yōu)劣之分。比如某電商在商品列表頂端畜侦，貼心得將關(guān)鍵條件外漏元扔，但某資訊產(chǎn)品卻將同樣的條件以填鴨式選項(xiàng)卡控件收至二級。所以不得不感嘆旋膳，篩選功能的設(shè)計(jì)無非是在各種篩選維度與UI樣式的排列組合間澎语，選取最優(yōu)解。

篩選器的設(shè)計(jì)原則

高級篩選中验懊，某條件究竟需要外露幾個(gè)選項(xiàng)擅羞？是向改版后的數(shù)據(jù)提升妥協(xié)，還是像個(gè)老學(xué)究一樣偏執(zhí)于條件間一致性鲁森？這背后的糾結(jié)也只有參與過改版的人才明白祟滴。

1.收vs放

移動端受限于屏幕大小，如何才能“收放自如”顯得尤為重要歌溉。如果某些維度是用戶決策的必經(jīng)路徑垄懂，可以幫助用戶快速明確目標(biāo)；或者用戶需多次變更的篩選條件痛垛，就需要把選項(xiàng)露出來草慧。一些大多數(shù)用戶不需要的條件，或者使用頻次不高的內(nèi)容匙头，就建議把它用心收起漫谷。

2.結(jié)構(gòu)穩(wěn)定vs快捷偏好

上一次修改高級篩選時(shí)，我們結(jié)合用戶選購時(shí)的喜好分布蹂析，突出常用條件舔示，弱化低頻內(nèi)容，希望提供更符合“快捷偏好“的選購體驗(yàn)电抚。上線后惕稻，在高級篩選處發(fā)生的成交數(shù)據(jù)雖然上升，但也意外收獲了些吐槽的聲音-用戶對于不同條件的“選項(xiàng)展開數(shù)量”和“幾個(gè)篩選功能中條件的包含關(guān)系”蝙叛，表現(xiàn)出困惑和不習(xí)慣俺祠。

復(fù)盤后發(fā)現(xiàn)，我們希望帶給用戶更好的體驗(yàn)，本質(zhì)是希望用戶付出最小成本滿足需求蜘渣，但成本=操作成本+思考成本淌铐。之前的改版，就是一味顧忌用戶操作的快捷蔫缸，但無端增加了用戶對規(guī)則的理解載荷腿准。

所以當(dāng)選購數(shù)據(jù)喜歡分布明顯時(shí)，首屏露出最核心的幾個(gè)消費(fèi)決策項(xiàng)捂龄，收起低頻選項(xiàng)释涛，效果是顯而易見的加叁，但需要注意規(guī)則的一致及易懂倦沧。當(dāng)玩家選購路徑多元時(shí)，則需犧牲一些信息的簡潔性來保證玩家能在至少一個(gè)主要場景下它匕，找到完整的篩選條件展融。

3.穩(wěn)定性vs靈活性

由于我們平臺交易的是游戲道具，篩選條件多豫柬，且條件間關(guān)系復(fù)雜告希，容易因誤操作帶來無結(jié)果的消極體驗(yàn)。于是考慮引入“選項(xiàng)間靈活聯(lián)動”烧给。這在淘寶中使用較多燕偶，比如當(dāng)你選購咖啡時(shí)，選擇某“咖啡品牌”后础嫡，可選的“咖啡種類”會實(shí)時(shí)發(fā)生變化指么，自動剔除選項(xiàng)間互斥的內(nèi)容（見下圖）。

我們產(chǎn)品未必合適直接復(fù)刻這個(gè)體驗(yàn)榴鼎。因?yàn)樘詫氈挟a(chǎn)品特征突出伯诬，但我們以標(biāo)品為主，條件間映射關(guān)系并不淺顯巫财；加之我們條件多盗似，過多時(shí)隱時(shí)現(xiàn)的條件勢必會讓玩家迷失。所以最后只選擇了幾個(gè)關(guān)鍵的條件平项，添加了靈活聯(lián)動邏輯赫舒；并將不可選條件灰顯，而非消失闽瓢，進(jìn)而在顧忌選項(xiàng)靈活顯示的預(yù)期下接癌，對穩(wěn)定性做出妥協(xié)。

做篩選器的經(jīng)驗(yàn)尚淺鸳粉，沒有大而全的方法論扔涧，只能簡單羅列幾個(gè)小規(guī)律。又出于對工作內(nèi)容保密要求的考量，刪除了具體的改版示例枯夜，感謝能堅(jiān)持看到這里的客官弯汰，期待你的小心心~