移动APP导航设计的10种模式

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

可以说，一个良好的APP导航设计模式决策对整个app的核心体验起到关键作用，有一些优秀的app就是基于这些模式做了一些创新的优化方案，今天，马海祥也总结了目前通用且流行的模式，并讨论了这些模式适用的场景，希望帮助交互设计师更快的作出较合理的信息组织决策。

1、Tabbar导航

Tabbar的导航方式是由谁发明的马海祥不得而知，不过相信大家都同意是由苹果将其传播开来，不仅很多苹果的官方应用采用了这种设计，苹果同样大力推荐应用开发者优先采用这种方式，从某种角度来说，tabbar基本就是导航的标准设计。

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

Tabbar的优点很明显，用户完成切换的成本很低，只需要一次点击操作，而放在屏幕底部对主体内容的视觉冲击可以说是最小的，这样用户就不会在浏览主体内容时受到过多的干扰。

至于缺点，马海祥觉得也同样明显，那就是受制于屏幕宽度的限制，通常4到5个功能项的切换会比较合适，过多的话将会显著提高用户的切换成本。

2、app标签导航

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

不过，它的缺点是会占用一定高度的空间。

3、APP宫格导航（比如九宫格）

这种宫格导航是将主要入口全部聚合在页面，让用户做出选择。

但在马海祥看来，这样的组织方式无法让用户在第一时间看到内容，选择压力较大，采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

4、APP舵式导航

目前流行一种标签导航的变体，个人把它称为“舵式导航”，因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。

当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。

5、APP抽屉式导航模式

抽屉导航是讲菜单隐藏在当前页面后，点击入口即可像拉抽屉一样拉出菜单，这种导航的优点是节省页面展示空间，让用户将更多的注意力聚焦到当前页面。

在马海祥看来，此种APP导航模式比较适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏，这种导航设计需要注意的是一定要提供菜单画出的过渡动画。

自从path应用以来，这种抽屉式导航菜单非常受到大家的喜爱，之前也在马海祥博客上《详解APP软件开发过程中的解构和重构》一文中重点介绍了这种模式的设计原理。

6、滑动式的导航

导航并不一定只发生在功能项之间，例如新闻类应用需要在不同类别的新闻之间进行切换浏览。

通常来说，这种切换的频率要比功能项切换更高，切换项的数量也会比较多，像常见的新闻类别就有七八种。

我记得在网易新闻早期的iOS版本中采用了抽屉式app导航的方式进行新闻类别的切换，这种方式在高频率切换时需要过多的操作次数，当需要在相邻类别连续切换时更是缺乏操作的连续性，新的iOS版网易新闻对新闻类别的切换重新进行了设计。

7、列表式APP导航

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

不过目前来看，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。

在马海祥看来，这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面，列表项目可以通过间距、标题等进行分组。

8、大图轮播导航或大图上面的导航设计

当你的应用信息足够扁平，可以尝试轮播导航，如果应用得当，能够给人耳目一新的体验。

这种导航能够最大程度的保证应用的页面简洁性，操作也是最方便的。

但是缺点是不能够快速的定位对应的分页内容。

9、底部菜单导航

使用底部菜单导航的APP，相对来说，都是一些功能菜单比较少的APP应用，因为底部空间位置有限，只能主要列出应用程序重要的功能。

10、APP混合组合导航

当用户需要聚焦内容，同时又需要一些快捷入口能够连接到某些页面时，就可以采用组合导航。

组合导航上方用宫格的形式展现快捷入口，与标签导航不同的是，这些宫格入口之间不需要是平级的关系，也不必包含整个层级的内容，你可以将它理解为一种图形化的文字链。

这种导航比较灵活，能适应架构的快速调整。

马海祥博客点评：

导航的设计是App设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽量留给主体内容，优秀的导航设计会让用户轻松到达目的地而又不会干扰和困惑用户。