Android UI 设计模式——排序和筛选

本系列的文章的版权归本人所有,如需转载请注明出处:http://www.cnblogs.com/PengLee/,请大家自行维护好博客园的信誉风尚!

目录

  1. 残缺的细化(反模式)
  2. 细化页面
  3. 筛选标识
  4. 并行架构

  残缺的细化(反模式)

    正如Greg Nudelman所说的,移动应用并不是削减对搜索结果列表进行细化和筛选选项的原因。在手机或平板上对搜索结果进行

  筛选和排序时,设计人员会因为移动端的屏幕限制,而使其中包含一两个细化选项,而不是像在PC端那样,提供风丰富的细化选项。

  如果说,你的应用现在正是这样的话,那么你应该警觉起来。Facebook早期版本等简化应用的经验表明,用户希望使用移动应用时能够

  做得更多,而不是更少。亚马逊的早期版本中,只提供了一种细化选项——类别

    《Android UI 设计模式——排序和筛选》

    但是,经过了几轮的更改,当前版本的亚马逊将PC网站中的几乎全部的筛选细化选项都加入到饿了移动应用端,包括:类别、配送

  客户评分、价格区间、折扣、新旧程度、在库状况、卖家等,一应俱全。

                                    《Android UI 设计模式——排序和筛选》

    下面在来看看淘宝、美团移动应用中提供的细化粒度,你会发现,这些应用中提供的提供的细化选项非常的全,而不是因为屏幕小的

  问题而又任何的削减,所以,在不具备充足的用户调查前,不要想当然的认为,移动端的用户不想被大量的细化选项所烦扰。

    淘宝

    《Android UI 设计模式——排序和筛选》    《Android UI 设计模式——排序和筛选》

    在搜索结果的第一屏的顶部除了有一个“筛选”的下拉按钮之外,还有专门针对商品的常用筛选功能:品类、鞋码、功能,如果是T恤的话

  会是:圆领、V领、紧身等;当点击了“筛选”下拉按钮的时候,就进入了右边的一屏,提供了几乎PC网站上几乎所有的筛选选项。

    美团

    《Android UI 设计模式——排序和筛选》  《Android UI 设计模式——排序和筛选》

    一方面,当我们在搜索框中输入“苹果”的时候,建议列表中提供了相当丰富的表项,所以如果这能够引导你在搜索的阶段就进行相当程度

  的细化。而在搜索结果屏中,在顶部同样提供了相当丰富的筛选选项。

    所以,记住残缺的细化是一种危险的做法,除非你有足够的把握。

    但是,这并不是说:强迫自己为应用想出更多的筛选方式。这样做是不对的,所有的筛选选项都应该是合理的,而不是为了筛选而筛选,

  一般来说,越是细分的应用,可提供的筛选选项就会越少,这是必然的,上面的亚马逊、淘宝、美团是目标市场很广的应用,对于一个关键字,

  搜索结果中对于这个关键字的列表项中很有有非常多的种类。但是那些细分的应用,如餐饮应用,输入“苹果”之后,结果项肯定都是关于苹果

  的吃的东西,而不会是什么旅馆或者衣服。就那去哪网来说,提供的服务就是有关出行的,非常的明确,搜索结果无非就是:酒店、车票、机票

  景点,没有什么更多的筛选选项了,因此,移动应用的去哪网搜索结果中的筛选功能直接内嵌到内容中了(但这并不是说,去哪网这样做很好)

    《Android UI 设计模式——排序和筛选》  《Android UI 设计模式——排序和筛选》

 

  细化页面

    这一部分,我们讨论的问题是:细化页面应该如何展现?以及其中应该注意一些什么问题?

    细化页面应该如何展现呢?

      一般来说有三种类型:

      1、不发生跳转,在当前页面直接进行筛选

          (1)可以是在结果页面中的顶部或者侧栏位置放置一些用户筛选的复选或者单选类型的按钮

            像淘宝的结果页面中顶部第二行就是这样,这种方法对于那些筛选选项较少的应用来说是最适合的,因为这样最直观,

            像上面的去哪网就可以使用这种方式。

           (2)可以使用灯箱

            像亚马逊就是这样。一般来说,在当前页面中直接进行筛选会让用户感觉操作的过程更加流畅而不被打断。

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

            如果筛选选项不多,并且筛选选项对于当前的页面非常的重要的时候,结合使用(1)(2)是非常好的方式

            比如,当我们通过搜索“北京——沈阳”的机票之后,出现的结果页面中,应提供的筛选选项有:航空公司、起飞时段、

            起降机场等几个非常重要的筛选选项,就可以按照去哪网的处理方式,兼用(1)(2):

            《Android UI 设计模式——排序和筛选》

      2、发生跳转,点击筛选按钮之后,跳转到一个专有的筛选页面

      3、兼用上面两种类型

           淘宝就兼用了上面的两种类型,参加上面的有关淘宝搜索的截图

    细化页面中应该会注意的一些问题

      ①我们先来看看eBay应用提供筛选功能中有哪些值得借鉴的地方

      《Android UI 设计模式——排序和筛选》

    这个应用是“细化页面”模式的楷模,提供了不同类型的使用的细化选项

    1、可多选的复选框

    2、能够继续深入的类别选项

      《Android UI 设计模式——排序和筛选》

    3、同时在筛选界面中提供了排序选项

        《Android UI 设计模式——排序和筛选》

    这样的多维度、多类型、高度集成的筛选方式有着很好的用户体验,像亚马逊、淘宝都遵循了这样的原则

       《Android UI 设计模式——排序和筛选》 《Android UI 设计模式——排序和筛选》 《Android UI 设计模式——排序和筛选》

      ②还有一个值得注意的问题:筛选页面的层次不可以太深,这样容易让用户处于一种不安的境地中,加重用户的记忆负担

       像上面的ebay的筛选层次就有些太深,点击每一个子类别的筛选列表项之后,又会进入下一个筛选页面。亚马逊和淘宝处理的非常巧

       妙,通过使用二级下拉列表,将所有的筛选选项全部做到了一个页面中,非常值得称道。

      ③排序选项是否应该放到筛选页面中?

        Greg Nudelman的说法是:排序实际上也是一种筛选,因此将排序放大筛选页面中作为一个筛选选项的房方式是符合用户预期的。

        这个问题,我没有做过用户调查,但是应该说国外的观念和国内观念可能是不一样的,目前国内的很多应用还是将排序功能单独分出来,

        并且直接放在结果页面中,可以看看上面有关淘宝、美团、去哪网等截图都是这样,像亚马逊和eBay这样的外国应用都是将排序嵌入到

        了筛选页面中了

 

  筛选标识

    所谓的筛选标识就是,当我们选了一些筛选选项之后,回到搜索结果页面之后,对于选择的筛选选项有相应的提示。相应的方式有如下几种

    1、专门提供一条筛选带

    《Android UI 设计模式——排序和筛选》

    在IOS的应用中一般将筛选带做成透明的

    《Android UI 设计模式——排序和筛选》

    2、不专门的提供筛选带,而是在筛选按钮上显示当前的筛选选项。在国内的主流app上基本上都是采用这种方式

    淘宝

    《Android UI 设计模式——排序和筛选》 《Android UI 设计模式——排序和筛选》 《Android UI 设计模式——排序和筛选》

    去哪也是这样

    《Android UI 设计模式——排序和筛选》

    但是,在上面的淘宝中,除了在页面中直接显示像“鞋码”、”功能”这样的少数的筛选选项之外,其余的筛选选项都在“筛选”下拉菜单中,但是这里面的

  筛选选项并不会在回到搜索结果页面中有任何的提示信息,究其原因是屏幕尺寸的限制,不能将所有勾选的筛选选项全部显示出来。但是亚马逊和美团的做

  法,可以值得我们借鉴一下,那就是:虽然不允许显示所有的已勾选的筛选选项,但是可以通过显示用户勾选的选项的数目,通过这个数目的提示,告知

  用户当前已经选择了几项筛选选项

    《Android UI 设计模式——排序和筛选》 《Android UI 设计模式——排序和筛选》 《Android UI 设计模式——排序和筛选》

    如果大家有兴趣的话,可以看看亚马逊河淘宝PC端网站上面是通过怎样的方式使用筛选标识的,那也是非常值得借鉴的!

 

  并行架构

    一般来说,应用可以提供两套用于搜索的途径,通过简单的方式完成搜索,和通过专门的高级搜索完成搜索;称之为并行架构

  简单的搜索方式,一般通过为用户划分好的分类列表实现,高级的搜索通过提供上一篇博文讨论的Android UI 设计模式——搜索的设计提供

  看看Yelp就会非常清楚

  <>简单的类目搜索

  《Android UI 设计模式——排序和筛选》    《Android UI 设计模式——排序和筛选》

  <>高级的专用搜索

      《Android UI 设计模式——排序和筛选》    《Android UI 设计模式——排序和筛选》

    一般而言,一个应用提供这两套搜索方式就够用了。而有的应用却提供了非常多的搜索途径,这会引起用户的迷惑,因为用户不知道如果要搜

  索的话,到底应该使用哪种搜索途径,看看下面这个应用,一共有3条搜索途径,非常容易令人迷惑

  <>按类目搜索                                        <>通过点击操作栏的放大镜搜索                <>溢出菜单中也提供了搜索功能

  《Android UI 设计模式——排序和筛选》       《Android UI 设计模式——排序和筛选》     《Android UI 设计模式——排序和筛选》

    在并行架构中还有一个非常值得注意的问题,那就是一定要保证,需要以几乎相同的方式显示搜索结果,不论是通过简单搜索得到的结构页面,

  还是通过高级搜索页面得到的结果页,保持统一性,才能不会使用产生困惑。否则,当用户使用其中一种方式得到结果的时候,会怀疑是不是使用

  另一种搜索方式得到的结果页面会提供更多的东西,如筛选选项或者其他的优惠信息。这一点一点要铭记于心!

    原文作者:RoperLee
    原文地址: http://www.cnblogs.com/PengLee/p/4512889.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