不可错过的手机APP常见8种界面导航样式

前言:相信每一个移动开发工程师都会遇到,当一个项目开发启动时,需要考虑搭建怎么的框架。一个好的框架,也会决定着一个APP的前途与命运。框架的风格,现在常见的有八种:标签导航、舵式导航、抽屉导航、宫格导航、组合导航、列表导航、tab导航、轮播导航。最近在网上收集到一些资料,正好和大家分享一下,感谢原作者的贡献。

当我们确定了移动APP的设计需求和APP产品设计流程之后,开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来?

也许我们对比和了解了其他一些常用的APP导航设计模式。

而且良好的APP导航设计模式决策对整个app的核心体验起到关键作用。

有一些优秀的app基于这些模式做了一些创新的优化方案,本文总结了目前通用且流行的模式,并讨论了这些模式适用的场景,希望帮助交互设计师更快的作出较合理的信息组织决策。

先来看看8种移动APP导航设计模式对比图吧!

8种移动导航

第一种:app标签导航

标签导航位于页面底部,通常包含5个标签是比较合适的数量。这种导航是非常常见的,如果你的应用需要用户频繁的在不同分页切换,可以采用这种导航。它的缺点是会占用一定高度的空间。如微信最新版的APP界面设计图。

app标签导航

第二种:APP舵式导航

目前流行一种标签导航的变体,个人把它称为“舵式导航”,因为它的样式很像轮船上用来指挥的船舵,两侧是其他操作按钮。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。如下图葡萄社APP。

app舵式导航

第三种:APP抽屉式导航模式

抽屉导航是讲菜单隐藏在当前页面后,点击入口即可像拉抽屉一样拉出菜单,这种导航的优点是节省页面展示空间,让用户将更多的注意力聚焦到当前页面。比较适 合于不那么需要频繁切换内容的应用,例如对设置、关于等内容的隐藏。这种导航设计需要注意的是一定要提供菜单画出的过渡动画。

自从path应用以来,这种抽屉式导航菜单非常受到大家的喜爱。

app抽屉式导航

第四种:APP宫格导航(比如九宫格)

这种宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

app宫格导航

第五种:APP混合组合导航

当用户需要聚焦内容,同时又需要一些快捷入口能够连接到某些页面时,就可以采用组合导航。组合导航上方用宫格的形式展现快捷入口,与标签导航不同的是,这 些宫格入口之间不需要是平级的关系,也不必包含整个层级的内容,你可以将它理解为一种图形化的文字链。这种导航比较灵活,能适应架构的快速调整。

app混合组合导航

第六种:列表式APP导航

列表式APP导航是我们在APP设计种必不可少的一个信息承载模式。当然作为一个APP的导航也是非常方便的。

不过目前来看,列表导航通常用于二级页,由于它与宫格导航一样,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。列表项目可以通过间距、标题等进行分组。

app列表式导航

第七种:tab导航

用于二级页,本质和标签导航相同,当应用层级较多的情况下,可以采用tab导航,典型场景是用于改变的当前的视图,或对当前页面内容进行分类查看。                                                                                                                                   

tab导航

第八种:大图轮播导航或是 大图上面的导航设计

当你的应用信息足够扁平,可以尝试轮播导航,如果应用得当,能够给人耳目一新的体验。这种导航能够最大程度的保证应用的页面简洁性,操作也是最方便的。但是缺点是不能够快速的定位对应的分页内容。

大图轮播导航

------------------------------------------------------------------

有什么问题,大家可以一起交流……

更多精彩关于关注博主的微信订阅号:非常周末

微信搜索:非常周末

你可以扫描一下关注即可:

时间: 2024-11-09 08:36:12

不可错过的手机APP常见8种界面导航样式的相关文章

手机app常见bug积累

经过一年的app测试工作,以下是手机APP比较容易出现的错误.之后如果发现了还会继续添加,修改.1.翻页 手机客户端,内容超过一页时,上拉加载更多内容,加载错误(容易出现数据重复,图片和文章不匹配,图片重复加载,文章标题和内容不一致等情况)2.刷新 下拉刷新时,页面加载错误,错误同上(补充,刷新失败,无法加载到数据3.登录 新旧账号登录错误,错误调用方软件4.内存不足时,无法退出APP 多个软件同时打开,切换软件时,会导致多次点击退出回到首页,无法退出APP5.手机拍照崩溃问题 带手机拍照软件,

手机 app 开发的几种方式 ionic 学习思路以及 ionic 新建的项目分析

手机 app 开发的几种方式 ionic 学习思路以及ionic 新建的项目分析 学习要点:1. 目前开发手机 app 的几种方式2. Ionic 学习思路简介3. Ionic CSS 框架4. ionic js 指令 路由 其他 ui 交互效果5. ionic 命令行/CLI 安装 调试 打包( 第三季 第一讲已讲)6. ionic 开发包下载 以及命令创建的项目分析 1. 目前开发手机 app 的几种方式原生/Native: 使用原生 SDK 开发 App.优点不用说, 当你有足够的资源,这

手机App定制开发的定义

移动互联网快速发展,传统行业与互联网融合的平台和模式都发生了改变.互联网的发展已经走进了一个新时代,越来越多的企业开始认识到互联网蕴含的巨大商机,尤其是对于一些企业而言,传统的营销模式已不能跟随这个时代的步伐了.在我们的生活当中不难发现,手机APP已经成为了生活当中不可缺少的物品,手机APP定制开发也变得热门起来.那么,怎样才算是APP开发定制?在此,郑州APP定制开发公司小编就和大家来谈谈. 1.手机APP定制开发的定义 APP定制开发指的是企业根据自身所处行业的发展现状以及企业战略规划来进行

APP的六种loading加载样式,全在这...

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

APP的六种loading加载样式

今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败.在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁.好的loading设计能减弱用户的等待焦虑,不合理的loadin

LR录制手机APP脚本的一种方法

这段时间有个项目是我们的平台对接手机APP约车功能,公司提供接口给手机APP开发,之前没有测试接口,所以当别人说要验证性能的时候,我有点蒙了,但是也比较激动,因为我一直很想从事性能测试的工作,抓住这个机会小研究下,今天终于把脚本录制成功,并可以跑并发了,至于最后的结果是不是对的,还有待研究. 今天上班就跟我们经理说,这段时间有没有性能要求测试的项目,希望分配给我,可是好像很少那种项目的样子,有点失望呀. 废话不多说.进入正题,录制手机APP测试服务器的方法应该很多,网上查询了一把,找到了一个我可

手机APP测试之ADB常见问题解决方法

QQ群522720170,无商业广告,每日干货电子书+视频分享 荔枝FM手机客户端搜索"挨踢脱口秀"即可订阅我们 视频汇总首页:http://edu.51cto.com/lecturer/index/user_id-4626073.html  大家在使用ADB命令时肯定会碰到各种各样的问题,然后习惯性的到处问人,结果就是没人理你,这个正常,原因其实很多人都说过了......    好了,废话不说了,直接入题吧. 常见问题1device not found排查方法看看USB线掉了没看看手

手机App开发接下来的道路分析

 随着移动互联网的发展,目前手机App市场的愈加扩大化,使得App制作开发市场竞争更加激烈的同时,也促使着App行业的不断前进与发展.那么,未来App软件的发展道路是怎样呢?随广州App开发品向科技小编一起来看看吧在良好的市场背景下,应用市场呈现饱和的状态,使得App制作市场竞争越来越激烈.在未来的开发中,App将会逐渐细分市场,使得App更加垂直化.那未来的App开发制作以及发展方向究竟是如何呢? 1.全方位跨平台 未来的手机App要想发展壮大,就要尽可能多的出现在受众面前.要想达到这样的一个

转:浅谈手机app测试注意点

现在我们测试时,开发会先在本地机上打好测试包,自己安装,轮完一轮,开发修改好后,再打一个包.以下是功能测试时需要注意的点: 1.登录 ●登录用户名和密码错误时,界面有提示信息 ●用户主动退出登录后,下次启动APP时,应该进入登录界面 ●对于支持自动登录的APP,数据交换时  ,是否能自动登录成功且数据库操作无误 ●密码更改后,登录时是否做到了有效数据的校验 ●对于未登录时一些页面的操作,是否做了控制 ●切换账号登录,检验登录的信息是否做到及时更新 ●对于多个端都进行操作时,确保数据库操作无误,且