8种移动APP导航设计模式对照

当咱们肯定了移动APP的设计需求和APP产品设计流程以后，開始着手设计APP界面UI或是APP原型图啦。这个时候咱们都要面临的第一个问题就是怎样将信息以最优的方式组合起来？

或许咱们对照和了解了其它一些常用的APP导航设计模式。

而且良好的APP导航设计模式决策对整个app的核心体验起到关键做用。

有一些优秀的app基于这些模式作了一些创新的优化方案。本文总结了眼下通用且流行的模式。并讨论了这些模式适用的场景，但愿帮助交互设计师更快的做出较合理的信息组织决策。

先来看看8种移动APP导航设计模式对照图吧。

8种移动导航

第一种：app标签导航

标签导航位于页面底部，一般包括5个标签是比較合适的数量。这样的导航是很常见的，假设你的应用需要用户频繁的在不一样分页切换，可以採用这样的导航。它的缺点是会占用必定高度的空间。如微信最新版的APP界面设计图。

app标签导航

另一种：APP舵式导航

眼下流行一种标签导航的变体，我的把它称为“舵式导航”，因为它的样式很是像轮船上用来指挥的船舵，两側是其它操做button。当页面有处于同一层级的几大部份内容，同一时候又需要一个很是重要且频繁操做的入口。就可以採用这样的APP导航模式。

例如如下图葡萄社APP。

app舵式导航

第三种：APP抽屉式导航模式

抽屉导航是讲菜单隐藏在当前页面后，点击入口就能够像拉抽屉同样拉出菜单，这样的导航的长处是节省页面展现空间，让用户将不少其它的注意力聚焦到当前页面。比較适 合于不那么需要频繁切换内容的应用，好比对设置、关于等内容的隐藏。这样的导航设计需要注意的是必定要提供菜单画出的过渡动画。

自从path应用以来。这样的抽屉式导航菜单很受到你们的喜好。

app抽屉式导航

第四种：APP宫格导航（比方九宫格）

这样的宫格导航是将主要入口全部聚合在页面，让用户作出选择。这样的组织方式没法让用户在第一时间看到内容。选择压力较大。採用这样的导航的应用已经愈来愈少。每每用在二级页做为内容列表的一种图形化形式呈现，或是做为一系列工具入口的聚合。

app宫格导航

第五种：APP混合组合导航

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

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

这样的导航比較灵活，能适应架构的高速调整。

app混合组合导航

第六种：列表式APP导航

列表式APP导航是咱们在APP设计种不可缺乏的一个信息承载模式。固然做为一个APP的导航也是很方便的。

只是眼下来看，列表导航通常用于二级页，由于它与宫格导航同样，不会默认展现不论什么实质内容，因此一般app不会在首页使用它。这样的导航结构清晰。易于理解，冷静高效，能够帮助用户高速的定位去到相应的页面。列表项目能够经过间距、标题等进行分组。

app列表式导航

第七种：tab导航

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

tab导航

第八种：大图轮播导航或是 大图上面的导航设计

当你的应用信息足够扁平，能够尝试轮播导航，假设应用得当，能够给人耳目一新的体验。这样的导航能够最大程度的保证应用的页面简洁性。操做也是最方便的。

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

大图轮播导航