时间: 2021-07-30 10:23:53 人气: 6 评论: 0
搜索框一种常见的交互控件，用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点，希望大家从中可以有所收获。
搜索框一种常见的交互控件，用于精准提取海量的信息中的准确内容。搜索框几乎存在所有的网站和APP中，尤其是海量内容为导向的产品之中，例如音乐库、电商类网站，做好搜索（框）尤其重要。
设计过那么多的搜索框，你所不知道的是，它还有以下几种细分应用场景。
（1）作为搜索引擎入口
说到搜索，我们一般人首先**想到的是搜索引擎，例如谷歌，而在搜索引擎中，首页十年始终如一的搜索框最深入人心。反过来说，正是因为搜索引擎巨头的成功，搜索才越发备受重视，搜索框也是几乎成为网站或者APP的标配。
（2）用于查找内容
典型的应用场景，放在网站顶部之类的显眼位置，用于查找网站中的内容，一触即达。
（3）用于快速定位
查找内容的变种，例如，在手机“设置”中，当设置的选项较多时，通过搜索框进行搜索，可以快速定位到想要的设置项。
（4）用于活动推荐
一些电商网站，巧妙利用搜索框中预置的词，可以达到活动推荐的效果，例如下图中搜索框内置“油**机”一词，用户只需通过点击搜索即可直达结果页或者活动页面。
什么？搜索框还分类别？不是都是放大镜+线框组合么？但是，搜索框还有以下这些类别区分。
（1）隐藏式搜索框
只提供一个放大镜图标，需要再点击图标跳转到搜索页面；或者是需要下拉时才出现，例如微信首页的搜索框。
（2）普通搜索框
通常固定在页面顶部，包含搜索框的普通要素（放大镜+线框）。
（3）有提示搜索框
此类搜索框的特征是，中间有提示语，通常这类的都可以复合搜索，例如可以搜名称或者代码。
（4）含图**搜索框
顾名思义，与普通搜索框相比，增加可以“以图识图”的搜索功能，例如淘宝就可以通过上传图**，搜索与图**同类的商品。
（5）带语音搜索
语音交互是新的交互热点，相比普通搜索框，带语音搜索框可以明显减轻用户手工输入文字的烦恼，现在语音识别的成功率已经达到了很高的地步。
（6）精准分类搜索
与其他搜索框相比，此类搜索框可以先选择分类，再输入关键词搜索分类下的内容，亚马逊的习惯做法，在商品分类较多，但又需要分类检索的时候适用，日常生活中可见**市日用品、食品等分类法。
设计一个搜索框，不比设计一个页面简单，甚至可能更复杂，它涉及到用户的精准转化，属于看起来简单，但是实现复杂的功能之一。
（1）样式
使用约定俗成的样式（
