从结构、类型和状态3个方面，帮你掌握搜索框设计

我们在工作和生活中经常会用到搜索框，比如进入一款电商平台，我们需要去搜索自己想买的东西，就可以依靠搜索框完成这一动作，所以搜索框的设计也是重中之重；本文作者分享了关于从三个方面设计搜索框，我们一起来了解一下。

“搜索”是产品中一个非常必要的功能模块，搜索就像为用户提供了一条便捷的绿色通道，方便用户快速检索内容。

搜索动作在 App 中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何；大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。

一、搜索框结构分析

从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：

• 使用前-找到搜索框入口；
• 使用中-点击输入内容；
• 后-展示搜索结果。
  
  其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。

二、搜索框的常见类型

回想常用 App 的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。

1. 搜索图标
页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。