如何设计出一个完美的搜索框。

好酷屋

发布于2023-02-24

好酷屋教程网小编为您收集和整理了如何设计出一个完美的搜索框。的相关教程：所谓搜索框，实际上就是一个输入域和提交按钮的组合。有人可能会认为搜索框并不需要设计，毕竟它只涉及到两个简单的元素。然而，在那些重内容的网站上，搜索框常常都是用户最用到的设计元素。当用户遇到一个相对复

　　所谓搜索框，实际上就是一个输入域和提交按钮的组合。有人可能会认为搜索框并不需要设计，毕竟它只涉及到两个简单的元素。然而，在那些重内容的网站上，搜索框常常都是用户最用到的设计元素。当用户遇到一个相对复杂的网站时，他们往往会首先寻找这个网站内的搜索框，以便能快速高效地到前往自己想去的页面或找到自己最为关心的内容。因此，搜索框的设计及其可用性问题其实是一个不容忽视的要点。

　　1、使用放大镜图标

　　一个搜索框应该始终与放大镜图标放在一起。所谓图标，其实就是代表着一个对象、动作、想法等多种含义的图形符号。我们通过图标看到的不仅仅是图标本身，而是它所代表的内在含义。然而，对于用户来讲，具有通用性代表含义的图标为数并不多，幸运的是，放大镜图标正是其中之一。

　　即使没有文本标签，用户也能轻易地识别放大镜图标

　　使用示意型的图标即可，这也是最简单的放大镜图标版本。更少的图形细节能够加快用户的识别效率。

　　2、搜索框要显著

　　如果搜索是你的应用程序/网站的一个重要功能，那么搜索框的显示务必要足够显著，以保证用户能够最快的发现它。

　　直接显示完整的搜索框很重要，因为默认只显示搜索图标（点击图标才展开搜索框）的话会使搜索功能不那么明显，而且增加了用户的交互成本。

　　3、提供一个搜索按钮

　　搜索按钮可以帮助用户识别出触发搜索操作的下一步——即使他们可能往往会通过按Enter键来执行此操作。

　　4.、将搜索框放在每一页上

　　用户在每个页面上都应该能获取搜索框，因为如果用户找不到他们要找的内容，他们往往会自然而然地想要尝试使用搜索功能来进行查找，他们才不关心自己当前是在你网站的哪个地方。

　　5、搜索框要足够简单

　　如果你设计了一个搜索框，请确保它看起来确实像是一个搜索框，并且使用起来要足够简单。可用性研究表明，默认情况下不显示高级搜索选项对用户会更加友好。高级搜索选项可能会混淆要尝试使用它的用户。

　　6、将搜索框放在用户预期找到的位置

　　如果因为搜索框不够突出、不容易察觉，用户还得花费精力去找它，那这个设计无疑是不够友好的。

　　因此，最好将搜索框放在页面的右上方或中上方，以确保用户能在预期的位置找到它。

　　7、搜索框尺寸大小要合适

　　输入框太短是设计人员常犯的一个错误。当然，用户可以键入长查询，但一次只能看到一部分输入的文本，这自然也就存在可用性问题，因为用户无法轻松地回看和编辑其刚刚才输入的查询条件。事实上，当搜索框具有有限数量的可见字符时，用户会被迫使用短的、不精确的查询条件，因为更长的查询条件将不易阅读。但如果输入框的长度是根据用户的预期输入来确定大小的，那对用户而言就友好多了。

　　经验表明一个可以输入27个字符的输入框是比较合适的，它能够适应90％的查询条件。

　　8、使用自动检索匹配机制

　　自动检索匹配机制可根据用户输入的字符进行预测来帮助用户找到一个可能匹配的查询条件。该机制并不是为了加快搜索过程，而是为了引导用户并帮助他们构建他们的查询条件。普通用户在构建查询方面往往会有困难：如果他们在第一次尝试查询后没有获得满意的结果，后面的查询也会很难顺利，事实上，他们常常就会放弃。而当自动检索匹配机制运作顺利时，它们就能帮助用户将查询条件表达的更加清楚。

　　Google搜索自2008年起就已经开始应用该机制，现在已经相当成熟。由于用户常常会多次搜索相同的内容，因此通过记住搜索记录，Google既节省了时间成本又能创造出更为便捷高效的搜索体验。

　　自动完成模式可以节省用户时间，给用户合适的引导

　　9、明确告诉用户可以搜索哪些内容

　　在输入框中显示一个搜索查询的示例条件是一个不错的做法，这样能够向用户表明他们究竟可以应用该搜索框搜索哪些/哪类内容。如果用户可以搜索多个条件，则使用输入提示模式来向用户说明。

以上就是好酷屋教程网小编为您收集和整理的网页设计,模板,标签,完美相关内容，如果对您有帮助，请帮忙分享这篇文章^_^

本文来源： https://www.haoku5.com/shenghuo/63f815f89d9fb5b2730ae4fe.html