当前位置:首页 > 经验学习 > 交互设计

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

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

决定放假期间先不上iOS Wow体验了;手头这篇译文不做wan(完)的话我心不甘。去年年底,我们曾经学习过一篇“具有引导性的移动应用界面设计模式”,其英文原文来自O’Reilly动物园的一本新书,”Mobile Design Pattern Gallery”,就是封面上是个大公鸡的那本儿。今次这篇则是来自于本书的第四章——搜索、排序和筛选。貌似国内yin(引)进版也由XX出版社在做着了,真心不关我事,自己走起。接下lai(来)果断精分,进入原文作者人格。
很多信息类服务站点都是通过分类的方式来组织相关内容信息的,例如交通工具方面的卡车、货车、SUV等;而Greensheet这样的网站则是直接将售卖信息一股脑的堆在一个又一个的页面中,如果我(英文原文作Zhe(者))想找点儿什么,真的必须挨个看下去。谢了,我还不如直接在手机上用Craigslist应用呢。
在使用Craigslist的过程中,我就琢磨着,作为普通用户,我们确实可以很明显的受益于那些在信息的搜索、排序和筛选方面做的很到位的UI设计模式。在本文中,我们将一起了解一下,有哪些设计模式可以帮助我们按照用户所期望的方式将数据信息更加有效的组织和呈现出来。
搜索
首先为各位推荐两本这方面的好书,”Search Patterns: Design for Discovery”和”Designing Search: UX Strategies for eCommerce Success” (前者国内有引进,即《搜索mo(模)式》一shu(书))。然后我们接茬来看移动ying(应)用当中与搜索相关的设计模式。
显性搜索
自动完成
动态搜索
指定搜索范围
已保存的/最近的搜索条目
搜索表单
搜索结果
显性搜索
作为最普通和最常见的搜索模式,显性搜索依靠显性的动作行为及表现方式来执行搜索任务、展示搜索结果。在这种模式中,搜索按钮会出现在输ru(入)框的右侧,或直接嵌入虚拟键盘中 (这种情况下可以将“取消”an(按)钮放在搜索栏中)。搜索结果通常会直接呈现在搜索栏下面的区域当中。在设计方案里,可以考虑将线性搜索与自动完成模式搭配使用。


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

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

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

通过视觉提示向用户反馈系统当前的工作状态;可以考虑在搜索结果中对当前已输入的字符进行着重显示。
动态搜索
这种模式也可以被称为“动态筛选”,当用户在搜索栏中输入关键词时,已有的搜索结guo(果)会随之进行动态的筛选。看上去,这与前面的“自动完成”模式是差不多的,dan(但)实际上它们在交互模型方面有所区别。动态搜索模式的主要作用是对已有的信息列表进行提炼和筛选。

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

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: