无论是在2C还是2B产品中，“搜索”都是产品中最常见、必不可少的功能模块之一。对于用户来说，如何在众多的功能模块、信息层级中，快速定位目标？输入已知关键词进行搜索无疑是最便捷的方式。那么，作为交互设计师、体验设计师，应该如何设计“搜索框”，打造良好的用户体验呢？

1.搜索框的定义

输入框+按钮=搜索框

搜索框是由“输入框”和“按钮”两个基本元素构成的组件。

在蚂蚁金服自带的设计体系中，输入框（）的定义是：通过鼠标或者键盘输入内容，是对表单域最基本的包装。

它的一个应用场景是“带搜索的输入框”，()的定义是：用于启动一个立即操作，它的应用场景包括“标记一个操作命令”、“响应用户点击行为”、“触发相应业务逻辑”。

综上所述，我们可以给出“搜索框”一个基本的定义：通过输入内容来触发搜索行为的组件。

不过这只是在UI层面解释了“搜索框”到底是什么，从体验层面来说，良好的用户体验应该体现在“搜索框”的使用流程上，大致可以分为3个步骤：、、。

如何使用搜索框

本文选取“搜索框”的三个常见使用场景进行说明：搜索引擎——百度、电商——苏宁易购、站内——阿里云。

2. 搜索引擎 - 百度

据最新统计：百度搜索（）占据国内70%以上的市场份额。

在日常生活中，我们经常听到人们说“去百度吧”，可见百度在用户生活中的影响力之深。

以百度为例：

进入百度首页，搜索框占据了页面主要部分，非常醒目，不仅提供文字输入，还提供图片搜索功能

百度搜索 -

就拿前段时间火爆的电影名字《我不是药神》来说，在输入的过程中，搜索框针对输入的内容推荐了相关的词条。

相比需要大脑组织语言、提炼关键词的“输入”操作，用户更愿意通过点击来实现目标，因此，如果出现符合用户目标的推荐词，用户会更愿意“不假思索”地点击，而不是打字。

这种根据用户输入进行交互反馈，并推荐相关词条的方式，可以大大减少用户的思考时间搜索框下面推荐的叫什么，提高搜索效率，因为用户在输入关键词的时候，需要先在大脑中思考一段时间，点击某个推荐词条就会直接跳转到搜索结果页面，省去了用户“百度”的麻烦，减少了用户的操作步骤。

百度搜索 -

用户点击推荐词，或在百度中输入内容进行搜索，即可跳转到搜索结果页面。

百度默认将“网页”结果作为首页，同时还提供了“视频、图片、贴吧”等其他模块内容的标签切换，在模块标签下告知用户搜索结果的数量，让用户对搜索结果有一个心理预览。

百度搜索 -

附言：

当输入大量字符时，会提示用户将搜索关键词限制在38个汉字以内。

虽然字数超出了百度的规定，但百度并没有关闭搜索功能，也没有提示用户删除字符，而是在不打断用户操作过程的情况下继续搜索，并在搜索结果页面提示用户“忽略指定字数后的内容”。这样，如果搜索页面不符合用户的目的，用户就会根据自己的需要删除字符后再进行搜索。

这样的交互有两个好处：第一，不会打断用户的使用过程，第二，用户知道如何再次搜索。

百度搜索-输入字符限制提示

3. 电商搜索——苏宁易购

2018年全国网上零售额突破9万亿元，占社会消费总额的23%，电商已成为用户最常使用的软件之一，用户在浏览电商网站时，如果有明确的购物需求，一般会通过搜索直接找到目标商品。

以苏宁易购（）为例：

搜索框处于顶部主要位置，用户进入首页后能很快注意到顶部的“搜索框”，之后无论用户浏览到哪里，都可以通过思维“返回顶部”来定位搜索框。

需要注意的是：输入框里会给出一个默认的搜索内容，搜索框正下方有多个关键词，类似上面的百度推荐词，点击之后可以直接跳转到对应的营销页面。

此职位往往代表近期需要大力推广的活动或产品，也会根据用户的行为记录推荐目标产品，提高转化率。

苏宁易购搜索 -

最近天气炎热，空调是居家、出行的必备物品，所以使用“空调”作为搜索条件。

输入“空调”之后，就会出现推荐词条，就像上面的百度搜索一样。仔细看就会发现有些不同——这里的推荐内容是分类的：空调品类推荐、关键词匹配、相关店铺。

