大喜

前言

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

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

 

01 一级tab

位于屏幕底部的导航,搜索作为一个独立的入口,适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ,简单、识辨度高符合用户已有的认知。部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能,在“发现”页面中,由于增加其他运营内容导致流量被分摊,搜索相对就会弱一些。一级 tab 相比其他方式,搜索过程更方便,点击操作更容易。
例如在贝壳找房 app 中,“找”作为该 app 的重要功能单独设立一个入口,用户搜索时无需进入二级页面中去完成条件筛选,搜索过程更方便、一目了然。在筛选中选择总价、房型、特色、朝向等条件后,点击“开始找房”按钮进入搜索结果页。如果在搜索过程中退出,再次回到该页面后,仍会保留上一次操作的结果,方便下次修改和查找。贝壳找房和 App Store 搜索入口在底部导航,这个位置符合拇指热力区操作,屏幕偏下的位置单手持握手机的时候更容易点击。需要注意的是底部导航的数量有限。在底部导航超过5个的时候不建议在底部再增加入口,过于拥挤不适合用户点击。 

 

02 顶部搜索

位于屏幕顶部的导航,让用户打开 app 想要搜索时能快速找到,符合用户期待,适用于当前搜索频率高的页面。当用户浏览的时候,搜索框也会悬停在顶部,不断引导用户进行搜索。通常以搜索框的形式存在,为了突出搜索框,搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。不同类型的 app 搜索功能也不一样,除了文本搜索,淘宝有图片搜索功能,方便拍图找物;虾米音乐还有语音搜索功能,方便查歌找曲。顶部搜索相比其他方式,搜索入口更显眼,为转化提供更多流量。
例如在天猫 app 中,当用户进入的时候,部分是带着明确的购买意图,这时就需要让他们快速找到搜索功能。所以天猫 app 把搜索框置顶在导航栏上,即使是在上滑的时候,也是在顶部。在顶部搜索框内推荐了客厅地毯,根据用户的历史搜索行为触发的引导,在用户已经搜索的基础上,转化率会大大的提升。 App 运营还会根据热点、时节更换搜索框的预设关键词,能吸引更多的点击量。
需要注意的是结合场景去使用搜索功能,例如支付宝,刚进入 app 用户可能找不到想要的功能在哪里,这时候搜索框置顶让用户方便去查找。但是当用户在向下浏览的时候,用户想要浏览推荐内容,搜索功能相对减弱,为了减少空间占用,搜索框变搜索 icon 。

 

03 搜索icon

使用 icon 作为搜索点击区域,减少导航栏占用,弱化了搜索功能,适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜”  icon 。搜索 icon 相比其他方式,搜索位置更灵活,可以单独出现,也可以和其他功能组合。
当搜索功能在页面中不再是高频使用功能时,仅通过搜索 icon 让用户知晓有搜索功能存在即可。由于搜索 icon 占用区域少,可与其他功能组合出现,例如 in ;也可单独出现,如猫眼,仅靠图标标红来提示用户此功能。
需要注意的是在同一个 app 的不同页面中,由于对搜索功能的需求不同,有些页面会选择搜索 icon ,有些页面会选择顶部导航。例如天猫 app ,在品牌页面中,对于用户即将浏览的内容都是根据用户行为产生和运营推荐的,自然搜索功能也会弱一些,采用搜索icon 即可。天猫首页强调引导用户去搜索、购买商品,采用顶部搜索框。 

 

04 隐藏式搜索

位于屏幕顶部的导航,以搜索框的形式。只会在用户需要的时候才出现,平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的,当用户下拉页面时,顶部搜索框才会出现,这就和使用场景密不可分。
微信首页刚进来的时候主要以处理最近回复为主,搜索功能相对弱化,在用户浏览列表的时候,搜索框也不会悬停在顶部导航。而在第二个tab通讯录列表中,主要以查找联系人为主,搜索功能一开始进入就显示在列表顶部。 

 

05 总结

绝大部分的 app 里带有搜索功能,搜索功能可以帮助用户快速找到所需内容,减少时间成本。搜索也是提高流量的重要入口,吸引用户注意力。但想要搜索在页面中恰如其分的应用并不那么容易,需要引导用户行为和分析使用场景,这就依赖我们前期大量样式积累,才能输出合理的设计方式。
再来回顾下文中提及的四种搜索框样式:

  • 一级 tab :位于屏幕底部的导航,搜索作为一个独立的入口,适用于搜索场景相对重要的 app 。
  • 顶部搜索:位于屏幕顶部的导航,让用户打开 app 想要搜索时能快速找到,符合用户期待,适用于当前搜索频率高的页面。
  • 搜索 icon :使用 icon 作为搜索点击区域,减少导航栏占用,弱化了搜索功能,适用于当前搜索频率较低的页面。
  • 隐藏式搜索:位于屏幕顶部的导航,以搜索框的形式。只会在用户需要的时候才出现,平时不会打乱用户的行为。

 

原文地址:海盐社(公众号)
作者: 颜川

 

转载请注明:甘肃招聘网 » 不同APP搜索框的样式以及区别

登录收藏

学UI就上甘肃招聘网!越努力,越幸运!

“甘肃招聘网xueui ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

“APP截图站app.xueui” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

“UI作业网 zuoye.xueui” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

“UI设计导航站 hao.xueui” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
App导航设计全面梳理——附免费原型模版!App导航设计全面梳理——附免费原型模版!
当我做改版的时候我在做什么当我做改版的时候我在做什么
Feed流图片展示规则-用户动态列表Feed流图片展示规则-用户动态列表
动画的两种类型:移动界面上的功能动画和情感动画动画的两种类型:移动界面上的功能动画和情感动画
你所忽略的置空页面设计法则你所忽略的置空页面设计法则
揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法
设计沉思录|58同城部落的设计点滴设计沉思录|58同城部落的设计点滴
如何让界面任务流程更清晰 ?向导式设计了解下如何让界面任务流程更清晰 ?向导式设计了解下
如何合理的使用“置灰”如何合理的使用“置灰”
防止用户犯错的方法防止用户犯错的方法