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

时间:2014-09-14

  动态搜索

  这种模式也可以被称为"动态筛选",当用户在搜索栏中输入关键词时,已有的搜索结果会随之进行动态的筛选。看上去,这与前面的"自动完成"模式是差不多的,但实际上它们在交互模型方面有所区别。动态搜索模式的主要作用是对已有的信息列表进行提炼和筛选。

mobile-apps-ui-design-patterns-search-sort-filter-DYNAMIC-SEARCH-facebook

  动态搜索模式用来对数据集进行即时的精炼和筛选,例如可以被用在地址簿或个人媒体库等方面的应用当中。但该模式不适于数据规模过于庞大的状况。

  指定搜索范围

  在某些情况下,可以让用户在执行搜索之前对搜索对象的类型和范围进行界定,从而得到更符合需求的搜索结果。Google和Photobucket的应用在指定搜索范围的操作形式上略有不同,但最终目的都是一致的。

mobile-apps-ui-design-patterns-search-sort-filter-scope-google-photobucket

  采用类似做法的还有AllRecipes以及Dropbox的应用。在Dropbox中,默认的搜索范围是全部内容,但无论在搜索被执行之前,还是结束之后,用户都可以进一步选择搜索范围,例如搜文件或是文件夹。

mobile-apps-ui-design-patterns-search-sort-filter-scope-allrecipes-dropbox

  根据产品自身的情况,合理的划分搜索类型,以便用户在执行搜索的时候进行选择。通常三到六个选项就够了,必要的时候可以通过表单来实现高级搜索功能。

  已保存的/最近的搜索条目

  优秀的移动应用界面设计都会尊崇一条最基本的可用性原则:尊重用户的付出。在搜索中,已保存的或是最近的搜索结果就是这条原则的良好体现。通过这两种模式,用户可以轻松的选择曾经搜索过的关键词,完全不必重新输入。

mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-ebay-walmart

  与这条可用性原则相关的设计模式还包括Trulia中的基于地理位置的搜索、Amazon的条码搜索、Google Shopper中的扫描及语音搜索,以及按照搜索日期进行分组的搜索历史记录。

mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-local-based-bar-code
mobile-apps-ui-design-patterns-search-sort-filter-saved-recent-google-shopper

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

  搜索表单

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

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

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

  • 共5页:
  • 上一页
  • 2/5
  • 下一页
  • 上一篇:自适应网页设计:不同的设备呈现同样的网页 下一篇:产品研发流程与合作之交互设计

    相关文章

    最新文章