如何设计出一个“与众不同”搜索框

所谓搜索框,实际上就是一个输入域和提交按钮的组合。有人可能会认为搜索框并不需要设计, 毕竟它只涉及到两个简单的元素。然而,在那些内容繁琐的网站上,用户很难找到自己想要的东西,这时搜索框扮演着不可缺少的角色。因此,搜索框的设计及其可用性问题其实是一个不容忽视的要点。搜索框的设计及其可用性就显得尤为重要。

如何设计出一个“与众不同”搜索框

它分为两种类型

1、即时搜索:

结果立即显示在用户界面上,不需要按钮,放大镜仅显示为一个图标,输入时立即搜索,达到一定的目的。

2、常规搜索:

通过用户点击搜索按钮后才开始执行搜索,以达到一定的目的。

设计理念

1、它是界面的一部分,所以要放在一个显眼的位置,要容易找到;

2、在同一应用中,它们应该有统一的外观;

3、它的功能应该是有效的,它的结果应该是准确的,它的速度应该是尽可能快速的。

如何设计出一个“与众不同”搜索框

外观特征

1、不需要使用标签,使用一个可选的提示;

2、提示可以是一个指令(如搜索类型),或者一个范围;

3、提示语要简短;

4、即时搜索时,提示首字母大写;常规搜索时,首字母小写。

下面我们将看到该如何改进设计搜索框,以减少用户所需要花费的查询时间。

1、使用放大镜图标

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

如何设计出一个“与众不同”搜索框

2、搜索框要显著

如果搜索是你的应用程序/网站的一个重要功能,那么搜索框的显示务必要足够显著,以保证用户能够最快的发现它。研究发现,搜索框放置的最佳位置是你网站上每个页面的左上角或右上角,用户可以使用常见的F形扫描模式轻松找到它。理想情况下,搜索框应该完美匹配网站的整体设计,并在用户需要时轻松展现。

如何设计出一个“与众不同”搜索框

3、提供一个搜索按钮

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

如何设计出一个“与众不同”搜索框

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

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

5、搜索框要足够简单

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

如何设计出一个“与众不同”搜索框

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

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

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

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

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

如何设计出一个“与众不同”搜索框

Amazon使用长度合适的搜索框

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

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

如何设计出一个“与众不同”搜索框

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

如何设计出一个“与众不同”搜索框

提示: 提示部分要限制在几个字之内,否则反而会增加用户的认知负担。

如何设计出一个“与众不同”搜索框

这次的分享就到这里了,有兴趣的小伙伴可以在下面领取设计资料的哦~http://t.cn/ROCIyd0(复制到浏览器打开即可)详情请看职业研学社


分享到:


相關文章: