专业干货！分享一个特别好用的搜索框必须考虑的五个方面

　　今天这篇译文开门见山，从搜索框的可见性、范围搜索、局部搜索、高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能，内附大量实例（想知道谷歌搜索有哪个交互不好吗），结合实践，深入浅出，帮你掌握在线搜索的这五个方面。

　　可见性

　　在UX领域，可见性是其根本概念之一：由物体的外形特征推导出其行为上潜在的可能。比如大门上的推板意味着门是可以推的；把手则说明门是可以拉的。你有没有遇到过走到一扇门跟前却发现开门的方式与你预料的大不相同的情况呢（译者注：有的，我的大学就是，不过每年HCI的课都会拿出来举例，给人一种“我是故意的”高逼格假象）？这是由于事物的外形特征和实际功能不匹配造成的。

　　同样地，搜索框的设计应该遵循其功能性。其目的是允许用户以关键字词的方式输入请求，那么它就应该看起来像是能被输入的，并且有一个能够明确表明其功能的相关按键。它还应该足够宽，这样才能容纳较长的文字。

　　eBags.com里的搜索功能结合了外形和功能

　　basmatitree.net的一个相比起来不那么常见的搜索框设计

　　可见性这个概念应贯穿于用户体验的方方面面。然而，目前有很多主流的网页搜索引擎为了标榜个性或品牌需要而选择另类的设计。Google就是个例子，它在首页采用了两个按键，其中包含了个莫名其妙的“I’m Feeling Lucky”选项。这两个按键都被居中置于输入框下面，所有组件的边框是如此之窄致使其功能性只能被含糊地理解到。

　　极简的谷歌搜索框设计

　　然而，这些设计已然被大众接受了，毕竟都这么多年了，仗着谷歌的名声人们似乎已习惯了把这种所谓的“简约”当成其“优秀”品牌文化的一种诠释。首页搜索框的位置和排版只是暂时的；当用户一在输入框里进行输入时，页面的排版就会变掉，而结果和搜索框会跑到页面的左上角。搜索按键的标签会变成一个放大镜的图标。直到这时，作为一个搜索功能的行动按键，它具备了合格的可见性。

　　谷歌显示结果的页面上一个更加常见的搜索框设计

　　Bing也同样在首页提供了一个相似的居中搜索框，一旦进行搜索后，搜索框等一系列组件会立马乾坤大挪移到左上角。

　　Bing结果页面上的搜索框

　　雅虎可能算是所有这些搜索引擎里最正常的了——采用了简单的布局和始终明确可用性的按键，这两者在搜索前后都会保持相当的一致性。

　　雅虎搜索界面上的搜索框

　　这三个网站都会在页面一加载好就自动定位光标到搜索框上，同时也都允许用户通过点按回车来提交搜索请求。

　　另外，它们都会在提交搜索后在输入框里保留搜索请求的内容，这能让用户对其搜索的信息进行确认，同时还能为下一次关联性的搜索提供便捷。

　　在互联网上，用户可以搜索到近乎所有的东西，除了特定情况下对主题或内容类型有所限制。在网站搜索中（比如某个特定网站内的搜索），这类限制往往还会以更加严苛的形象频繁出现。这正是那些占位符文字和其它提示性标签大展身手的时候，它们能帮助用户仅对有意义的关键字词进行搜索。以Pipl网站为例，它通过占位符的方式告知用户他们可以搜索人名、位置、邮件、用户名或者电话号码。当用户点击输入框进行文字输入时，这些提示性文字会立马消失。

　　Pipl上的搜索框能引导用户输入有意义的搜索请求

　　范围搜索

　　在一些搜索应用里，内容往往以类别的形式被组织起来。比如eBay上的商品都通过其特有的内容分类法被归结在一起。这让用户针对某个特定种类的产品进行限定范围的搜索成为可能。比如这里可以使用下拉菜单或者其它类似的组件：

　　eBay上的搜索可以被局限为仅针对特定的一类商品

