當(dāng)設(shè)計師需要向用戶展示大量的數(shù)據(jù)時，總是不可避免要利用到篩選和排序。篩選和排序可以幫助用戶縮小他們正在尋找的數(shù)據(jù)范圍。

目前我正致力于提升一家大型電子商務(wù)的移動端用戶體驗。一個好的導(dǎo)航結(jié)構(gòu)以及深思熟慮后的篩選和排序，是讓用戶輕松找到目標(biāo)數(shù)據(jù)的關(guān)鍵。

篩選和排序的設(shè)計當(dāng)然絕不是一件復(fù)雜的事情，但仍有很多不同的方案去實現(xiàn)。

彈出式篩選頁

有很多APP使用這種方式。篩選頁在搜索結(jié)果屏幕上展示給用戶。篩選頁覆蓋在搜索結(jié)果頁之上是為與已經(jīng)展示的結(jié)果數(shù)據(jù)進行上下文的關(guān)聯(lián)。

Foursquare

Amazon

Etsy

• 應(yīng)用場景：當(dāng)篩選項不是很多，并且你希望能夠?qū)λ阉鹘Y(jié)果數(shù)據(jù)維持關(guān)聯(lián)時可以應(yīng)用。在展示搜索結(jié)果時應(yīng)用通常能收到好的效果。
• 案例學(xué)習(xí)： Foursquare and Etsy 都使用了標(biāo)準(zhǔn)模式，而Amazon則使用更為個性化的解決方案。

滿屏式篩選頁

這種方式同上文的彈出式很相似，但是它需要更多的專注力和更多的篩選條目，因此犧牲了對上下文的聯(lián)系。

Airbnb

Kayak

Hostelworld

• 應(yīng)用場景：當(dāng)需要篩選的數(shù)據(jù)很多時，這種方式能夠給你更多的可利用空間，并且用戶在翻看篩選項時不會覺得有干擾。
• 案例學(xué)習(xí)：上面的屏幕截圖中，Hostelworld更適用與上下文聯(lián)系的彈出式篩選頁方式，因為只有兩個篩選項要求用戶選擇；我會使用同上面的Foursquare相似的方式。Hostelworld還可以通過“重置”動作來簡化篩選。

搜索結(jié)果再篩選

搜索結(jié)果是難以預(yù)料的，因為數(shù)據(jù)的返回很大程度上是基于用戶的輸入。哪種方式是好的解決方案取決于垂直線上的數(shù)量和數(shù)據(jù)的總量。

Apple

Etsy

• 案例學(xué)習(xí)：蘋果平等對待每一個搜索請求。在之前頁面選中的分類現(xiàn)在放在滿屏式的篩選頁中。另一方面Etsy利用了更為靈活的方式：基于用戶搜索請求的特殊性，提供給用戶一個完全不同的方式。
• 如果用戶搜索一個一般性商品，例如“anchor（錨）”，Etsy就會提供分類讓你縮小搜索結(jié)果范圍。若果你是搜索更精確的商品，例如“anchor necklace（錨項鏈）”，Etsy就會馬上返回商品列表。

排序

與篩選不同，排序不限制展示給用戶的數(shù)據(jù)，但改變了結(jié)果的展現(xiàn)方式。通用的排序功能是按價格、品質(zhì)或字母順序。為了節(jié)省空間，可以學(xué)習(xí)上面的Etsy和Foursquare將篩選和排序合并在一個頁面中。

TripAdvisor

Kayak

Hostelworld

• 應(yīng)用場景：當(dāng)用戶很難自己找出極限值（如最低價格）時，排序便會發(fā)揮作用。在手機上，這種場景很早就存在，因為設(shè)計師需要在很有限的視圖尺寸上做設(shè)計。這是設(shè)計師必須做出的主觀決定。
• 案例學(xué)習(xí)：TripAdvisor和kayak都選擇了彈出式，而Hostelworld卻仍用滿屏式。再一次地，我建議他們不要用滿屏式，因為這樣會將用戶帶離查詢結(jié)果。

篩選項上：分開展示重要的選擇項

并非所有項目都值得被篩選。展示頂層決定項是個聰明的選擇，列如分別位于不同屏幕的產(chǎn)品類別。這些幾乎是所有用戶都會做出的決定，無論他們在尋找什么。

用戶會知道在哪個類別下他最能找到他要找的產(chǎn)品，但他可能無法確定價格范圍或顏色。

Postmates

Etsy

Apple

• 應(yīng)用場景：不是所有項都應(yīng)該填塞在篩選中。會被幾乎所有用戶選擇的重要的頂層選擇項最好放在最前。這也助于理清和簡化用戶體驗。
• 案例學(xué)習(xí)：Postmates讓你在進入APP上的一個商鋪前先選定產(chǎn)品類別，進入商鋪后即展示商品，并將產(chǎn)品類別藏于篩選頁上。

結(jié)論：思索再三

篩選和排序是幫助用戶更便捷地找到目標(biāo)的有力工具。多花些時間去考慮你的可能選擇——這會讓你獲益的。

記住，最好方法的是不需要篩選和排序——這是可能實現(xiàn)的。在這方面，Postmates是個很好的列子。

找出哪個篩選項被用得最多也是很有受益的。你可以基于這些結(jié)果為篩選項安排位置。airbnb知道房屋類型和價格是用戶用得最多的，因此他們把這兩項放在最上面。

就是這些了，正如我所說的，并不復(fù)雜~

來源： medium – Thierry Meier???譯文出處：Tuesday_Woo