2024年5月18日发(作者：尹流丽)
导航设计：解析移动端导航的七种设计模式（内附案
例）
作者: 一网学 最后更新时间：2015-11-18 09:41:59
小编：看了许多关于导航的文章，基本都是一样的，觉得有些方面做得不
够细致，没有站在常用的产品角度上去分析案例，下面作者自己重新归纳
整理了一篇全面的导航总结，有些来自网络，有些是自己的分析，希望对
同学们有帮助。（内附真实案例）
任何APP的组织信息都需要以某种导航框架固定起来，就像是建筑工人拔
地而起的高楼大厦一样，地基非常重要，之后你想要盖多少层楼、每层楼
有多少间房，都在地基的基础上构成。而一个新的产品也是这样，合适的
导航框架，决定了产品之后的延伸和扩展。
不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设
计的第一步，就是决定导航的框架设计，框架确定后，才能开始逐渐丰富
血肉。
首先，我们要为组织信息分层，在这一步骤，一定要做好信息层级的扁平
化，不能把所有的组织信息都铺出来，这样做只会让用户心烦意乱找不到
想要的重要操作，也不能把层级做的很深，用户没有那么多耐心跟你玩躲
猫猫。一定要将做核心、最稳固、最根本的功能要素放在第一层页面，其
他得内容收在第二层、第三层、甚至更深。
之后，根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难，
移动端的屏幕尺寸就这么大，操作方式也无非就是点击、滑动、长按这些。
因此导航模式一般也就分为以下7种（当然你可以在这七种的基础上互相
组合）接下来我们可以具体分析一下这七种导航模式。
一、标签式导航
也就是我们平时说的tab式导航，是移动应用中最普遍、最常用的导航模
式，适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户
使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的
实现页面之间的切换且不会迷失方向，简单而高效。需要注意的是标签式
导航根据逻辑和重要性控制在5个以内，多余5个用户难以记忆而且容易
迷失。
而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩
展导航这三种。
1、底部tab式导航
如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、
微博、美团、京东等全部都是底部tab式导航
2024年5月18日发(作者：尹流丽)
导航设计：解析移动端导航的七种设计模式（内附案
例）
作者: 一网学 最后更新时间：2015-11-18 09:41:59
小编：看了许多关于导航的文章，基本都是一样的，觉得有些方面做得不
够细致，没有站在常用的产品角度上去分析案例，下面作者自己重新归纳
整理了一篇全面的导航总结，有些来自网络，有些是自己的分析，希望对
同学们有帮助。（内附真实案例）
任何APP的组织信息都需要以某种导航框架固定起来，就像是建筑工人拔
地而起的高楼大厦一样，地基非常重要，之后你想要盖多少层楼、每层楼
有多少间房，都在地基的基础上构成。而一个新的产品也是这样，合适的
导航框架，决定了产品之后的延伸和扩展。
不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设
计的第一步，就是决定导航的框架设计，框架确定后，才能开始逐渐丰富
血肉。
首先，我们要为组织信息分层，在这一步骤，一定要做好信息层级的扁平
化，不能把所有的组织信息都铺出来，这样做只会让用户心烦意乱找不到
想要的重要操作，也不能把层级做的很深，用户没有那么多耐心跟你玩躲
猫猫。一定要将做核心、最稳固、最根本的功能要素放在第一层页面，其
他得内容收在第二层、第三层、甚至更深。
之后，根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难，
移动端的屏幕尺寸就这么大，操作方式也无非就是点击、滑动、长按这些。
因此导航模式一般也就分为以下7种（当然你可以在这七种的基础上互相
组合）接下来我们可以具体分析一下这七种导航模式。
一、标签式导航
也就是我们平时说的tab式导航，是移动应用中最普遍、最常用的导航模
式，适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户
使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的
实现页面之间的切换且不会迷失方向，简单而高效。需要注意的是标签式
导航根据逻辑和重要性控制在5个以内，多余5个用户难以记忆而且容易
迷失。
而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩
展导航这三种。
1、底部tab式导航
如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、
微博、美团、京东等全部都是底部tab式导航