许多人可能认为搜索框不需要设计，毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们会立即寻找搜索框，已到达到最终目的。搜索框的设计及其可用性就显得尤为重要。
两种类型
1、即时搜索
结果立即显示在用户界面上，不需要按钮，放大镜仅显示为一个图标，输入时立即搜索
2、常规搜索
通过用户点击搜索按钮后才开始执行搜索
何时使用
1、目标对象很难找到时
对象很多时；如从Mockplus的图标库中需要找到某个图标时。
可能的目标对象不在同一个位置时；如在磁盘中查找某类型文件时。
数据很难找到时；如在一篇长文本中搜索某个字符串时。
2、需要查找特定的内容时；
我们在淘宝中搜索匹配某种特征的商品时。
3、需要的结果不能在5秒找到时
设计理念
它是界面的一部分，所以要放在一个显眼的位置，要容易找到；
在同一应用中，它们应该有统一的外观；
它的功能应该是有效的，它的结果应该是准确的，它的速度应该是尽可能快速的。
外观特征
不需要使用标签，使用一个可选的提示；
提示可以是一个指令（如搜索类型），或者一个范围；
提示语要简短；
即时搜索时，提示首字母大写；常规搜索时，首字母小写。
搜索框设计的8个技巧
1.使用放大镜图标
根据定义，图标是对象，动作或想法的可视化表示，并且有几个图标是用户记忆最深刻的，也是通用的。放大镜图标就是其中之一。即使没有文字标签，用户也可以识别放大镜图标的作用。
2. 将搜索框放在用户希望找到的地方
如果搜索对于你的应用或网站来说是重要的功能，那么搜索框必须放在显眼的位置，让用户一眼就能找到。
研究发现，搜索框放置的最佳位置是你网站上每个页面的左上角或右上角，用户可以使用常见的F形扫描模式轻松找到它。理想情况下，搜索框应该完美匹配网站的整体设计，并在用户需要时轻松展现。
3.为搜索框提供搜索按钮
搜索按钮可以帮助人们了解还有额外的触发操作 – 即使他们通常使用Enter键。
4.将搜索框放在每一页上
始终提供对每个页面的搜索框的访问权限，因为如果你的用户找不到他们正在查找的内容，他们将会使用搜索功能，无论他们处于你网站的哪个位置。
5.使搜索框简单
如果你设计一个搜索框，请确保它看起来像一个搜索框，并尽可能简单的使用。根据可用性研究，默认情况下没有显示高级搜索选项，这样更加显示用户友好。高级搜索选项可能会混淆将尝试使用它的用户。
6.自适应字段大小
输入字段太短是设计人员常见的错误。当然用户可以键入长查询，但只有一部分文本可见，部分文字被隐藏，这意味着可用性差。因为用户无法轻松查看和编辑其查询。实际上，当搜索框能够输入的文本有限时，用户被迫使用短的文本进行查询，这样就不能精确的查询。如果输入字段根据其预期输入进行大小调整，那么它们更容易阅读并给用户提供良好的用户体验。
经验法则是具有27个字符的文本输入（它可以容纳90％的查询）。
7.使用自动建议机制
自动建议机制可以帮助用户通过输入的字符进行预测来找到正确的查询。自动建议机制不是加快搜索过程，而是关于指导用户并帮助他们构建搜索查询。用户在查询配置方面非常差：如果在第一次尝试时没有获得良好的结果，他们可能就放弃了。自动建议机制可以帮助用户更好地表达他们需要的搜索查询。
Google早在2008就掌握此项技术。由于用户倾向于多次搜索相同的内容，通过记住搜索记录，Google可以节省时间并创建更加便捷的体验。
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/2491.html
微信扫一扫
支付宝扫一扫
相关推荐
-
一个小表情背后的12亿掘金之路
最近，数说君在上班路上被一群奇怪的表情包给萌到了。先感受下迷一般的画风…… 没错，这就是风靡贴吧的表情大帝——滑稽表情。 圆嘟嘟的脸萌萌哒，弧度上扬的嘴角傲而不娇，微微泛红的脸颊让…
-
网站导航设计中常用的方法
导航是网页设计的重点，我们在设计一个网站的时候，常常从导航入手，不夸张的说，导航的设计甚至决定了整个网站的风格。这就需要我们平常多留心收集 优秀的案例，在需要的时候才能手到擒来。在前文中我们已经为大家介绍了120个优秀的水平导航设计 ，今天我们汇总了更多优秀的导航设计案例，千万不要错过哦！1.三维导航设计：网站导航已经不满足于常见的平面化设计，越来越多的网站喜欢用立体感强的三维导航。
-
企业网站风格应该如何选择
如何选择自己企业的网站风格，谈不上其中有多深的学问，但一定有科学道理在其中，一个人不可能同一时间点内对两件事同等的关注，也就是说有重点，这个重点就是你最想告诉浏览者的，其余的围绕这个重点，这是企业网站应该有的特征，企业网站的界面一定应该简洁大方，协调一致，最起码不能给人的生理心理造成干扰。
-
网络类产品配色风格探讨：UI设计中“黑”与“白”
在UI设计中配色占据着极其重要的地位，良好的配色会提升产品的用户体验度，更会吸引更多潜在用户的目光。 我们都知道在UI设计中配色占据着极其重要的地位，良好的配色会提升产品的用户体验…
-
全球网站设计师博客精彩赏析
在全球互联网上有上百万的博客，所以如何让你的博客设计得独特就成了一个巨大的挑战。每个设计师都试图使他的网站设计与别人的不同，希望它是唯一的。这一方面取决于博客内容，另一方也许是更重要的是，他们需要独特的足以吸引游客的博客设计。做视觉的应该都知道著名的deviantart，它是全球优秀视觉设计师聚集的社区，上面也有丰盛的设计资源。
-
让人眼前一亮的渐变色LOGO设计，每个都想保存收藏！
LOGO是一种信息传递的艺术，起到对LOGO拥有公司的识别和推广的作用，通过形象的LOGO可以让消费者记住公司主体和品牌文化。所以LOGO怎么做才能更好地传达公司文化和容易应用推广…
-
最流行的5个前端框架对比
如今出现了大量的CSS前端框架，但真正优秀的框架只有少数几个。 本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选…
-
腾讯内部员工曝光一个完整的设计流程
我上周参加了一个工作坊，也算是ThoughtWorks与我所在团队的交流活动。如果你有了解过IXDC，你能够在15年的活动中找到四个由他们团队组织的工作坊，其在一个就与我上周参加的…
-
uniapp支付宝支付的前端开发经验分享
在前段时间的开发需求中，有一项uniapp H5和APP端接入支付宝功能的需求，虽然这项功能前端的工作并不多，但还是根据这次的开发经验和踩过的坑做一个分享。 首先在对项目开启支付功…
-
网站前端设计师如何架构设计和导航可以让用户体验最好？
单页式网站是体验最好的网站。 从网站诞生时起，承载和传递信息的功能就没有变过。根据网站内容的不同和功能的不同，大概可以把网站分为了博客、论坛、门户网站、企业网站、行业网站等类别。在…
