搜索框是我们日常最常用的组件之一，不管2C还是2B产品，都是必不可少的功能模块之一。今天我们就来聊一聊搜索框。
什么是搜索框？
这是一种常见的交互控件，用于精准提取海量信息中的准确内容。很多人认为搜索框不重要，就是由两个最简单的元素组成的。在以内容为导向的网站中，搜索框的重要性会更加的明显，用户需要快速又无痛的找到他们想要的内容。
搜索框的类型
隐藏式搜索框
只有一个放大镜图标，需要搜索时进行点击跳转到搜索界面，或者展开进行搜索。
普通搜索框
就是一个简单的搜索样式。C端一般展示在页面顶部，更符合用户的习惯；B端一般是放在右侧或者左侧。
有一项来自 A. Dawn Shaikh 和 Keisi Lenz 的研究，是针对142名被调查者对于网站搜索框的预期。如下图可以发现，WEB的左上角和右上角是用户所期待的搜索框的位置。
从这项研究中还可以看出，右上角的区域是用户搜索输入的首选区域。
带提示搜索框
这类搜索框其实就是置底文案有提示语，提示用户支持哪些字段进行搜索，比如名称，区域等。
带图片搜索
可以根据图片进行搜索，百度就可以上传图片，根据图片识别进行搜索。比如想了解某些花是什么品种，可以直接拍图上传搜索。
带语音搜索
语音搜索是比较新颖的。上海实行垃圾分类期间，很多人分不清干垃圾和湿垃圾。上了年纪的用户打字不方便，在百度可以直接语音搜索进行识别，快速帮助用户进行垃圾分类。现在语音的识别成功率也已经达到了比较高的程度。
精准分类搜索
这类在淘宝，天猫等一些商城运用比较广泛。商品的种类多，比如日用品，服装、食品，家电等等，需要进行分类搜索。这类对搜索是比较重要的功能，需要放在较显眼的位置。
搜索框设计应该注意什么问题？
搜索框的状态
搜索框的设计应该分为三种状态：搜索前、搜索中、搜索后进行设计。
搜索前：默认展示搜索提示词
搜索中：首先获取焦点，如果是C端展示最热门搜索和最近的搜索记录；输入中可以进行内容联想结果。
搜索后：
用界面或者文字展示搜索的结果。
首先要确保搜索内容的准确性，在海量搜索中，搜索结果是否符合用户预期；
其次要保留用户的搜索内容，便于用户查看；
自动纠偏，用户输入错误，能够给出提示或者进行纠正；
无结果展示：当用户搜索没有内容时，进行无结果页设计，并且给用户推荐其他内容。
合理的搜索框尺寸
搜索框设计太小是常见的设计错误，虽然支持用户可以输入较长的文本，但是超出输入框的部分并不可见。这种输入框设计促使用户容易使用一些短的，不精确的查询方式。
一般经验是搜索框承载的最佳字符数量为27个，百分之90的搜索内容都在这个长度以内。
还有一种设计方式：输入框的长度能够根据输入文本的长度进行相应的变化，不仅满足字符过长的情况，还节省了屏幕空间，能够给予用户视觉上的效果，并且快速进入搜索环节。
搜索建议机制
在用户输入的过程中动态的预测用户想要查询的方向，帮助用户构建正确的搜索关键词或者内容。
当用户开始输入之后，开始为用户提供即时的，有价值的建议，帮助用户降低输入难度和工作量。
尽量为用户提供少于10个搜索结果，避免信息过载；
B端允许用户使用键盘进行交互，比如向下滚动键盘到最后的条目，继续滚动会跳转到顶部的项目；
允许用户使用Esc按键退出列表；
突出显示输入的信息和建议的信息之间的差异。
最后
看似简单的一个搜索框设计也是包含大量的知识和交互体验。抛砖引玉为大家做一个小的总结，后面会持续精进更新。
