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

1. 当前页面进行搜索

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

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

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

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

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

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

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

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

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

△ JOOX搜索

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

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

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

使用搜索

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

1. 推荐内容

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

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

在当前页面进行搜索;

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

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

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

输入框

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

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

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

热搜词

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

历史搜索

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

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

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