3.4.2　设计要点

搜索区主要包括搜索框、搜索按钮等与搜索相关的元素，在设计时需要全面考虑。

1.输入框长度

用户搜索时经常两个或者两个以上的关键词组合，因此搜索框不能过短。否则用户无法看到所有输入的内容，不够直观，而且操作起来不够舒畅。

我们来看一下目前几家知名搜索引擎网站的搜索输入框长度，分别是百度：365px（约46个字符）、Google：448px（约可输入56个字符）、Yahoo！：490px（约70个字符）以及MSN：418px（但包含了搜索按钮的位置，约50个字符）。总的来说，输入框都足够输入20个以上的文字，基本满足用户需求^[1]。

值得一提的是Google在进入具体搜索结果页时，搜索框长度会根据搜索词条的长短自动调整。当输入词条较长时，输入框的显示将更加直观（见图3-45）。

图　3-45

2.类别的切换方式

对比几家网站的切换方式，百度、淘宝、Yahoo！和MSN等网站以及Google的搜索结果页中都可以直接通过搜索框上的Tab进行切换，操作较为方便。但在Google首页，单击类别后，直接弹出新窗口，切断了类别与搜索框之间的关系（见图3-46）。

图　3-46

3.区分当前选中与未选中的类别

需要明确区分当前选中与未选中的类别，便于用户快速识别当前类别，增加用户的位置感。Google通过颜色对比及链接下划线的差异，突出当前选中项，同时通过搜索框前的标签、按钮中的文字以及搜索框下的提示信息，多渠道明确地提示用户当前所在位置。相比而言，Yahoo！的设计不够明显，当前选中和未选中的类别在文字颜色上仅略有差异，虽然通过按钮文字进行补充，但略嫌不足（见图3-47）。

图　3-47

4.搜索的人性化

网站搜索的功能越来越强大和人性化，比如拼音识别、对错误的输入文字进行提示和纠错、提供搜索建议等，给用户操作带来很多便利。

如淘宝的搜索框可以识别拼音输入，同时根据网站用户的浏览行为习惯的数据统计结果，提供最相关的搜索建议以及实用参数，减少用户操作步骤，提升用户搜索的体验（见图3-48）。

图　3-48

Google在用户输入错误的情况下，通过“您是不是要找：**”的提示细节，给用户提供备选方案的快速入口，一键即可完成纠错（见图3-49）。

图　3-49

5.按钮文字

搜索按钮的设计也是影响搜索体验的因素之一，按钮设计部分具体参见4.5节。这里主要讲的是按钮文字，不同网站之间使用的按钮文字都略有不同，目前常用的包括“搜索”、“站内搜索”、“Web搜索”、“找一下”、“Search”和“Go”等，有的甚至使用小图标代替。目前暂时还没有研究表明哪种表述方式最能促进用户点击，但通常情况下简短的动词优于名词或者过长的文字，同时在同一网站内应该尽量保持按钮文字的统一。

6.搜索框中的提示文字

有些网站在搜索框中使用灰度显示的提示文字，提醒用户应该输入的内容。但要注意的是，当用户鼠标选中输入框时，文字应该自动消失，否则就需要选中文字并删除，给用户带来不便和沮丧。

7.鼠标定位

如果网站的搜索框非常重要，而且您希望引导用户使用搜索框，那么在打开网页时，应默认将鼠标自动定位在搜索框内，便于用户输入，减少定位时间。

但如果您希望引导用户浏览网站内容，那么就不需要将鼠标自动定位在搜索框。否则用户无法使用键盘中向下滚动页面的按钮进行翻页，给操作带来不便。

8.搜索框与背景色的对比

为了增加搜索框的识别度，它的颜色应该与背景色形成一定对比。切忌如图3-50所示：搜索框的颜色与背景色一致，用户很容易忽视搜索区的存在。

图　3-50

对于搜索引擎以及电子商务等网站来讲（除局部搜索外），搜索区非常重要，因此需要放置在相对显著的位置，并尽量满足以上几个设计要点。

对于重要性略低的全局搜索功能来讲，以上的几点设计要点都基本适用，但搜索框的大小、位置以及部分高级功能都可根据网站具体情况进行简化。

对于站内局部搜索功能的设计，由于其适用范围和重要性相对较低，因此简单实用即可。但必须注意的是这类搜索框应该和站内的全局搜索进行区分，避免用户混淆。

[1]国外几大网站的输入框都在400px以上，而国内的百度的较短。其中一个原因可能是因为相同的内容，中文占用字符相对较少，46个字符只能输入约4～8个单词，却可以输入23个中文字符。