在产品设计中，无论是由简到繁，还是由繁到简，都有固定的方法和思路，这也体现了产品生命周期的特点。但针对某一功能的产品设计，是需要有业务逻辑的，比如搜索框的设计。

搜索功能是大多数产品中的标配功能，因为它可以帮助用户快速找到想要的内容，降低用户的使用成本。到目前为止，没有任何方法可以替代它。唯一的不同是随着技术的更新，搜索方式更加多样化。现在我们只谈App搜索框的产品设计逻辑。

用户对于搜索的需求和流程可以理解为需要搜索功能→找到搜索功能→进入搜索功能→使用搜索功能→得到搜索结果。今天我们就按照这个逻辑顺序进行简单的分析。

01

您需要搜索功能吗？

产品是否需要搜索功能取决于产品的业务需求。

虽然搜索是提升用户体验的强大功能，但是如果不考虑产品的实际情况而给任何APP添加搜索功能，首先会增加开发成本，其次会增加用户的理解成本、扰乱用户的使用流程。

比如手表和摩拜单车这两款工具类APP，都是和硬件配合使用的，主要作用是连接硬件，获取使用数据，数据和场景都比较简单，所以不需要搜索功能。

想象一下，如果一个工具类APP增加了搜索功能，会是什么样的场景？

搜索功能已经成为大多数APP的必备功能，例如社交、内容、电商、社区等产品都有不可或缺的搜索功能，而不同产品对于搜索的定位也有所不同。

搜索虽然可以解决用户快速找到相应内容的问题，但是不同的应用场景和页面，其强项是不一样的，在设计产品时，可以考虑用户的使用频率和功能级别。

02

查找搜索功能

确定产品需要搜索功能之后，接下来就是设计如何让用户找到搜索功能了。搜索框入口一般有几种类型：一级tab，搜索框，搜索图标，隐藏搜索框。

@新浪微博

@得到

@产品经理

@有道云笔记

在设置搜索框入口的时候，需要考虑哪些问题？

1. 快速查找

用户的搜索需求会出现在两个时间点，一个是打开App时搜索目的明确，需要用到的时候，另一个时间点是App使用过程中出现搜索需求的时候。对于这个需求，我们很难判断用户是在进行什么操作，所以需要根据页面和产品类型来设计。

可以肯定的是，这两种需求始终都要求我们的产品能够让用户快速的找到并使用搜索功能，所以搜索功能的位置非常重要。

目前大部分APP的搜索功能都放置在页面顶部，以搜索框或者“放大镜”的形式呈现，用户已经养成了需要使用搜索功能时首先寻找页面顶部的习惯。

有些应用会设置一级标签“发现”页面来承载搜索功能。这类应用大多是内容型产品，但不要为了追求差异化而把搜索功能放在页面的其他角落，这绝对是失败的产品。

百度云盘将搜索图标放在滑动页面上，页面滑动时图标会隐藏，搜索功能是云盘非常重要的功能。

@百度云盘

2. 快速识别

将搜索功能放在用户的潜意识中，还需要降低用户的识别成本，让用户一眼就能看出这是一个搜索功能，而不需要做出判断。目前最常见的样式是搜索框或者“放大镜”图标，让用户不用做出判断就能识别出这是一个搜索功能。

搜索框样式一般有矩形、圆角等，与内部默认文本有多种组合。

还有一些比较特殊的搜索样式，比如网易有道翻译的精品课程搜索页面，虽然做出了新的尝试，但用户接受成本较高，不建议轻易尝试。

© 有道翻译

每个公司的设计师制作的图标风格都不同下拉框工具搜索引擎★64xl.com批量做词霸屏，百度搜索框下拉，并力求尽可能具有特色，但从产品角度来看，“放大镜”图标的细节越少，辨识度越高。不要过度设计。

资料来源：(%E6%90%9C%E7%B4%A2&page=1)

03

进入搜索功能

进入搜索功能主要是指用户发现并点击搜索功能后的交互和页面，各类APP虽然有所区别，但大致可以分为两种，一种是进入新页面，一种是在当前页面进行搜索。

进入新页面往往是因为搜索功能很重要，信息太多无法展示，所以需要单独一个页面来承载，这是目前最常见的方式。

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

在当前页面进行搜索可能是因为信息难以归类或者比较私密，无法进行数据处理，也表现为对当前页面搜索功能需求较弱，使用频率不高。比如小米手机信息的搜索功能，虽然弹出了新的顶栏，但和当前页面搜索没什么区别，只是视觉上的设计而已。

© 小米信息

在很多APP中，搜索功能在页面初始状态非常明显，并占据一定比例的位置，但当用户进行其他操作时，搜索功能的视图会随之发生改变。

迅雷首页的搜索功能初始是固定在顶部的，但当用户向上滑动页面时，顶部搜索框被隐藏并由分类代替，向下滑动页面则恢复搜索框的交互效果。因为页面以推荐为主，所以用户向上滑动时对搜索功能的需求被弱化。隐藏可以增加页面显示的内容。为了让用户能够快速进入搜索功能，只要页面向下滑动就会恢复搜索功能。

© 迅雷

04

使用搜索功能

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

1. 推荐内容

推荐内容包括搜索框中灰显的关键词、页面显示的历史搜索、热搜词、预搜索并显示的内容等几个方面。将历史搜索和热搜词放在搜索页是大部分内容类、电商类APP最常用的方式。历史搜索可以帮助用户快速找到之前搜索过的内容，而不需要重新输入，但需要注意的是，出于用户隐私保护，历史搜索记录需要支持删除。

