前言

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

下面就和大家聊聊常见的四种样式：一级tab、顶部搜索、搜索icon、隐藏式搜索。

01.一级tab

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

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

一级tab相比其他方式，搜索过程更方便，点击操作更容易。

例如在贝壳找房app中，“找”作为该app的重要功能单独设立一个入口，用户搜索时无需进入二级页面中去完成条件筛选，搜索过程更方便、一目了然。

在筛选中选择总价、房型、特色、朝向等条件后，点击“开始找房”按钮进入搜索结果页。如果在搜索过程中退出，再次回到该页面后，仍会保留上一次操作的结果，方便下次修改和查找。

贝壳找房和AppStore搜索入口在底部导航，这个位置符合拇指热力区操作，屏幕偏下的位置单手持握手机的时候更容易点击。

需要注意的是底部导航的数量有限。在底部导航超过5个的时候不建议在底部再增加入口，过于拥挤不适合用户点击。

02.顶部搜索

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

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

不同类型的app搜索功能也不一样，除了文本搜索，淘宝有图片搜索功能，方便拍图找物；虾米音乐还有语音搜索功能，方便查歌找曲。

顶部搜索相比其他方式，搜索入口更显眼，为转化提供更多流量。

例如在天猫app中，当用户进入的时候，部分是带着明确的购买意图，这时就需要让他们快速找到搜索功能。所以天猫app把搜索框置顶在导航栏上，即使是在上滑的时候，也是在顶部。

在顶部搜索框内推荐了客厅地毯，根据用户的历史搜索行为触发的引导，在用户已经搜索的基础上，转化率会大大的提升。App运营还会根据热点、时节更换搜索框的预设关键词，能吸引更多的点击量。

需要注意的是结合场景去使用搜索功能，例如支付宝，刚进入app用户可能找不到想要的功能在哪里，这时候搜索框置顶让用户方便去查找。但是当用户在向下浏览的时候，用户想要浏览推荐内容，搜索功能相对减弱，为了减少空间占用，搜索框变搜索icon。

03.搜索icon

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

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

当搜索功能在页面中不再是高频使用功能时，仅通过搜索icon让用户知晓有搜索功能存在即可。由于搜索icon占用区域少，可与其他功能组合出现，例如in；也可单独出现，如猫眼，仅靠图标标红来提示用户此功能。

需要注意的是在同一个app的不同页面中，由于对搜索功能的需求不同，有些页面会选择搜索icon，有些页面会选择顶部导航。例如天猫app，在品牌页面中，对于用户即将浏览的内容都是根据用户行为产生和运营推荐的，自然搜索功能也会弱一些，采用搜索icon即可。天猫首页强调引导用户去搜索、购买商品，采用顶部搜索框。

04.隐藏式搜索

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

转载请注明:http://www.aideyishus.com/lkgx/2932.html