【拆解2】淘宝的搜索，拆透了可搞定主流的搜索功能

搜索是很多应用必备的功能，所以产品经理一定要拆透这个功能，本期拆解你将学到：

搜索的版本进化主流的搜索页面流程方案主流的搜索入口形式主流的搜索中间页形式主流的搜索结果页形式页面布局技巧之分区

一、搜索功能设计方案的进化

1、V1.0方案：两步方案

一开始的搜索功能比较简单，采用的是直接搜索方案，我们称为V1.0方案。这种方案主要特点是只有两步，由入口页直接输入搜索条件，提交后，直接跳入结果页，以下是“广药健民网”的例子：

2、V2.0方案：中间搜索页方案

这种方案是经过多年的迭代，非常多顶流APP使用的主流方案，在入口页与结果页有一个中间搜索页，我们以“淘宝搜索”为例，搜索由两步变为三步，在入口页，点击搜索框后进入了一个中间页，在中间页可以输入搜索词，或者有其他推荐的分类、或“历史搜索”（这是搜索历史词）、“搜索发现”（这是系统推荐的一些搜索词）、“全网热榜”（这是瀑布流的方式推荐内容）等让用户更多的直接点击就可以进入结果页的推荐内容，这起到了提升用户的效率与导向对业务更有利的方向的作用，提交后出现结果，结果可能是一个新页或下拉展现，淘宝是新页的形式：

下面我们就对V1.0与V2.0分别进行拆解，让你更深入地了解到搜索功能的产品设计的底层逻辑。

二、功能拆解：

分别对V1.0与V2.0方案来进行功能拆解：

从以上的功能拆解中，我们可以看到搜索功能的三个主要页面就是：

方案

入口页

中间搜索页

结果页

V1.0方案

√

×

√

V2.0方案

√

√

√

可以见到，拆透这三个模块也就是拆透了搜索功能的设计了：

搜索入口：

1) V1.0方案：

我们看广药健民网与高铁管家两个例子：

V1.0方案是在入口页划分了一个区域，这个区域是直接支持输入搜索词、或配置搜索条件，提交后直接到搜索结果页。

从这里也可以看出，如果是单一的搜索关键词的就用健民网的方式，如果像票务（机票、火车票、车票、电影票、景点票等）、预订类（酒店、订位等）就需要复合的搜索条件，但也是可以分多行地集成在一个区域内。

2) V2.0方案：

我们看看淘宝与微信两个例子：

A.区域式：

以“淘宝”为例，在入口页划分了一个区域，区域内有支持的多种技术形式的搜索入口（扫描搜索、文字搜索、图片/拍照搜索），点击不同的按钮进入不同的搜索页：

我们再看一下其他几个产品的搜索入口，都与淘宝一样，在入口页划分一个通栏的区域，所以我们把这种入口形式称为“区域式”：

B. 图标式：

我们熟悉的“微信”，搜索入口非常简单，在每个一级页面上方一个放大镜的图标，点击进去搜索页，这种我们可称为“图标式”：

2. 中间搜索页：

中间搜索页的方案，主流上分两种：一种是先联想后出结果；另一种是即输入即出中间结果。两种模式我们分别介绍：

1）先联想后出结果模式：

以淘宝的示例：

A. 我们先说页面布局：

淘宝的中间搜索页采用了分区的设计：

a. 搜索框区：最上方的搜索框区，这里用户可以直接输入搜索关键词，或者按“相机”进入拍照或上传图片搜索；

b. 历史搜索区：我们某次的搜索经常因为某种原因而中断了，现在要重新搜索，那这个功能就非常方便，“历史搜索区”把该用户最近的历史搜索词显示出来，如果要重新搜索的话，直接点击就可以重新搜索了，而不用重新再录入；

c. 热门搜索区：这里可以把一些热门搜索的关键词列出来，这里“热门”的算法可以是整个平台，也可以是与用户相似群体的，这按目的来设计算法即可，甚至还可以夹杂着引导的关键词。

d. 推荐区：这里就直接上推荐产品列表，淘宝这里是用了全网热榜。

这里引入了一个页面布局的知识点“页面分区”，这是一个页面布局的技巧，先把页面要放进去的元素进行分组，把逻辑上可以归为一类的都放在一组，然后再在页面中把不同的分组设计为不同的分区，以后在每个分区中就可以作为一个小单位进行优化，精简与扩展都可以。我们看一下淘宝的搜索中间页与搜索结果页的版本迭代淘宝搜索优化技巧，就发现了分区后，在不同的分区进行了内容的扩展，分区内的扩展不影响到其他区域：

