如何让搜索框的体验更好？我总结了这些设计套路！(10)

大众点评做了一个很好的示例：我们搜索「牛栏山」（“牛栏山”是一个地名，同时也是酒的品牌）。大众点评搜索内容包括店铺名、地点和推荐菜，那么可能会有 3 种搜索结果：

• 名字中含「牛栏山」的店铺。

• 位于牛栏山商圈的店铺。

• 推荐菜中有「牛栏山」的店铺。

大众点评对结果列表做了适配，显示出命中搜索词的推荐菜（平时并不会显示），符合用户预期。

△ 大众点评的结果与搜索词对应

排序与筛选：排序与筛选维度与业务类型密切相关，不同行业差异较大。大致来说，排序有时间、距离、热度、价格、销量等维度；筛选维度则更加丰富和个性化，甚至会根据搜索内容进行变化。

一般排序功能会放在搜索栏与结果之间，便于切换。但有些App（主要是国外App，如亚马逊、YouTube），将排序功能收起，操作便利性不如前者。

筛选项维度少时，可以将筛选（与排序一起）放置在搜索栏与结果之间，点击后以下拉菜单的形式出现；若维度丰富，一般使用侧边栏形式。需要注意的是，多个筛选维度的叠加可能会导致结果过少，前置筛选结果数量是个不错的办法（如网易考拉海购）。

△ 排序与筛选

无结果或少结果：出现无结果或少结果时，可能有这几种情况：

• 选择了错误的分类

• 输入错误

• 搜索结果少或无

对于前两种，可以提示用户，或者自动帮用户纠正错误；对于后一种，一般会匹配相关结果进行补足，或者提示用户更换关键词、扩大搜索范围、进行订阅等。

例如 58 在搜索结果不足时，会引导用户订阅，当搜索结果更新时，会向用户主动推送。

△ 结果不足时，补足信息+订阅引导

2. 更多搜索方式

随着技术的发展，搜索方式越来越丰富。

比如语音搜索，不但为视力不佳的老年人提供了一种友善的方式，也适用于一些输入不便的移动场景。比如导航类内置语音搜索，可以在驾车途中实现路况查询、地点搜索、路线规划等功能。另外在一些音乐类App中，可以带入音律，实现「听歌识曲」，甚至是「哼唱识曲」。

△ 语音搜索

借助图像识别技术，图像搜索也得到了广泛应用。百度的「以图搜图」，可以搜索相似图片、追踪图片来源、获取不同尺寸的图片；小猿搜题的「拍照搜题」，利用OCR技术，进行快速识别，省去了输入的繁琐过程；淘宝等电商的「拍立淘」，一方面可以搜同款商品，一方面在无法准确描述商品名称的时候，也能进行搜索。

△ 图像搜索

结语

各个App采用不同的设计形式，本质上是因为它们对搜索功能的定位不同。

文章中已拆解分析了各种设计形式，希望能给大家带来一些启发。限于篇幅和自身水平，一些内容只是稍作介绍，更深的应用还需要大家去探索。

实践出真知。一方面，我们接触到一个App，可以从搜索的具体形式，来反推它的功能定位和应用场景，并且思考是否有更优的方案，以此提高自己的思辨能力。另一方面，在今后的设计实践中，我们应该从功能出发，综合考虑业务类型、功能定位、目标用户、应用场景，选用最合适的形式，提升搜索体验，让用户搜得更快、更准、更舒心。

欢迎关注58UXD 的公众号：

（编辑：ASP站长网）