移动App中常见的5种主导航设计模式

大多数的移动App中都会有主导航，主导航的设计突出了产品的核心点。同时，应用的任务路径最短化，操作便捷。主导航承载了App最主要的功能，主导航选择的合适与否会影响用户的体验。

 

移动App中常见的主导航大致分为5种：标签式导航、抽屉式导航、桌面式导航、下拉菜单式导航、点聚式导航。

 

一、标签式导航

标签式导航是应用最为广泛的一种主导航模式，随便打开一款App，几乎看到的都是这种导航模式。

 

这种导航模式的优点是：App表达的核心功能一目了然，用户不仅可以快速的在各个标签之间来回切换，而且页面路径扁平化、简单，通过视觉表现用户所属的当前位置，不容易迷失，提高了操作的效率。

 

它的缺点也是比较明显。移动App屏幕的宽度是有限的，因此标签栏宽度有限，能够放置的的标签数量也是有限的。一般不超过5个，不少于2个。

 

移动App发展至今，标签栏的图标设计变得非常成熟了，为了不那么同质化，它也经常融合一些个性化设计。例如，融合产品品牌LOGO或最核心的功能点，加上合适的微动效，丰富了标签栏的样式，变得更有趣味。基础的标签式导航作一定的变化，又有了比较新颖的陀式标签导航，陀式标签导航的本质还是标签式导航。

 

如“荔枝”、“微信读书”采用的都是最基础的标签导航，核心功能一目了然，便于操作。“Avocation”融合了本身产品Icon，结合主要功能，既强化了产品形象，又兼顾了核心功能的表达。“全世界”对最主要的功能标签采用陀式的形式，强化了功能。

二、抽屉式导航 

抽屉式导航追求的是突出核心内容，弱化导航界面，一些信息流产品常会使用这种模式。抽屉式导航表现的形式位于当前界面的后面或者当前界面的之上，一般通过左上角的菜单图标或手势向右滑动呼出。

 

例如“QQ”、“豆瓣”、“网易云音乐”都是点击左上角的图标或向右滑动呼出导航菜单。“酷狗音乐”则是点击左上角的图标或向左滑动呼出导航菜单。抽屉式导航占屏幕宽度，每个App也是各不相同的。

 

抽屉式导航隐藏在屏幕的外面，导航界面的空间较大。因此，它的可扩展性更强，也带来了个性化设计的更多可能性。“QQ”、“豆瓣”、“网易云音乐”、“酷狗音乐”抽屉导航中导航入口非常多，形式也比较丰富。

三、桌面式导航

桌面式导航其实也可以看成是宫格导航，因为它把App界面分成了一个个的格子，每个格子承载一个独立功能或信息内容。它类似于手机桌面各个应用入口的导航方式。此种导航方式在工具类App中比较常见。它最明显的优点就是：每个入口有一套独立的体系，同时非常容易扩展、增加更多的入口。

 

如果用户需要频繁地在几个任务之间切换的话，那么这就力不从心了。用户进入一个入口后，只能处理与此入口相关的内容，要跳转到其他入口，必须先返回到入口总界面才能进入其他入口。显然这种操作的路径变长，效率偏低。

 

随着移动App内容不断丰富，单纯的桌面式导航越来越少了，而是融入到其他主导航中，承担起二级导航的作用。

 

“Mori手账”、“藏书阁”、“克拉壁纸”、“网易蜗牛读书”红色矩形部分都是桌面导航的形式，而且都是作为标签导航下的二级导航来使用的。

四、下拉菜单式导航

下拉菜单式导航一般位于App界面的顶部，用户通过点击相应位置呼出导航菜单。呼出的菜单位于界面的上面，点击菜单导航以外区域可以收起菜单。下拉菜单式导航与所在界面的连贯性较好，展开和收起对当前界面没有什么影响。

 

由于它位于App界面的顶部，难以启用手势，不仅不适合需要频繁切换的功能，而且菜单的面积有限，一般都是使用列表来展示入口。

 

现在的App界面中，纯粹的下拉菜单式导航在减少，融入到其他主导航模式中是一个趋势。

 

“百度网盘”里面的分类采用的就是下拉菜单式导航，而导航内部采用的是标签形式来展示各个分类入口。“微博”大家再熟悉不过了，“关注”里面的分类也是下拉菜单式导航。

五、点聚式导航

和前面4种导航方式相比较，点聚式导航的趣味性明显增加。它将用户使用的最频繁的多个核心功能收纳在主界面中显示，方便用户随时使用。作为界面中的全局导航，它常出现在一些主要流程界面中，占据的位置较小。呼出的过程融入动画效果，让点聚式导航更有趣味性。“Daylio”的时间选择，“每日故宫”设置都是点聚式形式。

以上就是5种常见的App主导航的简单介绍及举例。在具体的App设计中，到底选择哪种导航模式？需要设计人员结合应用的核心功能、要表达的内容主要，选择合适的即可。这几种导航模式可以相互融合，结合起来使用。

 

欢迎关注作者的微信公众号：火苗设计