思考关于搜索框的设计

作者:Maison 来源:麦兜的交互设计 时间:2008-12-09 18:17:00 

在内容为主的网站中,搜索框往往是最常用的设计元素之一。从可用性的角度来看,搜索功能是用户有了明确的内容想看的时候最后使用的功能。如果一个网站没有足够合理的信息架构体系,那么搜索引擎不仅仅是有帮助性的,甚至是至关重要的设计功能。有可能比网站的导航更对用户有帮助。

事实上,搜索是用户了解在一些综合 * 内容最直接有效的方式。最好的设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上,但却有强力搜索的能力和范围宽广的功能。

在现实中,网站往往会随着时间的推移,新的内容不断的增递,而且这些新内容会更加重要,那么他对你之前设计的信息架构会有一定挑战,可能新的内容不一定适合整个信息架构,这个时候会和你的当时精心设计架构是有违背的。那么你的内容会打散在各个地方,每块内容都会看上去比较特别,感觉不是在网站架构中的一样。

当内容被分散四处,没有内容组织的时候,用户就更加困难找到他说需要的信息了。用户的可用性降低了,没有他所需信息的时候,用户会选择离开网站,或去Google去试试运气。这个时候还有唯一的希望那就是:一个搜索框。

虽然搜索的背后需要很高深厉害的程序算法,但不要忽视了前台的UI设计,我想可以看看更多现有网站的搜索框的设计。

什么时候需要搜索?

并非每一个网站都需要搜索功能的,但随之网站越来越多内容,它是满足用户以最快速度获得所需信息的最有效的方法。如果网站导航非常简单直观,没有内容能逃出网站的导航的话,那么搜索对于这样的网站没有太大作用。

搜索应该是一种预防性的功能,因为当导航系统十分庞大复杂的时候,搜索是能力立即去解决麻烦的方法。它可以培养用户要如何使用网络获得他们想要的信息。

因此,如果网站够大,或者网站会逐渐庞大的网站,早点考虑优化自己的搜索引擎,那么您的用户会感谢你滴。

搜索框=输入框+提交按钮

在设计中的搜索框变得很重要。输入框必须清晰可见,很容易辨认和使用。有人可能会认为,在搜索框并不需要什么设计。看上去,这只有两个简单的要素:输入框和提交按钮。任何设计都不平凡。设计是很多要考虑的,比如:输入框的长度取舍,输入文字显示的设计。有些设计师就连提交按钮都没有设计上去。

事实上,设计的搜寻框是一个大问题。因为当用户有需求找某些信息的时候,搜索是最有效果的功能。那么搜索框的位置很重要,还有输入框应该让用户感觉可以输入,搜索按钮看上去应该更像是个按钮。

看看TechCrunch的设计,输入框和提交按钮,在配色方案完全符合网站的整体视觉风格。然而,它导致了一个问题:乍看之下,这真的很难看到的搜索框。用户可以搜索它,因为它不站出来是不容易发现。虽然位置的搜索框不错,很容易忽视,但这是不是一件好事。

标签:搜索,搜索框,设计,用户体验
0
投稿

猜你喜欢

  • git stash的正确用法详解

    2022-11-06 19:10:07
  • Asp无组件生成缩略图

    2007-10-26 12:08:00
  • 详解Python自动化中这八大元素定位

    2023-06-04 18:25:34
  • JS+CSS实现过渡特效

    2024-05-02 16:14:18
  • Mysql查询优化之IN子查询优化方法详解

    2024-01-16 11:38:07
  • GoLang unsafe包详细讲解

    2024-02-02 05:09:46
  • Go并发调用的超时处理的方法

    2024-04-28 09:15:40
  • python中metaclass原理与用法详解

    2023-11-26 23:27:56
  • 详解TensorFlow2实现线性回归

    2022-11-10 15:35:13
  • oracle如何使用java source调用外部程序

    2023-07-12 02:52:42
  • Pytorch随机数生成常用的4种方法汇总

    2022-02-07 09:25:34
  • 详解 PyTorch Lightning模型部署到生产服务中

    2021-10-23 01:17:25
  • element 结合vue 在表单验证时有值却提示错误的解决办法

    2023-07-02 16:57:12
  • Python建造者模式案例运行原理解析

    2021-07-26 08:04:07
  • Python装饰器简单用法实例小结

    2022-01-18 22:19:40
  • Django实现基于类的分页功能

    2022-04-06 21:49:03
  • Go 语言数组和切片的区别详解

    2024-04-25 15:08:37
  • CentOS 6.3安装配置nginx+php+mysql

    2023-11-24 11:11:33
  • Python中MySQLdb和torndb模块对MySQL的断连问题处理

    2024-01-29 02:05:25
  • Python深度学习pytorch神经网络图像卷积运算详解

    2021-08-04 12:19:49
  • asp之家 网络编程 m.aspxhome.com