对于互联网产品而言，用户需求决定产品战略层，功能内容决定范围层，原型设计则决定产品的框架层，这些层面与包含交互设计的结构层以及视觉设计的表现层一起构成了用户体验的要素；接下来写的文章主要讲述的导航模式就是属于框架层的原型设计的一部分；原型绘制与写作文类似，前期清晰明了的大纲才能保证一个产品的顺畅进行，而移动应用的原型大纲就是主导航模式；随着移动交互设计的快速发展，移动应用已经是一片红海，移动应用的框架设计已经成熟趋同，非常明显一点就是现在市场上80%的应用采用标签式导航作为主导航模式，标签式导航也是公认的iOS平台最经典的导航模式，套用经典能最大程度的避免出错，但是为什么采用这种导航模式，导航模式有哪些、不同导航模式有哪些优缺点与适用情况，这些都是我认为需要了解的地方，掌握这些理论知识有助于更加熟练与透彻的使用不同的导航模式。

导航究竟是什么意思

对于导航的定义，根据百科词条，导航是指涉及位置和方向的任何技能或研究，根据释义可以了解到，传统的导航可以理解为确定当前位置与引导目的位置的技术；“导航”这一个词用在网页端与移动端也非常的贴切，互联网产品通常页面层级比较多，清晰引导用户进入目的页面与返回初级页面是非常重要的功能，而这个引导的呈现方式与引导过程则可以叫做导航模式。

导航的分类

导航模式根据引导层级不同可以分为主导航模式与次级导航模式；主导航模式根据目前主流的导航模式可以归类为全局导航与瞬时导航，今天主要是针对主导航中的全局导航进行学习与分析。

什么是全局导航

“全局导航”顾名思义即可以纵览全局的导航模式，进入应用之后不需要进行任何操作，就能够看到该导航模式的所有引导入口。

全局导航的设计模式分类

1.跳板式（springboard）

跳板式也称为启动面板（launchpad）或宫格式导航；以下统称为跳板式导航，这种导航模式的特点是进入APP首页后，呈现页面为规律排布的各个功能/模块入口，点击各个入口进入不同模块。

跳板式在互联网早期盛行一时，原因是当时每个平台的交互规范还有很大的差别，而跳板式导航的设计能够跨平台不受限制；除此之外跳板式导航还有其他突出的优点。

优点

• 一屏最多能有9个乃至以上的选项，增加了功能模块的容量；

• 各个入口展现直观，用户可以通过直接点击进入该功能模块；

缺点

• 所有选项都被扁平化，没有优先级；

• 各个功能之间的切换需要反复跳转；

• 容易形成深层路径，不能直接展示入口内容；

当前使用情况：

现在的APP中跳板式导航作为主导航模式使用的情况已经非常的少见，多在图片处理类与工具类APP中被使用，如下图分别是绘画大师、美图秀秀与MIX；原因是功能相对比较少，跳转层级也不复杂，不会形成深层路径，通过跳板式导航可以给用户明确的使用目标导向。

除此之外传统的跳板式导航模式仍在安卓、iOS与Windows phone的操作系统层级被延续使用，原因也是因为跳板式导航适合各个功能相对比较独立的使用情形。

跳板式导航虽然已经很少被用作主导航模式，但是跟大多数导航模式一样，却作为次级导航模式被广泛的使用；最为常见的是在购物类APP首页作为次级功能入口，引导用户进入二级页面；另外一种常见的则是在个人中心页面被使用，这个将在后面的列表式导航模式中细说；跳板式在次级导航中运用，能够将用户的注意转移到跳板选项中；因此跳板式导航作为次级导航模式是一个很好的引流入口。

其他

需要注意的是，当功能入口过多时，如果继续采用跳板式导航会导致失去原有的优点，当整个页面遍布功能入口时，用户就会开始迷失在导航系统中，而此时“导航系统”俨然已经成为一个摆设；例如下面的UK radios这款英国广播电台收听的APP；色调清新舒适，节目收听效果也非常好；但是不管是新用户还是老用户，在在这种导航模式下，想要快速找到自己想要收听的电台，估计都没那么容易；同样当手机中的APP过多的时候，迅速找到目标，不是一件简单的事情。

2.卡片式导航

卡片式导航的原型是扑克牌，模仿扑克牌中常见的切牌、洗牌、弃牌、翻牌等手法；卡片式导航的呈现特点是一张卡片上包含关于一个主题的详细信息（图片、标题以及详细内容文本）数据合集，也是更加复杂深层信息的入口；真正意义上的卡片式导航应该是结合手势的一种导航形式，用户能够通过手势对卡片进行操作；卡片式导航在目前APP中常见按照使用手势可以分为两类，一类是丢弃式，一类是移动式；

丢弃式

丢弃式包含丢弃、收藏、洗牌这些操作，APP中通常表现为左滑丢弃，右滑收藏，点击“洗牌”按钮重新发牌；丢弃式在APP中运用场景通常符合以下几点：

1.信息数据数量庞大

