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

热搜词

热搜词是根据算法展示搜索次数最高的关键词,对于进入搜索页面但没有强目的的用户来说,热搜词可以降低用户思考成本,提高产品/内容的查看次数。但是要注意热搜词的更新算法,热搜词本身就有引流的功能,如果单独按照搜索次数来决定是否上热搜,会出现热搜词榜非常稳定的情况。

历史搜索

历史搜索可以方便用户快速查找以前搜索的内容,无需再次输入,但是一定要注意保护用户隐私,历史搜索记录需要支持删除功能。另外搜索历史的承载页面通常会有两种做法。对于第3种进入搜索的方式,我们有两个页面可以用来承载搜索历史。

再拿抖音举例:搜索历史后置在从搜索推荐页再次点击搜索框时出现,也就是伴随键盘出现。这样比较符合正常逻辑,因为用户拉起键盘目的就是进行输入操作,此时出现搜索历史记录一方面可以减少重复搜索的操作成本,另一方面也让用户有回忆连贯的感觉。毕竟它提醒了我上次用这个 app 搜过什么内容,当时的感想是什么。

不过还有一个地方可以放,那就是第一次拉起的推荐页,具体如何选择也要看具体内容。JOOX选择放在这个页面,这样做的原因和好处在于真实的用户数据进入推荐页的用户一多半都是进行点击历史记录操作,放在第一个页面无疑缩短了用户重复搜索的路径,提高了效率。

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

2. 搜索方式

在输入搜索内容时关键词匹配有两种处理方式:一个是输入过程匹配;另外一个是输入完成匹配。

输入过程匹配

在输入时,每输入一个字符,就进行一次匹配,同时更新页面信息。这里更新的信息,可以是针对输入内容进行推荐的信息,也可以是搜索结果。这种方式可以对搜索结果做出即时反馈,引导性强,效率非常高,但是输入过程匹配对于计算能力要求比较高,可以根据自己的产品和实际情况考虑是否需要此功能,否则需要加载等待,影响体验。

输入完成匹配

仅在输入完成后,点击「搜索」按钮时,才开始进行搜索、匹配,直接展示搜索结果。这种方式省去了对输入时实时分析、引导的过程,适用于对搜索功能要求不高的情况。类似的产品如产品经理App,输入关键词后不会做出反馈,需要执行搜索才会展示相关内容。

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

很多产品采用组合的方式,即时匹配关键词并展示出来,点击关键词或者「搜索」按钮后再展示搜索内容。类似的产品可以查看京东、天猫等电商App,除了对输入内容做联想,还会展示出与关键词相关的维度,自动补全关键词,增加用户的选择。

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

3. 搜索/取消按钮

取消搜索的方式一般有点击「取消」按钮或者点击「返回」按钮。如果输入框已经输入字符,需要重新输入新的搜索词时,往往需要点击键盘上的删除按钮回删。当输入的内容较长时这个过程的体验就非常差,所以现在有很多产品都在输入框尾部提供了删除功能,一键删除输入的字符。这种功能在搜索页面需要进行二次搜索或者输入错误时,可以提供很好的体验。

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

如果你细心研究不同的App,会发现搜索/取消按钮大致分为两种:一种是保留搜索按钮;另一种是页面上取消搜索按钮,转而使用键盘的搜索按钮。