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

  很多信息类服务站点都是通过分类的方式来组织相关内容信息的,例如交通工具方面的卡车、货车、SUV等;而Greensheet这样的网站则是直接将售卖信息一股脑的堆在一个又一个的页面中,如果我(英文原文作者)想找点儿什么,真的必须挨个看下去。谢了,我还不如直接在手机上用Craigslist应用呢。

  在使用Craigslist的过程中,我就琢磨着,作为普通用户,我们确实可以很明显的受益于那些在信息的搜索、排序和筛选方面做的很到位的UI设计模式。在本文中,我们将一起了解一下,有哪些设计模式可以帮助我们按照用户所期望的方式将数据信息更加有效的组织和呈现出来。

  搜索

  首先为各位推荐两本这方面的好书,"Search Patterns: Design for Discovery"和"Designing Search: UX Strategies for eCommerce Success" (前者国内有引进,即《搜索模式》一书)。然后我们接茬来看移动应用当中与搜索相关的设计模式。

  显性搜索

  自动完成

  动态搜索

  指定搜索范围

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

  搜索表单

  搜索结果

  显性搜索

  作为最普通和最常见的搜索模式,显性搜索依靠显性的动作行为及表现方式来执行搜索任务、展示搜索结果。在这种模式中,搜索按钮会出现在输入框的右侧,或直接嵌入虚拟键盘中 (这种情况下可以将"取消"按钮放在搜索栏中)。搜索结果通常会直接呈现在搜索栏下面的区域当中。在设计方案里,可以考虑将线性搜索与自动完成模式搭配使用。


  在这种模式中,提供显性的搜索按钮,同时还可以为用户提供用来取消当前搜索行为的操作方式。当搜索正在执行时,提供明确的状态反馈。

  自动完成

  可以说,这是随着Web 2.0那波儿大潮所涌现出的一种最经典最实用的搜索模式。用户在输入关键词的同时,系统会即时提供一些根据当前已输入文字所猜测出来的搜索结果,如果用户发现其中的某个条目正是自己想要的,那么直接点击就可以完成搜索。当然,在没有恰当的候选条目或是用户觉得不手动输入完整关键词就活不下去的情况下,这仍然是一个能够正常完成搜索功能的普通模式。


  理想情况下,系统应该随着用户的输入而立刻提供搜索结果,但在实际当中,用来反馈系统工作状态的视觉提示也是必要的。上图右侧,Netflix直接将状态提示做在了关键词输入框内部靠右端的位置;另一种常见的做法是将其放置在搜索结果所要出现在的位置。


  TripAdvisor提供了一种更为出色的自动完成模式,他们直接将即时呈现的搜索结果按照热门的旅行目的地、宾馆酒店等类型进行了归类。LinkedIn的做法也有几分类似,他们会优先显示那些与当前用户有直接联络关系的搜索结果。


  通过视觉提示向用户反馈系统当前的工作状态;可以考虑在搜索结果中对当前已输入的字符进行着重显示。

时间: 2024-10-30 20:41:54

移动应用界面设计模式: 搜索、排序、筛选的相关文章

具有引导性的移动应用界面设计模式:搜索、排序和筛选

文章描述:移动应用界面设计模式 - 搜索.排序.筛选. 决定放假期间先不上iOS Wow体验了:手头这篇译文不做完的话我心不甘.去年年底,我们曾经学习过一篇"具有引导性的移动应用界面设计模式",其英文原文来自O"Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个大公鸡的那本儿.今次这篇则是来自于本书的第四章--搜索.排序和筛选.貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起.接下来果断

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

决定放假期间先不上iOS Wow体验了;手头这篇译文不做完的话我心不甘.去年年底,我们曾经学习过一篇"具有引导性的移动应用界面设计模式",其英文原文来自O'Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个大公鸡的那本儿.今次这篇则是来自于本书的第四章--搜索.排序和筛选.貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起.接下来果断精分,进入原文作者人格. 很多信息类服务站点都是通过分类的方式来组

用户体验设计:丰富的交互为特色的Web界面设计模式

网页制作Webjx文章简介:两大行之有效的Web界面设计模式. Web界面设计 封皮上是这样描述本书的:想知道怎样在今天的Web上创造伟大的用户体验吗?--本书以当前最流行的Web站点为例,介绍了两大良行之有效的Web界面设计模式.如果你想构建或重构站点,并希望站点以丰富的交互为特色,那么本书就是你出奇制胜的宝典. 首先,这是一本工具书. 其次,这是自认为一本比较糟糕的好书.好书,因为它提供了大量思路与操作办法("最佳实践"的部分):糟糕的是平庸的用例和花里胡哨的组织(重复与滥用).鉴