这种方式主动帮助用户预设目标场景（空调-商用空调、空调-空调1.5匹、空调-空调专卖店），可以大大提高用户的搜索精准度，节省用户在搜索过程中所消耗的网络资源和时间成本。

苏宁易购搜索 -

当您点击“搜索”按钮或推荐的词语时，您将被重定向到搜索结果页面。

电商的两大特点“商品SKU数量庞大、广告收入来源丰富”导致搜索结果页呈现“卖家喊话”特征，主要表现在宣传最新活动（特卖）、增加相关品牌曝光度（知名品牌）、介绍热销商品（爆款商品）等几个方面，而这些目的只有一个，那就是帮助用户快速找到目标商品并下单。

在商品列表中，有一排不显眼的标签，是排序条件，默认设置是“综合”，还提供了“销量、评论数”的排序选项，利用了用户的从众心理。

苏宁易购搜索 -

PS：电商的本质是卖商品，卖商品是需要以收益为准绳的，所以有时候搜索结果满足了用户的需求，也满足了电商的需求，就是让用户快速付款，花尽可能多的钱，所以当搜索结果为空时，还是会提供推荐商品，增加用户付款的概率。

苏宁易购搜索-搜索结果为空时提供商品推荐

4. 站内搜索—阿里云

2018年，阿里云营收达213.6亿元，四年增长约20倍，成长为全球第三大云服务商。以阿里云为例，用户如果想查看站内某一内容，最便捷的方式就是使用搜索功能。

在阿里云中，搜索框位于顶部固定菜单栏，相对于同级菜单中的其他功能，搜索的优先级并不是特别明显，因此将其纳入统一的操作层级也是合理的。

固定位置的好处是，无论用户身在何处，都可以快速找到搜索功能。

有意思的是，搜索框里也会推荐默认关键词，这个和电商有点类似，应该是鼓励用户购买的手段之一。

阿里云搜索

输入“对象存储”作为搜索词搜索框下面推荐的叫什么，输入“对象”之后，就会出现推荐词，就像上面的百度搜索一样。仔细看推荐内容，不仅能看到产品名称，还有类似操作手册的内容“如何退订”（点击确认是帮助文档的内容）。

因为在这种工具型的产品中，用户需要学习如何操作，因此将帮助文档纳入搜索体系，与产品共存，拓宽了搜索的价值，提高了用户使用的效率，无需先进入帮助文档再进行搜索。

阿里云搜索

选择“对象存储”，点击进入搜索结果页面，搜索结果按照阿里云功能模块进行分类，“全部、网站、帮助文档、云栖社区……”，每个分类名称后标注搜索结果数量哔站手机下拉★64xl.com霸屏技术教程，搜索次数多就会生成推荐词吗，方便用户快速判断。

不同于百度直接展示详细数字，这里最多只展示“999+”，对于这种站内搜索来说，数字越多可能对用户越有利，也可能造成恐慌。

与电子商务类似，搜索结果也会推销产品，以吸引用户花钱。

在搜索框和产品促销列表旁边有推荐的产品搜索内容，目的是猜测用户的相关需求，例如从产品信息、使用方法、资源链接等多个维度帮助用户全面了解“对象存储”产品，节省用户下单时的考虑时间。

阿里云搜索

PS：阿里云虽然是2B的产品，但是却带有一些2C的特性。这是因为阿里云除了给用户提供功能使用之外，更多的是把云服务和产品卖给用户。这个属性决定了阿里云不仅仅是一个2B的工具，还需要做好2C端才能增加营收。

五、结论

通过对上述百度、苏宁易购、阿里云三家产品的搜索框的分析，我们可以发现，“搜索框”良好的体验设计具备以下几个特点：

功能复杂的产品都会有搜索框，其优先级不低。

无论搜索内容有多少个分类，搜索框都只有一个，即搜索功能的入口是唯一的。

搜索框中可以输入任意内容，尽量不限制用户的输入内容。

根据用户输入提供建议是搜索框必不可少的交互反馈。

最好将搜索结果类别划分清楚，方便用户快速判断。

最好能让用户知道搜索结果的数量，并提供心理预期。

当搜索结果为空时，尽量告知用户原因，避免再次犯同样的错误。

无论在搜索的哪个阶段，总是有机会推荐内容。

…

打造体验良好的“搜索框”的方法和设计范式有很多，本文只是一个起点。

题图来自，基于CC0协议