如何设计一个完美的搜索框(一)(1)

来源:网络   作者:一起学设计小编   发布时间:2017-10-08    浏览次数:0
收藏到:


看到这个标题,你可能会认为搜索是不需要设计的,毕竟只是一个文字输入框和搜索按钮的组合。


然而,在信息爆炸的互联网时代,搜索框成为我们每天必须要使用到的功能。当用户面对复杂的网站,难以找到自己想要看到东西的时候,他们会立即寻找并使用搜索框,快速的达到目的。这时候搜索功能的设计以及易用性就会显得尤为重要。本次我从“搜索框(一)”和下期的“搜索结果(二)”俩部分来分享比较正确的做法。


1.使用放大镜图标

在用户界面中放大镜图标和搜索功能如影随行,图标是对于操作对象、动作或想法可视化的表达,用户具有普遍认知的图形元素,我们通常也称之为icon。放大镜就是这样的图标之一。



提示:尽量使用最简单的图形,较少的使用细节装饰会提高识别效率。


2.显示搜索字段

如果你设计的产品中搜索是一个高频操作的功能,你应该将它放在相对明显和便捷的位置,便于用户快速找到并使用。



显示完整的搜索提示字段很重要,因为隐藏在图标中的搜索会使得搜索功能不那么明显,并增加无效的交互成本。



尽量避免这种形式的设计,因为它隐藏了搜索提示


3.为搜索框设计一个搜索按钮。

一个搜索按钮可以明确的告知用户,激活搜索框后的额外操作,即使他们已经决定了按下Enter键。



提示

适当的调整提交按钮触发区域的大小,使用户不必精确的指向就可以操作,更大的点击区域使其更容易被发现和便于点击。

虽然大部分用户会通过Enter键提交搜索结果,但是依然有不少用户习惯于使用鼠标点击实际按钮来完成操作,俩个操作方式应当同时存在。


4.每一个页面都出现搜索框

你的用户应该在每个页面都可以使用搜索功能,不论他们在网站的什么位置,当他们找不到他们正在查找的内容的时候,他们将尝试使用搜索功能。


5.设计一个简单的搜索框

让搜索框看起来尽可能的简单。根据可用性研究,在默认情况下不显示高级搜索是更友好的选择。在下面的例子中,高级搜索会使用户感到疑惑。



12共2页
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.17xsj.com/shejijiaocheng/shejililun/6716.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取10学币奖励,超爽下载!