百度前產(chǎn)品教父俞軍曾言: “用戶體驗(yàn)，就是讓用戶付出最小成本滿足需求”。

你躺在回龍觀的合租房里，感覺身體被掏空，寫字臺(tái)上吃完的黃燜雞米飯還沒來得及收拾，好久不聯(lián)系的女神忽然發(fā)來信息：明天晚上國(guó)貿(mào)附近一起吃個(gè)飯？你趕緊從床上蹦起來，迅速打開大眾點(diǎn)評(píng)，點(diǎn)擊『美食』，進(jìn)入『熱門商區(qū)』選擇了『國(guó)貿(mào)』，按『環(huán)境最佳』排序，最后咬咬牙，在『篩選』一欄惡狠狠地按下『300以上』，心里倒吸了一口冷氣。

故作鎮(zhèn)定的給女神回信息：好啊，就去我經(jīng)常去的那家王府養(yǎng)生宴吧，北京亮太俗了。

以上，你就完成了一次經(jīng)典的從使用場(chǎng)景到消費(fèi)決策的完美流程，而在這個(gè)路徑中最重要的一環(huán)，就是篩選。

對(duì)于篩選而言，用戶的需求就是找到中意的商品、內(nèi)容或人物，如在淘寶中找到好看又不貴的白色圓領(lǐng)T恤、在大眾點(diǎn)評(píng)找到附近評(píng)分5星的日本料理，或者在陌陌上找到你中意的約跑對(duì)象；為了滿足篩選需求，我們需要結(jié)合使用場(chǎng)景考慮到所有篩選維度（如按品牌篩選、按銷量排序、只看附近的商家等）并劃分優(yōu)先級(jí)。

用戶付出的成本則包括兩方面，一為操作成本：我需要點(diǎn)擊幾次 or 滑動(dòng)幾次才能完成篩選？二為思考成本：“我要選這個(gè)篩選項(xiàng)還是另一個(gè)？”“這個(gè)篩選項(xiàng)是什么意思？點(diǎn)擊后會(huì)發(fā)生什么？”。為了降低用戶成本，我們需要優(yōu)化操作路徑、減輕用戶的選擇負(fù)擔(dān)。具體思路我們后文細(xì)說。

回想PC時(shí)代，以淘寶為例，簡(jiǎn)單地將各個(gè)篩選項(xiàng)按不同維度平鋪開來即可。到了移動(dòng)時(shí)代，由于手機(jī)屏幕尺寸的限制，必須考慮哪些選項(xiàng)要“收”（藏起來），哪些選項(xiàng)要“現(xiàn)”（露出來）。

PC淘寶，篩選項(xiàng)全部露出（左） vs 手機(jī)淘寶，藏起一部分篩選項(xiàng)（右）

一. “收”與“現(xiàn)”的博弈

為了便于理解，我們首先從“收”與“現(xiàn)”的極端案例開始討論。

“收”之極：

如36氪、陌陌、ENJOY。三者的共同特點(diǎn)是其列表沒有任何篩選項(xiàng)，只有點(diǎn)擊頁(yè)面邊緣的篩選按鈕后，才會(huì)出現(xiàn)篩選界面。各位先看圖，容我稍后解讀。

36氪：點(diǎn)擊頁(yè)面左上角三條橫線（左圖），出現(xiàn)篩選抽屜（右圖）

陌陌：點(diǎn)擊頁(yè)面右上角漏斗（左圖），彈出篩選浮層（右圖）

ENJOY：搜索結(jié)果頁(yè)不提供任何篩選項(xiàng)

為什么這些頁(yè)面要把篩選項(xiàng)全部“收”起來？因其產(chǎn)品類型更側(cè)重直接瀏覽，篩選功能的使用頻次不會(huì)很高。

36氪屬于垂直類新聞媒體，垂直于創(chuàng)業(yè)首先就已經(jīng)相當(dāng)于一次默認(rèn)篩選，而新聞媒體的三大特性之一就包括時(shí)效性，用戶的核心需求是能瀏覽到最新內(nèi)容，因此默認(rèn)按時(shí)間排序即可；

陌陌用戶的核心決策點(diǎn)是顏值，只需在進(jìn)行一次性篩選后（如只看18-25歲女生），一張張刷臉就能滿足大多數(shù)用戶的需求；

ENJOY的SKU數(shù)量不多且每一個(gè)SKU質(zhì)量都很高，用戶一個(gè)個(gè)瀏覽探索也不會(huì)心生厭煩（對(duì)比商家數(shù)量極大且平均質(zhì)量不高的大眾點(diǎn)評(píng)）。

