在不同的业务类型和不同的场景中，搜索的位置和形式可能非常不同。是否有一个可以涵盖各种搜索体验设计的一般概念？

无论是代购源码网站还是应用程序，搜索功能几乎都是标准的，占据轻松或沉重的位置。一方面，搜索可以帮助用户节省时间和直接目的;另一方面，它也是用户表达愿意帮助收集用户需求和指导用户行为的窗口。

在不同的业务类型和不同的场景中，搜索的位置和形式可能非常不同。是否有一个可以涵盖各种搜索体验设计的一般概念？

我最近玩了30多个应用程序，包括搜索，信息，知识，电子商务，社交，视频，音乐，导航，工具，O2O，生活服务等，总结了一些搜索设计的例程和设计形式。 ，拆解它并与你分享。您可以组合自己的业务类型和特定的应用程序方案，以选择适当的表单来增强您的搜索体验。

搜索体验的“三度”

　　打造满意的搜索体验，需做好三个“度”：速度、温度、准确度。

速度是指允许用户更快地获得搜索结果并完成搜索过程。

温度意味着搜索过程是用户友好的，易于理解和操作，并使用户感到亲密，甚至愉快。

准确性意味着搜索结果准确并满足用户期望。

乍一看，速度和准确性似乎与技术更相关，与设计无关。但实际上，三者相辅相成，我们可以通过合理的基于温度的设计提高搜索的效率和体验，使用户可以更快，更准确，更舒适地搜索。

　搜索体验的设计拆解

我们可以将搜索分为三个部分：搜索条目，搜索过程，搜索结果。

搜索过程可以分为三个动作：点击搜索框/图标→输入text/character→单击搜索按钮/关键字。触发每个操作后，都会有反馈：

图1搜索过程和反馈

接下来，我将分离部分并分析体验设计的要点。结构和目录如下所示：

图2本文的结构和目录

第一部分 搜索入口

搜索门户代购源码网站有提示和指导。有四种常见类型：

独立的1级标签

搜索框

搜索图标

隐藏的搜索框/图标

图3四种类型的搜索条目表单

　A.独立的一级tab

使用单独的选项卡作为搜索条目，整个选项卡页面围绕搜索功能展开。这整个页面为搜索功能的扩展提供了很大的空间，并且可以用于各种应用，适合作为重要交通门户的搜索。

代表包括App Store，Twitter和新浪微博。只有搜索框和搜索词推荐保存在App Store和Twitter的标签页中。新浪微博的尝试更加多样化，包括分类，主题和不同类型的推荐，以及更多的运营空间。

　　B.搜索框

最广泛使用的形式之一，主要是在页面的顶部，更引人注目。某些应用程序还会在刷页时显示搜索框，以便用户随时使用。

搜索框中通常有一个默认副本，提示用户输入可搜索的关键字类型。目前，越来越多的应用程序（尤其是电子商务）使用搜索框作为操作的入口，放置一些热门词汇，活动，新产品/新功能等，并且不限于一个词，这可能是是一个单词或短语。甚至一句话。

图4搜索框中的预定义副本

　C.搜索icon

搜索图标被广泛使用，位置通常位于页面的右上角。相对于搜索框，搜索图标的介绍较少且操作空间有限，但它可以节省导航空间，适用于将搜索用作辅助功能的场景。

例如，获取的今天的学习模块以馈送流的形式显示用户的日常学习任务。该模块的预设功能是浏览，收听和限制内容（仅包括用户为订阅支付的内容和平台亲自为用户推荐的内容）。搜索在这里只是一个辅助功能，因此门户代购源码网站被削弱了。并在此处搜索全局搜索（搜索完整的App），可以引导用户查找更多内容，避免发生无结果/更少结果。

图5获取今日学习模块

　D.隐藏式搜索框/icon

这种形式的搜索功能被削弱，门户代购源码网站在主页上不可见，一些门户代购源码网站折叠在其他门户代购源码网站中，一些门户代购源码网站可以通过手势激发。

