Android UI 設計模式——排序和篩選

本系列的文章的版權歸本人全部，如需轉載請註明出處：http://www.cnblogs.com/PengLee/，請你們自行維護好博客園的信譽風尚！

目錄

1. 殘缺的細化（反模式）
2. 細化頁面
3. 篩選標識
4. 並行架構

---

　　殘缺的細化（反模式）

　　　　正如Greg Nudelman所說的，移動應用並非削減對搜索結果列表進行細化和篩選選項的緣由。在手機或平板上對搜索結果進行

　　篩選和排序時，設計人員會由於移動端的屏幕限制，而使其中包含一兩個細化選項，而不是像在PC端那樣，提供風豐富的細化選項。

　　若是說，你的應用如今正是這樣的話，那麼你應該警覺起來。Facebook早期版本等簡化應用的經驗代表，用戶但願使用移動應用時可以

　　作得更多，而不是更少。亞馬遜的早期版本中，只提供了一種細化選項——類別

　　　　

　　　　可是，通過了幾輪的更改，當前版本的亞馬遜將PC網站中的幾乎所有的篩選細化選項都加入到餓了移動應用端，包括：類別、配送

　　客戶評分、價格區間、折扣、新舊程度、在庫情況、賣家等，包羅萬象。

　　　　　                              　

　　　　下面在來看看淘寶、美團移動應用中提供的細化粒度，你會發現，這些應用中提供的提供的細化選項很是的全，而不是由於屏幕小的

　　問題而又任何的削減，因此，在不具有充足的用戶調查前，不要想固然的認爲，移動端的用戶不想被大量的細化選項所煩擾。

　　　　淘寶

　　　　    

　　　　在搜索結果的第一屏的頂部除了有一個「篩選」的下拉按鈕以外，還有專門針對商品的經常使用篩選功能：品類、鞋碼、功能，若是是T恤的話

　　會是：圓領、V領、緊身等；當點擊了「篩選」下拉按鈕的時候，就進入了右邊的一屏，提供了幾乎PC網站上幾乎全部的篩選選項。

　　　　美團

　　　　  

　　　　一方面，當咱們在搜索框中輸入「蘋果」的時候，建議列表中提供了至關豐富的表項，因此若是這可以引導你在搜索的階段就進行至關程度

　　的細化。而在搜索結果屏中，在頂部一樣提供了至關豐富的篩選選項。

　　　　因此，記住殘缺的細化是一種危險的作法，除非你有足夠的把握。

　　　　可是，這並非說：強迫本身爲應用想出更多的篩選方式。這樣作是不對的，全部的篩選選項都應該是合理的，而不是爲了篩選而篩選，

　　通常來講，越是細分的應用，可提供的篩選選項就會越少，這是必然的，上面的亞馬遜、淘寶、美團是目標市場很廣的應用，對於一個關鍵字，

　　搜索結果中對於這個關鍵字的列表項中頗有有很是多的種類。可是那些細分的應用，如餐飲應用，輸入「蘋果」以後，結果項確定都是關於蘋果

　　的吃的東西，而不會是什麼旅館或者衣服。就那去哪網來講，提供的服務就是有關出行的，很是的明確，搜索結果無非就是：酒店、車票、機票

　　景點，沒有什麼更多的篩選選項了，所以，移動應用的去哪網搜索結果中的篩選功能直接內嵌到內容中了（但這並非說，去哪網這樣作很好）

　　　　  

 

　　細化頁面

　　　　這一部分，咱們討論的問題是：細化頁面應該如何展示？以及其中應該注意一些什麼問題？

　　　　細化頁面應該如何展示呢？

　　　　　　通常來講有三種類型：

　　　　　　一、不發生跳轉，在當前頁面直接進行篩選

　　　　　　　　　　（1）能夠是在結果頁面中的頂部或者側欄位置放置一些用戶篩選的複選或者單選類型的按鈕

　　　　　　　　　　　　像淘寶的結果頁面中頂部第二行就是這樣，這種方法對於那些篩選選項較少的應用來講是最適合的，由於這樣最直觀，

　　　　　　　　　　　　像上面的去哪網就可使用這種方式。

　　　　　　　　　  （2）可使用燈箱

　　　　　　　　　　　　像亞馬遜就是這樣。通常來講，在當前頁面中直接進行篩選會讓用戶感受操做的過程更加流暢而不被打斷。

　　　　　　　　　　（3）綜合使用（1）（2）

　　　　　　　　　　　　若是篩選選項很少，而且篩選選項對於當前的頁面很是的重要的時候，結合使用（1）（2）是很是好的方式

　　　　　　　　　　　　好比，當咱們經過搜索「北京——瀋陽」的機票以後，出現的結果頁面中，應提供的篩選選項有：航空公司、起飛時段、

　　　　　　　　　　　　起降機場等幾個很是重要的篩選選項，就能夠按照去哪網的處理方式，兼用（1）（2）：

　　　　　　　　　　　　

　　　　　　二、發生跳轉，點擊篩選按鈕以後，跳轉到一個專有的篩選頁面

