APP常见的8种导航模式

2022-9-19 雪涛

优秀的APP导航设计，能够合理地完美展示产品的功能，并快速引导用户使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。

网上对介绍导航文章已经有很多，有部分已过时，今天自己再重新整理一遍，方便自己也方便更多人理解。

为什么需要导航？

1、我可以去哪？

导航为了清晰指引用户完成任务。建立合理的导航系统，设计顺畅的任务路径，让用户不再像无头苍蝇一样，在各模块之间迷失。一个好的导航，能够扁平化用户的任务路径，减少用户操作成本，从而提高用户体验。

2、我现在在哪？

用户当前位置要有清晰的标记，从哪里来，到哪里去。

常见的8种导航形式

标签式导航可分为 底部标签式 、舵式导航、Tab标签式导航。

一、底部标签式导航

底部标签导航是目前最常见的导航形式。底部导航 一般采用3-4个标签，最多不会超过5个。

优点：

1、入口直接清晰，操作路径短，便于在不同功能模块进行跳转

2、直接展示入口内容，内容曝光度高

缺点：

1、功能之间无主次

2、扩展性差，不利于后期的功能扩展

二、舵式导航

舵式导航是 底部导航的一种扩展形式，像轮船上用来指挥的船舵，两侧是其他操作按钮。

普通标签导航难以满足导航的需求，就需要一些扩展形式，和标签导航相比，舵式导航 把核心功能放在中间，标签更加突出醒目，同时对主功能标签做了扩展功能。

使用场景：

如1、产品需要特殊的引导，如58同城，引导用户发布任务。

如2、社区产品引导用户发帖子

如3、凸显核心功能，如百度地图、高德等

优点：

1、在默认加载的页面之外，又能够突出强调中间的入口

2、入口直接清晰，操作路径短，便于不同功能模块进行跳转

3、直接展示入口内容，内容曝光率高

缺点：（与标签导航存在同样的弊端）

1、功能之间无主次

2、扩展性差，不利于后期的功能扩展

三、Tab标签式导航

一般 用于二级导航，当内容分类较多的时，一般采用 顶部标签导航设计模式。

使用场景：

如：为当前界面内不同模块的切换，或者查看不同的分类内容

优点：

标签数量可以随意根据需求变化，可以左右滑动，衍生更多标签。

缺点：

操作热区较小，有APP设计的交互前与后的样式差异不大，容易造成误操作的困惑。（不知道当前在哪个标签下）

四、抽屉式导航

抽屉式导航的核心思路是“隐藏”。 隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去， 一般用于二级菜单。

优点：

1、节省页面展示空间

2、注意力聚焦在当前页面

缺点：

1、左上角的按钮存在于单手操作热区难以触达；

2、降低了用户对产品部分功能的参与度。

五、宫格式导航

主要将入口全部集中在主页面中，各个 入口相互独立，没有太多的交集，无法跳转互通。

采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

优点：

1、将入口进行聚合，入口也清晰直接

2、操作路径较短，用户可以便捷的在不同的功能模块之间进行跳转

3、扩展性好，方便增加多个入口

缺点：

1、用户无法第一时间看到内容或者执行操作，选择的压力会比较大。

2、返回路径较长，容易产生用户不良情绪。

六、轮播式导航

采用Banner轮播导航，当应用信息足够扁平， 内容比较单薄时使用。特别是在产品初期，缺乏用户和内容，这种导航目前已经很少用。

该方式就可以 凸显产品核心功能给予用户使用。（如：较早时腾讯极光APP、应用市场等）

优点：

1、展示清晰直观，美观度高

2、内容曝光度高，突出强调了展示内容

3、交互动画可多样化

缺点：

1、展示内容数量有限

七、列表式导航

现有APP中一种主要的信息承载模式，列表导航和宫格导航类似，属于二级导航。

列表式导航分为3类： 标题式列表、内容式列表、嵌入式列表。

标题式列表：一般只显示一行文字，有的显示一行文字加一张图片等等。

内容式列表：主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。

嵌入式列表：嵌入式其实就是由多个列表层级组合而成的导航。

优点：

1、结构清晰，易于理解；

2、使用高效，能够帮助用户快速的定位去到对应的页面

3、能够在列表上直接给出关于活动、更新的提示

