搜索框是输入区域与提交按钮的组合。有人可能会任务搜索框不需要设计，毕竟这里只有两种简单的元素。但是，在一些内容为主的网站上，搜索框是最长被用到的设计组件。当用户来到一个相对复杂的网站时，他们会立刻寻找搜索框来帮助他们快速便捷的到达他们的目标页面。所以，搜索框的设计和它的可用性是一个重要的事情。
最佳的做法
1、使用放大镜图标
放大镜图标总是与搜索框在一起。根据定义，图标是一个对象、动作、想法的可视化表示。有一些按钮是来自于用户的常识与认知。放大镜图标就是其中之一。
提示：当使用示意性图标时，图像细节越少，图形识别的速度越快。
2、把搜索放在显眼的区域
如果搜索是你的app或者网站的一个重要功能，你应该把它放在显眼的地方，让他可以快速并且容易的被用户发现。
显示完整的搜索区域很重要，因为在将搜索区域隐藏在图标后面使得搜索功能变得不那么明显并且增加了交互成本。
3、为搜索框提供给一个搜索按钮
一个按钮可让用户意识到这里需要多一步的操作才可以触发搜索行为，即使他们决定通过enter键来执行这一操作。
Tips:
提示：适当的调整提交按钮的大小，这样用户就不需要去精确控制鼠标的指向。点击区域越大，越容易发现与点击。
让用户使用Enter并单击图标来触发搜索。许多用户仍然有点击实际按钮来提交搜索的习惯。.
4、每一个页面都设置搜索框
你应该在你的每一个页面上昂志搜索框，因为每当你的用户找不到他想要寻找的东西时，不论他在哪里，他们都会想要使用搜索工具来帮助他们。
5、让你的搜索框足够简单
当你设计一个搜索框时，确保它像一个搜索框，并且可以简单地去使用。根据可用性研究，默认情况下没有显示高级搜索选项更加方便用户使用、高级搜索选项（例如布尔搜索查询）会让用户感到迷惑，为什么要去用它。
6、把搜索框放在用户期待它出现的地方
因为搜索框不明显不容易被发现导致用户去寻找搜索框在哪里是非常不好的情况。
下面看到的表格是由A. Dawn Shaikh和 Keisi Lenz做的一份研究，他们调查了142个人，了解他们最期望搜索框出现的位置。研究发现用户最容易发现的位置是屏幕的上方偏左和上方右。根据F型浏览模式，这些地方是用户最容易发现的位置。
所以，将搜索框放在布局的右上角或者上方中部时，可以保证你的用户可以很容易的发现他。
提示：
在理想状态下，搜索框应该完美融合于网页的整体设计，并且可以在用户需要他的时候脱颖而出。
当你的内容越多时，你会希望你的搜索功能越突出。如果搜索功能是你网站中非常重要的功能时，使用足够的对比度，保证搜索区域和图标可以在背景和周围其他组建中脱颖而出。
7、合适的输入区域
大多数设计师都会犯一个错误，就是讲输入区域设置的非常短。用户当然可以输入长的句子，但是这样会让很多文字被隐藏，这也就意味着可用性很差。因为用户不可以很容易的检查与编辑他们的输入。事实上，当搜索框的可见字符数量有限时，用户就被强迫使用短而精简的词汇，因为长的句子会不容易检查与编辑。如果输入区域根据他们想要输入的字段来确定大小，对于用户来说就更容易阅读与理解。
规律是：27个字符的输入框将适合90%的查询
提示：考虑使用长度可变化的搜索框，在点击用户时展开输入区域。这既节省了屏幕空间，同时仍然给予用户足够的视觉提示以快速找到并执行搜索。
8、使用自动提示机制
自动提示机制可以通过已经输入的字符来预测用户想要输入的完整字符。自动提示机制不是去加速搜索的进程而是去指导帮助用户去构建他们的查询字段。大多数用户都不太擅长去准确表达他们的查询字段，如果他们在第一次尝试时没有得到理想的搜索结果，后面的搜索尝试也很难成功。事实上，他们常常会放弃。自动提示机制可以帮助用户去表达更好的搜索字段。
提示：
确保你的自动提示机制是可用的。设计不当自动提示机制会干扰甚至误导用户。所以使用拼写自动更正、识别根词和预测文本来改善你的检索工具。
应该尽快的使用自动提示，比如在用户输入三个字符后提供快速而有价值的提示来减少用户的字符输入。
显示少于十个提示项目（不要出现滑动条），所以信息不会给用户冗杂的感受。
允许通过键盘来选择列表。一旦用户向下滚动到最后一个项目，然后返回到列表的顶部。按下Esc键让用户退出列表。
有区别标识出已输入字符与推荐字符的。（例如：输入的字符正常显示，而建议字符加粗显示）
9、明确用户可以搜索的内容
最好在输入框中提示一个示例搜索字段，来帮助用户理解这个区域可以搜索的内容。当可以进行多钟类别的搜索，使用输入提示模式来像用户进行解释（例如：下面例子中的IMBb）。HTML5可以轻松的输入那些输入字段中包含占位符的文本。
提示：将你的提示限制在几个词内，否则将会增加认知负担。
结论
搜索是一个最基本的操作，也是构建一个内容丰富的app或者网站的关键元素。输入区域的大小或者指示搜索字段中包括哪些信息这种小的细节都会显著的增加搜索的可能性愈整体的用户体验。
谢谢！
原文作者：Nick Babich
原文地址：https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c
