智唯高端建站是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

建站优化电话:138 2557 5516(免费SEO检测 保证收录 保证排名)
广州建站微信号
返回旧版
网站建设News
公司网站建设

只有满足这9条设计要点才算得上是一个完美的搜索框

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
05Feb
2018
作为网页中最常见的UI控件之一,搜索框的组成非常简单:输入框+触动按钮,不少站长也因此没有对它给予足够的重视。其实搜索框在网站中扮演的角色不容小觑,一个可用性较高的搜

undefined

 

  作为网页中最常见的UI控件之一,搜索框的组成非常简单:输入框+触动按钮,不少站长也因此没有对它给予足够的重视。其实搜索框在网站中扮演的角色不容小觑,,一个可用性较高的搜索框往往可以有效节省用户获取信息和内容的时间,大大提升用户的浏览体验。尤其是在内容为主的网站中,当用户面对复杂的内容时,他们第一时间就会寻找搜索框,输入关键词以获取想要的内容,强大的搜索框能够促进用户交互行为的发生。所以在设计网站时我们应多花些时间思考搜索框如何设计。如果您没有什么头绪,不用担心,和小飞一起来看看搜索框设计的几个要点吧!

  1. 使用放大镜图标

  现在,一看见放大镜图标,用户自然而然就会想起搜索功能,这种联系是在长期使用过程中逐渐形成的,是为大家所广泛认可接受的。因此在网站中设计搜索框时,我们可以多使用放大镜图标,毕竟它是最常使用、最易于辨认的(即使没有文本标签,用户也能轻松识别)。当然也要注意,放大镜图标应该简洁直观,尽量减少一些不必要的细节,提高图标的可辨识度。

  

undefined

 

  2. 让搜索框足够显眼

  搜索框设计有一条重要的准则就是:让搜索框足够显眼,清晰可见的搜索框能让用户快速发现并使用。下图就很好地证明这一点,左右两侧是两种不同的搜索框设计,左边的搜索框隐藏在图标之后,这种隐性的搜索框太不显眼了,用户很难发现并使用。相比而言,右侧的搜索框就能及时给用户提供帮助。

  

undefined

 

  3. 提供搜索按钮

  在搜索框中设置按钮是为了让用户能够明白搜索的触动方式,带有按钮的搜索框更易吸引用户点击进行搜索。不过,在设计搜索按钮时,我们要注意控制它的尺寸大小,选取合适的区域,让用户可以移动光标或手动轻松点击。另外,设置回车键提交搜索的功能也是有必要的,因为现在很多用户仍然保留着点击回车键触动按钮的习惯。

  

 

  4. 每页都保留搜索输入框

  网站的每个页面最好都有搜索框。这样一来,当用户在特定的页面找不到想要的内容时,可以立即通过搜索框获取内容,这种设置是快速便捷的,是能够显著提高用户对网站好感的。

  5. 让搜索框尽量简单

  搜索框设计还有一条原则,那就是简单易用。研究表明,一个没有显示高级选项的搜索框看上去更加友好,可用性也更强。所以,一般情况下,在给用户提供搜索框时最好不要提供复杂的搜索选项。

  

undefined

 

  6. 让搜索框处于用户预期的位置

  当用户想要使用搜索框,却需要花费不少精力去找时,用户的体验就已经大大降低了。网站上的搜索框最好易于察觉,放在用户预期的位置,哪里才是用户预期的位置呢?下面这个图表是来自 A. Dawn Shaikh 和 Keisi Lenz 的一项研究结果,他们抽样调查了142名用户,了解用户对于网站搜索框位置的偏好。从图表中,我们可以看出大多数用户会在网站的左上角和右上角寻找搜索框,这主要是因为用户在浏览网站时使用F型扫视法,而网站右上角是大多数用户的首选区域,因此在设计搜索框时我们最好把它放在顶部靠右或顶部居中的位置。

  小贴士:

  在理想情况下,搜索框的设计应和整个网站的设计风格保持一致。不过在视觉上要略微突出,便于用户发觉它的存在;

  网站的内容越多,搜索框就应该越明显,确保输入框和按钮能够与背景区域相互区别;

  

undefined

 

  7. 合理的输入框尺寸

  输入框尺寸太小是最常见的搜索框设计错误。不少网站的输入框都太小,虽然可以容纳较长的内容,但部分内容却是不可见的,这种设计的可用性很差。由于视觉范围的限制,用户在输入内容可能会下意识觉得只能采用短的、不精确的查询方式,或是输入了较长的关键词,却在修改时遇到麻烦。因此,小飞建议使用能够根据输入关键词长度而变长的输入框,这不仅可以节省屏幕空间,还能给予用户充分的视觉提示。

  

undefined

 

  8. 使用自动搜索推荐机制

关于网站制作,看看客户怎么说
***(匿名) 评价文章 网站制作中的URL标准化的原则是什么?

网站制作中的URL标准化的原则是什么? 完整的SEO网站优化过程中,URL标准化是一个不可或缺的步骤,能够分清该做那些工作、要避免哪些失误,以便提高SEO工作的效率。以下是整...

***(匿名) 评价文章 佛山响应式网站制作哪家公司好?

佛山响应式网站制作哪家公司好? 响应式网站也就是自适应手机、平板网站,就简单来说就是可以自动识别屏幕宽度、并且通过设定好的程序对展示效果做出相应调整的一种网站...

***(匿名) 评价文章 佛山pc网站制作和手机端网站对企业营销哪个更有优势?

不管是pc端也好,还是移动端也好,如果老板认可互联网,那两者都可以做,配合起来做还是效果非常好的,不会做可以请专业的做,但老板的思维和心思要有的,包括鼓励以及...

公司网站建设
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

广州建站 感恩回馈

咨询送礼现在提交,将获得智唯网络策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线0757-8108-9123
合作意向表
您需要的服务
您最关注的地方
预算
  • 验证码

直接咨询