第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

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

时间:2017-09-14 09:00来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
看到这个标题,你可能会认为搜索是不需要设计的,毕竟只是一个文字输入框和搜索按钮的组合。 然而,在信息爆炸的互联网时代,搜索框成为我们每天必须要使用到的功能。当用户面对复

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

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

  1.使用放大镜图标

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

  

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

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

  2.显示搜索字段

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

  

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

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

  

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

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

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

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

  

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

  提示

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

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

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

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

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

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

  

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

  6.将搜索框放在用户更希望看到的地方

  也就是说,搜索框的位置要尽可能符合大部分用户的心理预期。

  A.Dawn Shaikh和Keisi Lenz做了一个研究,研究结果(如下图)表示了142位参与者在调查中预期搜索功能在网页中出现的位置。研究发现,将搜索功能放在网站的左上角或者右上角是最好的选择,用户可以使用常见的“F形”扫描模式轻松找到。

  

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

  因此,将搜索框放在页面的右上角或者中上部区域,是用户预期出现的位置。

  

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

  提示:

  理想情况下,搜索功能应该匹配于网站的整体设计,在用户需要的时候出现。

  网站的内容越多,搜索功能显得越重要,如果搜索对你的网站至关重要,就要从视觉、尺寸、位置、颜色等方面增强搜索的权重,以便搜索功能在复杂的内容中脱颖而出。

  7.确保输入框可以容纳足够的字段

  输入框设计的太窄是设计师常见的错误做法,如果输入框不够宽,当用户在输入框内输入较长的文本查询时,意味着有一部分文字将不被看到,用户无法轻松的查看和编辑他查询的内容,可用性将非常差。当输入框仅允许输入有限可见的文本时,用户将被迫用短的,不精确的查询,因为较长的查询难以阅读。有好的做法是输入框根据用户预期输入的文本调整大小,那么他们将更容易帮助用户阅读和查询。

  研究表明,可容纳27个字符的搜索框可以满足90%用户的搜索需求。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