典型的一个是下拉搜索框：搜索门户是隐藏的，通常不占用空间，并且可以在需要时快速下拉。微信和iOS桌面和备忘录都是这种形式。

　第二部分 搜索过程

搜索过程是改善搜索体验的关键部分。该过程可分为三个阶段：点击搜索框/图标→输入text/character→点击搜索按钮/关键字。

　第一阶段的反馈如下：

　　跳转：跳转到搜索页

　　激活：激活搜索框，光标闪烁，并显示引导文案

　　调起：调起搜索键盘

　　搜索页

本文的搜索页面是指单击搜索框/图标后跳转的页面。

搜索页面由两部分组成，即搜索栏和辅助区域（搜索栏外部的部分）。进入搜索页面后，通常会默认设置搜索键盘。

图6搜索页面结构

　　搜索栏

搜索栏有两种常见形式：

图7搜索栏表单

两种形式之间的区别在于按钮的设计。前者有两个按钮：“返回”按钮。和“搜索”，后者只有“取消”和“取消”。按钮。在这里“返回”和“ldquo;取消”相同的功能，都是搜索结束，返回上一页。

由于键盘通常是一个搜索键盘，它带有“搜索”按钮，从操作一致性的角度来看，键盘上的搜索按钮更符合用户的习惯。因此大多数应用程序目前在界面上只有一个取消按钮，这更有利于用户关注。

有些应用程序突破了传统的搜索框风格并采用了更为突出的形式（如Airbnb）。还有一些入口可以增加对图片，声音和QR码的识别，这也提供了更多的信息输入方式。

辅助区

辅助区域主要为用户提供适当的建议以提高搜索效率。此外，它还具有可用作促销门户的操作属性。

　辅助区的推荐主要有历史记录、热搜和分类。不同类型的应用程序在设计上存在偏见，例如电子商务应用程序，热搜索可用作操作门户，对于某些类别指南，但工具类应用程序，如Evernote，搜索功能主要用于找到用户。没有操作属性的您自己的笔记不需要热搜索。

图8辅助区域中的历史记录，热搜索和分类

　历史记录

历史记录适用于两种情况：首先，搜索项与历史搜索具有一定的相关性，关键字需要根据历史搜索进行调整。第二个是搜索关键字，搜索结果可能会更新（如在58的旧县桥三居室公寓中搜索租房信息，上市信息可能会增加），搜索结果之前没有处理过（如在京东搜索加湿器中，只浏览第一页，未完成购买）或再次搜索（例如从高迪地图中的不同起点搜索地点，进行路线规划），则需要重新输入关键词。

历史可以提高重复搜索的效率，但并非所有搜索都需要历史记录。如果搜索结果易于操作并且可以一次完成，则可以适当省略它们。

例如，App Store，无论是搜索关键字还是准确的App名称，在用户搜索之后，最有可能的行动是下载。如果您不满意，可以离开，但离开后搜索相同应用程序的可能性很小，历史记录的效果有限。

考虑到搜索页面的空间和有效性，通常需要控制历史的数量和时间范围。

历史有两种主要形式：一种是标签，另一种是表格。标签式节省空间，列表式可扩展性（可以显示更详细的信息，还支持收集，删除等）。

鉴于隐私问题，历史记录通常支持删除。有两种类型的删除，一种是删除一种，另一种是清空所有。删除单个功能在列表中更常见，一些标签类型也可以通过长按（例如淘宝）删除。

图9历史

需要注意的是，历史记录仅用于初始搜索，后续可在适合的场景下，引导用户使用收藏、订阅、足迹等功能，打造更好的体验。例如，腾讯视频记录了观看历史记录，不仅可以节省用户搜索，还可以记录进度。值得购买的是，在搜索结果页面上添加“关注”按钮，用户可以在主页“关注动态”标签上看到不断更新的搜索结果。

图10更丰富的启动方法

　热搜

热搜索的作用类似于搜索框中的预设副本，并作为指南。然而，因为辅助区域中的空间是有限的（键盘将覆盖一部分），为了最大化利用率，搜索热量的单词的数量通常是有限的。

