详细解析网页搜索框的设计细节技巧发布者：本站     时间：2021-12-15 11:12:02

搜索几乎是现在所有网站，APP甚至操作系统的标配，不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的重要作用。在不同的系统，不同用途的网站上搜索呈现的方式都有所不同。

用搜索的原因

使用搜索时，用户可以自己掌握浏览该网站的路径，从哪一页进入到哪一页，自己控制如何使用这个网站。没有必要根据网站的页面设计来决定浏览页面的先后顺序。这也是为什么很多网站用户一进入就直接使用搜索功能的原因。

另一个原因是，当用户浏览网页到一半不知道接下去该干什么的时候，往往会使用搜索直接去找到自己想找的内容。

不使用搜索的原因

相对于搜索，用户根据类目，或者从功能模块的入口进入各个页面其实是跟着页面的导向进行的下一步操作。

网页的设计者会根据网站的不同需求从而设计不同的页面布局。根据这些页面布局进而引导用户一步一步的达成网站设计者的目的。这些目的可能就是买一件商品，参加一个活动等等。用户可以根据设计者创建的引导流程一步步的查看网站内容。

不同用户群

根据搜索是否主动搜索这点来分，可以把用户分成3种类型：任务型，链接型，混合型。

任务型：

任务型的用户就是前面说的直接使用搜索功能的用户。大部分用户都是任务型的用户。这些用户往往是带着某种目的来，例如已经知道了自己要购买的商品，就直接搜索商品名称进入搜索列表页。

使用搜索的场景可以再细化一点，通常用户已经想好了具体要搜索的关键词，同时他使用的网站可以搜索到非常大量的搜索结果时，用户会使用搜索功能。例如在手机里找一个联系人的号码，如果手机里只存了10个号码，那很可能就直接打开联系人的APP，从这10个人的姓名中找到一个号码;另一种情况，如果手机里存了500个号码，这时候要逐个浏览来找某个联系人效率就会相对低，这是大家会做的是在联系人里找到搜索框，输入要找的人的姓名或者拼音，定位到要找的人，最后找到电话号码。

链接型：

链接型的用户打开一个页面之后会找各个功能的链接(首页广告，功能入口，链接)，即使他们已经想好了要找某些信息，他们还是会通过点击入口而不是输入关键字来找页面。通常这类用户知道自己要买麦片，但是没有考虑好什么品牌的麦片，哪个国家的麦片，那这个时候，他们会做的是找到网站的类目入口，在类目里找到“麦片”的分类，点击进入，而不是直接搜索关键词“麦片”。

链接型的用户只有当他们在页面上找不到自己需要的相关信息链接时，才会选择使用搜索框。

混合型：

混合型的用户行为其实以上两种都有，有时候会直接搜索关键词，有时候会在页面上寻找链接，没有使用以上哪种偏好的倾向性，只是用当下他们觉得最好的方式。

搜索入口的设计

不同功能，不同需求的界面会影响到搜索框入口的设计。

详细解析网页搜索框的设计细节技巧,PS教程,

△ iOS系统的搜索框只有在用户下拉页面时才会出现。

对于一个系统界面来说，给用户提供各个APP，功能入口是一个系统的重要功能，所以对于搜索，系统做了隐藏处理。

YouTube有针对用户的喜好在首页提供不同的视频，是一个对每个用户个性化的订制内容， YouTube希望用户浏览查看他们对于用户推荐的视频。所以他们没有把搜索框直接展开而是只显示一个icon，点击之后出现单独的搜索页。

详细解析网页搜索框的设计细节技巧,PS教程,

△ 电商类APP搜索框一般直接露出在首页的最顶端。

前面有说到在电商网站中，当用户不知道接下去该做什么的时候，会使用搜索操作来直接到达自己想要到达的页面。所以，通常电商网站中，搜索往往是固定在顶部Global上的，以便用户无论在哪一页都能找到。

详细解析网页搜索框的设计细节技巧,PS教程,

类似于Google，百度，Bing，搜索是他们的主营业务，自然希望用户所要查看的大部分页面都是通过搜索来获得。所以把搜索框做为用户的唯一使用路径放在首页，不论是APP还是网页。

这4个例子里对用户对搜索的需求依次增强，所以搜索在页面上的表现形式也依次增强。

作为一个用户大量使用的工具：搜索，它的位置，呈现形式直接关系到制作者对产品的预期，也直接关系到用户会用什么形式使用当前的界面。有的用户浏览界面知道自己要找什么，有的用户是来页面上逛逛的，针对不同用户，不同的搜索设计方案可以帮助设计者达到设计目的，也能帮助用户更好的使用体验。

以上是对搜索表现形式的一些基本见解。

搜索之时

搜索之时指的是点击搜索框之后到点击“搜索“按钮或者按”回车“之间发生的事。是不是觉得间隔时间很短?短到平时都忽略了这个过程，但是这里面的故事不少，各个平台都花了不少心思在这中间过程的设计上。

点击搜索框

当用户点击页面上的搜索框之后，如果在PC端通常会给出历史搜索词和推荐的关键词;如果是在手机端除了两种搜索词外还会同时弹出键盘。历史搜索针对的是近期多次浏览对比同一个搜索结果的用户。可能是用户在电商平台挑选商品，可能是用户在视频类网站追电视剧。于是设计者们就把内容前置，可以让用户在不输入关键词的情况下直接得到想要的搜索结果。

推荐的关键词有几种可能，有其他用户近期的热搜词(最近流行的电视剧，流行的网络词)，有平台推荐的搜索结果(给某些类目拉流量用的)，有广告(金主给钱的)，有针对用户的推荐词(根据用户最近的操作习惯精准化推荐的)。这其中近期的网络热搜词效果最好，针对用户的推荐词次之，之后分别是平台推荐词和广告。另外，也有对用户的输入行为预判并且分类的。这时内容前置给出的就是这些分类的名称，而不是某几个关键字。

详细解析网页搜索框的设计细节技巧,PS教程,

输入关键词

用户在输入搜索关键词的时候，不管已完全输入了要搜索的关键词还是只输入了部分，各个搜索页面这时通常会给出关键词的联想搜索结果。有些平台在用户输入了一半的时候就根据用户的历史搜索记录和自己的数据库猜想出了用户想要输入的完整关键词。