有数据显示，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。

搜索框作为电子商务网站中众多交互组件中的一个，在使用过程中能否为用户提供最方便的服务，直接关乎到用户能否将购买意图转变为真实的购买行为。

今天通过一些案例聊聊各种搜索输入框的功能，与大家分享，共同学习。

搜索输入框的下拉提示功能

yahoo!的搜索提示框用了深色底浅色字，用户的注意力不容易分散，会集中在这一区块中。
而且yahoo!和google同样的，用户输入想查找的关键字时，系统会显示与这一关键字相关的信息在下面，让用户有更多的选择。
比如我在输入“驴妈妈”的时候，它会把相关联的关键字进行组合，“驴妈妈 1元门票”，“驴妈妈 携程”，显然这为用户提供了更多的选择。

淘宝还有关于这一关键字的结果数量，很独到，小的提示能让用户知晓的信息更多了。

这些都是大型搜索引擎，自然搜索服务和用户体验都做的很到位。那旅游类网站，很少在首页上提供站内搜索功能的，即使有站内搜索也没有关键字信息提示这一人性化的功能。

驴妈妈首页的搜索框当你输入关键字后，会匹配此关键字的相关景点条目，方便用户选择他所需要的信息。曾经有人说过：用户从不思考 用户很懒 Don’t Make them Think,for they Don’t like. …… 所以我们需要为用户提供傻瓜型的交互组件。

搜索输入框的属性

淘宝和驴妈妈的搜索框有点长。有啊适中。当当就太短了。

高度上，当当是最窄的。淘宝27px，高度比较合适，但是行高只有15px，感觉还是有点挤。

驴妈妈高度是32px，行高是22px，似乎有点高，不过目前大屏宽屏显示器已经很普及了，高分辨率下还是比较合适的。

有啊33px，跟驴妈妈32px相比，虽然数值上只有1px之差，但是视觉差别还是很大的，它的行高是19px，感官上很舒服。

搜索框的排版样式

我们把搜索框简化

拍拍和淘宝一样外层多了一个背景，视觉上更有整体性。

google的确定按钮在下方，如果不习惯用回车键确定的用户，要折行再点击，不太顺手。

bing的按钮采用内嵌式的，太小了，不利于点击。

接下来我们看看当当站内搜索的整体控件是怎样的：

我们看到在输入框的前面有一个下拉选择的步骤。

我们可以算一下：点击下拉+选择分类+输入关键字+确定，一共用了4步。

如果当当像百度一样，把所有分类都列出来，虽然减少一步，但界面就不够简洁了。

所以如何做到界面简洁，而用户体验又能很好，我们一直在找这样一个平衡点。

我希望的页面元素是这样的，它始终安静的呆在那里，当你不需要它的时候，它不会乱动和干扰到你，而你也清楚的知道它就在那里，当你使用它的时候，它能把隐藏于内的所有强大功能都一一体现出来。

一家之言，欢迎交流补充。