开发手机APP过程,不同使用场景APP搜索框的样式及区别
搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式。
下面就常州开发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 里带有搜索功能,搜索功能可以帮助用户快速找到所需内容,减少时间成本。搜索也是提高流量的重要入口,吸引用户注意力。
但想要搜索在页面中恰如其分的应用并不那么容易,需要引导用户行为和分析使用场景,这就依赖我们前期大量样式积累,才能输出合理的设计方式。
再来回顾下文中提及的四种搜索框样式:
1.一级 tab :位于屏幕底部的导航,搜索作为一个独立的入口,适用于搜索场景相对重要的 app 。
2.顶部搜索:位于屏幕顶部的导航,让用户打开 app 想要搜索时能快速找到,符合用户期待,适用于当前搜索频率高的页面。
3.搜索 icon :使用 icon 作为搜索点击区域,减少导航栏占用,弱化了搜索功能,适用于当前搜索频率较低的页面。
4.隐藏式搜索:位于屏幕顶部的导航,以搜索框的形式。只会在用户需要的时候才出现,平时不会打乱用户的行为。
开发手机APP过程,不同使用场景APP搜索框的样式及区别的更多相关文章
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- .Net语言 APP开发平台——Smobiler学习日志:Poplist控件在APP中的应用场景以及代码
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的”Smobil ...
- 开发手机APP的神器 --- ionic
前 言 在如今的生活中,手机已经与我们的生活紧紧的联系在了一起.而手机APP更是其中,重要的一环.今天,影子就为大家介绍一种开发手机APP的超级神器---ionic. ioni ...
- 我在开发第一个Swift App过程中学到的四件事
本文转载至 http://www.itjhwd.com/wzkfyigeswiftsjs/ 译者注:本文作者Greg Heo,这是他为讲授iOS 8 App Extensions视频教程而实际使用Sw ...
- 自己动手开发手机APP控制西门子200smart 教程(原创干货)
自己动手开发手机APP控制西门子200smart 教程(原创干货) 自己动手开发手机APP控制西门子200smart 教程(原创干货) 2020-02-09 19:06:45 自己动手开发手机AP ...
- 【HBuilder】手机App推送至Apple App Store过程
一.前言 最近由于公司同事离职,顶替这位同事从事手机App的研发工作,BIM数据平台部门采用的是HBuilder作为手机App的制作环境.本篇介绍我是如何将HBuilder的Releas ...
- 开发一个App要多少钱?APP开发报价单,APP开发外包有哪些注意事项-广州达到信息www.ddapp.com.cn
来源:广州达到信息著作权归广州达到信息所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作为一个APP开发从业者,经常会有人问到:开发一个App要多少钱?下面针对这个问题来好好解答解答正经的谈 ...
- hybird app(混合式app开发)cordova ionic 创建相应平台的app
hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...
- Cordova 打包 Android release app 过程详解
Cordova 打包 Android release app 过程详解 时间 -- :: SegmentFault 原文 https://segmentfault.com/a/119000000517 ...
随机推荐
- JDBC对MySQL数据库存储过程的调用
一.MySQL数据库存储过程: 1.什么是存储过程 存储过程(英文:Stored Procedure)是在大型数据库系统中,为了完成特定功能而编写的一组的SQL语句集.存储过程经编译存储在数据库中,用 ...
- yum的方式搭建mysql
1.安装相应的软件yum install mysql : 安装mysql客户端 yum install mysql-server 安装服务端 yum install mysql-devel 安装相关的 ...
- HTTP 状态码 301 和 302 详解及区别——辛酸的探索之路
转自:http://blog.csdn.net/grandpang/article/details/47448395 一直对http状态码301和302的理解比较模糊,在遇到实际的问题和翻阅各种资料了 ...
- SDWC2017游记
果然我还是那么弱啊.——$Mingqi_H.$ Day -1 下午五点半回家.然而并没有什么事情可做.依旧是下载$Magical\,Mirai$,找一个黄油存起来. emmm...本来是打算去开发区那 ...
- 51nod1126 求递推序列的第N项【递推】
有一个序列是这样定义的:f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7. 给出A,B和N,求f(n)的值. Input 输 ...
- 阿里云对象存储服务,OSS使用经验总结,图片存储,分页查询
阿里云OSS-使用经验总结,存储,账号-权限,分页,缩略图,账号切换 最近项目中,需要使用云存储,最后选择了阿里云-对象存储服务OSS.总的来说,比较简单,但是仍然遇到了几个问题,需要总结下. 1.O ...
- hdu 3352 求边双联通分量模板题(容器)
/*这道题是没有重边的,求加几条边构成双联通,求边联通分量,先求出桥然后缩点,成一个棵树 找叶子节点的个数*/ #include<stdio.h> #include<string.h ...
- ExtJs之ExtJs.Model验证
没有搞好,但知道意思和配置,并且好像4和3的没有兼容性语法,所以网上找了新语法才出来了点东东. <!DOCTYPE html> <html> <head> < ...
- 【ACM】hdu_zs1_1003_放大的X _201307271557
放大的X Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other)Total Submissio ...
- ZooKeeper搭建系列集 (这套很全,也很详细)
原文链接:http://blog.csdn.net/shatelang/article/details/7596007 本篇文章结构: 总共包括10个系列 ZooKeeper系列之一:ZooKeepe ...