一句話總結(jié)：面對(duì)你的產(chǎn)品，當(dāng)大多數(shù)用戶并不需要篩選，或者篩選頻次不高時(shí)，一般考慮將篩選項(xiàng)“收”起。

“現(xiàn)”之極：

如氧氣，在搜索結(jié)果頁(yè)將所有篩選項(xiàng)（除了品牌）全部露出。同樣，先看圖，稍后解讀。

氧氣：將篩選項(xiàng)全部露出（罩杯、胸圍、尺碼）

為什么氧氣如此大膽地將所有篩選項(xiàng)平鋪開來，以至于占據(jù)屏幕空間的40%也在所不惜？因?yàn)樗故镜暮Y選維度皆為用戶決策的必經(jīng)路徑：買bra必選罩杯和胸圍，買其他貼身衣物必選尺碼。與此同時(shí)，氧氣并不能保證每個(gè)內(nèi)衣樣式都支持所有尺碼，不同的篩選組合會(huì)得出不同的篩選結(jié)果，用戶可能會(huì)多次變更篩選需求，因此也需將所有篩選項(xiàng)露出來。

為了進(jìn)一步說明什么樣的篩選項(xiàng)應(yīng)該“現(xiàn)”出，再舉河貍家與應(yīng)用寶兩例（一不小心暴露了我使用安卓機(jī)的殘酷事實(shí)）。

河貍家：將“今日可約”“當(dāng)前位置可約”“附近手藝人”單獨(dú)提出來

應(yīng)用寶：搜索“游戲”后，搜索框下方給出了“女孩”“社交”“武俠”等子選項(xiàng)

為什么河貍家要在已有的篩選欄下方再列出“今日可約”“當(dāng)前位置可約”和“附近手藝人”三個(gè)篩選項(xiàng)？因?yàn)镺2O產(chǎn)品最常見的使用場(chǎng)景是即時(shí)消費(fèi)和附近消費(fèi)，將相關(guān)篩選項(xiàng)單獨(dú)露出來，可幫助用戶快速細(xì)化需求，甄選出符合要求的商品。

為什么應(yīng)用寶要在搜索“游戲”后，給出更多提示詞？因?yàn)橛脩艨赡苓B自己也不清楚自己究竟想要什么，需要我們幫他進(jìn)一步明確需求。當(dāng)你家小妹妹點(diǎn)了“女孩”“社交”而驚喜地發(fā)現(xiàn)『奇跡暖暖』『Minecraft』時(shí)，一次成功的篩選才算完成。

一句話總結(jié)：如果某些篩選維度屬于用戶決策的必經(jīng)路徑、可幫助用戶快速明確需求，或者用戶需要多次變更篩選需求，那么可以考慮將其“現(xiàn)”出來。

“收”與“現(xiàn)”的結(jié)合

當(dāng)然，對(duì)于市面上大多數(shù)產(chǎn)品，簡(jiǎn)單粗暴地將所有篩選項(xiàng)收起或露出，都是不適合的。如何達(dá)到“收”與“現(xiàn)”的平衡，必須結(jié)合產(chǎn)品類型、業(yè)務(wù)需求和用戶使用路徑做出綜合判斷。

『京東』絕對(duì)可以作為“收”“現(xiàn)”問題研究范例。以“香水”為例，面對(duì)成千上萬的SKU，各種品類各種品牌各種香型各種價(jià)格，如何讓用戶付出最小的操作與思考成本實(shí)現(xiàn)最優(yōu)篩選，看過圖后我們一起討論。

京東：“香水”搜索結(jié)果頁(yè)首屏（左） vs 篩選抽屜（右）

首屏篩選項(xiàng)折射出的幾個(gè)重要決策點(diǎn)：

• 面對(duì)大量選擇時(shí)，人們傾向于從眾消費(fèi)，讓大多數(shù)人為自己背書——按銷量排序
• 我是屌絲，只買得起便宜的；我要給心儀的姑娘送禮，一定要買個(gè)貴的——按價(jià)格排序
• 我很著急，明天就要拿到貨——京東配送
• 該死的歡樂頌每天插播迪奧廣告，我家姑娘只認(rèn)Dior——按品牌篩選
• 我是男的給自己買，不買女士香水——按性別篩選
• 我明天見客戶需要商務(wù)款香水；我后天約姑娘需要情趣款香水——按適用場(chǎng)景篩選

以上作為最核心的幾個(gè)消費(fèi)決策點(diǎn)，顯然要在首屏頂部給個(gè)好位置露出來，用戶通過較少次點(diǎn)擊即可輕松完成篩選。

