详细解析UI设计中搜索栏设计的技巧教程

页面保留搜索按钮

搜索按钮一般放置在搜索框的右侧，那么左侧就一定会保留返回icon，这样才能正常实现App的跳转路径。这种方式虽然比较规矩，同时减少输入框可显示的字符长度，但是用户识别成本会降低很多，返回和搜索按钮非常明确。

页面不保留搜索按钮

页面上没有搜索按钮，左侧的返回按钮也同时取消，点击「取消」按钮会返回上一个层级的页面。

这种方式一般会使用即时匹配(过程匹配)的搜索方式，需要进行搜索时，通过键盘的搜索按钮执行搜索操作。好处在于搜索按钮在右下角，符合手的操作习惯且在舒适操作区域，可以更快速地执行搜索操作，但是取消按钮无法明确返回逻辑，当用户需要退出搜索返回上一层级时需要进行尝试性地点击「取消」按钮。

如果页面上使用「搜索」按钮，则一定要保留返回的功能。使用「取消」按钮则会取消「返回」按钮，否则功能冗余。

得到结果

搜索完成后，结果页面会根据算法展示出相匹配的内容，结果展示也有多种方式。对于繁杂的内容，做好分类是很有必要的。一般来说，每个产品都有自己的分类方式，但归结为两大类：先分类再搜索和先搜索再分类。

1. 先分类再搜索

先分类再搜索有个很明显的特征就是搜索目的明确，用户已经知道自己想要查找什么样的内容。

比如：安居客这款产品，用户在使用搜索功能时，会非常明确的知道自己想要搜索的信息维度，所以先分类再搜索可以提高搜索准确率，减少用户搜索后筛选的成本。

2. 先搜索再分类

先搜索再分类则可以减少用户使用搜索功能的成本，但是会增加对结果筛选的难度。一般的操作是系统根据搜索词进行算法匹配，把所有结果都展示出来，然后提供分类筛选的功能。

这种方式对于用户无目的搜索的体验会更好，一般多见于电商、知识类等信息和分类明确的产品中。

比如：知乎的搜索逻辑，就是先根据搜索词匹配结果，展示所有信息，提供用户、话题、私家课、Live等分类搜索切换。

搜索功能的其他思考

本文主要探讨的是基于文字的搜索。除此之外其实还有，例如：语音搜索、图片搜索、扫码搜索，拍照搜索，拍照翻译搜索等等。最近几年，随着语音技术的不断成熟，语音搜索功能在音乐类APP上应用越来越多，通过识别音乐来搜索音乐的相关内容，部分音乐类app 还针对一些场合做了些语音搜索上的优化，比如听歌识曲、哼歌识曲，提高了用户搜索内容的效率。

如今，我们看到搜索的效率、体验设计都在不断发生着变化，随着AI技术的应用，搜索答案的准确性和相关性必将得到大幅提升。搜索互动性、个性化也会得到逐步提高。

欢迎关注作者的微信公众号：「晓吾设计」