搜索栏设计

在我们日常使用app的过程中，一定都接触过app当中的搜索功能，但很多学习UI新人还不太了解搜索功能应该如何设计，今天就让我们一起来探讨下搜索的设计方法吧～

很多产品尤其是内容型的产品，为了帮助用户快速定位访问目标，都会为用户提供搜索功能。当我们的产品为用户提供检索功能时，常常会结合用户的实际需求来进行功能的设计。

常见的搜索样式有以下四种：

搜索框导航

搜索框导航大致由搜索框、搜索图标、占位文本等元素构成，其中占位文本可能会以滚动的方式来展示运营活动，为用户搜索提供引导。

一些以内容为主的应用中（例如今日头条、爱奇艺、喜马拉雅等）搜索都是用户高频使用的功能，这时候会为用户提供搜索框帮助用户进行检索。

此类搜索框一般和顶部导航栏相结合，同时在用户滚动的时候还可能会有吸顶的交互效果。

底部标签栏

很多国外的产品会将搜索栏放于底部标签栏当中，这一区域是手指操作的舒适区，用户可以很轻松的执行操作功能。

搜索图标

在一些搜索权重不是很高的产品或页面中，搜索往往会使用搜索图标的方式来减少搜索功能对页面的占比。

隐藏式的搜索

在IOS的系统中，用户可以通过下拉的方式进行搜索，也可以点击页面指示器来进入搜索页面。

搜索一共有默认态、焦点态、活动态三种交互状态。

默认态的几种形式上文已经做了基本介绍，接下来我们说说焦点态和活动态。

在焦点态中，搜索除了基本的搜索框以外，还会增加光标和“取消”等操作控件。

在输入态中，除了焦点态的功能外，还会增加清除按钮、候选项等其他功能。

在我们进入搜索的输入状态时，有些产品会根据自身的功能属性对搜索增加一些辅助功能，帮助人们进行范围筛选。下面简单介绍一下常见的搜索辅助功能。

热门搜索

类别搜索

搜索历史

功能入口

上文我们介绍了搜索的基本结构，但产品的种类多种多样，单纯的文字搜索显然不能满足用户的需求，这时，我们就需要给用户提供不同的搜索方式了。

文字搜索

文字搜索是主要且常用的搜索方法，通过在输入框中输入关键字进行精准搜索。同时进行文字解析，提供对应的模糊值。

语音搜索

更多见于音乐类产品中，方便听歌识曲。

图像搜索

多见于电商产品。

因为搜索方式的多种多样，搜索的结果展示也会有所不同。下面来简单介绍一下。

图片/视频类

模块类

对于多种需求的应用，在搜索的结果只展示页面会采用分页器、选项胶囊等方式来帮助用户进一步的筛选。

市面上的搜索栏样式多种多样，但总结下来基本都大同小异，下面简单梳理一下常见的设计尺寸数值。

1、搜索栏高度大致为28～56pt之间偶数值

2、搜索图标左右间距12～20pt之间的偶数

3、搜索图标建议24～36pt之间的偶数值

4、搜索文字建议14～16pt

通过上文的梳理，我们大致了解了搜索功能的设计方法，但是我们作为设计师，在功能设计上不能一味的只追求功能的完善和形式的好看，而是要更深入用户的实际操作场景，以在不同场景下选择合适的搜索方式让用户搜的更快、更准为目的进行设计，这样才能最大程度的发挥我们作为设计师的价值。

最后，如果本文对你有帮助的话，还请点个赞多多支持一下～

我们下篇再见～