缺点：

1、排版方式单一

2、多个入口之间不分级，没优先级之分

八、组合式导航

多用于产品本身 功能较为复杂，既需要用户能 聚焦于内容，又需要给出用户不同页面之间的入口，以便用户进行直接跳转，那就采用组合式导航，利用不同导航的特性来满足产品需求。

组合式导航目前最常见的导航方式。

如： 标签式导航+列表式；标签式+宫格式；舵式+列表式+标签式 等等；

优点：

1、组合式多样化

2、能给出用户不同页面之间的入口，方便跳转

总结

根据自己的产品功能和特性，采用不同导航模式。

每个产品迭代发展和变化，也会导致产品导航在过程中不停的产生变化，就必须依据用户属性和使用场景进行调整。不拘泥任何模式，解决问题才是根本。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系。

作者： UX设计笔记来源：站酷

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、 BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至：

« B端表格规范的超肝合集排版法则 »

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档

2024年5月(80)
2024年4月(44)
2024年3月(50)
2024年2月(58)
2024年1月(44)
2023年12月(47)
2023年11月(41)
2023年10月(15)
2023年9月(27)
2023年8月(88)
2023年7月(62)
2023年6月(58)
2023年5月(28)
2023年4月(47)
2023年3月(37)
2023年2月(90)
2023年1月(78)
2022年12月(45)
2022年11月(69)
2022年10月(51)
2022年9月(135)
2022年8月(60)
2022年7月(111)
2022年6月(162)
2022年5月(143)
2022年4月(86)
2022年3月(119)
2022年2月(53)
2022年1月(99)
2021年12月(105)
2021年11月(83)
2021年10月(101)
2021年9月(153)
2021年8月(147)
2021年7月(149)
2021年6月(157)
2021年5月(124)
2021年4月(185)
2021年3月(144)
2021年2月(35)
2021年1月(103)
2020年12月(95)
2020年11月(76)
2020年10月(31)
2020年9月(45)
2020年8月(50)
2020年7月(46)
2020年6月(33)
2020年5月(78)
2020年4月(69)
2020年3月(100)
2020年2月(59)
2020年1月(31)
2019年12月(50)
2019年11月(57)
2019年10月(48)
2019年9月(48)
2019年8月(57)
2019年7月(58)
2019年6月(58)
2019年5月(31)
2019年4月(37)
2019年3月(43)
2019年2月(25)
2019年1月(45)
2018年12月(41)
2018年11月(40)
2018年10月(29)
2018年9月(40)
2018年8月(87)
2018年7月(107)
2018年6月(86)
2018年5月(109)
2018年4月(40)
2018年3月(35)
2017年8月(35)
2017年7月(45)
2017年6月(7)
2017年5月(27)
2017年4月(51)
2017年3月(69)
2017年2月(65)
2017年1月(69)
2016年12月(55)
2016年11月(111)
2016年10月(92)
2016年9月(53)
2016年8月(9)
2016年7月(4)
2016年6月(9)
2016年3月(19)
2016年2月(26)
2016年1月(29)
2015年12月(34)
2015年11月(35)
2015年10月(46)
2015年9月(43)
2015年8月(40)
2015年7月(33)
2015年6月(46)
2015年5月(58)
2015年4月(70)
2015年3月(55)
2015年2月(17)
2015年1月(33)
2014年12月(21)
2014年11月(83)
2014年10月(94)
2014年9月(6)
2014年8月(1)
2014年7月(13)
2014年6月(66)
2014年5月(99)
2014年4月(88)
2014年3月(101)
2014年2月(67)
2014年1月(83)
2013年12月(106)
2013年11月(111)
2013年10月(61)
2013年9月(20)
2013年7月(13)
2013年6月(27)
2013年5月(48)
2013年4月(39)
2013年3月(8)
2013年2月(20)
2013年1月(31)
2012年12月(33)
2012年11月(31)
2012年10月(22)
2012年9月(8)
2012年7月(14)
2012年6月(15)
2012年5月(31)
2012年4月(24)
2012年2月(4)
2012年1月(8)
2011年12月(35)
2011年11月(32)
2011年10月(13)
2011年8月(1)
2011年6月(1)

APP常见的8种导航模式

分享到各大网站

分类

日历

链接

个人资料

存档