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

进入搜索

进入搜索功能主要指的是用户发现并点击搜索功能后的交互及页面,虽然各种类型的App有所区别。

但是大致也分为三种:

在当前页面进行搜索;

进入新的页面并拉起键盘;

先进入一个推荐页,再进入搜索页并拉起键盘。

1. 当前页面进行搜索

在当前页面进行搜索可能是因为信息不好归类或者较为隐私,无法做数据处理,也表现为搜索功能对当前页面是弱需求,使用频率不高。

比如:iPhone手机短信的搜索功能,虽然是新弹出一个顶部栏,但是与在当前页面进行搜索无异,只是从视觉上进行了设计。

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

2. 进入新的页面并拉起键盘

进入新的页面,往往是因为搜索功能很重要且要展示的信息太多,需要有一个单独的页面去承载,这是当前最常见的一种方式。

在新页面中可以展示热搜词语或者运营需要展示的相关信息,也可以展示用户搜索历史等,进一步降低用户使用搜索功能的成本。

3. 进入推荐页,再进入搜索页并拉起键盘

以上两种进入情况都是伴随着键盘拉起动作的。所以为了更好地对推荐内容进行充分展示,有些 app 会选择先进入一个推荐流页面,把预置内容曝光给用户,用户再次点击搜索框时拉起键盘输入。

比如:抖音的搜索设计就是这样的,这样做相当于是拓展出了一个新的页面,用来承载丰富的推荐内容。但缺点是用户搜索路径变长,有一定的流失风险。

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

为了减少进入新页面的跳出感,我们可以在转场动效上做优化。在点击进入搜索页面时,让用户感觉仍然是在当前页面。

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

△ JOOX搜索

很多App在页面的初始状态时搜索功能是很明显的,并且占用一定比例的位置,但是在用户有其他操作的情况下,搜索功能的视图会发生对应的变化。

MOO音乐发现页的搜索功能在初始位置时是置顶的,但是当用户上滑页面时,会发生顶部搜索框隐藏被替换为分类,下滑页面恢复搜索框的交互效果。

因为该页面主要以推荐为主,当用户上滑页面时,搜索功能的需求被弱化,隐藏可以增加页面显示的内容,而为了可以让用户快速地进入搜索功能,只要执行下滑页面,就会恢复搜索功能。

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

使用搜索

从进入搜索页面开始,就需要查看页面内容,输入搜索词,点击搜索,这是用户使用搜索功能的完整过程。

1. 推荐内容

从刚进入搜索页面,到在输入框输入文字这段时间是推荐最好的时机,这会为目标性不是非常强的那部分用户提供大量可看内容。

上文已经讲过进入搜索页面的方式有3种:

在当前页面进行搜索;

进入新的页面并拉起键盘;

先进入一个推荐页,再进入搜索页并拉起键盘。

第一种是没有推荐内容的。后面两种页面从上到下可以分为3部分:输入框、热搜词、搜索历史。

输入框

输入框文本一般为「请输入搜索内容」,进入搜索页面后光标在搜索框起始位置并调用键盘,输入内容后搜索框会自动更新为输入内容。

还有一种方式是把「请输入搜索内容」替换为预设关键词并定时更新,点击搜索会直接搜索并展示搜索结果,这个过程也是引导的作用,与热搜词类似(如淘宝)。

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

在此基础上更进一步,那就是在进入搜索页面后,直接搜索并展示输入框关键词的搜索结果,这种方式可以更快速地向用户展示有针对性的运营内容,缺点是进入搜索页面即为结果显示页面,热搜词和搜索历史等内容就没有空间可以显示。