热搜词是按照算法展示的搜索次数最多的关键词，对于进入搜索页但目的性不强的用户，热搜词可以减少用户的思考成本，增加产品/内容的浏览次数。但一定要注意热搜词的更新算法，热搜词本身有引流的功能，如果单纯以搜索次数来决定是否上热搜，热搜词榜单会非常稳定。

搜索框中的文字一般为“请输入搜索内容”，进入搜索页面后，光标在搜索框开头，调出键盘，输入内容后，搜索框会自动更新为输入内容。还有一种方式是搜索框里的推荐怎么删除，将“请输入搜索内容”替换为预设的关键词，并定期更新，点击搜索会直接搜索并显示搜索结果。这个过程也起到引导的作用，类似于热搜词（比如天猫App）。

在此基础上还有一种方案，就是进入搜索页后，直接在输入框中搜索并展示关键词的搜索结果。这种方式可以更快捷的向用户展示有针对性的可操作内容。缺点是进入搜索页就是结果展示页，没有空间展示热搜词、搜索历史等内容。

最失败的还是闲鱼，搜索页没有任何内容推荐，但是输入文字之后会匹配内容，并添加相关关键词。

©闲鱼

2. 搜索方法

在输入搜索内容时，对关键字匹配的处理有两种方式，一种是输入过程匹配，一种是输入完成匹配。

输入流程匹配：输入时，每个字符匹配一次，同时更新页面信息。这里更新的信息可以是针对输入内容的推荐信息，也可以是搜索结果。这种方式可以对搜索结果进行即时反馈，引导性强，效率高，但输入流程匹配对计算能力要求较高，您可以根据自己的产品和实际情况考虑是否需要该功能，否则需要等待加载，影响体验。

输入并完成匹配：输入完成后，点击【搜索】按钮，才开始搜索匹配，并直接显示搜索结果。这种方式省去了实时解析和引导输入过程的过程，适合不需要搜索功能的场合。类似产品如起点学院输入关键词后不会给出反馈，执行搜索后才会显示相关内容。

© 起点书院

很多产品采用组合的方式，即时匹配关键词并展示，点击关键词或【搜索】按钮即可展示搜索内容，在京东、天猫等电商APP上可以查看同类产品，除了与输入内容产生关联外，还会展示与关键词相关的维度，自动补全关键词，增加用户选择。

© 天猫

© 京东

3. 搜索/取消按钮

取消搜索的方式一般是点击【取消】按钮或者【返回】按钮。如果输入框中已经输入字符，需要重新输入新的搜索词，往往需要点击键盘上的删除键进行删除。当输入内容较长时，这个过程的体验非常差。因此现在很多产品在输入框末尾都提供了删除功能，可以一键删除输入的字符。当搜索页面需要二次搜索或者输入错误时，这个功能可以提供良好的体验。

如果你仔细研究不同的App，就会发现搜索/取消按钮大致分为两种，一种是保留搜索按钮，一种是取消页面上的搜索按钮，改用键盘上的搜索按钮。

搜索按钮一般放在搜索框的右侧，所以返回图标必须保留在左侧，这样App的跳转路径才能正常实现。虽然这种方式比较规整，减少了输入框可显示的字符长度，但用户的识别成本会大大降低，而且返回和搜索按钮非常清晰。

©

当页面没有搜索按钮时，左侧的返回按钮也是取消操作，点击【取消】按钮会返回上一级页面。这种方式一般采用即时匹配（过程匹配）的搜索方式，当需要搜索时，通过键盘上的搜索键进行搜索操作，优点是搜索按钮在右下角，符合手部操作习惯，处于舒适的操作区域，搜索操作可以更快。但取消按钮无法明确返回逻辑搜索框里的推荐怎么删除，当用户需要退出搜索返回上一级时，需要尝试点击【取消】按钮。

如果页面有【搜索】按钮，则必须保留返回功能；如果使用【取消】按钮，则取消【返回】按钮，否则功能冗余。比如京东安卓端的搜索框就是一个失败的案例，页面只保留了搜索框右侧的【搜索】按钮，取消了左侧的【返回】按钮，用户在使用手机物理按键功能返回上一级时，必须这么做。

05

获取搜索结果

搜索完成后，结果页会根据算法展示匹配的内容。算法就先不说了，结果的展示方式有很多种，如果商品到了一定级别，内容就非常庞大复杂，分类自然就很多。一般来说，每个商品都有自己的分类方式，所以在结果呈现上，可以考虑先分类后搜索，和先搜索后分类两种方式。

先分类后搜索的一个非常明显的特点就是搜索目的明确，用户已经知道自己想要找什么样的内容。比如在产品Boss直聘中，用户在使用搜索功能时会非常清楚自己想要搜索的信息维度，所以先分类后搜索可以提高搜索的准确率，减少用户搜索后的筛选成本。

©Boss直聘

先搜索后分类可以降低搜索功能的使用成本，但会增加结果筛选的难度。一般的操作是系统根据搜索词进行算法匹配，展示所有结果，再提供分类筛选的功能。这种方式对于漫无目的搜索的用户来说，会提供更好的体验。一般在电商、知识等分类明确的信息和产品上比较常见。比如知乎的搜索逻辑是先根据搜索词匹配结果，展示所有信息，并提供用户、主题、点子、栏目等分类搜索切换。

© 知乎

脱离业务场景的产品设计就是耍流氓，这句话可以代入到产品设计的每一个环节，同样，搜索框的产品设计也需要考虑业务场景，必须遵循，否则搜索功能就变得毫无用处了。