精品国产肉丝袜久久,99久久er这里只有精品18

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

市值100萬到10000億的App，都是如何設計篩選功能的？

JOIN于宙

2016-08-01

5 評論 23919 瀏覽 228 收藏

19 分鐘

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

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

故作鎮定的給女神回信息：好啊，就去我經常去的那家王府養生宴吧，北京亮太俗了。

以上，你就完成了一次經典的從使用場景到消費決策的完美流程，而在這個路徑中最重要的一環，就是篩選。

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

用戶付出的成本則包括兩方面，一為操作成本：我需要點擊幾次 or 滑動幾次才能完成篩選？二為思考成本：“我要選這個篩選項還是另一個？”“這個篩選項是什么意思？點擊后會發生什么？”。為了降低用戶成本，我們需要優化操作路徑、減輕用戶的選擇負擔。具體思路我們后文細說。

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

PC淘寶，篩選項全部露出（左） vs 手機淘寶，藏起一部分篩選項（右）

一. “收”與“現”的博弈

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

“收”之極：

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

36氪：點擊頁面左上角三條橫線（左圖），出現篩選抽屜（右圖）

陌陌：點擊頁面右上角漏斗（左圖），彈出篩選浮層（右圖）

ENJOY：搜索結果頁不提供任何篩選項

為什么這些頁面要把篩選項全部“收”起來？因其產品類型更側重直接瀏覽，篩選功能的使用頻次不會很高。

36氪屬于垂直類新聞媒體，垂直于創業首先就已經相當于一次默認篩選，而新聞媒體的三大特性之一就包括時效性，用戶的核心需求是能瀏覽到最新內容，因此默認按時間排序即可；

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

ENJOY的SKU數量不多且每一個SKU質量都很高，用戶一個個瀏覽探索也不會心生厭煩（對比商家數量極大且平均質量不高的大眾點評）。

一句話總結：面對你的產品，當大多數用戶并不需要篩選，或者篩選頻次不高時，一般考慮將篩選項“收”起。

“現”之極：

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

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

為什么氧氣如此大膽地將所有篩選項平鋪開來，以至于占據屏幕空間的40%也在所不惜？因為它所展示的篩選維度皆為用戶決策的必經路徑：買bra必選罩杯和胸圍，買其他貼身衣物必選尺碼。與此同時，氧氣并不能保證每個內衣樣式都支持所有尺碼，不同的篩選組合會得出不同的篩選結果，用戶可能會多次變更篩選需求，因此也需將所有篩選項露出來。

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

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

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

為什么河貍家要在已有的篩選欄下方再列出“今日可約”“當前位置可約”和“附近手藝人”三個篩選項？因為O2O產品最常見的使用場景是即時消費和附近消費，將相關篩選項單獨露出來，可幫助用戶快速細化需求，甄選出符合要求的商品。

為什么應用寶要在搜索“游戲”后，給出更多提示詞？因為用戶可能連自己也不清楚自己究竟想要什么，需要我們幫他進一步明確需求。當你家小妹妹點了“女孩”“社交”而驚喜地發現『奇跡暖暖』『Minecraft』時，一次成功的篩選才算完成。

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

“收”與“現”的結合

當然，對于市面上大多數產品，簡單粗暴地將所有篩選項收起或露出，都是不適合的。如何達到“收”與“現”的平衡，必須結合產品類型、業務需求和用戶使用路徑做出綜合判斷。

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

京東：“香水”搜索結果頁首屏（左） vs 篩選抽屜（右）

首屏篩選項折射出的幾個重要決策點：

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

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

PS：首屏的“綜合”按鈕點開后會有“新品優先”的選項，這是為了給新上線的商品一些流量的入口。

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

二. 常見UI樣式與交互優化的可能性

接下來談一談篩選功能常見的UI樣式，其實上文已經涉及一些，現在我們系統地梳理一下，過程中會穿插一些交互優化的思考。

1.篩選抽屜/浮層式

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

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

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

河貍家亦可圈可點。篩選抽屜中側邊欄的設計方便用戶快速切換每一個篩選維度，同時又完整地展示了當前維度下的每一個篩選項。

2.篩選橫欄式

如大眾點評、京東

篩選橫欄：大眾點評（左） vs 京東（右）

篩選橫欄最常見的用法如大眾點評，在頁面上方列出1-4個維度，點擊某一維度后展開相應的篩選項。

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

3.標簽式篩選

如河貍家，淘寶頭條

篩選標簽：河貍家（左） vs 淘寶頭條（右）

標簽式篩選比較靈活，既可像河貍家按時間地點等維度進行功能型篩選，亦可如淘寶頭條從品類、熱詞等角度出發進行內容型篩選。

4.表單篩選

如去哪兒等酒店預訂類APP

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

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

PS：

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