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

页面保留搜索按钮

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

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

页面不保留搜索按钮

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

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

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

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

得到结果

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

1. 先分类再搜索

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

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

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

2. 先搜索再分类

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

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

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

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

搜索功能的其他思考

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

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

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