搜索功能真的只是一个简单的搜索框吗？(来源于网络)

[图片上传失败...(image-fced30-1536229302301)]

一 搜索功能的作用

搜索系统在信息架构中帮助用户搜索他们想要的数据和内容，在APP中也是相当常见的组成部分。搜索系统通常是在产品内容太多，用户不知道如何通过其他路径直接获取特定内容的时候，才会使用。通过搜索引擎，过滤器等组件，最终将用户可能需要的结果呈现出来，这是搜索系统的主要功用。

产品的内容越多，用户的学习成本也越大。用户使用你的产品，他们希望越简单越好，越容易上手越好。所以快速而又准确的找到期望的功能或内容是用户的目标。在设计搜索系统时，能让用户点击、滑动等手势完成绝不输入。这样的搜索系统体验更好。

二 搜索功能的位置

第一种，标签栏独立的一级Tab，点击进入独立的搜索页面。这种形式提现搜索功能在APP中级别相对较高，重要性较高，下图依次是京东、网易严选、快放送药中的此类搜索。

[图片上传失败...(image-fb7fa1-1536229302301)]

第二种，首页导航栏搜索输入框直接呈现。这种形式相对第一种层级更低，浏览过程中随时都可以搜索，提高用户依赖度，下图依次是淘宝、网易云音乐、微信读书中的此类搜索。

[图片上传失败...(image-75ea40-1536229302300)]

第三种，导航栏最右边icon按钮点击展开或跳转。这种形式相对弱化了搜索功能，比如依赖于系统推送的页面就弱化搜索功能，下图依次是淘宝、京东、闲鱼中的此类搜索；

[图片上传失败...(image-391e1c-1536229302300)]

第四种，滑动下拉后展开搜索栏。这种形式不占用导航栏，弱化了搜索功能，下图是Airbnb的搜索。

[图片上传失败...(image-86eaec-1536229302299)]

三 搜索功能的结构

搜索页面主要包括输入框、取消搜索、历史搜索、热门搜索、删除搜索历史、键盘等。下图是京东的搜索。

[图片上传失败...(image-e01b11-1536229302300)]

1 历史搜索/热门搜索

历史搜索：影视类、电商类APP中比较重要，用户对第二次搜索同样的内容没有太多的耐心，重新输入会感到厌烦情绪。

热门搜索：对于获得最新资讯、热门、新闻等的应用，针对无目的性浏览搜索和对搜索内容不太了解的用户，热门搜索就比较常见和高效。这种搜索降低了用户搜索成本，提供了搜索建议，在一定程度上还可以进行运营推广。下图依次是京东、网易云音乐、爱奇艺。

[图片上传失败...(image-7e67c1-1536229302300)]

在电商类app中，热门搜索是商家的促销信息，历史搜索是用户关注度较高的内容，对用户来说，历史搜索比热门搜索重要。下图依次是京东、淘宝、网易严选的搜索。

[图片上传失败...(image-d743b5-1536229302300)]

在界面上，哪块重要就应该排在前面，或者占据较大位置。那么，如何做到以用户体验为中心，又兼顾到商家利益呢？大众点评的热门搜索在界面上方，且占据整个页面的1/3，历史搜索只占整个界面的1/3，强化了商家的促销内容，但是不方便用户操作。京东搜索界面体验度更好些，热门搜索的内容以向右滑动出现的形式，既推荐了较多的内容，又占用了较少的空间。下厨房历史搜索在上面，热门搜索放下面。

[图片上传失败...(image-21c852-1536229302300)]

总结：历史搜索比热门搜索重要，应排在前面，或者占据较大位置。

2.删除搜索

删除搜索分为删除单条历史，和清除所有搜索历史。

删除单条历史：京东等向左滑动手势，出现删除按钮进行删除。淘宝、爱奇艺等长按出现删除按钮进行删除。知乎、网易云音乐等每条历史搜索右侧放删除icon。还有一部分APP是没有删除单条历史功能的，比如支付宝、天猫、微信读书、网易严选等。

[图片上传失败...(image-acd958-1536229302300)]

清除所有搜索历史： 大多数清除搜索历史是在搜索历史最后面，如果搜索历史内容很多，必须滑到最后才可以清除。比较方便的做法是，在历史搜索标题的右侧，放删除icon，或者清除历史的文字，这样，用户不用滑动页面就可以清除历史，比如爱奇艺、淘宝、下厨房。

总结：删除单条搜索历史可以用icon，也可左滑点击删除按钮删除；清除搜索历史可以放在历史搜索标题右侧，不用下滑到底清除历史。

四 搜索方式

1 语音搜索

最基础最常见的就是文字搜索。但丰富的其他方式的搜索作为一种搜索的辅助功能，引导用户在搜索上获得更便捷更高效的体验。大多数APP采用边输入边联想的输入模式，输入过程中还可以使用拓展Icon在联想内容的基础上缩小范围筛选，从而帮助用户获得更接近需求的内容。

[图片上传失败...(image-d8aa50-1536229302300)]

