详细解析UI设计中搜索栏设计的技巧教程

在一个内容型的APP中，搜索功能可以说是标配。它是巨大的流量入口，同时又承载着产品运营的能力。碰巧最近在做JOOX搜索页面的优化，借机整理了一下关于搜索设计的几个要点。

根据用户的实际使用行为，我们可以把搜索这个操作按照用户行为路径节点分为发现 – 进入 – 使用 – 得到4个部分。

发现搜索入口

进入搜索界面

使用搜索功能

得到搜索结果

发现入口

搜索框的入口一般有几种：一级tab、搜索框、搜索icon、隐藏式搜索框。不论何种样式，遵循的最基本的原则都是两个点：快速发现和容易识别。

1. 快速发现

用户的搜索需求会出现在两个时间点，一是搜索目的明确，打开App就需要使用，另一个时间点是在使用App的过程中产生搜索需求，这个需求我们很难确定用户在执行什么操作，所以需要根据页面及产品类型进行设计。

可以确定的是，两种需求时刻都要求我们的产品可以快速让用户找到搜索功能并使用，所以搜索功能的位置非常重要。当前绝大部分App的搜索功能都放置在页面顶部，以搜索框或者「放大镜」的样式存在，用户已经养成了习惯，当需要使用搜索功能时首先会寻找页面的顶部位置。

大多数内容型的产品会常驻搜索框，便于用户在浏览内容的过程中随时查找内容。也有产品设计收成为一个 icon 后固定在某一位置，为其他内容的展示节省出空间，例如得到APP就是这样做的。

百度云盘的搜索框在页面滑动时会随页面滑走，而从笔者的使用习惯来讲，搜索功能对于云盘来说是很重要的功能，所以这里的体验有待提升。

2. 容易识别

在用户潜意识的位置中放置搜索功能，还有一个要求是降低用户的识别成本，让用户一眼就能看出是搜索功能，而不用经过判断。当前最常见的就是搜索框或者「放大镜」icon 样式两种，用户不需要判断就能识别该功能为搜索功能。

搜索框的样式总的来说有矩形和圆角两种，配合内部默认文案，有多种组合。

也有一些比较特殊的搜索样式，比如：网易有道翻译中精品课的搜索页面就进行了新的尝试(这里其实是进入搜索页面了)，但是用户接受成本比较高，不太建议轻易尝试。

icon 样式每个公司的设计师出品都有所区别并且尽可能的想有特色，但是从产品的角度来说，「放大镜」icon 的细节越少，识别度越高，不要过度的设计。

△ 来源于iconfont