CEO寄語：
你躺在回龍觀的合租房里，感覺身體被掏空，寫字臺上吃完的黃燜雞米飯還沒來得及收拾，好久不聯(lián)系的女神忽然發(fā)來信息：明天晚上國貿(mào)附近一起吃個飯？你趕緊從床上蹦起來，迅速打開大眾點評，點擊『美食』，進(jìn)入『熱門商區(qū)』選擇了『國貿(mào)』，按『環(huán)境最佳』排序，最后咬咬牙，在『篩選』一欄惡狠狠地按下『300以上』，心里倒吸了一口冷氣。
故作鎮(zhèn)定的給女神回信息：好啊，就去我經(jīng)常去的那家王府養(yǎng)生宴吧，北京亮太俗了。
以上，你就完成了一次經(jīng)典的從使用場景到消費決策的完美流程，而在這個路徑中最重要的一環(huán)，就是篩選。
今天這篇文章，就是給大家分享一下我司內(nèi)部在設(shè)計篩選功能的時候，我是如何折磨可憐的只有幾個月工作經(jīng)驗的產(chǎn)品經(jīng)理的：你不但要知道怎么做，還要知道為什么這么做。講不出來？那就寫一篇報告。
本文的作者還是上次寫『分答』的那位但如今已經(jīng)擁有3個多月工作經(jīng)驗的PM Wills，歡迎各位高手們前來拍磚碾壓，冷嘲熱諷。
另外，為了保證這個公眾號的內(nèi)容豐富程度和更新頻率，和我還能在每天工作15小時之余抽出時間去看劉亦菲的爛電影，我在公司內(nèi)部開展了轟轟烈烈的槍手計劃，將來除了產(chǎn)品和營銷，還會有運營，內(nèi)容和技術(shù)的小伙伴們跟大家分別見面。等他們忙完最近一段的。
以下是正文：
關(guān)于移動產(chǎn)品"篩選"功能設(shè)計的思考
內(nèi)容摘要：
信息爆炸時代，篩選的重要性不必多言。手機屏幕前的你無時無刻不在進(jìn)行篩選，正如你在數(shù)不清的公號中關(guān)注并置頂了愛迪生商業(yè)實驗室，正如你讀到我的這篇文章，權(quán)因我家創(chuàng)始人的背書。
言歸正傳，今天我們要討論的是移動產(chǎn)品的篩選功能（也包括排序）。
百度前產(chǎn)品教父俞軍曾言:“用戶體驗，就是讓用戶付出最小成本滿足需求”。
對于篩選而言，用戶的需求就是找到中意的商品、內(nèi)容或人物，如在淘寶中找到好看又不貴的白色圓領(lǐng)T恤、在大眾點評找到附近評分5星的日本料理，或者在陌陌上找到你中意的約跑對象；為了滿足篩選需求，我們需要結(jié)合使用場景考慮到所有篩選維度（如按品牌篩選、按銷量排序、只看附近的商家等）并劃分優(yōu)先級。
用戶付出的成本則包括兩方面，一為操作成本：我需要點擊幾次 or 滑動幾次才能完成篩選？二為思考成本：“我要選這個篩選項還是另一個？”“這個篩選項是什么意思？點擊后會發(fā)生什么？”。為了降低用戶成本，我們需要優(yōu)化操作路徑、減輕用戶的選擇負(fù)擔(dān)。具體思路我們后文細(xì)說。
回想PC時代，以淘寶為例，簡單地將各個篩選項按不同維度平鋪開來即可。到了移動時代，由于手機屏幕尺寸的限制，必須考慮哪些選項要“收”（藏起來），哪些選項要“現(xiàn)”（露出來）。
PC淘寶，篩選項全部露出（左） vs 手機淘寶，藏起一部分篩選項（右）
“收”與“現(xiàn)”的博弈：
為了便于理解，我們首先從“收”與“現(xiàn)”的極端案例開始討論。
“收”之極：
如36氪、陌陌、ENJOY。三者的共同特點是其列表沒有任何篩選項，只有點擊頁面邊緣的篩選按鈕后，才會出現(xiàn)篩選界面。各位先看圖，容我稍后解讀。
36氪：點擊頁面左上角三條橫線（左圖），出現(xiàn)篩選抽屜（右圖）
陌陌：點擊頁面右上角漏斗（左圖），彈出篩選浮層（右圖）
ENJOY：搜索結(jié)果頁不提供任何篩選項
為什么這些頁面要把篩選項全部“收”起來？因其產(chǎn)品類型更側(cè)重直接瀏覽，篩選功能的使用頻次不會很高。
36氪屬于垂直類新聞媒體，垂直于創(chuàng)業(yè)首先就已經(jīng)相當(dāng)于一次默認(rèn)篩選，而新聞媒體的三大特性之一就包括時效性，用戶的核心需求是能瀏覽到最新內(nèi)容，因此默認(rèn)按時間排序即可；
陌陌用戶的核心決策點是顏值，只需在進(jìn)行一次性篩選后（如只看18-25歲女生），一張張刷臉就能滿足大多數(shù)用戶的需求；
ENJOY的SKU數(shù)量不多且每一個SKU質(zhì)量都很高，用戶一個個瀏覽探索也不會心生厭煩（對比商家數(shù)量極大且平均質(zhì)量不高的大眾點評）。
一句話總結(jié)：面對你的產(chǎn)品，當(dāng)大多數(shù)用戶并不需要篩選，或者篩選頻次不高時，一般考慮將篩選項“收”起。
“現(xiàn)”之極：
如氧氣，在搜索結(jié)果頁將所有篩選項（除了品牌）全部露出。同樣，先看圖，稍后解讀。
氧氣：將篩選項全部露出（罩杯、胸圍、尺碼）
為什么氧氣如此大膽地將所有篩選項平鋪開來，以至于占據(jù)屏幕空間的40%也在所不惜？因為它所展示的篩選維度皆為用戶決策的必經(jīng)路徑：買bra必選罩杯和胸圍，買其他貼身衣物必選尺碼。與此同時，氧氣并不能保證每個內(nèi)衣樣式都支持所有尺碼，不同的篩選組合會得出不同的篩選結(jié)果，用戶可能會多次變更篩選需求，因此也需將所有篩選項露出來。
為了進(jìn)一步說明什么樣的篩選項應(yīng)該“現(xiàn)”出，再舉河貍家與應(yīng)用寶兩例（一不小心暴露了我使用安卓機的殘酷事實）。
河貍家：將“今日可約”“當(dāng)前位置可約”“附近手藝人”單獨提出來
應(yīng)用寶：搜索“游戲”后，搜索框下方給出了“女孩”“社交”“武俠”等子選項
為什么河貍家要在已有的篩選欄下方再列出“今日可約”“當(dāng)前位置可約”和“附近手藝人”三個篩選項？因為O2O產(chǎn)品最常見的使用場景是即時消費和附近消費，將相關(guān)篩選項單獨露出來，可幫助用戶快速細(xì)化需求，甄選出符合要求的商品。
為什么應(yīng)用寶要在搜索“游戲”后，給出更多提示詞？因為用戶可能連自己也不清楚自己究竟想要什么，需要我們幫他進(jìn)一步明確需求。當(dāng)你家小妹妹點了“女孩”“社交”而驚喜地發(fā)現(xiàn)『奇跡暖暖』『Minecraft』時，一次成功的篩選才算完成。
一句話總結(jié)，如果某些篩選維度屬于用戶決策的必經(jīng)路徑、可幫助用戶快速明確需求，或者用戶需要多次變更篩選需求，那么可以考慮將其“現(xiàn)”出來。
當(dāng)然，對于市面上大多數(shù)產(chǎn)品，簡單粗暴地將所有篩選項收起或露出，都是不適合的。如何達(dá)到“收”與“現(xiàn)”的平衡，必須結(jié)合產(chǎn)品類型、業(yè)務(wù)需求和用戶使用路徑做出綜合判斷。
『京東』絕對可以作為“收”“現(xiàn)”問題研究范例。以“香水”為例，面對成千上萬的SKU，各種品類各種品牌各種香型各種價格，如何讓用戶付出最小的操作與思考成本實現(xiàn)最優(yōu)篩選，看過圖后我們一起討論。
京東：“香水”搜索結(jié)果頁首屏（左） vs 篩選抽屜（右）
首屏篩選項折射出的幾個重要決策點：
面對大量選擇時，人們傾向于從眾消費，讓大多數(shù)人為自己背書——按銷量排序
我是屌絲，只買得起便宜的；我要給心儀的姑娘送禮，一定要買個貴的——按價格排序
我很著急，明天就要拿到貨——京東配送
該死的歡樂頌每天插播迪奧廣告，我家姑娘只認(rèn)Dior——按品牌篩選
我是男的給自己買，不買女士香水——按性別篩選
我明天見客戶需要商務(wù)款香水；我后天約姑娘需要情趣款香水——按適用場景篩選
以上作為最核心的幾個消費決策點，顯然要在首屏頂部給個好位置露出來，用戶通過較少次點擊即可輕松完成篩選。
PS：首屏的“綜合”按鈕點開后會有“新品優(yōu)先”的選項，這是為了給新上線的商品一些流量的入口。
接下來，點擊篩選漏斗，彈出右圖的篩選抽屜。不難看出，這些篩選維度的優(yōu)先級遠(yuǎn)不如首屏出現(xiàn)的篩選項高。像“風(fēng)口香水”“淡香水EDT”這些選項如果出現(xiàn)在首屏，勢必會讓大多數(shù)用戶心生困惑進(jìn)而產(chǎn)生選擇恐懼。將其收在抽屜中，供香水深度使用者探索發(fā)現(xiàn)才是正道。然而我們發(fā)現(xiàn)，即便是收在抽屜中的篩選維度，也只能象征性地顯示三個篩選項，點擊“全部”后才能查看該維度的所有篩選項——畢竟，細(xì)分決策點太多，必須有所取舍。
常見UI樣式與交互優(yōu)化的可能性：
接下來談一談篩選功能常見的UI樣式，其實上文已經(jīng)涉及一些，現(xiàn)在我們系統(tǒng)地梳理一下，過程中會穿插一些交互優(yōu)化的思考。
1.篩選抽屜/浮層式，常用于承載復(fù)雜的篩選邏輯，如河貍家、Ebay、京東，看圖
篩選抽屜：河貍家（左） vs Ebay （右上） vs 京東 （右下）
Ebay的有一點微交互做的非常好。即在你進(jìn)行篩選的過程中，抽屜上方會實時展示篩選后的結(jié)果數(shù)（如圖中黃框內(nèi)所注）。在給用戶以可預(yù)期的安全感的同時，也可以避免因篩選結(jié)果數(shù)為0而給用戶造成挫敗感。
河貍家亦可圈可點。篩選抽屜中側(cè)邊欄的設(shè)計方便用戶快速切換每一個篩選維度，同時又完整地展示了當(dāng)前維度下的每一個篩選項。
2.篩選橫欄式，如大眾點評、京東
篩選橫欄：大眾點評（左） vs 京東（右）
篩選橫欄最常見的用法如大眾點評，在頁面上方列出1-4個維度，點擊某一維度后展開相應(yīng)的篩選項。
亦可如京東，點擊“銷量”后直接降序排列；第一次點擊“價格”后升序排列，第二次降序。
3.標(biāo)簽式篩選，如河貍家，淘寶頭條
篩選標(biāo)簽：河貍家（左） vs 淘寶頭條（右）
標(biāo)簽式篩選比較靈活，既可像河貍家按時間地點等維度進(jìn)行功能型篩選，亦可如淘寶頭條從品類、熱詞等角度出發(fā)進(jìn)行內(nèi)容型篩選。
4.表單篩選，如去哪兒等酒店預(yù)訂類APP
去哪兒酒店預(yù)訂：篩選界面首屏（左），篩選日期（右上），篩選城市（右中），篩選價位（右下）
預(yù)訂酒店是一個復(fù)雜的決策過程，何時入住何時離店、哪個城市哪塊區(qū)域、期待價位多少，都是用戶決策路徑的必經(jīng)之地。與此同時，上述每一個篩選維度都需要不同的UI樣式支持：如上圖，日期的篩選需要日歷界面，城市的篩選需要城市列表，價位的篩選需要滑塊組件。因此，需要將這些篩選入口收在一個表單中，并將已篩選的結(jié)果顯示在相應(yīng)位置上。
PS：
上圖中，去哪兒以滑塊組件（instead of 手動輸入價格）實現(xiàn)價格篩選，有效降低了用戶操作成本
雖然在上圖中赫然出現(xiàn)了“開始搜索”四個大字，但其本質(zhì)上還是屬于篩選。試想一下，預(yù)訂酒店時，用戶腦海中實際上很難想到一個關(guān)鍵詞來"Search"，而是會想到一些限制條件來"Filter"。再說句題外話，“搜索”本質(zhì)上屬于一種狹義的“篩選”，只不過篩選項不是某個限制條件，而是用戶輸入的關(guān)鍵詞。
5.基于手勢的篩選，如Zillow Rentals，在地圖上用手指圈出一定范圍，篩選選定范圍內(nèi)的房源。經(jīng)測試體驗一般，不過多贅述。
Zillow Rentals：在地圖上用手指圈出一定范圍，篩選選定范圍內(nèi)的房源
常見的篩選維度：
魏公村喬布斯曾言，篩選功能的設(shè)計無非是在各種篩選維度與UI樣式的排列組合中選取最優(yōu)組合。之前我們討論了常見的篩選UI樣式，接下來（也是最后）列舉一下常見產(chǎn)品類型的常見篩選/排序維度。
1.社區(qū)類產(chǎn)品，如貼吧、論壇等
最新回復(fù)優(yōu)先（可作為默認(rèn)排序，給最新回復(fù)以流量入口，如百度貼吧）
最新發(fā)帖優(yōu)先
推薦（可作為默認(rèn)選項，運營可以手動安排展示內(nèi)容，如分答首頁）
熱門（瀏覽量最高）
精華（手動加精）
關(guān)注的人發(fā)帖
2.直播類產(chǎn)品，如花椒，映客等最新直播
推薦直播
熱門直播
附近直播/同城直播
達(dá)人直播
關(guān)注的人的直播
回放
3.電商類產(chǎn)品，如京東、淘寶。由于電商類產(chǎn)品銷售品類過多，因此僅取交集
按銷量排序/按好評排序
按價格排序
按最新上線排序
按品牌篩選
按人群/適用場合篩選
按物流篩選
按促銷類型篩選（如一元秒殺，紅包立減等）
4.O2O類產(chǎn)品，如大眾點評、美團(tuán)外賣等
按銷量排序/按好評排序
按價格排序
按最新上線排序
按品類篩選
按距離排序/按地點篩選
按營業(yè)時間排序/篩選
按商家服務(wù)設(shè)施篩選（有無wifi停車位等）
按配送速度篩選（外賣）
ok，篩選維度就先列到這兒，具體要與哪種UI樣式組合，需依據(jù)產(chǎn)品類型和用戶路徑來決定。
Finally 總結(jié)一下
1.哪些情況該將哪類篩選項“收”起
產(chǎn)品本身側(cè)重瀏覽而非篩選，用戶篩選需求不強、篩選頻次不高
該篩選項并非用戶決策必經(jīng)路徑
2.哪些情況該將哪些篩選項“現(xiàn)”出
SKU數(shù)量大、種類多，用戶需求分散不一，對篩選功能有較強需求
該篩選項屬于用戶決策必經(jīng)路徑，可幫助用戶快速明確需求
用戶需頻繁變更篩選需求
3.篩選中有哪些值得優(yōu)化的交互
實時告知用戶篩選結(jié)果數(shù)，給用戶以可預(yù)期的安全感（如Ebay）
盡可能減少手動輸入，以其他交互形式代替（如去哪兒的價格滑動組件）
某些排序按鈕可考慮復(fù)用，例如“價格從高到低”與“價格從低到高”僅用一個按鈕即可（如京東）
到此，本文戛然而止。虎頭蛇尾這四個字，我完美詮釋了后50%。隨著我司項目一步步推進(jìn)，深感“溝通”對于一個PM是多么重要的事情，對于本篇文章內(nèi)容和產(chǎn)品設(shè)計感興趣的朋友，可以在微信公眾號（edisonlab）回復(fù)：
你水平不行我來教你
沒錯一共9個字，就可以加我個人微信深度溝通啦。
THE END
