第1章　移动端组件的认识与运用

01　搜索

文／付铂璎

目前，搜索是每个应用产品不可缺少的一部分，同时也是用户经常使用的功能。一个好的搜索设计能够提高转化率，提升用户体验。下面来看看搜索设计的一些套路。

搜索入口的设计样式

搜索入口的设计与搜索功能在产品中的位置密切相关，不同的应用场景所使用的搜索入口样式也是不同的，下面介绍四种常用的搜索入口样式。

1. 底部标签栏入口

把搜索功能作为底部标签栏中的一个功能模块，适合将搜索作为重要流量入口的App，同时也可以与其他的功能模块入口相结合，如下图所示：

“布卡漫画”就是把搜索和其他小的功能模块入口相结合，如热榜、VIP专区等。底部搜索入口本身并没有搜索功能，因此常常会与搜索框样式相结合使用。

2. 搜索框导航入口

这是常见的展示形式之一，将搜索入口以输入框的形式放置在导航栏中或者导航栏下方，有些应用即便界面向上滑动时，搜索框仍会吸顶显示，方便用户随时操作（是否吸顶显示要根据搜索功能在应用中的权重而定），如下图所示：

搜索框导航入口除了必须要有的输入框外，还需要一个搜索图标给予用户提示。目前很多应用也会利用搜索框内的区域显示预设文案，作为提示用户的关键词，也可以作为运营的入口来展示。

3. 搜索图标入口

这同样也是常用的搜索方式，常见形式是将一个放大镜的图标放在导航栏的右侧。相对上面提到的搜索框，它在视觉引导上略逊一筹，但节省了导航栏的空间，让导航栏可以为用户提供更多的功能，适用于搜索权重不高的应用中。当然也有特别的搜索图标方式，例如自如，同样是搜索图标，由于不同的位置和层级变化，入口变得更加突出，如下图所示：

4. 隐藏的搜索入口

为了让用户更多地使用桌面提供的快速入口，一些设计中的初始界面将搜索功能隐藏，滑动界面时才会出现搜索功能。例如iPhone手机解锁后的界面是各个应用入口，当向右滑动时，隐藏的搜索入口才会出现，如下图所示：

搜索方式

搜索方式就是我们通常会用哪些方法去搜索要找的东西，下面介绍三种常用的搜索方式。

1. 文字搜索

文字搜索是主要且常用的搜索方法，通过在输入框中输入关键字进行精准搜索。当点击输入框时，激活输入键盘，如下图所示：

2. 语音搜索

语音搜索不仅提升了搜索的便利性，也解决了老人和不会拼音的人群的问题。另外，在音乐类App中语音搜索功能得到了更好的运用，无论是在街边商场还是酒吧，当我们听见喜欢的歌曲时，可以用语音搜索功能进行歌曲识别，随时找到这首歌曲的名字，如下图所示：

3. 图像搜索

借助图像识别技术，图像搜索也得到了广泛的应用。例如，我们可以通过对图片进行拍照搜索到有关它的信息或者是和它相似的图片；还有电商应用中常用到的，对于无法准确描述的商品，可以通过图像搜索找到该物品。蘑菇街中就可以通过对现实物体拍照来找到想要的物品，如下图所示：

搜索的辅助功能

基于用户不同的搜索场景，需要给出不同的搜索辅助，一个好的搜索辅助，会让用户爱上你的应用。下面就来介绍五种常用的搜索辅助功能。

1. 热门搜索

热门搜索常见于搜索量比较大或者运营人员想让用户搜到的信息，同时给那些无目的的用户更多的选择，如下图所示：

2. 搜索历史

通过搜索历史，用户可以看到自己每次查找的记录，方便再次查看，如下图所示：

3. 猜你喜欢

猜你喜欢根据收集的用户记录为用户提供相关的内容，减少用户的思考时间，同时也为用户带来贴心的感觉，如下图所示：

4. 递进式搜索

递进式搜索通过点击系统提供的辅助字段，逐渐缩小搜索范围，对输入模糊关键字的用户也提供了很好的提示，使其更快地找到目标，如下图所示：

5. 类别搜索

当应用中涉及搜索内容的信息较多时，可以添加类别搜索功能，让用户先选择类别，然后再进行搜索，可以更快更精准地搜索到相关内容，如下图所示：

搜索结果展示形式

从搜索结果来看，依然有很多种展示形式，如文字、图片、模块、视频等。了解不同样式后，可以根据不同的应用类型来选择合适的搜索结果的展示形式。

1. 文字类

文字类主要以文字描述展示搜索结果，多用在新闻类、音乐类应用上。因为用户搜索的是关键字或歌曲本身的名字，图片对用户来说意义并不大，如下图所示：

2. 图片类

图片类主要以图片展示为主，用户会因为看到感兴趣的图片点击查看，所以多用在购物、资讯、电影等应用中，如下图所示：

3. 模块类

模块类主要用于包含多类别的应用，例如在得到App上进行搜索时，输入“人类简史”会发现有两个类别，一个是电子书，一个是课程。所以对于多类别的应用，我们应该扩大搜索范围并分类别展示，让用户可以通过分类更准确地查找想要的信息，如下图所示：

4. 视频类

下面要说的比较特殊，通常只有在视频类的应用中出现。因为用户搜索视频的目的较为明确，同时搜索出的结果也不会多样化，所以在此界面可放入更多的操作按钮方便用户进行选择观看，如下图所示：

画重点

（1）搜索入口的设计样式：搜索入口的设计需要根据搜索功能在产品中的位置而定，不同的应用场景所使用的搜索入口样式也是不同的，常用的四种为：底部标签栏入口、搜索框导航入口、搜索图标入口、隐藏的搜索入口。

（2）三种常用的搜索方式：文字搜索、语音搜索、图像搜索。

（3）五种搜索的辅助功能：热门搜索、搜索历史、猜你喜欢、递进式搜索、类别搜索。

（4）四种搜索结果展示形式：文字类、图片类、模块类、视频类。

通过上面对搜索功能的分析可知，无论在哪个阶段，都要对应用本身的适用人群、类型、功能权重等进行多维度分析，才能设计出更合理的搜索。所以搜索样式的本身没有好坏之分，在不同的场景下，选择最合适的形式才会提升搜索体验，让用户搜索得更快、更准。