编辑导读：搜索功能是产品的基础功能，帮助用户在纷繁复杂的信息中找到目标内容。作为一名设计师，不仅要关注设计方式，还要关注搜索结果如何更好地匹配用户的精确搜索、模糊搜索需求，以从信息层面提升用户体验。本文作者从交互设计的角度对搜索功能进行分析，与你分享。

01 搜索概述

搜索是许多应用的必备功能，能帮助用户从纷繁复杂的信息中找到目标内容，在我们日常使用的应用中，搜索功能的设计方式各式各样，交互体验也稂莠不齐。

除了设计方式外，搜索还涉及到结果信息的数据规则，受到算法精准性、商业化干预程度的影响，设计师同样需要关注搜索结果如何更好地匹配用户的精确搜索、模糊搜索需求，以从信息层面提升用户体验。

本文主要从交互设计的角度，讨论搜索的交互行为、信息组织形式与规则本身，从用户操作行为的维度提升搜索的体验。下面对搜索功能进行了梳理和总结，希望可以帮助大家更好地了解搜索功能的流程和设计。

02 搜索流程

搜索功能是有完整脉络的，即用户从触发搜索开始，就会有一套习惯的体验流程。尽管从用户的角度，未必对搜索的流程有清晰的流程感受，但从设计师角度，想要设计流畅的搜索体验是无法避开梳理搜索流程的，因为这对于设计师考虑完整的搜索链路和用户关键体验路径来说尤为重要。

在大部分互联网产品中，搜索基本可以分为 4 个流程，大部分应用都围绕这 4 个流程进行设计。分别是：搜索入口——搜索推荐页——搜索联想页——搜索结果页（或具体结果详情页）。

这里虽然被拆分成 4 个流程，但并不能简单理解为 4 个页面，因为未必需要涉及到页面跳转，具体下文会进行阐述。另外，在这 4 个流程中，还涉及到流程之间过渡的流畅性等体验点，以达到更自然的流程流畅无感知状态。

正向流程我们比较了解，因为这基本上都是用户的必经路径，而搜索还需要考虑到反向流程，即用户从搜索结果页返回时，应该返回至什么页面，是否会影响用户触发再次搜索操作？

常见的搜索返回流程有：

第一种：搜索结果页——返回搜索推荐页——返回搜索入口

第二种：搜索结果页——返回搜索入口

返回流程的路径区别主要是：取消搜索行为时，是否需要返回搜索推荐页？这两种路径，均有产品使用，也可能基于不同的考虑。

第一种：搜索结果页——返回搜索推荐页——返回搜索入口。可能的原因：

• 符合移动端的原路返回逻辑（哪里来回哪里去）
• 符合商业化规则，返回至搜索推荐页，多一层页面的曝光机会
• 便于用户触发再次搜索的行为

第二种：搜索结果页——返回搜索入口。可能的原因：

• 用户取消操作时，判断用户暂时没有再次搜索的强需求，即使有，也可以通过搜索入口再次触发
• 减少用户回退路径（搜索页面层级在用户视角上没有严格划分）

除了上述所列的原因，或许还有产品的其他考虑因素（当然也并非所有产品都有仔细考虑），产品可根据不同商业诉求或体验理解选择适合的返回流程。

当然，对于简单的搜索功能而言，也并非必须经过上面的 4 个流程，常见的就是不需要涉及到联网的搜索功能，比如搜索本地的内容，以下方 iPhone 日历应用为例，基本流程就是：搜索入口——搜索联想页——搜索结果页。

日历应用在触发搜索操作时，并没有进入搜索推荐页状态，因为在这里搜索功能被定义为强工具属性，不需要具备推荐功能，目标就是帮助用户快速找到想要的信息，减少搜索过程中的干扰。

03 搜索方式

随着信息复杂性的提升，在某些产品上，单纯的文字搜索未必能满足用户的搜索需求。且随着技术（图片、语音识别技术）的提升，搜索方式可以拓展的空间被大大增强，搜索方式也是相当多样，除了最基本的文字搜索，还有扫一扫搜索、语音搜索、拍照/图片搜索等。

文字搜索，基于用户输入文字触发的搜索，虽然是最基本的搜索方式，但是因为文字指义的复杂性，系统识别用户的期望操作也并不轻松，用户的文字搜索可以粗略划分为精确搜索和模糊搜索。

精确搜索比较好理解，即能精准识别到用户搜索目标的词语，一般来说就是高度匹配应用里的信息。比如搜索微信号、订单号等等。精确搜索能帮助用户快速定位信息。

模糊搜索即系统本身不知道用户想搜的具体目标，此时需要通过各种方式将信息和用户输入的内容进行匹配。比如用户想在淘宝内搜索“衣服”，却输入英文“yf”，系统也要能进行关联匹配，此外，用户搜索还存在各种奇葩操作可能性，但这属于具体搜索信息策略的方面，不在此赘述。

扫一扫搜索，基于相机扫描，算法识别提供的扫描功能，一般使用在用户无法通过文字描述的场景，如二维码/条形码等。

语音搜索，现阶段的语音搜索可以拆解为语音识别+搜索引擎。系统识别用户录入的语音，将其转化为文字，然后根据转化的文字搜索信息。语音搜索相对于文字搜索而言更加便捷，可以帮用户省去打字的流程，但是语音识别现阶段还不够准确，易出错，不过随着语音技术发展，这些问题都将得到改善。

拍照搜索，基于图片识别技术，系统通过识别用户通过拍照或上传手机里的图片，帮助用户搜索，与扫一扫类似，也是常用于很难用文字描述的场景。比如用户看到一件商品，看到某种植物，无法叫出名字，也很难形容其特征，此时图片搜索就能派上用场了。

04 搜索元素

搜索组件中，元素也是多种多样，基本上搜索组件就两种：