搜索框是 app 内最常见的控件之一，可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下，根据页面中搜索的重要程度，搜索框也有着不同的样式。
常见的四种样式：一级tab、顶部搜索、搜索 icon 、隐藏式搜索。
01
一级tab
位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ，简单、识辨度高符合用户已有的认知。
部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能，在“发现”页面中，由于增加其他运营内容导致流量被分摊，搜索相对就会弱一些。
02
顶部搜索
位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。当用户浏览的时候，搜索框也会悬停在顶部，不断引导用户进行搜索。
通常以搜索框的形式存在，为了突出搜索框，搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。
03
搜索icon
使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜” icon 。
搜索 icon 相比其他方式，搜索位置更灵活，可以单独出现，也可以和其他功能组合。
04
隐藏式搜索
位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的，当用户下拉页面时，顶部搜索框才会出现，这就和使用场景密不可分。
更多UI素材到搜UI网 （SOOUI) 临摹优秀作品是进步的捷径！
1.一级 tab ：位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。
2.顶部搜索：位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。
3.搜索 icon ：使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。
4.隐藏式搜索：位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。