1.0.47

APP内搜索入口位置有几种

编辑推荐
南糯
苏州/UI设计师/3年前/2475浏览
APP内搜索入口位置有几种编辑推荐
南糯

日常生活中使用到的app,几乎都有搜索功能,不过设计方式却不同,我们来分析一下为什么会出现这种不同。


APP搜索框的入口放在哪儿,取决于用户使用的意图,以及产品策略上对搜索功能的权重

日常生活中使用到的APP,几乎都有搜索功能,不过设计方式却不同,我们来分析一下为什么会出现这种不同。


1、搜索入口位于导航栏

截图中可以看到,一些主流APP,会把搜索放在主页/落地页顶部导航栏。这样搜索框很容易被发现。迎合了有明确搜索意图的用户。当用户浏览时,搜索框会悬停在顶部,不断引导用户进行搜索。

功能层级:优先级高

展现形式:位于页面最顶部导航栏,两侧伴有其他辅助功能(扫一扫,定位,消息等)。设计上以输入框为主,内部有搜索图标和推荐文案

交互:位置上位于页面最顶部,远离拇指区,操作起来不是很方便,大屏手机用户需要双手操作。

目的:将搜索入口放在页面的最顶部,是为了强化搜索功能,时刻为用户提供搜索功能。对于体量较大,结构复杂的产品来说,用户不通过搜索功能,很难找到自己想要的内容

使用场景:用户具有极强的目的性,明确知道自己要什么。例如百度地图,如果想要到达某个地点,通过搜索功能输入目的地,是最便捷的方式。

对于体量大的产品。例如支付宝。产品结构较复杂,分支业务也众多,通过搜索功能可避免一个层级一个层级去找,节约很多时间。

优点:搜索入口显眼,为转化提供更多流量。


2、搜索入口在顶部tab栏之下

功能层级:优先级较高

展现形式:位于页面顶部导航栏之下,设计上以输入框为主,内部有搜索图标和推荐文案

交互:位置上位于页面最顶部,远离拇指区,操作起来不是很方便,大屏手机用户需要双手操作。

目的:将搜索入口放置在顶部导航栏下,强化内容推荐,弱化搜索功能。假设产品当前业务是强化内容推荐,搜集用户平时对那些内容感兴趣,点击率更高,通过搜集用户的行为轨迹数据在进行模型训练,优化产品的内容分发机制。

使用场景:以内容型产品居多,例如喜马拉雅,腾讯视频,小红书等等。从产品上来讲,核心目的是突出平台的推荐内容,强化内容的分发机制。从用户的角度来讲,当用户一开始进入页面没有明确的目的,这个时候如果有推荐内容,用户会更容易接受。

优点:强化内容推荐


3、搜索入口在底部导航栏

功能层级:优先级高

展现形式:位于屏幕底部导航,搜索作为一个独立的入口,适用于搜索场景相对重要的APP。设计时通常使用“放大镜”图标。简单、辨识度高。

交互:搜索功能相较于顶部不容易发现,但是更容易触达。位置符合拇指热力区操作。屏幕偏下的位置单手握手机的时候更容易点击

目的:用户层面上为了用户可以随时点击进入到搜索页。产品层面上为了搜索页面内的内容引流

使用场景:用户有极强的目的性,且搜索频次较高。但是当前的搜索按钮只承担了入口的作用,点击之后对应页面功能和层级十分丰富,承接搜索、发现等相关的延伸功能

例如:微博和爱彼迎,点击导航中的搜索标签进入一个独立页面。其丰富程度不亚于首页,承载了热搜,热点,话题,榜单,超话等等,功能层级饱满,丰富。而APP store和自如,则是承担搜索和关联推荐的功能,多为用户有明确的搜索意向进行的搜索行为。

优点:增强用户的参与度,引导用户发现平台新的内容。当用户并不清楚想要什么,APP可以引导他们搜索。并提供个性化推荐。


