搜索框由输入框和发送按钮组成。有些人可能会说，这么简单的控件有啥可设计的呀，再怎么设计也就这两个简单的元素。然而在内容繁重的网页中，搜索框是最常用的控件。当用户接触到一个相对复杂的站点时，他们通常通过搜索框去快速寻找他们最终的目的地。这样看来，搜索框的设计和使用真的是很重要的。
本文我们将讲述：这些元素怎样设计才能让用户在最短的时间内找到他们想要的。
最佳行为
1.使用放大镜图标
在搜索框一定要放置放大镜图标。事实上，图标在视觉上代替了物品、行动或者想法。可以选用这些通用图标。放大镜正是这样的图标。
建议：使用粗线条的，视觉简化的放大镜图标。少些图画细节能够加速认知。
2.将搜索框放在最显眼的位置
如果搜索在你的应用中是个非常重要的功能，设计时应让他尽量的显眼，保证用户能够快速的发现它。
展示全部展开的文本框，因为搜索隐藏在icon里会让这个功能不那么容易被注意到，同时也会增加认知成本。
3.给搜索框一个搜索按钮
这个按钮能够让用户认识到启动搜索行为还需要更多的步骤，或者还需要按下enter键。
建议：
a.发送按钮的大小要适当，保证用户不用用鼠标小翼翼地点击。大一点儿的可点击区域让点击变得简单。
b.允许用户通过Enter键发送搜索指令。当然也有很多用户还是习惯点击实际的按钮发送搜索指令。
4.每一页都放搜索框
保证每一页都有搜索框。当用户不能找到他们寻找的内容时，他们会忽略他们所在的网页，只是通过搜索框搜索。
5.让搜索框简单
如果你设计一个搜索框，确保它看起来像搜索框，并且易于使用。根据可用性研究，定义默认文本比更多搜索选项更加友好。高级搜索选项会让用户困惑。
6.将搜索框放置在用户期望找到它的地方
用户在想用搜索功能却找不到搜索框的体验是非常差劲的，比如找不到或者点不到。
下面这个图标是A. Dawn Shaikh和Keisi Lenz的研究成果：通过142个志愿者的参与确定在哪些站点用户希望能找到搜索功能。研究发现用户认为最方便点击的地方是在界面的左上角或者右上角，这里正好是用户使用F型阅读模式时比较容易发现的点。
所以，在布局的左上角或者右上角放置搜索框会让用户在想使用搜索功能时，很容易找到。
建议：
a.实际上，搜索框应该完美贴合整个页面的设计，但当用到搜索时，搜索框应该足够显眼。
b.内容越多，搜索功能就应该越明显。如果搜索对网站十分重要，通过使用对比让搜索框和图标在背景和周围的元素中凸显出来。
7.适合的尺寸
太小的输入框是常见错误。当然用户可以输入很长的问题，但是只有一部分文本同时显示，这是很差的使用体验，由于用户不能快速查看和编辑他们的问题。实际上，如果输入框有紫薯显示，用户就会尽量使用简短的词汇，精炼的问题，因为太长的问题，会比较难读同时也不方便阅读。如果根据他们期望输入的内容限制输入框的大小，不仅便于阅读页更容易被用户理解。
比较好的解决方案是，限定27个字符的输入框，这样能贴合90%的问题
建议：
考虑使用可缩放搜索框，在点击输入框时展开。这样即节省屏幕空间，也能给用户足够的视觉暗示找到和展开搜索框。
8.使用智能机制
智能机制可以帮助用户找到合适的问题通过用户输入的模糊信息。智能机制不能加速搜索，但是能帮助用户组织搜索的问题。大部分用户在问题的组织上非常困难，如果他们第一次尝试时不能得到相应的结果，接下来的搜索就更难成功了。所以，他们通常选择放弃。但是如果有智能机制，将帮助选择更加贴切的问题搜索。
google的搜索引擎就是使用这种模式，并且已经在2008年开始执行。因为用户已经不止一次的尝试搜索相同的东西，通过历史搜索记录，google记录了用户习惯。
建议：
a.确保智能机制切实有效。不智能的机制会让用户迷惑，所以使用自动拼写纠错机制纠正词根，预测词汇。
b.尽快启动智能机制。比如一个字母输入后，立刻提供相应的单词，减少输入成本。
c.展示少于10个东西，（不要使用滚动条）这样信息不会过载。
d.允许使用键盘给列表导航。用户一旦滚到最后的选项，应该可以立即返回顶部。比如说用ESC键推出列表。
e.明确输入信息和建议信息之间的区别（比如输入文本使用标准字重，但是建议文本加重）。
9.保证搜索结果清晰
在文本框里包含简单的搜索问题暗示用户这些功能可以使用是个好想法。如果用户能搜索多个标准，使用输入暗示模式解释。（比如下面IMDb的例子）。HTML5使得在输入框里放置展位文本变得简单。
建议：
将暗示文本控制在几个词汇，不然会加重认知负担
结论
搜索是基础活动，同时在内容繁重的网页中也是非常重要的元素。即使像文本框合适尺寸这样一个小小的改变或者是文本框里暗示的内容，都会大大提高搜索框的易用性。
