如何让你的搜索框设计“一举成名”

许多人可能认为搜索框不须要设计; 毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框一般是最经常使用的设计元素。当用户遇到相对复杂的网站时，他们会当即寻找搜索框，已到达到最终目的。搜索框的设计及其可用性就显得尤其重要。

 

两种类型

一、即时搜索：

结果当即显示在用户界面上，不须要按钮，放大镜仅显示为一个图标，输入时当即搜索

二、常规搜索：

经过用户点击搜索按钮后才开始执行搜索

什么时候使用

一、目标对象很难找到时

a) 对象不少时；如从Mockplus的图标库中须要找到某个图标时。

b) 可能的目标对象不在同一个位置时；如在磁盘中查找某类型文件时。

c) 数据很难找到时；如在一篇长文本中搜索某个字符串时。

二、须要查找特定的内容时；好比咱们在淘宝中搜索匹配某种特征的商品时。

三、须要的结果不能在5秒找到时。

设计理念

一、它是界面的一部分，因此要放在一个显眼的位置，要容易找到；

二、在同一应用中，它们应该有统一的外观；

三、它的功能应该是有效的，它的结果应该是准确的，它的速度应该是尽量快速的。

外观特征

一、不须要使用标签，使用一个可选的提示；

二、提示能够是一个指令（如搜索类型），或者一个范围；

三、提示语要简短；

四、即时搜索时，提示首字母大写；常规搜索时，首字母小写。

搜索框设计的8个技巧

1.使用放大镜图标

根据定义，图标是对象，动做或想法的可视化表示，而且有几个图标是用户记忆最深入的，也是通用的。放大镜图标就是其中之一。即便没有文字标签，用户也能够识别放大镜图标的做用。

 

2. 将搜索框放在用户但愿找到的地方

若是搜索对于你的应用或网站来讲是重要的功能，那么搜索框必须放在显眼的位置，让用户一眼就能找到。

研究发现，搜索框放置的最佳位置是你网站上每一个页面的左上角或右上角，用户可使用常见的F形扫描模式轻松找到它。理想状况下，搜索框应该完美匹配网站的总体设计，并在用户须要时轻松展示。

3.为搜索框提供搜索按钮

搜索按钮能够帮助人们了解还有额外的触发操做 - 即便他们一般使用Enter键。

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

始终提供对每一个页面的搜索框的访问权限，由于若是你的用户找不到他们正在查找的内容，他们将会使用搜索功能，不管他们处于你网站的哪一个位置。

 

5.使搜索框简单

若是你设计一个搜索框，请确保它看起来像一个搜索框，并尽量简单的使用。根据可用性研究，默认状况下没有显示高级搜索选项，这样更加显示用户友好。高级搜索选项可能会混淆将尝试使用它的用户。

7.自适应字段大小

输入字段过短是设计人员常见的错误。固然用户能够键入长查询，但只有一部分文本可见，部分文字被隐藏，这意味着可用性差。由于用户没法轻松查看和编辑其查询。实际上，当搜索框可以输入的文本有限时，用户被迫使用短的文本进行查询，这样就不能精确的查询。若是输入字段根据其预期输入进行大小调整，那么它们更容易阅读并给用户提供良好的用户体验。

经验法则是具备27个字符的文本输入（它能够容纳90％的查询）。

 

 

8.使用自动建议机制

自动建议机制能够帮助用户经过输入的字符进行预测来找到正确的查询。自动建议机制不是加快搜索过程，而是关于指导用户并帮助他们构建搜索查询。用户在查询配置方面很是差：若是在第一次尝试时没有得到良好的结果，他们可能就放弃了。自动建议机制能够帮助用户更好地表达他们须要的搜索查询。

Google早在2008就掌握此项技术。因为用户倾向于屡次搜索相同的内容，经过记住搜索记录，Google能够节省时间并建立更加便捷的体验。

有人会说，我不想本身去设计，有现成能够直接用的搜索框吗？固然，Mockplus这款原型软件封
装了弹出面板、内容面板、滚动区、抽屉、轮播等系列经常使用交互组件以及近200个组件，提供3000
个以上的图标素材。作图时，只须要把这些组件放入工做区进行组合，一张原型图就能够迅速呈
现。想用什么直接搜索，方便，快捷，让你在这个追求效率的时代省时更高效。

据说Mockplus最近还放出了前所未有的限时优惠。俗话说：“过了这个村就没这个店”。可否抓住，你决定!