4、搜索入口是顶部的搜索icon

功能层级:较弱

展现形式:位于屏幕顶部导航栏/标签栏,以图标的形式展现。搜索icon相比其他方式,搜索位置更加灵活,可以单独出现,也可以和其他功能组合。

交互:由于功能入口位于顶部,远离拇指操作区,操作起来不太方便,大屏用户需要双手操作

目的:强化推荐内容,将搜索功能弱化成一个辅助功能

使用场景:当搜索功能在页面不再是高频使用功能时,进通过搜索icon让用户知道有搜索功能在就好。例如“boss直聘”的主页。推荐内容是职位招聘信息,以feed流的方式,强化用户的沉浸感。弱化了搜索功能,通过点击右上角的搜索icon进入搜索页。

优点:强化内容推荐。不会过于抢眼干扰用户浏览推荐内容


5、搜索入口在页面中/下方

功能层级:极高

展现形式:一版位于页面中/下方。设计上由独立的输入框和搜索图标、提示文案货其他辅助功能。

交互:位于拇指区范围内,用户操作起来方便,大部分用户可以进行单手操作。

目的:强化搜索功能,方便用户操作。在工具性产品中,用户一般具有明确的搜索意图。将搜索功能放置在页面的下半部分,方便用户操作。

使用场景:一般位于首页,页面功能单一。工具类产品居多。例如高德地图:用户打开app后由明确搜索目的。将搜索功能入口放在底部,有效减少交互操作成本。(值得说的一点,高德地图支持用户自定义搜索框的位置。用户可按照自己的习惯定义搜索框在顶部或是在下方。)

优点:交互操作极方便。


6、隐藏式搜索入口

功能层级:较低。一般作为辅助功能使用

展现形式:一般位于侧边栏、页面顶部。层级较深,不直接显示。

交互:隐藏层级较深。只会在用户需要的时候出现,需要用户操作(下拉/点击)才能出现搜索框。

目的:作为产品的次要辅助功能。主要突出核心功能

使用场景:一般应用于重视内容的产品当中。例如iphone手机解锁后的界面。向下滑动时,隐藏的搜索入口才会出现

优点:只会在用户需要的时候出现,平时不会干扰用户的行为。


总结

一个APP内,根据页面的不同,搜索内容不同,搜索框的位置也不同。在设计中,需要结合实际场景去设计搜索功能。当搜索功能是高频操作时,推荐搜索入口放在顶部,且滑动屏幕后悬浮在顶部。当搜索功能是低频操作,则可以弱化搜索功能,强化内容。

(本篇文章为包含网络上大神经验,并加以总结。)

56
举报
93
分享
原创文章 UI 搜索框设计 搜索入口 app设计方法论 设计知识点
声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。
评论
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
登录注册
侵权申诉 企业服务 帮助中心
京网文[2023]1747-060号 京公网安备11010502000501号 京ICP备11017824号-4 京ICP证130164号Copyright © 2006-2024 ZCOOL站酷

深圳SEO优化公司红河百度爱采购推荐萍乡网站优化按天计费价格汉中网站优化按天计费哪家好霍邱外贸网站设计怀化高端网站设计多少钱鄂州关键词按天计费多少钱荆门营销型网站建设价格安康网站改版报价塘坑seo优化报价潍坊网站排名优化价格忻州网站推广系统推荐福永网站改版价格廊坊网页设计价格大鹏seo网站优化多少钱景德镇百度竞价包年推广多少钱吕梁建网站陇南网站搜索优化公司邯郸外贸网站设计推荐益阳seo网站推广价格郴州SEO按天计费哪家好鄂州高端网站设计公司四平高端网站设计日照百度网站优化排名公司福田百度关键词包年推广公司清徐企业网站建设雅安建站哪家好河源网站设计多少钱阜新推广网站价格承德阿里店铺托管报价陇南设计公司网站哪家好歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化