有四种主要的热门搜索类型：

热门搜索平台上的用户

基于用户的个性化推荐（基于用户数据，轨迹等的智能推荐）

平台运营内容（某些类别的排水）

促销（商业广告）

热搜索显示表单基于标签。由于某些热门搜索是个性化推荐，因此可能会暴露隐私，而某些应用也会密切设置隐藏按钮。

　分类搜索

当App中涉及许多业务，类型和类别时，可能存在多种不同形式和操作的搜索结果类别。为了允许一组明确定义的用户（清楚地知道要搜索哪个类别）快速准确地找到他们期望的结果，通常是分类搜索的情况。

有三种方法可以做到这一点：

搜索框分类选择

辅助区域分类选择

搜索结果页面类别选择

搜索框中的分类选择适合有明确需求的用户。例如，在连锁房屋中，寻找二手房或租房尤为明显。默认情况下，在搜索框中定义类别可能会导致搜索结果出现偏差。为了照顾更多用户，大多数应用程序提供“所有”类别，默认情况下在“所有”类别下搜索结果，例如微博。

如果您未在搜索框中选择类别，则仍有机会在搜索过程中选择类别。淘宝使用标签来区分“全部”，“天猫”等搜索建议和结果。 "商店" ;.亚马逊在输入过程中提供类别选择（默认搜索所有类别，但提供对小类搜索的访问权限），以及58，京东和闲置鱼类。

更多应用程序使用搜索结果分类来呈现不同类别的结果，从而降低用户在搜索过程中的决策压力。 tab最常见的形式（代表：知道，支付宝），第一个选项卡一般是各种结果的堆栈，每个选项卡都是一个类，易于切换。其他人使用标签来区分（代表：Facebook，网易考拉，JD），使用列表作为类别条目（代表：58），并直接堆叠每个类别模块（更像是表格扩展，每个类别暴露一些内容，代表作者：微信，豆瓣）

这些方法不是完全独立的，可以根据需要灵活使用。

图11分类搜索的常见形式

　搜索过程第二阶段(开始输入文字/字符)的反馈如下：

　　变化：搜索框中，引导文案消失，出现清除icon

　　匹配：根据输入的内容，进行关键词联想

　　清除icon

清晰的图标是一个小而亲密的设计。它的功能是用一个键清除搜索框的内容，并与指南副本交替：当输入文本时，指南副本消失，出现清晰图标;单击以清除图标，文本被清除，并出现指南副本。

以下图片是一个app的截图，需要注意取消按钮的形式，避免与清除图标冲突，造成用户混淆。

图12避免取消按钮并清除图标冲突

两种匹配机制

在分析关键字关联之前，让我们首先理解两种匹配机制：一种是输入过程匹配，另一种是输入完成匹配。

输入过程匹配：输入时，每次输入字/字母/字符时，都会进行匹配，同时更新页面信息。这里更新的信息可以是用于推荐输入内容的信息，或者可以是直接搜索结果。

前者是将关键词与输入内容相关联，如输入“女性”，推荐信息显示“女包”等。 “女鞋”” “袜子女”等。这样，您就可以提供搜索建议，指导并提高效率。

后者是立即搜索数据库中的每个单词/字母/字符输入，并显示搜索结果。这种在不点击搜索按钮的情况下实时显示搜索结果的方式称为“立即搜索”。

即时搜索可以直接快速地查看结果，这可以在一定程度上提高搜索效率，但需要很高的计算能力。如果计算能力无法跟上，则可能需要等待加载，从而影响体验。通常适用于数据量较小或数据库已在本地下载的情况。

例如，QQ邮箱先前已将部分数据下载到本地，搜索可以立即查看结果（仅包含下载的数据），然后单击“继续搜索服务器”以从服务器请求数据。

输入完成匹配：仅在输入完成后，单击“搜索”按钮。按钮开始搜索，匹配并直接显示搜索结果。该方法消除了对输入过程的实时分析和指导的需要，并且适用于搜索功能不要求的情况。

图13即时搜索和输入完成匹配

