《移动应用 UI 设计模式》-- 搜索、分类和过滤

一、搜索

移动应用常见搜索模式

1.显性搜索

:black_small_square: “显性搜索要求用户执行明显的搜索操作并浏览搜索结果。”

:black_small_square: 这是应该是最初始也是最基本的搜索模式，能够满足用户搜索的基本功能，但显然不够智能。

:black_small_square: “建议为显性搜索搭配自动补全模式。”

思考：

优点--开发成本低。

缺点--相对来说，不够智能、体贴。

Artsy

2.自动补全搜索

:black_small_square: “用户输入内容时程序会立刻显示出一系列可能的输入结果，只要通过点击来选择某一项，程序就会执行搜索操作。另外一种情况是，用户持续输入内容，然后点击搜索按钮。”

:black_small_square: 或许是“网络应用和移动应用使用最广泛的搜索模式”。

:black_small_square: 最好使用活动指示器（例如：菊花转）作为反馈表明当前搜索活动正在进行，因为有时搜索结果的显示会延迟。

思考：

优点--减少用户输入成本；提高搜索效率；

缺点--网络状况不好的情况下可能无法达到理想状态，因此需要提供一定的反馈给用户（如：活动指示器）。

自动补全的内容--可以是与已输入内容相关的用户曾经搜索过的内容、相关的热门搜索内容、相关的系统推荐用户搜索的内容等，最好根据应用特性进行一定的优化。

自动补全内容的呈现位置--搜索框下拉列表中显示；直接在页面中显示。

Target&Etsy

3.动态搜索（动态过滤）

“用户输入搜索内容，程序将动态地过滤屏幕上的数据。”

思考：

适用于搜索有限的、已存储的数据，如联系人信息、聊天记录等，这时可以提供十分快速、流畅的搜索体验。“但它不太适合用来搜索海量数据”，因为数据量过大而难以快速执行搜索结果的响应。

印象笔记&QQ

4.范围搜索

在执行搜索前对搜索结果进行范围界定

根据数据集提供合理的搜索范围选项（最好限定在3~6个）

思考：

用户限定一个范围意味着提前剔除掉不必要的其他搜索范围，可以帮助用户在海量数据中更加快速的找到目标信息。但是，范围选项不宜过多，否则最好考虑“用搜索表单实现高级搜索功能”。

微博&QQ

5.保存搜索记录并显示最近搜索内容

“遵循基本的可用性原则：尊重用户的劳动成果”

“其他尊重用户劳动成果的做法包括基于地理位置的搜索或基于条形码的搜索。”

思考：

搜索记录最多保存多少条比较合适？

最近搜索记录的时间范围如何界定？

文本输入搜索之外的其他搜索方式包括：语音搜索、图片搜索、条形码搜索、二维码搜索等，这些搜索与传统的文本输入搜索进行搭配可以大大提高搜索效率。

eBay&Foursquare

6.搜索表单

“这种搜索模式的特征是，在一个独立表单内输入多项搜索条件和一个显性的搜索按钮。”

思考：

适用于具有多种属性的目标信息，如：订房（时间、类型、价格……）、订票（时间、地点、价格……）。

搜索条件不宜设置过多、繁杂。

对于不同搜索条件匹配不同输入方式，如：对于时间一般使用时间选择器。

最好允许目标不明确的用户进行模糊搜索，如：允许搜索宾馆时只限定时间这一条件进行搜索

网易火车票&同程

7.搜索结果

展示方式：表单、缩略图、地图……

当搜索范围较广且该应用没有提供范围搜索或者用户在全部范围下进行搜索时，搜索结果的展示通常是分组表单。为了让用户的信息浏览更有效率，每组列表通常只显示部分结果，其余结果被隐藏起来且只在用户主动点击时显示。

搜索结果较多时通常使用“延迟加载”，即“在加载其他搜索结果的同时显示当前已找到的结果”。

不论是表单还是缩略图，搜索结果的展示都是尽可能地提供给用户简洁且有效的信息，目的都是帮助用户快速甄别信息、找到目标信息并且执行目标操作。

可以考虑在结果列表里提供给用户一些可能的、常用的操作以帮助用户迅速完成任务，简化操作流程。

Starbucks&Tumblr

HBO NOW&NYT Cooking

总结

为了提供更好的搜索效果，上述搜索模式最好在考虑到应用类型、用户需求、使用场景的前提下选择适合的多个搭配使用。

考虑到移动设备的特性，搜索内容的录入除了文本输入外，应尽可能提供其他简化输入的方式（如：语音输入、图片搜索……），用选择代替输入（如：选择自动补全的内容、历史内容、推荐的内容）。

考虑到中文拼音和英文字母在输入时外观的相似性，当用户输入字母时，应当将该内容同时作为拼音考虑（如：输入“an”时，搜索结果最好也包括读音为“an”的汉字“安”、“暗”等）。因为用户很有可能没有意识到自己输入法处在英文还是中文界面，而这样做则可以让用户不需要再重新输入汉字便有可能找到想要的信息）

二、分类和过滤

在这个信息爆炸的时代，尽管我们有了范围搜索帮助我们在搜索前剔除了部分内容，但这并不够。我们还需要其他方式来帮助我们快速筛选想要的信息，因此我们需要--分类和过滤。

分类和过滤共同帮助用户对信息进行筛选，从而找到目标信息，这一功能的执行主要有以下几种方式：

:black_small_square: 屏内分类/过滤

在屏幕底部或顶部直接显示分类/过滤的选项，执行的功能与结果在同一页面显示。

适用于简单的分类/过滤。

Krush Mobile&Product Hunt

:black_small_square: 分类排序选择器/过滤容器/过滤对话框

当需要执行的分类/过滤条件较为复杂时，可以将其整合并隐藏起来，在需要时调用。

网易火车票&同程

:black_small_square: 分类表单/过滤表单

对于目标明确的用户或者高级用户，当他们需要执行一些高级、复杂的信息提炼时，可以通过使用表单的形式将条件整合起来，来帮助他们快速找到目标信息。但需要尽量选择简化的方式，否则很容易让用户失去耐心。

Airbnb

Foursquare&OpenTable

注意事项：

无论使用何种方式，都要确保“以明确的方式告知用户当前采用（生效）的分类选项。”

不要在过滤器的设计上花费太多心思，简单的屏内过滤器或过滤容器通常就够用了。

“根据操作系统的设计惯例选择控制搜索结果分类的方法，或使用不受操作系统影响的界面方案。

作者 Echo酱

关键字：UI设计, 设计师

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！