思考关于搜索框的设计
作者：Maison 来源：麦兜的交互设计 发布时间：2008-12-09 18:17:00
在内容为主的网站中，搜索框往往是最常用的设计元素之一。从可用性的角度来看，搜索功能是用户有了明确的内容想看的时候最后使用的功能。如果一个网站没有足够合理的信息架构体系，那么搜索引擎不仅仅是有帮助性的，甚至是至关重要的设计功能。有可能比网站的导航更对用户有帮助。
事实上，搜索是用户了解在一些综合 * 内容最直接有效的方式。最好的设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上，但却有强力搜索的能力和范围宽广的功能。
在现实中，网站往往会随着时间的推移，新的内容不断的增递，而且这些新内容会更加重要，那么他对你之前设计的信息架构会有一定挑战，可能新的内容不一定适合整个信息架构，这个时候会和你的当时精心设计架构是有违背的。那么你的内容会打散在各个地方，每块内容都会看上去比较特别，感觉不是在网站架构中的一样。
当内容被分散四处，没有内容组织的时候，用户就更加困难找到他说需要的信息了。用户的可用性降低了，没有他所需信息的时候，用户会选择离开网站，或去Google去试试运气。这个时候还有唯一的希望那就是：一个搜索框。
虽然搜索的背后需要很高深厉害的程序算法，但不要忽视了前台的UI设计，我想可以看看更多现有网站的搜索框的设计。
什么时候需要搜索？
并非每一个网站都需要搜索功能的，但随之网站越来越多内容，它是满足用户以最快速度获得所需信息的最有效的方法。如果网站导航非常简单直观，没有内容能逃出网站的导航的话，那么搜索对于这样的网站没有太大作用。
搜索应该是一种预防性的功能，因为当导航系统十分庞大复杂的时候，搜索是能力立即去解决麻烦的方法。它可以培养用户要如何使用网络获得他们想要的信息。
因此，如果网站够大，或者网站会逐渐庞大的网站，早点考虑优化自己的搜索引擎，那么您的用户会感谢你滴。
搜索框=输入框+提交按钮
在设计中的搜索框变得很重要。输入框必须清晰可见，很容易辨认和使用。有人可能会认为，在搜索框并不需要什么设计。看上去，这只有两个简单的要素：输入框和提交按钮。任何设计都不平凡。设计是很多要考虑的，比如：输入框的长度取舍，输入文字显示的设计。有些设计师就连提交按钮都没有设计上去。
事实上，设计的搜寻框是一个大问题。因为当用户有需求找某些信息的时候，搜索是最有效果的功能。那么搜索框的位置很重要，还有输入框应该让用户感觉可以输入，搜索按钮看上去应该更像是个按钮。
看看TechCrunch的设计，输入框和提交按钮，在配色方案完全符合网站的整体视觉风格。然而，它导致了一个问题：乍看之下，这真的很难看到的搜索框。用户可以搜索它，因为它不站出来是不容易发现。虽然位置的搜索框不错，很容易忽视，但这是不是一件好事。
0
投稿猜你喜欢
- 对网站的LOGO设计做了一些归纳，希望得到批评，发现写的太长了，又不忍心删减，就分成两部分了，第一部分是有关设计基础的。第二部分是关于网站L
- 思想：4个数字的排列，加上3个运算符的排列，使用后缀表达式的表现如下：情形一：1,2,3,4,+,-,* => 24*24*4情形二：
- 首先要说明的是，这个标题有点标题党的意思，这个 bug 也存在于 IE8 下，在 IE6 和 IE7 下正常。之前写过两篇关于 I
- web2.0教程4：如何调用css样式表 这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/&q
- oracle数据库的快照是一个表，它包含有对一个本地或远程数据库上一个或多个表或视图的查询的结果。正因为快照是一个主表的查询子集，使用快照可
- 我想大多数的人在编写ASP程序的时候，都碰到过类似的错误信息： Error Num
- JavaScript 读取、删除 Cookie 的函数* * WebFXCookie class */ fun
- 上次还是CSDN里的朋友回答的，我复制了下来。原文如下 =========================== 利用统计文章字数，然后达到一
之前写过一篇文章《EmEditor代码片段插件介绍》，现在项目越来越多，越来越大，不再用EmEditor，而用IntelliJ IDEA。这- 很多网站现在都有使用QQ作为在线客服工具，我们点击它可以很方便的和网站人员联系，本站为你整理了在网站上使用QQ在线客服的代码，共13种风格，
- 《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、观察用户的操作之后，作为体验分析师的我
- 一、利用ASP和ADO实现数据库操作的工作流程ASP内嵌了五个对象Resquest、Response、Server、Seesion、Appl
- 大部分服务器管理员知道MySQL数据库管理系统（RDBMS）是高度灵活的软件块，带有范围广阔的启动选项，可以用来修改相关行为。然而，大部分人
- 有没有办法更快一点？ 有没有办法一次性收缩所有数据库？ 代码如下:alter database 数据库名 set recovery simp
- asp时间加减运算 和转换问题 a=2007-07-24 2:23:15 b=2005-06-25 2:23:15 问题1 如何将a转换成2
- 上期回顾:亚马逊购物用户体验分析 (二)方便的导航元素任何网上商店的成功，至关重要的一点，就是用户可以简单轻松地使用导航条。基本店铺分类，用
- 最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那漂亮的
- <!DOCTYPE html PUBLIC "-//W3C//DTD X
- ---- Oracle是关系型数据库管理系统，它功能强大、性能卓越，在当今大型数据库管理系统中占有重要地位。在我们开发的一MIS
- 之前用Crystal做了一个数字转English Word的Formula刚刚心血来潮, 大半个晚上写了JS版本的数字转换, 由于JS的Bu