许多应用目前使用组合：输入过程关键词联想+输入完成执行搜索。

这是一个非常简单的组合。它不仅为用户提供必要的帮助和指导，还减少了请求数量，避免了等待加载。

　　关键词联想

关键字的作用是什么？简单来说：关联，匹配，指导和纠正。在扩展方面，有四个功能：

首先，用户不一定知道要搜索的确切名称，并且该关键字可以用作指南。

其次，系统可以根据现有的搜索数据对关键字进行分类，并准确匹配数据库。如果用户选择已关联的单词，则可以获得更准确，更可控的搜索结果（此选择是对系统本身的反馈）。同时，由于分类已经提前完成，因此在搜索过程中可以直接检索和减少计算量，并且速度也更快。

第三，可以减少用户的输入错误。

第四，有许多非常动态的操作。

关键字的显示形式更加灵活。最简单的是根据输入的单词直接显示联想的关键字（现在是标题），但由于页面空间有限，只有少数可以在被键盘覆盖后暴露，所以每个人都发明了第二级标签。它附带关键字并提供更多相关条目。

如下图所示，搜索“niu rou”，推荐关键词“Beef”，然后是3个小标签“干”“>                     - “牛肉”的关联单击整个列并搜索“Beef”;点击二级标签（例如“张飞”）并搜索“牛张飞”。应注意，二级标签的操作区域小，操作精度高，数量不能超过三个。

图14今日头条新闻直接显示关联词，京东使用二级关键词标签

有时系统推荐的关键字不够精确，用户以后需要输入其他内容。但是，无论是关键字还是辅助标签，都会在点击后直接执行搜索，这需要用户激活搜索结果页面上的搜索框，继续改进搜索词，并中断搜索过程。 YouTube，Facebook，亚马逊，淘宝等使用“最多完成”功能，点击关键字或辅助标签，执行搜索，点击最多填充图标，关键字将填入搜索框。

图15淘宝的向上完成功能

还可以预先定位与关键字对应的搜索结果的数量，以便用户可以控制搜索词的粒度并避免没有结果或更少结果的情况。代表包括推特，公众评论，喜马拉雅，连锁家居，百度外卖等。

图16显示了关键字

除了提供关键词外，您还可以判断输入词并提供分类建议（如58，京东，亚马逊和闲置鱼等，请参阅上面的“J.分类搜索”部分）。 58作为一个综合性的生活服务平台，有很多商业类别，搜索“牛肉”，并且有很多类别的相关信息，选择“食品”和“商业加盟”。这两个最可能的类别推荐给用户。

图17 58提供了输入词的分类建议

此外，一些搜索结果可以放在彼此的前面，并与关键字一起显示。这些搜索结果可以是平台用户的热搜索，当前用户的个性化推荐，也可以是平台操作和促销的内容。

图18显示了

　搜索过程第三阶段，点击搜索按钮/关键词后，跳转至搜索结果页。

　第三部分 搜索结果

　　搜索结果

在搜索之后，您通常会得到N个结果，它们可能不是同一类型，并且显示形式会有所不同。您如何以清晰有序的方式呈现这些结果，以便用户能够准确，快速地找到他们想要的结果？涉及到几个问题：

智能纠错

结果分类（如果需要）

默认排序

保留搜索字词

结果对应于搜索词

排序和过滤

没有结果或没有结果

　智能纠错：当用户输入错误的单词时，可能无法搜索结果。系统需要判断和识别，推荐正确的单词，或直接显示正确的结果。

图19智能纠错

结果分类：结果可以按标签，标签，列表等进行分类。有关详细信息，请参阅上面的“J.分类搜索”部分。

　默认排序：默认排序结果确定用户乍看之下会看到什么，并对后续转换产生直接影响。它通常基于许多因素，例如用户偏好，点击次数，转化率，平台操作和商业促销。排序策略通常很复杂，不同的平台会考虑不同的因素并给出不同的权重。

保留搜索词：当您单击进入搜索页面时，您输入的单词仍保留在搜索框中。一方面，提示搜索的关键字，另一方面，允许用户修改和执行二次搜索。

