移动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设计中,到底选择哪种导航模式?需要设计人员结合应用的核心功能、要表达的内容主要,选择合适的即可。这几种导航模式可以相互融合,结合起来使用。
欢迎关注作者的微信公众号:火苗设计












































