PS：首屏的“綜合”按鈕點(diǎn)開后會(huì)有“新品優(yōu)先”的選項(xiàng)，這是為了給新上線的商品一些流量的入口。

接下來，點(diǎn)擊篩選漏斗，彈出右圖的篩選抽屜。不難看出，這些篩選維度的優(yōu)先級(jí)遠(yuǎn)不如首屏出現(xiàn)的篩選項(xiàng)高。像“風(fēng)口香水”“淡香水EDT”這些選項(xiàng)如果出現(xiàn)在首屏，勢(shì)必會(huì)讓大多數(shù)用戶心生困惑進(jìn)而產(chǎn)生選擇恐懼。將其收在抽屜中，供香水深度使用者探索發(fā)現(xiàn)才是正道。然而我們發(fā)現(xiàn)，即便是收在抽屜中的篩選維度，也只能象征性地顯示三個(gè)篩選項(xiàng)，點(diǎn)擊“全部”后才能查看該維度的所有篩選項(xiàng)——畢竟，細(xì)分決策點(diǎn)太多，必須有所取舍。

二. 常見UI樣式與交互優(yōu)化的可能性

接下來談一談篩選功能常見的UI樣式，其實(shí)上文已經(jīng)涉及一些，現(xiàn)在我們系統(tǒng)地梳理一下，過程中會(huì)穿插一些交互優(yōu)化的思考。

1.篩選抽屜/浮層式

常用于承載復(fù)雜的篩選邏輯，如河貍家、Ebay、京東，看圖

篩選抽屜：河貍家（左） vs Ebay （右上） vs 京東 （右下）

Ebay的有一點(diǎn)微交互做的非常好。即在你進(jìn)行篩選的過程中，抽屜上方會(huì)實(shí)時(shí)展示篩選后的結(jié)果數(shù)（如圖中黃框內(nèi)所注）。在給用戶以可預(yù)期的安全感的同時(shí)，也可以避免因篩選結(jié)果數(shù)為0而給用戶造成挫敗感。

河貍家亦可圈可點(diǎn)。篩選抽屜中側(cè)邊欄的設(shè)計(jì)方便用戶快速切換每一個(gè)篩選維度，同時(shí)又完整地展示了當(dāng)前維度下的每一個(gè)篩選項(xiàng)。

2.篩選橫欄式

如大眾點(diǎn)評(píng)、京東

篩選橫欄：大眾點(diǎn)評(píng)（左） vs 京東（右）

篩選橫欄最常見的用法如大眾點(diǎn)評(píng)，在頁(yè)面上方列出1-4個(gè)維度，點(diǎn)擊某一維度后展開相應(yīng)的篩選項(xiàng)。

亦可如京東，點(diǎn)擊“銷量”后直接降序排列；第一次點(diǎn)擊“價(jià)格”后升序排列，第二次降序。

3.標(biāo)簽式篩選

如河貍家，淘寶頭條

篩選標(biāo)簽：河貍家（左） vs 淘寶頭條（右）

標(biāo)簽式篩選比較靈活，既可像河貍家按時(shí)間地點(diǎn)等維度進(jìn)行功能型篩選，亦可如淘寶頭條從品類、熱詞等角度出發(fā)進(jìn)行內(nèi)容型篩選。

4.表單篩選

如去哪兒等酒店預(yù)訂類APP

去哪兒酒店預(yù)訂：篩選界面首屏（左），篩選日期（右上），篩選城市（右中），篩選價(jià)位（右下）

預(yù)訂酒店是一個(gè)復(fù)雜的決策過程，何時(shí)入住何時(shí)離店、哪個(gè)城市哪塊區(qū)域、期待價(jià)位多少，都是用戶決策路徑的必經(jīng)之地。與此同時(shí)，上述每一個(gè)篩選維度都需要不同的UI樣式支持：如上圖，日期的篩選需要日歷界面，城市的篩選需要城市列表，價(jià)位的篩選需要滑塊組件。因此，需要將這些篩選入口收在一個(gè)表單中，并將已篩選的結(jié)果顯示在相應(yīng)位置上。

PS：

• 上圖中，去哪兒以滑塊組件（instead of 手動(dòng)輸入價(jià)格）實(shí)現(xiàn)價(jià)格篩選，有效降低了用戶操作成本
• 雖然在上圖中赫然出現(xiàn)了“開始搜索”四個(gè)大字，但其本質(zhì)上還是屬于篩選。試想一下，預(yù)訂酒店時(shí)，用戶腦海中實(shí)際上很難想到一個(gè)關(guān)鍵詞來”Search”，而是會(huì)想到一些限制條件來”Filter”。再說句題外話，“搜索”本質(zhì)上屬于一種狹義的“篩選”，只不過篩選項(xiàng)不是某個(gè)限制條件，而是用戶輸入的關(guān)鍵詞。