2.用户对信息的读取有更详细的需求

3.用户查找目标不明确

信息数据庞大

丢弃式通常伴随着信息推荐，而数据库大是信息推荐的基础；用户从庞大的数据库中筛选需要的信息所花费的巨大时间，催生出卡片式结合数据推荐这一展现形式。

用户对信息的读取需求更详细

丢弃式的卡片通常会占据比较大的屏幕面积，而这一点也是因为需要呈现更多的信息与内容；不仅仅是需要呈现标题，还需要关于详细信息的一个梗概，让用户浏览这个卡片之后就能对这张卡片的信息有所了解；而卡片的详细信息通常会根据具体情况表现为文字+文字、图片；其中以陌陌/探探为代表的图文结合的卡片式最为常见，其次是文字标题搭配文字内容这种方式。

用户查找目标不明确

丢弃式手势多用于为用户推荐信息、用户选择有用信息以及丢弃不需要的信息；原因也是因为应用信息数据庞大，单纯依靠分类与搜索引导用户找到需要的信息已经比较难满足用户对于信息的需求，这个时候需要应用结合用户的数据来为用户推荐符合用户的内容；而采用丢弃式手势这种卡片式导航，能够让用户更加快速直观的了解信息，并且对信息快速进行操作。

移动式

移动式手势一般在移动端会用于比较小的卡片，原因是因为手机的页面有限，无法进行大面积的移动；移动式手势的特点是将卡片在同一个平面上移动，而不是像丢弃式手势一样对卡片进行三维的操作；移动式的手势由于其可以在同一个平面上移动的特性，多用于一个项目的管理；例如许多应用里面的自定义模块部分的管理，都是通过移动式的手势来管理卡片；运用到移动式手势的比较代表的应用有苹果手机自带的天气，长按即可对该张天气卡片进行位置的移动；另外则是trello这款项目管理产品，长按卡片，可以将卡片移动到其他的列表下面，从而对其进行管理；另一个很典型的用法则是音乐管理。

卡片式导航的优点

• 优雅展现内容，用户可比较详细的查看内容；

• 用户查看卡片具有随机性，即时对查看内容做出反馈；

• 用户可以利用手势进行交互，使用快速便捷；

缺点

• 展现的内容与适用的情境都比较有局限性；

• 占据页面比较大；

当前使用情况：

卡片式导航在当前的应用市场占比也相当小，丢弃式导航作为主导航模式的情况已经基本不太能见到，而作为次级导航被使用的场景也十分的有限；很大的原因也是因为这种导航模式是一种“性价比”低的导航模式，展现的功能少，占据页面的面积却比较大；但是根据上述的两类卡片式的特点，仍然能够知道设计的移动应用在满足上面的特点的时候，这个时候大胆采用卡片式导航也许是一个不错的想法。

NOTHING APP的服装推荐模块采用的是丢弃式卡片的方式，为用户推荐服装搭配，用户可以根据自己的爱好快速的对推荐的卡片做出操作；这种模式就解决了用户不会服装搭配、寻找服装搭配寻找服装等痛点，不失为一种非常好的推荐方式。

3.列表菜单式

列表菜单式导航模式是将每个功能入口作为一行，然后按照纵向排布的方式依次排布下来；列表菜单式中的每一个列表项都是进入该应用各项功能的入口，各个模块之前的切换需要返回到列表主页，这一点与跳板式导航很相似；苹果的设计规范将其称为层级导航；列表菜单式导航的排布方式为纵向排布，而排布方式的差异会带来完全不一样的阅读效果。

宫格式导航与列表菜单式导航

宫格式导航与列表菜单式导航的功能特性是比较相似的，看过的一些关于宫格式导航跟列表式导航的文章里面有提到宫格式导航的布局需要用户即时做出选择，给用户带来比较大的压力，并且以宫格式导航在实际中运用的越来越少为证明；而实际上我认为关于宫格式导航与列表式导航更多的不是孰优孰劣之分，而是各自的适用场景不同；

列表菜单式导航的优点：

• 有明显的优先级排序；

• 功能入口展现直观

缺点也与宫格式导航相似：

• 各个功能之间的切换需要反复跳转；

• 容易形成深层路径，不能直接展示入口内容

主导航模式下宫格式与列表菜单式最大的差别在于，列表菜单式有明显的优先级排序，列表式导航模式下，在列表上方的内容能够得到用户更多的关注，而宫格式的导航相对能够更加均衡的获得用户的关注；这两种模式有各自的适用场景；

列表菜单式导航适用于功能有明显优先级的，非常代表性的应用就是邮箱类的产品，用户账号的信息概览放在最上方，便于用户一眼查看，依次往下放置不那么重要的功能，最下方放置一些推广入口；在前文也有提到，以宫格式导航为主导航模式多是功能模块较少的工具类应用，而设想一下如果这种工具类的应用，采用列表式导航模式，必然会让用户去更多的关注位于列表上方的功能，而这样的方式会给用户查找下方的功能带来不便，同时也不符合产品开发者希望各个功能均衡推广使用的愿景。