　　允许用户在执行搜索之前先选择某一类别能帮助他们更快地收窄搜索的范围，并能借此为特定类别内的选项进行细化。举个例子，在eBay“汽车/摩托车/交通工具”的类别里搜索“高尔夫”，出来的各个细化结果的选项与在“体育用品”里搜出来的结果大不相同（译者注：这里说的“选项”不是搜索结果，而是对搜索出来的结果进行再细化的一系列选项，后文还会提到）。范围搜索对那些具有领域知识的用户会大有帮助，特别是他们在明白自己要找什么的时候。

　　但该方案对那些目的性不强、领域知识又较逊色的用户来说并不算适用，他们很可能会不确定一开始的时候选择哪个类别。不恰当的类别选择会直接导致他们搜到毫不相干的内容，亦或者范围被缩得太窄而出现零结果，从而降低了偶然发现有用信息的可能性（译者注：无目的用户往往会对这类“不经意”发现的信息有所行动）。Craigslist的网站上提供了一系列选择，但如果你想要找的是一个焦点小组又应该选择哪个类别呢？

　　Craigslist上的范围搜索

　　正确的答案是“其它工作”或“演出”。由此可得，如果默认是以“所有类别”而非范围搜索作为开始会是更好的解决方案。

　　这个问题在当一个既有的范围限制被默认应用于新的搜索请求时会变得更加复杂（译者注：比如天猫进入某一店铺后搜索框的“搜索本店”和“搜索全部”的差别，想象一下如果现在只有“搜索本店”会是个怎样的体验）。比如在WARC网站上的“文字分析”类别里搜索“图表”会出现零结果，但同样的请求在“所有类别”里是会返还结果的。在所有情况下，特别是当搜索的结果为零时，最好的方案就是采用全局搜索，并在结果中明确地显示当前搜索的范围是什么。

　　WARC中的范围搜索结果为零时完全可以包含一个fall back机制以进行全局搜索

　　局部搜索

　　搜索框可以说是整个搜索体验的入口；在开始进行搜索之前，它确实是个最显眼的玩意。但有很多时候我们会在搜索结果都跳出来了之后进行一次额外的关键字检索，目的通常是在既有的结果里找到我们想要的那一个，这时候我们就可以通过再搜索来精简、细分结果。这个和筛选菜单的作用很像（译者注：前面提到过，就比如电商或房地产网站某个大类产品下左侧或上方列表菜单里的一系列通常由滑块（价格区间/品牌/地段等）、单选按钮组成的菜单）。

　　鉴于此，局部搜索通常和筛选菜单成对出现。由于这时候会出现一个页面出现两个搜索框的现象，我们有必要去明确注明它们彼此的功能性，此时占位符和其它文本标签就可以拿来引导用户了。另外，鉴于搜索用的关键词一样起到筛选的作用，它们也应该被拎出来明确标注于某处。

　　dabs.com里的局部搜索是筛选菜单里的一部分

　　还有一种可能，就是把局部搜索和标准搜索框合并在一起，然后用一个单选按钮或者勾选框在两个不同的输入方式里进行切换。在这类案例里，切换的控制需要视当前的情境而定（因此如果局部搜索在当前页面/状态并不可用时这个选项就需要被屏蔽掉）。除此之外，在用户勾选“局部搜索”后，当前搜索框内的文字应该消失，毕竟他们与新的搜索行为已毫不相干。

　　bulbs.com里的局部搜索是以勾选框的方式出现

　　鉴于局部搜索时用户输入的特定精简条件可能不匹配当前结果中的任一条，我们要为零结果的出现做好准备。尽管这种情况不存在是最完美的，我们仍然有很多手段来解决这个问题，比如去掉那些不匹配搜索标准的关键字词，或为用户提供些建议和工具以进行再次的搜索等等。

　　高级搜索以上就是专业干货！分享一个特别好用的搜索框必须考虑的五个方面的详细内容，更多请关注0133技术站其它相关文章！