移动应用界面设计模式: 搜索、排序、筛选

时间:2014-09-14

  筛选选项的文案必须清晰易懂;被选中之后,要能明确的显示出"当前"状态。

  筛选展开列表

  这同样是一种很有效的信息筛选方式。滑动或点击界面底部或侧边的某种"把手",包含筛选选项的列表界面就会展开。在下图中我们可以看到,Audible应用的展开列表中只有一个简单的筛选切换栏,而Sam的展开列表所提供的筛选项目则复杂的多。不过对于后者,更好的设计方案是去掉"Filter"按钮,让地图可以随着用户的选择而动态更新。

mobile-apps-ui-design-patterns-search-sort-filter-refine-drawer-map

  筛选对话窗

  弹出对话窗具有模态特征。用户必须选择一个筛选选项,或是取消筛选动作。TripAdvisor的iOS应用使用了自定义的筛选对话窗,而USPS的Android应用则在对话窗中使用了系统原生的控件。

mobile-apps-ui-design-patterns-search-sort-filter-refine-dialog

  对话窗模式确实可以很好的完成筛选任务,不过前两种模式当中不包含具有模态特征的控件元素,这可以使用户更加自由的在不脱离当前界面上下文环境的情况下尝试各种筛选选项。

  在弹出对话窗的模式中,尽量保持选项列表的间断,避免滚动的发生。

  筛选表单

  与前面提到的排序表单模式类似,我们可以将一些高级的数据筛选和精炼选项整合在一个表单界面中。例如,WorldMate允许用户在筛选表单中按照价格、品牌和星级来筛选某地的酒店信息。Zappos的应用也采用了类似的做法,不过他们使用的基本都是iOS原生的界面控件。

mobile-apps-ui-design-patterns-search-sort-filter-refine-form-tab

  Freetime在筛选表单中使用了高度自定义化的控件元素。用户首先需要在里面选择一个主要的分类项目,然后在相应的二级筛选栏中做出选择,最后提交这些筛选选项。

mobile-apps-ui-design-patterns-search-sort-filter-refine-form-free-time

  条件筛选是一种相对高级的筛选机制,我们可以在Wufoo的Web应用中看到这类很标准的筛选模式:

mobile-apps-ui-design-patterns-search-sort-filter-refine-form-wufoo

  要在移动应用中利用各种控件创建复杂的筛选表单,这不是一件很轻松的事儿,不过看上去Roambi做的不坏:

mobile-apps-ui-design-patterns-search-sort-filter-refine-forms

  不要对筛选机制进行过度的设计,通常情况下,保持在当前界面中的筛选切换模式或展开列表模式都可以胜任。如果信息结构较为复杂,必须使用表单模式,那么要严格遵守系统平台的设计规范及具有普遍意义的最佳实践模式。

  作者:c7210

  文章来源:beforweb.com

  • 共5页:
  • 上一页
  • 5/5下一篇
    上一篇:商品列表排序方式的思考 下一篇:我的阿里框架升级项目总结(谈体验优化与用户

    相关文章

    最新文章