百度搜索框该如何设计分享设计百度搜索框的5个步骤 _知识分享

不管是在2C还是2B产品，“搜索”是产品中最常见且必不可少的功能模块之一。对于用户来说，在众多功能模块和信息层级中如何快速定位到目标，通过输入已知的关键词进行搜索是最便捷的方式，没有之一。所以，做为一名交互设计师、体验设计师，应该如何设计“搜索框”并构建良好的用户体验呢？

一、搜索框的定义输入框+按钮=搜索框
搜索框是由两种基本元素“输入框”、“按钮”组合而成的一种组件。
在AntDesign（蚂蚁金服出品的设计体系）中，输入框（Input）的定义为：通过鼠标或键盘输入内容，是最基础的表单域的包装。
其应用场景之一就是“带搜索的输入框” 。按钮（Button）的定义为：用于开始一个即时操作。其应用场景有“标记一个操作命令”、“响应用户点击行为”、“触发相应的业务逻辑” 。
综上，可以给“搜索框”一个基础定义：通过输入内容以触发搜索行为的组件。
但是，这只是在UI层面解释了什么是“搜索框”，从体验层面上看，良好的用户体验要反映在“搜索框”的使用流程中，可将其划分为3步：Before、Doing、After 。

Before：使用前，搜索框要具有醒目的视觉位置，以便用户能迅速找到。
Doing：使用过程中，搜索框要能根据用户的输入内容有所反馈，与用户产生交互。
After：使用后，给用户想要的结果。

【百度搜索框该如何设计分享设计百度搜索框的5个步骤】搜索框的的使用流程
本文选取“搜索框”的三种用户常见场景以进行说明：搜索引擎—百度、电商—苏宁易购、站内—阿里云。
二、搜索引擎—百度根据最新统计：百度搜索（http://www.baidu.com）在国内市场份额占比超过70% 。
在日常生活中，经常会听到人说去“百度一下”，可见百度在用户生活中影响之深。
以“百度”为例：
Before进入百度首页，搜索框占其主要页面十分醒目，不仅提供文字输入，也提供图片搜索功能
Doing以前段时间热门电影《我不是药神》的名称为例：在输入过程中，搜索框推荐了输入内容的相关词条。
相比于需要大脑组织语言并提炼关键词的“输入”操作，用户更愿意通过点点点达到目的。因此，如果推荐中出现了用户目标中相符的词条，用户会更愿意“无需思考”点击而不再输入。
这种根据用户输入内容、推荐相关词条的交互反馈，能极大降低用户的思考时间，提高搜索效率，因为在关键词的输入时需要用户在大脑中开展一段思考活动。点击推荐词条，会直接跳转至搜索结果页，省却“百度一下”，又降低用户的操作步骤。
After用户点击推荐词条，或输入内容后“百度一下”，跳转至搜索结果页面。
百度默认将“网页”结果作为首选页面，同时提供“视频、图片、贴吧”等其他模块内容的Tab切换。在模块Tab下，告知用户搜索的结果数目，让用户对搜索结果有一个心理预告。
PS：
当输入较多字符时，会提示用户需要将搜索关键词限制在38个汉字以内。
虽然字符超过百度的规定，但并没有禁用搜索功能、提示用户删减字符，而是继续完成搜索、未打断用户的操作流程，并在搜索结果页面提示用户“超过规定字符数之后的内容忽略” 。这样如果搜索页面不符合用户目标，用户再次搜索前会根据自己需要进行删减字符。
这种交互有两个好处：一是不打断用户使用流程，二是用户懂得如何二次搜索。
百度搜索-输入字符限制提示
三、电商搜索—苏宁易购2018年全国网上零售额超9万亿，占社会消费总额23% 。电商已成为用户高频使用的软件之一，用户在浏览电商网站时，如果有明确的购物需求，一般会直接使用搜索来查找目标宝贝。
以苏宁易购（http://www.suning.com）为例：
Before搜索框在顶部主要位置，用户进入首页后能迅速注意到“搜索框”在顶部。其后不管用户浏览到哪个位置，都能通过“回到顶部”这一想法而定位到搜索框。
需要注意的是：在输入框内会默认给出一条搜索内容，并且在搜索框下面紧贴着有多个关键词，和上文的百度推荐词类似，点击后可直接跳转至相应的营销页面。
这个位置往往是近期需大力推广的活动或商品，也会根据用户的用户行为记录，推荐目标商品，提高转化率。
苏宁易购搜索-Before
Doing最近天气炎热，空调是居家旅行必备之物，就以“空调”为搜索条件。

百度搜索框该如何设计 分享设计百度搜索框的5个步骤

百度搜索框该如何设计分享设计百度搜索框的5个步骤