如果搜索的内容涉及的类别较多、范围较广时，可采用分类标签的方式便于用户搜索，这点主要用于用户已知需要搜索的内容的类别，缩小搜索范围。

2 语音搜索

除了文字搜索，语音搜索的发展也逐渐在改变人们的使用方式。对于中老年人来说，语音搜索比文字搜索方便得多，他们使用智能机时不用再努力特意去学习打字，只要点击一个按钮就可以轻松输入他们想要的内容。而对于年轻人来说，虽然打字是件简单的事情，但是随着大多数的年轻人且越来越多在走路时也玩手机的趋势来看，语音搜索对于他们来说也是个十分便利的选择，如同语音聊天一样，人们会渐渐对语音输入产生依赖。

特别是音乐类用语音输入比较多，听歌识曲出现在多数音乐类app（常放在首页，作为二级页面），下图为京东的语音搜索。

[图片上传失败...(image-a25eb2-1536229302300)]

3 图像搜索

图像搜索也是一个便利的搜索方式。较为基础的是大家很熟悉的「以图搜图」，既可以当即拍照，也可以点击左下角上传图片进行识别。对于没有二维码和条形码的物品，如何快速搜索到并购买该物品呢？有时候在商场看到一件衣服，觉得价格太昂贵，或是看见其他人买了一个非常喜欢的东西，也想买一个同款，却又很难只根据颜色和表达不出的款式风格搜到最相近的物品。当场拍下物品的照片以后，用「以图搜图」模式搜索，识别出与拍摄物品相似的物品。比如京东的扫啊扫、AR扫、拍照购（下图），淘宝的扫一眼、扫描码、拍立淘。

[图片上传失败...(image-907eca-1536229302300)]

五 搜索功能的设计

完整的搜索功能包括三个阶段：（打开）搜索框；信息录入；搜索结果展示。

1 搜索框

第一，不同的产品对于搜索框的展示方式存在差异。有的产品搜索框直接就放在界面上方，用户可以直接进入信息录入阶段。但是有的产品的搜索框需要你点击放大镜按钮弹出。

第二，用户需要查找的内容可能属于不同的类别。以UI中国为例，用户可能需要查找的是一位设计师，一篇文章或者一个插画作品。在这种情况下，我们需要在搜索框的左边给用户提供了一个下拉列表给他们去选择查找期望的内容类别。

2 信息录入

信息录入目前来说最常见的就是文字录入，不过现在还有新兴的录入方式：语音录入和图片录入。语音录入我们最熟悉的产品就是一些音乐播放软件还有外语词典，比如qq音乐或者网易云音乐。用户想听一首歌，可以直接输入歌曲名，但是不知道歌名的情况下，可以通过语音的形式完成歌曲信息的录入。而使用图片完成信息录入的一个比较典型的例子就是淘宝的拍立淘，用户可以拍下心仪产品的照片，系统就会给你匹配相似的商品，非常方便。从这点来看，设计师必须要时刻掌握最新的科技信息，要不然很容易就被淘汰。

有的搜索记录和热门搜索都是通过下拉列表的样式来实现的。例如知乎。但是淘宝和京东选择的却是另一种布局方式。这种布局方式可以展示更多的信息。这迎合了电商产品的一个目标，长按可删除单条记录。

此外为了更方便用户操作，我们还可以在用户录入阶段给用户以自动提示。这样可以节省用户的操作时间，避免打错字。

3 搜索结果

展示形式多种多样，下面列举集中常见的展示形式。

第一种，单纯的文字列表展示（网易云音乐）；

[图片上传失败...(image-3cd463-1536229302300)]

第二种，文字加图片展示，电商类APP（淘宝）；

[图片上传失败...(image-da2319-1536229302300)]

第三种，按分类显示的展示，侧重内容相关搜索（微信）；

[图片上传失败...(image-33e85-1536229302300)]

第四种，在给根据地图搜索附近商店可以给用户直观地展现，根据远近和路线决定目的地。如大众点评。

[图片上传失败...(image-59337e-1536229302299)]

搜索结果最复杂的一点就是如何展示不同类型和级别的内容。例如，你在支付宝里搜索账单，搜索出来的结果包括账单相关的应用，生活号和资讯。为了进行区分，级别更高的应用和生活号我们会加一个图标展示。当然用户还可以通过tab切换的形式选择合适的内容类别。有的情况下搜索结果过多，而用户又没有时间一个个的去看。我们可以引入筛选器来帮助用户在短时间内找到期望的内容，不要花时间去翻页或者滑动查找。

搜索结果为零的时候，我们如何给用户设计合适的空页面。现在一些搜索结果是通过加载一个新的页面来展示的，如果我们不给用户说清楚。用户会误以为是网络原因导致页面加载失败而不是搜索不到你想要的商品。所以空页面设计一定要向用户解释清楚原因。

如何提高搜索结果的精确度？可以根据搜索的结果的范围度可进行分类筛选，为了让搜索结果缩小范围，搜索更精确。

以上，希望有用，谢谢～