浏览器设计（1）：搜索框设计思考

文章介绍了当今主流浏览器及部分小众浏览器的搜索框设计思路，希望大家可以从中获取一些灵感。

在浏览器中，搜索框无疑处于相当重要的一环——浏览器满足的核心需求是搜索，而搜索框正是打开这一基本功能的“钥匙”。一个好的搜索框对用户体验的提升影响是很大的，从页面布局到功能设计，如何做到满足用户需求甚至击中用户痛点都是需要仔细斟酌的。今天我在这里将介绍一下当今主流浏览器及部分小众浏览器的搜索框设计思路，希望大家可以从中获取一些灵感。

搜索框的基本功能

在当前的手机浏览器中，搜索框已经和网址栏融为了一体，其满足的基本需求正如同框里那七个灰字：“

搜索或输入网址

”，用户通过在搜索框里输入关键字或网址的方式来找到本身希望获取的信息。围绕这一核心点，产品经理们在搜索界面上花费了不少心思使其使用体验变得更好。在这个环节我将介绍一下搜索框基本的设计思路。

当我们在浏览器的主界面点击搜索框时，浏览器通常会跳转到搜索界面，输入法自动弹出，搜索框高高在上左边是搜索图标右边为取消按钮，搜索记录则不才方以列表的形式出现。清除搜索记录的图标是必不成少的，位置一般在搜索记录的最下方但我更喜欢神奇浏览器的布局——

删除记录以图标的形式呈现并在记录的右上方以便利用户点击

。在输入关键字时搜索框下方会出现一系列的联想，而在点击某条联想右边的箭头后，我们会发现该联想进入搜索框并引发了又一系列的联想。在点击前往按钮/搜索记录/联想后我们将进入搜索结果页面，搜索这一步骤正式完成。

从上述的描述中我们可以发现移动端浏览器与pc浏览器的搜索过程并纷歧样，在传统的浏览器中，没有专门的搜索页面也不会出现多次联想，而在移动端这似乎成了标配。其实这也是不得已的举措——

与电脑比拟手机的屏幕实在太小，况且输入键盘也会占掉将近一半的空间，浏览器必需得给予一个单独的界面让其实现搜索功能。事实上，如何

在这个界面加入更多辅助搜索的功能，是很多人都在思考的问题。

搜索框的大众功能

如同上面讲的那样，越来越多的开发者开始在搜索框上添加一些功能来使得搜索变得更加便利与有效。如今一些主流的浏览器都会主动对搜索框做进一步的优化来提升用户的体验。

首先在搜索引擎方面，浏览器一般是允许点击搜索框中最左边的图标来进行切换的。通常的搜索引擎是百度、谷歌、搜狗、必应、神马与360，一般视浏览器开发公司与这几家搜索公司的关系而定。值得一提的是

小众浏览器在引擎的选择上比主流浏览器更多，甚至可以自定义搜索引擎。

而一些自己就在做搜索业务的浏览器反而拘谨的多，好比百度浏览器只支持使用百度搜索。

其次一些浏览器会加入语音搜索和扫描，用户通过说出关键字便可以进行搜索，语音搜索的技术要求比较高，所以在小众浏览器上很难见到，主流浏览器虽然大都添加了这一功能但是效果并欠好。

当前大部分的手机用户并不习惯语音文字输入而且语音识另外精度仍有待加强

。二维码扫描则是很多浏览器都附带的功能，用户可以通过扫描二维码来进入详情界面。但我个人并不看好这一功能——目前主流的二维码扫描场景中大多都是有专门应用出现的，好比支付宝二维码和微信的二维码，浏览器的二维码扫描在这些使用环境中显得相当鸡肋

。

最后在大部分浏览器中都会有这样一个比较不显眼的功能——

用户复制文字后，在搜索框中长按会出现粘贴并搜索这一选项

。在uc浏览器中，复制的文字会自动出现在搜索框中，更是进一步精简了搜索步骤，但随之而来也出现了一个问题——假如用户复制了一大段并不准备搜索的文字，搜索框中同样会出现这一段文字，用户还得去删掉它。这样一看，又无形中为用户增添了负担，所以如何更好地优化“粘贴搜索”是一个值得探讨的问题。

搜索框的特色功能

经过上面的讲述，你可能以为搜索框在浏览器中其实是同质化比较严重的设计点。但在目前的主流浏览器中，搜索框其实是有属于它们本身的独特优势的。

在qq浏览器里，用户可以选择添加搜索标签。好比搜索“乒乓球”，添加“热点”标签后的搜索结果会是当前关于乒乓球的热点新闻，而选择“应用”标签则会出现一系列的关于乒乓球的应用。从图中我们可以看到腾讯凭借着强大的内容生态圈将浏览器打造成了拉升其他产品流量的入口。