　　　　　　三、兼用上面兩種類型

　　　　     　　淘寶就兼用了上面的兩種類型，參加上面的有關淘寶搜索的截圖

　　　　細化頁面中應該會注意的一些問題

　　　　　　①咱們先來看看eBay應用提供篩選功能中有哪些值得借鑑的地方

　　　　　　

　　　　這個應用是「細化頁面」模式的楷模，提供了不一樣類型的使用的細化選項

　　　　一、可多選的複選框

　　　　二、可以繼續深刻的類別選項

　　　　　　

　　　　三、同時在篩選界面中提供了排序選項

　　　　　　  

　　　　這樣的多維度、多類型、高度集成的篩選方式有着很好的用戶體驗，像亞馬遜、淘寶都遵循了這樣的原則

　　　　　　　  

　　　　　　②還有一個值得注意的問題：篩選頁面的層次不能夠太深，這樣容易讓用戶處於一種不安的境地中，加劇用戶的記憶負擔

　　　　　　　像上面的ebay的篩選層次就有些太深，點擊每個子類別的篩選列表項以後，又會進入下一個篩選頁面。亞馬遜和淘寶處理的很是巧

　　　　　　　妙，經過使用二級下拉列表，將全部的篩選選項所有作到了一個頁面中，很是值得稱道。

　　　　　　③排序選項是否應該放到篩選頁面中？

　　　　　　　 Greg Nudelman的說法是：排序實際上也是一種篩選，所以將排序放大篩選頁面中做爲一個篩選選項的房方式是符合用戶預期的。

　　　　　　　 這個問題，我沒有作過用戶調查，可是應該說國外的觀念和國內觀念多是不同的，目前國內的不少應用仍是將排序功能單獨分出來，

　　　　　　　 而且直接放在結果頁面中，能夠看看上面有關淘寶、美團、去哪網等截圖都是這樣，像亞馬遜和eBay這樣的外國應用都是將排序嵌入到

　　　　　　　 了篩選頁面中了

 

　　篩選標識

　　　　所謂的篩選標識就是，當咱們選了一些篩選選項以後，回到搜索結果頁面以後，對於選擇的篩選選項有相應的提示。相應的方式有以下幾種

　　　　一、專門提供一條篩選帶

　　　　

　　　　在IOS的應用中通常將篩選帶作成透明的

　　　　

　　　　二、不專門的提供篩選帶，而是在篩選按鈕上顯示當前的篩選選項。在國內的主流app上基本上都是採用這種方式

　　　　淘寶

　　　　  

　　　　去哪也是這樣

　　　　

　　　　可是，在上面的淘寶中，除了在頁面中直接顯示像「鞋碼」、"功能"這樣的少數的篩選選項以外，其他的篩選選項都在「篩選」下拉菜單中，可是這裏面的

　　篩選選項並不會在回到搜索結果頁面中有任何的提示信息，究其緣由是屏幕尺寸的限制，不能將全部勾選的篩選選項所有顯示出來。可是亞馬遜和美團的作

　　法，能夠值得咱們借鑑一下，那就是：雖然不容許顯示全部的已勾選的篩選選項，可是能夠經過顯示用戶勾選的選項的數目，經過這個數目的提示，告知

　　用戶當前已經選擇了幾項篩選選項

　　　　  

　　　　若是你們有興趣的話，能夠看看亞馬遜河淘寶PC端網站上面是經過怎樣的方式使用篩選標識的，那也是很是值得借鑑的！

 

　　並行架構

　　　　通常來講，應用能夠提供兩套用於搜索的途徑，經過簡單的方式完成搜索，和經過專門的高級搜索完成搜索；稱之爲並行架構

　　簡單的搜索方式，通常經過爲用戶劃分好的分類列表實現，高級的搜索經過提供上一篇博文討論的Android UI 設計模式——搜索的設計提供

　　看看Yelp就會很是清楚

　　<>簡單的類目搜索

　　    

　　<>高級的專用搜索

          

　　　　通常而言，一個應用提供這兩套搜索方式就夠用了。而有的應用卻提供了很是多的搜索途徑，這會引發用戶的迷惑，由於用戶不知道若是要搜

　　索的話，到底應該使用哪一種搜索途徑，看看下面這個應用，一共有3條搜索途徑，很是容易使人迷惑

　　<>按類目搜索                                        <>經過點擊操做欄的放大鏡搜索                <>溢出菜單中也提供了搜索功能

　　            

　　　　在並行架構中還有一個很是值得注意的問題，那就是必定要保證，須要以幾乎相同的方式顯示搜索結果，不管是經過簡單搜索獲得的結構頁面，

　　仍是經過高級搜索頁面獲得的結果頁，保持統一性，才能不會使用產生困惑。不然，當用戶使用其中一種方式獲得結果的時候，會懷疑是否是使用

　　另外一種搜索方式獲得的結果頁面會提供更多的東西，如篩選選項或者其餘的優惠信息。這一點一點要銘記於心！