音频 | 好用的搜索页都是这么设计的 -UI设计素材 UI设计素材网—

在从入口到中间页再到结果页的搜索过程中，中间页是涉及功能最多的页面，对搜索过程能否做到高效快速的影响非常大。但作为过程我们往往对它没有足够的重视，一笔带过的情况也很多。其实要做好搜索中间页需要思考和注意的地方还真不少，那么今天我们就来好好重新认识一下被忽视的搜索中间页吧↓↓↓

搜索是产品中的常见功能，通过搜索可以让用户更快速准确的定位目标。从用户角度，合格的搜索功能需要做到快速精准，而从产品角度，搜索功能则还需要兼顾用户引流、产品推荐、内容曝光等方面的需求，这就让搜索中间页有了丰富多样的功能。

下面我们就从中间页中出现的主要功能来展开，一一分析其样式特点及适用场景。

搜索中间页的主要功能有：搜索框、关键词联想、搜索分类、热门搜索、历史记录和猜你喜欢/广告区等↓↓↓

搜索框

搜索框无疑是中间页众多功能中的C位，如果说其他功能是可以自由组合的配菜，那么搜索框肯定就是无可替代的汤底啦，是每个搜索中间页的标配。它位于中间页的顶部，样式应延续其搜索入口的设计风格，需要我们注意的主要有两点：

·取消与返回

不同于一般页面的导航栏左侧是”返回“的设计，搜索中间页多数选择的是无”返回“按钮，而在搜索框右侧加“取消”，通过键盘的回车键确认并进行搜索。这也与iOS人机交互指南中的建议一致，多数产品都采用了这种设计。

除了这种主流样式也一些不同的设计，比如左侧依旧为”返回“按钮，右侧是”搜索“按钮的设计。

两种设计在只有一级的搜索页面时并无明显区别，无论是返回或是取消，都是结束当前搜索行为，二者的区别更多是体现在出现二级页面时。

比如拥有搜索分类的微信，搜索一级页面采用的是右侧取消的，而进入二级、三级页时，加上了左侧返回，这里”返回“对应回到上一步的操作页面，”取消“则对应结束整个搜索行为，直接回到最初页面。

· 是否默认弹起键盘

多数产品进入搜索中间页后，搜索框光标闪烁，键盘自动弹起呈待输入状态，让用户可以更方便快捷的操作。但也有一些产品进入中间页后需要重新点击搜索框唤起键盘，为页面内容预留更多展示空间，侧重于突出中间页的推荐内容。

关键词联想

关键词联想是在用户输入搜索词的时候实时反馈，对该词进行模糊匹配，以列表展示节约用户的输入成本，帮助用户更快速的找到目标完成搜索。

· 色彩区分

表现关键词与匹配内容的关联度，有三种形式分别是：无区别显示、弱区别显示与高亮显示。

无区别显示更加注重匹配结果的整体感，适合在格式统一的列表中使用；高亮显示则较为注重匹配结果与关键词的关系，在格式多样的列表中可以更好的突出重点。

搜索分类

搜索分类通常出现在内容较多、功能划分清晰的产品中，通过分类以缩小搜索范围，让用户更加快速精准地搜索到相关内容，提升搜索效率。

中间页的分类属于搜索前分类，用户的搜索目的非常明确且知道其搜索信息的所属类别，在搜索前选择以过滤无关信息，提升匹配度。比如在微信中搜索巴赫的音乐，搜索前选择音乐分类，其结果页显示则都是音乐；而未选择分类的搜索结果中则会有百科、文章、音乐、商品等。

分类的形式有tab、宫格、下拉列表以及组合式4种。

· tab

tab是最常见的形式，通常位于搜索框下方，适合2-5个类目的产品，若数量过多需要滑屏则不利于后面类目的曝光。如淘宝搜索中”全部/天猫/店铺“三项类目就采用了tab的形式。

· 宫格

宫格式也位于搜索框下方，相比tab来说数量上更加自由，类目多的情况下可以选择宫格式。除了纯文本样式，宫格式也可以加上图标或插画以增加视觉表现力，是最容易出彩的形式。

