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

时间:2014-09-14

  在保存搜索结果的模式中,用户通常还需要花费额外的步骤为搜索结果命名,作为将来查看时的索引方式。而"最近的搜索条目"则由系统自行保存及呈现。对于自己的产品,要考虑哪种方式更加适合。

  搜索表单

  用户可以在搜索表单中使用某些高级搜索选项,例如通过某种方式选定搜索范围等。另外,搜索表单当中通常还会包含一个在视觉呈现方式上很突出的搜索按钮。

mobile-apps-ui-design-patterns-search-sort-filter-search-form
mobile-apps-ui-design-patterns-search-sort-filter-search-form-2

  尽量控制搜索表单中的交互元素数量,并按照正确的方式使用这些交互元素。在视觉上注意细节的把握,例如元素的对齐、文字标签的布局及字号等。

  搜索结果

  我们将搜索结果自身也看作整个搜索功能中的一个模式。搜索结果可以出现在与搜索操作相同的界面中,也可以存在于一个单独的搜索结果界面当中,看需求。搜索结果的呈现方式是多种多样的,包括表格(table)、列表(list)、缩略图等,另外还可以显示在地图当中。同一款应用可以同时使用几种不同的搜索结果表现形式,具体方式取决于搜索结果的类型及用户的设置。

mobile-apps-ui-design-patterns-search-sort-filter-result-1
mobile-apps-ui-design-patterns-search-sort-filter-result-2
mobile-apps-ui-design-patterns-search-sort-filter-result-3

  很多应用都会在搜索结果中使用延迟加载技术(lazy loading),通过这种方式首先加载一部分搜索结果,同时另外一部分继续载入。通常有两种方式可以触发更多内容的加载,一是自动加载,二是由用户手动点击某个按钮或链接来执行。

  我们可以使用延迟加载技术来代替传统的分页浏览模式,特别是在移动应用的上下文环境中,分页导航方式有悖于自然的交互模型,不符合用户直觉。另外,最好让用户了解搜索结果的条目总数,并为搜索结果提供合理的默认排序规则。

  排序

  为搜索结果选择一种最恰当的默认排序方式是很重要的,通常,我们可以根据自己产品的实际特性以及用户期望来对其进行设定。而改变搜索结果排序方式的设计模式大致有以下三种:

  排序切换

  排序选择器

  排序表单

  排序切换

  如果可选的排序方式不算太多,我们可以使用这种最简单的解决方案。将排序切换按钮放置在搜索结果的顶部或底部(具体位置根据界面中其他相关元素的布局而定),用户无需离开当前视图就可以轻松改变排序方式。

  下图右侧的Target应用将四种排序方式整合到了三个切换按钮中,其中的"价格"是可以进一步切换成为升序或降序的。

mobile-apps-ui-design-patterns-search-sort-filter-onscreen-toggle

  排序切换要有清晰明确的视觉呈现方式来表达"当前"的状态。

  排序选择器

  选择器模式算得上是切换模式的良好替代品。很多类型的UI控件都可以在这个模式中派上用场,具体的运用方式还要参考不同系统平台所提供的设计规范。例如,在Android应用中,菜单形式比较常见,而对于iOS来说,选择器(picker)和动作表单(actionsheet)都是比较合适的控件。

mobile-apps-ui-design-patterns-search-sort-filter-onscreen-selector-menu-android
  • 共5页:
  • 上一页
  • 3/5
  • 下一页
  • 上一篇:商品列表排序方式的思考 下一篇:我的阿里框架升级项目总结(谈体验优化与用户

    相关文章

    最新文章