结果与搜索词对应：许多应用的搜索内容不仅限于标题和结果列表的部分，这使得搜索结果似乎与搜索词无关，这很容易引起用户混淆。

这经常被我们忽视。必要时，我们应在搜索结果中显示搜索字词，以保持搜索字词的可见性。

公众评论就是一个很好的例子：我们搜索“牛栏山”（< ;; Niulanshan）是一个地名，也是一个葡萄酒品牌。公众评论搜索包括商店名称，位置和推荐菜肴，然后可能有3个搜索结果：

一个名称为“Niulanshan”的商店;

位于牛栏山商业区的商店;

推荐菜肴包括“牛栏山”商店。

公众意见调整了结果列表，以显示符合用户期望的搜索词（通常未显示）的推荐菜肴。

图20公众意见的结果对应于搜索字词

排序与筛选：排序和筛选维度与业务类型密切相关，不同行业之间的差异很大。一般来说，分类具有时间，距离，热量，价格和销售量等维度;过滤维度更丰富，更个性化，甚至根据搜索内容进行更改。

一般排序功能放在搜索栏和结果之间，便于切换。但是，一些应用程序（主要是外国应用程序，如亚马逊和YouTube）放弃了排序功能，操作的便利性不如前者。

当过滤器项目维度很少时，您可以在搜索栏和结果之间放置过滤器（以及排序），然后单击下拉菜单的形式;如果尺寸很丰富，通常使用侧边栏形式。应该注意的是，多个筛选维度的叠加可能导致结果太少，并且预筛选结果的数量是一种好的方法（例如网易考拉）。

图21排序和过滤

无结果或少结果：当没有结果或结果很少时，可能会出现以下几种情况：1。选择了错误的分类; 2.输入不正确; 3.搜索结果很小或没有。对于前两个，您可以提示用户，或自动帮助用户更正错误;对于后者，通常匹配相关结果来弥补，或提示用户更改关键字，扩大搜索范围和订阅。

例如，当搜索结果不足时，将引导用户订阅，并且当更新搜索结果时，将主动推送用户。

图22当结果不足时，补充信息+订阅指南

　更多搜索方式

随着技术的发展，搜索方法越来越丰富。

例如，语音搜索不仅为视力不佳的老年人提供友好的方式，而且还适用于输入不方便的一些移动场景。例如，导航类中的内置语音搜索可以在驾驶时实现路况查询，位置搜索，路线规划等功能。此外，在一些音乐应用中，你可以带来气质，实现“听歌”，甚至“唱歌和唱歌”。

图23语音搜索

图像搜索也被广泛用于图像识别技术。百度的“搜索图片”，可以搜索类似图片，跟踪图片来源，获取不同尺寸的图片; “小搜索问题”“照片搜索问题”，使用OCR技术进行快速识别，节省了繁琐的输入过程;淘宝等电子商务商家“廖理涛”，一方面可以搜索同一产品，一方面，当产品名称无法准确描述时，也可以搜索。

图24图像搜索

　　结语

每个应用程序采用不同的设计形式，主要是因为它们对搜索功能的不同定位。

文章对各种设计形式进行了分解和分析，希望能为每个人带来一些灵感。由于空间和自我水平，一些内容只是一点点介绍，需要探索更深层次的应用程序。

实践是真的。一方面，我们接触到的应用程序可以从特定的搜索形式中反转其功能定位和应用场景，并考虑是否有更好的解决方案来提高我们的思维能力。另一方面，在未来的设计实践中，我们应该从功能出发，综合考虑业务类型、功能定位、目标用户、应用场景，选用最合适的形式，提升搜索体验，让用户搜得更快、更准、更舒心。

作者：韩晓婷，互动设计师

本文来自大家是产品经理合作媒体@ 58用户体验设计中心（微信公众号@ 58UXD），作者@韩筱婷

« 成为用户体验设计师：您需要知道的六个基本步骤 | 电子商务设计到底谁拥有最终决定权：从三类经典客户群分析电子商务前端设计 »