让我们一起来设计【搜索】.pdf

让我们一起来设计【搜索】 可见性、范围搜索、局部搜索、高级搜索以及输入。我们来结合实践了解一下在线搜索的这 五个方面。 在 UX 领域，可见性是其根本概念之一：由物体的外形特征推导出其行为上潜在的可能。比如大门上 的推板意味着门是可以推的；把手则说明门是可以拉的。你有没有遇到过走到一扇门跟前却发现开 门的方式与你预料的大不相同的情况呢（译者注：有的，我的大学就是，不过每年 HCI 的课都会拿 出来举例，给人一种 我是故意的“ ”高逼格假象）？这是由于事物的外形特征和实际功能不匹配造 成的。 同样地，搜索框的设计应该遵循其功能性。其目的是允许用户以关键字词的方式输入请求，那么它 就应该看起来像是能被输入的，并且有一个能够明确表明其功能的相关按键。它还应该足够宽，这 样才能容纳较长的文字。 eB 里的搜索功能结合了外形和功能 的一个相比起来不那么常见的搜索框设计 可见性这个概念应贯穿于用户体验的方方面面。然而，目前有很多主流的网页搜索引擎为了标榜个 性或品牌需要而选择另类的设计。 Google 就是个例子，它在首页采用了两个按键，其中包含了个 莫名其妙的 “I ’ m Feeling Lucky选项。这两个按键都被居中置于输入框下面，所有组件的边框是如此” 之窄致使其功能性只能被含糊地理解到。 极简的谷歌搜索框设计 然而，这些设计已然被大众接受了，毕竟都这么多年了，仗着谷歌的名声人们似乎已习惯了把这种 所谓的 简约“ ”当成其 优秀“ ”品牌文化的一种诠释。首页搜索框的位置和排版只是暂时的；当用户一在 输入框里进行输入时，页面的排版就会变掉，而结果和搜索框会跑到页面的左上角。搜索按键的标 签会变成一个放大镜的图标。直到这时，作为一个搜索功能的行动按键，它具备了合格的可见性。 谷歌显示结果的页面上一个更加常见的搜索框设计 Bing 也同样在首页提供了一个相似的居中搜索框，一旦进行搜索后，搜索框等一系列组件会立马乾 坤大挪移到左上角。 Bing 结果页面上的搜索框 雅虎可能算是所有这些搜索引擎里最正常的了 —— 采用了简单的布局和始终明确可用性的按键，这 两者在搜索前后都会保持相当的一致性。 雅虎搜索界面上的搜索框 这三个网站都会在页面一加载好就自动定位光标到搜索框上，同时也都允许用户通过点按回车来提 交搜索请求。 另外，它们都会在提交搜索后在输入框里保留搜索请求的内容，这能让用户对其搜索的信息进行 确认，同时还能为下一次关联性的搜索提供便捷。 在互联网上，用户可以搜索到近乎所有的东西，除了特定情况下对主题或内容类型有所限制。在网 站搜索中（比如某个特定网站内的搜索），这类限制往往还会以更加严苛的形象频繁出现。这正是 那些占位符文字和其它提示性标签大展身手的时候，它们能帮助用户仅对有意义的关键字词进行 搜索。以 Pipl 网站为例，它通过占位符的方式告知用户他们可以搜索人名、位置、邮件、用户名或 者电话号码。当用户点击输入框进行文字输入时，这些提示性文字会立马消失。 Pipl 上的搜索框能引导用户输入有意义的搜索请求 范围搜索 在一些搜索应用里，内容往往以类别的形式被组织起来。比如 eBay 上的商品都通过其特有的内容分 类法被归结在一起。这让用户针对某个特定种类的产品进行限定范围的搜索成为可能。比如这里可 以使用下拉菜单或者其它类似的组件： eBay 上的搜索可以被局限为仅针对特定的一类商品 允许用户在执行搜索之前先选择某一类别能帮助他们更快地收窄搜索的范围，并能借此为特定类别 内的选项进行细化。举个例子，在 eBay 汽车“ /摩托车 /交通工具 ”的类别里搜索 高尔夫“ ”，出来的各个 细化结果的选项与在 体育用品“ ”里搜出来的结果大不相同（译者注：这里说的 选项“ ”不是搜索结果， 而是对搜索出来的结果进行再细化的一系列选项，后文还会提到）。范围搜索对那些具