APP搜索框的样式素材模板，可临摹的好素材

搜索框是 app 内最常见的控件之一，可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下，根据页面中搜索的重要程度，搜索框也有着不同的样式。

常见的四种样式：一级tab、顶部搜索、搜索 icon 、隐藏式搜索。

01

一级tab

 

RentHouse - 简单主页搜索移动应用的UI KIT

位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ，简单、识辨度高符合用户已有的认知。

部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能，在“发现”页面中，由于增加其他运营内容导致流量被分摊，搜索相对就会弱一些。

02

顶部搜索

 

 

车辆搜索

位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。当用户浏览的时候，搜索框也会悬停在顶部，不断引导用户进行搜索。

通常以搜索框的形式存在，为了突出搜索框，搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。

03

搜索icon

 

使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜” icon 。

 

搜索 icon 相比其他方式，搜索位置更灵活，可以单独出现，也可以和其他功能组合。

 

通讯，搜索屏幕 - 奥约应用

04

隐藏式搜索

 

位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的，当用户下拉页面时，顶部搜索框才会出现，这就和使用场景密不可分。

 

搜索

更多UI素材到搜UI网 （SOOUI) 临摹优秀作品是进步的捷径！

1.一级 tab ：位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。

 

2.顶部搜索：位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。

 

3.搜索 icon ：使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。

 

4.隐藏式搜索：位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。