5.基于手勢(shì)的篩選

如Zillow Rentals，在地圖上用手指圈出一定范圍，篩選選定范圍內(nèi)的房源。經(jīng)測(cè)試體驗(yàn)一般，不過多贅述。

Zillow Rentals：在地圖上用手指圈出一定范圍，篩選選定范圍內(nèi)的房源

三. 常見的篩選維度

魏公村喬布斯曾言，篩選功能的設(shè)計(jì)無非是在各種篩選維度與UI樣式的排列組合中選取最優(yōu)組合。之前我們討論了常見的篩選UI樣式，接下來（也是最后）列舉一下常見產(chǎn)品類型的常見篩選/排序維度。

1.社區(qū)類產(chǎn)品

如貼吧、論壇等

• 最新回復(fù)優(yōu)先（可作為默認(rèn)排序，給最新回復(fù)以流量入口，如百度貼吧）
• 最新發(fā)帖優(yōu)先
• 推薦（可作為默認(rèn)選項(xiàng)，運(yùn)營(yíng)可以手動(dòng)安排展示內(nèi)容，如分答首頁(yè)）
• 熱門（瀏覽量最高）
• 精華（手動(dòng)加精）
• 關(guān)注的人發(fā)帖

2.直播類產(chǎn)品

如花椒，映客等

• 最新直播
• 推薦直播
• 熱門直播
• 附近直播/同城直播
• 達(dá)人直播
• 關(guān)注的人的直播
• 回放

3.電商類產(chǎn)品

如京東、淘寶。由于電商類產(chǎn)品銷售品類過多，因此僅取交集

• 按銷量排序/按好評(píng)排序
• 按價(jià)格排序
• 按最新上線排序
• 按品牌篩選
• 按人群/適用場(chǎng)合篩選
• 按物流篩選
• 按促銷類型篩選（如一元秒殺，紅包立減等）

4.O2O類產(chǎn)品

如大眾點(diǎn)評(píng)、美團(tuán)外賣等

• 按銷量排序/按好評(píng)排序
• 按價(jià)格排序
• 按最新上線排序
• 按品類篩選
• 按距離排序/按地點(diǎn)篩選
• 按營(yíng)業(yè)時(shí)間排序/篩選
• 按商家服務(wù)設(shè)施篩選（有無wifi停車位等）
• 按配送速度篩選（外賣）

ok，篩選維度就先列到這兒，具體要與哪種UI樣式組合，需依據(jù)產(chǎn)品類型和用戶路徑來決定。

總結(jié)一下

1.哪些情況該將哪類篩選項(xiàng)“收”起

• 產(chǎn)品本身側(cè)重瀏覽而非篩選，用戶篩選需求不強(qiáng)、篩選頻次不高
• 該篩選項(xiàng)并非用戶決策必經(jīng)路徑

2.哪些情況該將哪些篩選項(xiàng)“現(xiàn)”出

• SKU數(shù)量大、種類多，用戶需求分散不一，對(duì)篩選功能有較強(qiáng)需求
• 該篩選項(xiàng)屬于用戶決策必經(jīng)路徑，可幫助用戶快速明確需求
• 用戶需頻繁變更篩選需求

3.篩選中有哪些值得優(yōu)化的交互

• 實(shí)時(shí)告知用戶篩選結(jié)果數(shù)，給用戶以可預(yù)期的安全感（如Ebay）
• 盡可能減少手動(dòng)輸入，以其他交互形式代替（如去哪兒的價(jià)格滑動(dòng)組件）
• 某些排序按鈕可考慮復(fù)用，例如“價(jià)格從高到低”與“價(jià)格從低到高”僅用一個(gè)按鈕即可（如京東）

THE END

PS：我現(xiàn)在在做一個(gè)社交屬性的同城玩樂的移動(dòng)互聯(lián)網(wǎng)項(xiàng)目，如果你覺得我們彼此能提供的價(jià)值有交換的可能，歡迎給我發(fā)郵件。

作者：JOIN團(tuán)隊(duì)Wills，（微信個(gè)人號(hào)：water_boiled；微信公眾號(hào)：edisonlab，郵箱：yuzhouedison@qq.com）

轉(zhuǎn)載需要郵件申請(qǐng)，私自抄襲篡改的侵權(quán)必究。

本文由 @風(fēng)塵棋客 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。