设置也是列表菜单式导航的典型应用

不得不说的个人中心

关于列表式与宫格式运用典型的对比页面就是个人中心页面；查看现在的个人中心页面，大致可以分为三种类型，宫格式导航、列表式导航以及两种相结合的；

以视频播放类应用为例，B站个人中心页面采用的是宫格式的导航布局，而对比之下，腾讯视频个人中心页面则采用的是列表式的布局；宫格式导航在不需要用户滑动屏幕的情况下能够看到更多的功能入口，而列表式的布局如果要看到更多的功能，需要用户进行往下滑动的操作；而实际上个人中心页面有些功能是没有明显的使用频率差异的，也有些功能是出于营销推广目的放置在个人中心页面，这些功能入口是需要获得用户的关注的，因此这个适合采用列表式导航这种方式并不能满足用户以及运营双方的要求；

在个人中心页面在功能较多，承担较大的推广责任的时候需要采用宫格式的导航方式，而在功能相对较少，没有特殊需要推广的功能入口时，采用列表式导航是一种更好的方式。

4.陈列馆式

陈列馆式导航的呈现方式为文字与图片或者单独的图片在页面形成许多个小的内容入口排列在页面当中；通常采用的是网格式布局或者轮盘布局；而通常陈列馆式导航展现的内容主题也比较集中，例如：新闻、菜谱或者照片等，这类主题比较突出的应用在功能上通常也不会很复杂，展示形式也是比较简单的；

陈列馆式导航的优点：

• 展现形式简单，用户能够快速掌握应用的功能与使用方法；

• 清晰显示图片与标题，浏览内容快速简洁；

缺点：

• 使用情况比较局限，对于综合性强的应用不适用；

现状：

陈列馆式导航的特点是多个图文呈规则布局，适用于图片为必要展示项的情况；陈列馆式设计模式最适合呈现经常更新的、视觉效果直观的无层级内容；而当前最广泛使用的则是陈列馆式设计+瀑布流布局的方式，例如当前流行的短视频应用快手、火山小视频、安利类应用小红书等采用的都是这类设计方式；陈列馆式展现视觉效果吸引用户视线，瀑布流布局减轻用户点击负担。

5.选项卡菜单式

选项卡菜单式导航也可以称作标签式导航，也是现在运用最广的一种主导航模式，选项卡菜单式导航的呈现方式是将功能模块入口放置在底部的标签栏上，点击功能入口直接在页面主展示区域显示该功能的相关页面，适合用于在几个重要程度相似的功能模块频繁的跳转。

标签式导航的优点：

• 用户可以简单高效的切换页面

• 可以让用户快速知道APP的主要功能

• 同时由于现在底部标签式导航的广泛运用，用户的使用基础比较好，也大大降低了学习成本

缺点：

• 会占用一定的高度空间，且最大数量限制在5个以内

顶部标签式导航

另外一种标签式导航是是顶部标签式导航，前面说的底部标签式导航是由iOS设计规范提出，而顶部标签式导航是由安卓系统提出的，原因也是为了配合安卓系统底部的物理按键；虽然底部标签式导航相对顶部标签式导航更便于用户操作点击，但是由于底部的物理按键，标签栏如果再放在下方，一是会造成底部堆叠，容易引起误操作，另一方面是页面不美观；出于这两个原因，安卓设计出了顶部标签栏的导航模式；

顶部标签式导航的优点是：

• 支持左右滑动切换视图，操作便捷 ；

• 衍生出滑动标签导航，增加了功能模块的容量

早期微信在安卓端采用的就是顶部标签栏的导航模式，但是按照手机屏幕中的用户点击热区，顶部标签栏这一操作方式远不如底部标签栏导航符合用户的操作习惯，最终在用户操作习惯与视觉效果之中，安卓端微信舍弃了视觉效果，采用了底部标签式导航；

随着安卓底部物理按钮隐藏方式的进一步更新，底部标签式导航对安卓端的美观性影响也没有最初那么大了

但是另外一方面来说，顶部标签式导航支持左右滑动快速切换视图的功能，我认为是不适合用来作为主导航模式使用的；主导航模式作为主功能的引导，能够明确的区分是必要的，能够快速的切换主功能反而会给用户带来困惑，对主功能之间的区分了解不清晰；另外一方面切换容易对应的也是误操作概率增加，这也是作为主导航模式不应具有的特征；

这些优点与缺点也引导顶部标签式导航如今衍生为资讯新闻类APP与购物APP常用的次级导航模式，常见用于各类资讯新闻类APP首页信息分类，也时常用于购物APP首页的商品分类。

总结：

以上五种导航模式是在移动应用设计中被广泛使用的全局导航的部分，了解了这些导航模式的各自的优缺点以及适用情况，有助于我们在进行移动应用设计的时候快速准确的应用它们；为用户打造清晰的使用路径；

最后有不准确的地方欢迎交流指正~