· 下拉列表

下拉列表一般出现在搜索框左边呈收起态，点击后展示。相比tab和宫格式它是最节省空间的形式，能为其他功能留下更多发挥空间。但收起状态下也影响了类目的曝光和操作的便利性，因此比较适合不经常切换的类目使用。

· 组合

当产品分类复杂，一种形式不足以表达清楚的时候出现的多种形式的组合。例如tab+下拉列表，逐层确定分类以缩小搜索范围，让搜索结果精准化。

· 气泡

气泡形式是以文字和色块为主的横向排列方式，内容相对并列且无排名。每行的显示数量根据内容自适应，但通常会给出字符限制不允许其超出一行，或者更短的如1-5个汉字等，使一行内能显示更多的内容，对页面空间的利用率较高。

气泡形式虽没有明确的排名，但也可以通过颜色及图标来区分优先级。如普通内容为文字+无色系，突出内容则为图标+文字+彩色系等。

· 列表

区别于横向的并列性，纵向排列的列表天然具有排名性，加上数字、图标等更是能突显内容的排名，是榜单性质内容的首选。

列表相比气泡有更强的扩展性，对文字字数限定较为宽松，除了标题，有些列表还可以增加缩略图、简介信息等，增加内容的吸引力，但这也占用较多的页面的空间，内容条目多的情况下通常需要滚动，会失去一部分内容的曝光量。

总体来说，气泡形式适合相对并列的简短内容，能多且平等的呈现整体；列表形式适合榜单排名等，对单体内容呈现的发挥空间更大。

历史记录

历史记录是对用户搜索历史的记录与展示，当用户再次进入时可直接选择，无需重新输入。一般若用户当前没发生搜索行为则该模块不展示。

· 形式

历史记录的形式也分气泡与列表，不同于上文热门搜索的图文、颜色等因素，历史记录只涉及文字信息，所以选择气泡或是列表，单纯从内容长度和页面空间的利用率考虑即可。并排的气泡更能节省空间，通常有多个功能的中间页会选择气泡形式，单功能中间页、普遍偏长的内容则可选择列表形式。

· 清除

历史记录涉及用户隐私，所以清除功能是必不可少的，这点也需要我们注意。完整的清除功能分为单条清除与全部清除，气泡形式的单条清除通常较为隐藏，长按后显示”x”，列表的则直接在右侧显示图标。

值得一提的是全部清除的位置，常见的样式是以图标形式存在于标题右侧，方便随时使用，但也有一些是以按钮或文字的形式在内容下方显示，这种形式就一般会固定位置或限制显示数量，以防止内容数量过多而产生滑动，增加操作步骤。

猜你喜欢/广告区

猜你喜欢是产品通过用户的搜索记录、浏览习惯或产品的运营需求，在中间页主动为用户推荐的内容，通常会加入图片以增加内容的吸引力。比如小米商城的banner形式，不管从图片内容与排列位置都比下面的气泡文字更容易吸引用户视线。

以上是对搜索中间页中涉及功能模块的整理与分析，希望再面对中间页各功能时能起到一定的参考与帮助。接上篇《为什么常见的垂直列表，你却总设计不好》后，我准备撸一遍组件，小伙伴们如果有想了解的组件或功能也欢迎在留言区留言哦~

划重点

· 搜索框使用较多的为右侧取消样式，进入中间页多数产品默认弹起键盘，除非产品需要更多空间来突出推荐内容。

· 高亮显示关键词，在格式多样的列表中可以更好的突出重点与匹配结果。

· 气泡形式为横向排列方式，内容相对并列且无排名，对页面空间的利用率较高。列表纵向排列天然具有排名性，比气泡有更强的扩展性，可以增加缩略图、简介信息等，但也占用较多的页面的空间。

· 历史记录的全部清除最好以图标形式存在于标题右侧，方便随时使用。如果在内容下方显示的，则需要固定位置或限制显示数量，以防止内容数量过多而产生滑动，增加操作步骤。

音频 | 好用的搜索页都是这么设计的