在上图看到：

中间搜索页中的“推荐区（热榜区）”，从旧版只放一个“全民热榜”，迭代到放多个热榜且左滑动切换，这个区域的迭代不影响到其他区域。

结果页中的“表头区”，从分类+排序筛选，拓展到增加了该产品类别下的分类（压缩袋的分类有免抽气、衣物、抗菌等分类），筛选中的关键条件的外露（品牌、材质、尺寸），还有营销活动（筛选双11活动商品、筛选每满200减20），这里的扩展不影响到其他区域。

刚才介绍了一下“页面分区”的知识点，现在返回介绍“中间搜索页”的设计。

其实淘宝的这种丰富的中间推荐页已经是大中型APP主流的设计方式了，我们也来看一下其他APP，与淘宝是类似的，都采用了分区，分区根据自我的特点来设计，但主要是历史搜索、热词推荐、榜单推荐等这几类：

B. 我们再看搜索分状态/进程的交互：

刚才我们研究的是，进入中间搜索页时初始状态（搜索输入前）的页面，当开始输入搜索词时，这里就有很多不同的交互，这些交互直接影响着搜索的顺滑的体验。

我们先看搜索三个进程的划分：

特别重要的交互体验是在“搜索词输入中”的设计，淘宝在这里是做得很细致的：

对比其他APP的中间进程：

可以说这种中间搜索页的方案是现在主要应用的主流方案，这种方案可以带来更多的点击转化。

但这里提一点，由于提交搜索词/图片/音频等后，可能由于网络原因、或服务器响应不够快等原因，导致不能立即有搜索结果，在中间的等候时间，我们就需要设计一个加载动画来过渡。

2）即输入即出中间结果模式：

我们以微信为例，用户在输入框中每输入一个内容，立即就匹配出相应的分类中间搜索结果展现在下方，但这不是最终的搜索结果，而是缩小搜索的范围，用户可以从这中间的搜索结果中找到想要搜索的结果，即可以直接进入，而如果没有的话，就可以再根据想要搜索的分类再进入：

这种方案比较适合以文字为主体内容类的APP。

3. 结果页：

最终结果一般分三个区域：搜索框区、表头区、结果区。

1）搜索框区：

在结果页的搜索框区，是可以修正原搜索词，或者重新输入新词进行搜索的，这里就不详述。

2）表头区：

表头区的作用是用于搜索结果的二次筛选，筛选操作是通过几种方式的结合：

A. 分类

像淘宝等电商类一般是较多组合的表头，分类+筛选+排序，而像微信等图文内容类，则以分类为主：

B. 叠加筛选条件

在“表头区”中，则可以进行二次（进一步）的结果筛选或排序，这部分电商类的APP做得比较丰富：

淘宝已经从单个筛选入口，迭代到同时外露重点筛选条件，见上图的包邮、品牌、材质尺寸，还营销活动。

而一般的APP，只需要一个筛选入口，进去后让用户根据需要组合筛选条件即可。

注意：微信等以图文内容为主的搜索，不需要加入二次筛选的功能。

C. 排序

“排序”这里只是从已经搜索出来的结果，进行二次排序切换，如按综合（按高到低）、销量（按高到低）、价格（双向选择：按高到低、按低到高）等。

3）结果区：

结果就是列表的方式展现出来，一般就两种样式，一是单列，二是双列，如果两种都可以让用户选择的话，就加一个切换按钮即可：

搜索结果页，是最后的搜索转化环节，越接近用户的搜索预期结果就越容易转化，这里需要不断地监测匹配成功率、不断地分析用户的行为路径来优化功能。

四、技能扩展：多种形式的搜索

上文主要拆解的是文本的搜索，但除了文本外，技术已经发展到多种输入形式的搜索：

1、语音搜索：用语音录入转化为文本进行搜索，本质也是文本搜索；

2、图片搜索：用拍照、或图片上传的方式搜索，如电商的相似商品搜索、搜索引擎的相似图片搜索；

3、音乐片段搜索：按音乐片段来搜索有类似片段的完整音乐；

4、视频片段搜索：按视频片段来搜索有类似片段的完整视频、电视、电影、节目。

五、搜索模块的设计要点总结：

一个图说明搜索设计的主流方案与要点：

（编辑：清远站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!