互联网界面设计模式

Web界面设计 封皮上是这样描述本书的:想知道怎样在今天的Web上创造伟大的用户体验吗?--本书以当前最流行的Web站点为例,介绍了两大良行之有效的Web界面设计模式.如果你想构建或重构站点,并希望站点以丰富的交互为特色,那么本书就是你出奇制胜的宝典. 首先,这是一本工具书. 其次,这是自认为一本比较糟糕的好书.好书,因为它提供了大量思路与操作办法("最佳实践"的部分):糟糕的是平庸的用例和花里胡哨的组织(重复与滥用).鉴于此,我废弃书中巧言令色.不知所云的"六大原理&quo

对比几家B2C的商品属性筛选和搜索结果筛选

看到蛋黄的帖子里提到结构化搜索,说的没错,除了本身的搜索功能还应起到导航的作用.这其实是非常有用的功能,也是我在锐意和365时改版想做的功能,受限于技术实力未能完全实现.特此挑选京东:http://www.aliyun.com/zixun/aggregation/36498.html">中国新蛋网和美国新蛋网三个网站的商品属性筛选和搜索结构筛选进行比较,给大家参考: 以手机为例: 京东:商品属性只有基本的品牌:价格:品牌3种属性. 中国新蛋网:商品属性比较丰富,有品牌:价格:类型:存储:分

百度调整移动搜索排序算法 提升APP排名结果

新浪科技讯 4月11日上午消息,百度宣布开始对移动搜索排序算法进行调整,鼓励网站运营者与站长进行手机页的优化,同时新规则还将提升手机APP的排名. 百度相关负责人表示,目前用手机访问PC网站难以获得最佳浏览体验,经过此次调整与页面优化,用户将看到更加适应手机屏幕.简洁的搜索页面. 目前,百度针对网站主提供"兼有手机站和PC站"."只有手机站"."只有PC站"三类不同的优化帮助.网站主可以通过登录百度无线主页(open.shouji.baidu.c

SEO加速器促使网页搜索排序加速提升的原理

第一个是有趣的事情 新做网站的站长,都发现过一个有趣的事情:访问量会从几十人一下子飙升到1000多人. 网站上线后,自己每天辛辛苦苦地增加内容,每天勤勤快快地宣传,想让更多人来欣赏自己的网站,也算不白做个网站.可是访问的人总是很少,从最初只有自己一个人访问,到自己网友的访问,到友情链接带来的几个人,论坛发帖也来了几个人,访问的人呢?总是在几位几十位之间徘徊.实在是着急啊,就自己不断地换ip,刷网页,提高"访问量",小小自我安慰一下,满足一下,鼓励一下.这个郁闷啊,五味杂陈百感交集.就在

如何使Excel 2007用不同颜色显示分类排序筛选后数据

  Excel本身就具有对数据进行分类排序筛选的功能.如何使Excel2007用不同颜色显示分类排序筛选后数据呢?使得操作之后为了有一个更加直观的展示,我们需要让数据有不同的颜色进行显示;这样使我们的工作更有效率,也更有准确性,下面我们就详细讲解如何使Excel2007用不同颜色显示分类排序筛选后数据 在工资表中,如果想让大于等于2000元的工资总额以"红色"显示,大于等于1500元的工资总额以"蓝色"显示,低于1000元的工资总额以"棕色"显示

Win8如何在Metro界面即时搜索功能

  Win8在Metro界面即时搜索功能的方法如下: 1.按键盘win+c键后出现搜索框选择"搜索". 2.输入要查询内容(支持模糊搜索). Windows 8是微软于北京时间2012年10月25日23点15分推出的最新Windows系列系统.Windows 8支持个人电脑(X86构架)及平板电脑(X86构架或ARM构架).Windows 8大幅改变以往的操作逻辑,提供更佳的屏幕触控支持.

《跨境电商——速卖通搜索排名规则解析与SEO技术》一一1.3 从购买过程看速卖通的搜索排序机制

1.3 从购买过程看速卖通的搜索排序机制 下面我们从一个买家的角度来模拟一次购买决策过程,从而分析此过程中速卖通搜索排序机制的基本逻辑.之所以这么做,是为了让我们从卖家之外的角度对相关原理有更深入的理解,更有利于实际的SEO工作. 1.3.1 "关键词相关度"是排序基础 首先假设你和其他卖家发布了同样的新产品(比如假发),并且除了发布的新产品外,各卖家最初状态时的其他方面都是相同的(即销量.店铺的等级.好评率等都是一样的). 假如买家在搜索框中输入"假发"的关键词进