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


本系列的文章的版權歸本人所有,如需轉載請注明出處:http://www.cnblogs.com/PengLee/,請大家自行維護好博客園的信譽風尚!

目錄

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

  殘缺的細化(反模式)

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

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

  如果說,你的應用現在正是這樣的話,那么你應該警覺起來。Facebook早期版本等簡化應用的經驗表明,用戶希望使用移動應用時能夠

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

    

    但是,經過了幾輪的更改,當前版本的亞馬遜將PC網站中的幾乎全部的篩選細化選項都加入到餓了移動應用端,包括:類別、配送

  客戶評分、價格區間、折扣、新舊程度、在庫狀況、賣家等,一應俱全。

                                    

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

  問題而又任何的削減,所以,在不具備充足的用戶調查前,不要想當然的認為,移動端的用戶不想被大量的細化選項所煩擾。

    淘寶

        

    在搜索結果的第一屏的頂部除了有一個“篩選”的下拉按鈕之外,還有專門針對商品的常用篩選功能:品類、鞋碼、功能,如果是T恤的話

  會是:圓領、V領、緊身等;當點擊了“篩選”下拉按鈕的時候,就進入了右邊的一屏,提供了幾乎PC網站上幾乎所有的篩選選項。

    美團

      

    一方面,當我們在搜索框中輸入“蘋果”的時候,建議列表中提供了相當豐富的表項,所以如果這能夠引導你在搜索的階段就進行相當程度

  的細化。而在搜索結果屏中,在頂部同樣提供了相當豐富的篩選選項。

    所以,記住殘缺的細化是一種危險的做法,除非你有足夠的把握。

    但是,這並不是說:強迫自己為應用想出更多的篩選方式。這樣做是不對的,所有的篩選選項都應該是合理的,而不是為了篩選而篩選,

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

  搜索結果中對於這個關鍵字的列表項中很有有非常多的種類。但是那些細分的應用,如餐飲應用,輸入“蘋果”之后,結果項肯定都是關於蘋果

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

  景點,沒有什么更多的篩選選項了,因此,移動應用的去哪網搜索結果中的篩選功能直接內嵌到內容中了(但這並不是說,去哪網這樣做很好)

      

 

  細化頁面

    這一部分,我們討論的問題是:細化頁面應該如何展現?以及其中應該注意一些什么問題?

    細化頁面應該如何展現呢?

      一般來說有三種類型:

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

          (1)可以是在結果頁面中的頂部或者側欄位置放置一些用戶篩選的復選或者單選類型的按鈕

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

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

           (2)可以使用燈箱

            像亞馬遜就是這樣。一般來說,在當前頁面中直接進行篩選會讓用戶感覺操作的過程更加流暢而不被打斷。

          (3)綜合使用(1)(2)

            如果篩選選項不多,並且篩選選項對於當前的頁面非常的重要的時候,結合使用(1)(2)是非常好的方式

            比如,當我們通過搜索“北京——沈陽”的機票之后,出現的結果頁面中,應提供的篩選選項有:航空公司、起飛時段、

            起降機場等幾個非常重要的篩選選項,就可以按照去哪網的處理方式,兼用(1)(2):

            

      2、發生跳轉,點擊篩選按鈕之后,跳轉到一個專有的篩選頁面

      3、兼用上面兩種類型

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

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

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

      

    這個應用是“細化頁面”模式的楷模,提供了不同類型的使用的細化選項

    1、可多選的復選框

    2、能夠繼續深入的類別選項

      

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

        

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

         

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

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

       妙,通過使用二級下拉列表,將所有的篩選選項全部做到了一個頁面中,非常值得稱道。

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

        Greg Nudelman的說法是:排序實際上也是一種篩選,因此將排序放大篩選頁面中作為一個篩選選項的房方式是符合用戶預期的。

        這個問題,我沒有做過用戶調查,但是應該說國外的觀念和國內觀念可能是不一樣的,目前國內的很多應用還是將排序功能單獨分出來,

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

        了篩選頁面中了

 

  篩選標識

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

    1、專門提供一條篩選帶

    

    在IOS的應用中一般將篩選帶做成透明的

    

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

    淘寶

      

    去哪也是這樣

    

    但是,在上面的淘寶中,除了在頁面中直接顯示像“鞋碼”、"功能"這樣的少數的篩選選項之外,其余的篩選選項都在“篩選”下拉菜單中,但是這里面的

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

  法,可以值得我們借鑒一下,那就是:雖然不允許顯示所有的已勾選的篩選選項,但是可以通過顯示用戶勾選的選項的數目,通過這個數目的提示,告知

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

      

    如果大家有興趣的話,可以看看亞馬遜河淘寶PC端網站上面是通過怎樣的方式使用篩選標識的,那也是非常值得借鑒的!

 

  並行架構

    一般來說,應用可以提供兩套用於搜索的途徑,通過簡單的方式完成搜索,和通過專門的高級搜索完成搜索;稱之為並行架構

  簡單的搜索方式,一般通過為用戶划分好的分類列表實現,高級的搜索通過提供上一篇博文討論的Android UI 設計模式——搜索的設計提供

  看看Yelp就會非常清楚

  <>簡單的類目搜索

      

  <>高級的專用搜索

          

    一般而言,一個應用提供這兩套搜索方式就夠用了。而有的應用卻提供了非常多的搜索途徑,這會引起用戶的迷惑,因為用戶不知道如果要搜

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

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

              

    在並行架構中還有一個非常值得注意的問題,那就是一定要保證,需要以幾乎相同的方式顯示搜索結果,不論是通過簡單搜索得到的結構頁面,

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

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM