9种最经典的导航模式,APP开发必备

一、标签式导航

标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航

1、底部标签导航

底部导航一般采用3-4个标签,最多不会超过5个,有更多的选项操作的时候将最后一项设置为更多,将一些次要的功能放在更多里面,这是一种非常常见的导航形式。

2、顶部标签导航

顶部导航在ios app中一般用作二级导航,在andriod app中这种导航模式一般用作一级导航,但自从谷歌推出”抽屉式导航“以后,顶部标签导航一般就用作二级导航,当内容分类较多的时候一般采用顶部标签导航设计模式。

二、底部和顶部双tab导航

标签式导航一般放在底部,如果产品分类内容较多,则采用顶部和底部结合的导航形式,例如下图的今日头条和爱奇艺。

三、抽屉式导航

有的人可能会说,我虽然有6-7个左右标签,但是只有一些标签是主要的,其他标签用户很少使用,这个时候一般采用抽屉式导航。抽屉式导航是指将一些不常用的功能隐藏在当前页面,当需要用到的时候点击入口或者侧滑即可像抽屉一样展开,上面也说了,这种适合不需要经常切换的次要功能,比如设置、关于、会员等,快手和QQ是采用这种导航形式。

四、下拉式导航

和抽屉式导航类似,下拉式导航也是隐藏次要入口的一种形式,一般位于产品顶部,点击呼出导航菜单,导航的菜单以浮层的形式位于界面上层,通过点击导航菜单以外的区域使其收起,下拉式导航的面积一般较小,所以采用列表的形式展现菜单内容居多,这种导航形式一般用作筛选内容。比如下图的拍拍贷和美团。

五、宫格导航

宫格导航主要将入口全部集中在主页面中,各个入口之间相互独立,没有太多的交集,无法跳转互通。

宫格导航的变式有很多,比如上图的美图秀秀增加横向滑动来增加导航入口的数量,支付宝通过纵向滑动来增加导航入口的数量,快手通过控制卡片的大小来显得不单调和凸显主要的内容。

六、列表导航

列表导航是现有app中一种主要的信息承载模式,列表导航和宫格导航类似,属于二级导航,只不过有时候列表导航太长,不利于用户操作的时候才会采用宫格导航,通常不会展示任何实质功能。

上图拍拍贷由于导航内容较多,采用列表导航和宫格导航相结合的方式,而微信发现界面由于导航内容较少,首屏就能展示的下,直接采用列表的导航形式。

七、舵式导航

驼式导航中间加了个+号,像轮船上用来指挥的船舵,故而得名,比如闲鱼、新浪微博,当标签导航难以满足导航的需求,这个时候我们就需要一些扩展形式,和标签导航相比,驼式导航主要将类似生产内容的主要按钮放在中间,标签更加突出醒目,同时对主功能标签做了扩展功能。

八、点聚式导航

当需要更多展示内容和功能,需要极端简化其入口,一般可以使用点聚式导航。(其实我觉得上面的驼式导航就是点聚式导航和tab导航的结合体),点聚式导航将核心功能聚合到主界面展示,方便用户呼出使用,由于点聚式导航占用空间小,一般融入一些动态的效果,让导航更具有趣味性,一般视频拍摄、编辑类app会采用这种导航形式。

优点:灵活、有趣,界面更加开阔。

缺点:隐藏了功能,且隐藏功能不能太多,不然显示后,用户较难反应。

九、轮播导航

app首页的banner广告位就是采用轮播导航,当应用信息足够扁平的时候则采用轮播导航。

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2017-05-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程坑太多

如何开发适配安卓和iOS双平台的React Native应用

13920
来自专栏前端知识分享

第9天:CSS精灵图

“CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背...

37030
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

28560
来自专栏菩提树下的杨过

用Flex模拟智能手机表单输入的自动放大功能

用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次...

24360
来自专栏前端萌媛的成长之路

CSS常见布局

20920
来自专栏编程微刊

前端css常用的选择小汇

13420
来自专栏腾讯社交用户体验设计

实现下划线的N个姿势

22440
来自专栏marsggbo

这是对position讲解最通俗易懂的版本了。

position 为了制作更多复杂的布局,我们需要讨论下 position 属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你...

27160
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

21320
来自专栏GIS讲堂

Openlayers4中的全屏

Openlayers4中,ol.control.FullScreen()可实现地图的全屏展示,可是当地图的初始化宽度和高度都不是100%的时候,全屏的时候只会宽...

16030

扫码关注云+社区

领取腾讯云代金券