查看原文
其他

最最最常见的10种移动端导航类型,都归纳再这儿了!

格格学姐 互联网产品设计 2023-07-30

转自:空两格


手机导航设计是人机交互最重要的桥梁和平台,旨在引导用户正确的方向,不迷路。


好的菜单设计不仅能提升整个产品的用户体验,还能让用户耳目一新。




导航菜单的作用是什么


提升产品内容和功能的结构和层次

导航是APP的骨架,支撑着整体的内容和信息,让内容按照信息架构有机组合,直观清晰的展现在用户面前,让碎片化的内容变得饱满有序。同时,结构化的布置同时也增强了生态感。


·突出核心功能

产品赢得市场的根本在于它的核心功能。因此,核心功能必须放在用户容易掌握的地方。并且要控制次要功能的比例,以免分散注意力。通过导航,可以很好的突出核心,适当隐藏次要功能。


·简化用户旅程

合理的导航系统和流畅的任务路径可以让用户快速实现目标,形成流畅的用户体验。用户旅程的简化直接影响到用户对产品的黏度和转化率。因此,高效的导航可以将用户简单直接地引导到应用程序功能。




10种移动端常见导航类型


1.选项卡式

这种流行的标签导航形式通常被称为“方向舵导航”,因为它的样式类似于用来指挥船舶的方向舵,两侧都有其他操作按钮。当页面拥有大部分相同层次的内容,又需要非常重要且频繁操作的入口时,可以使用这种APP导航方式。


优点:

1.可以突出显示频繁操作的最重要的入口,极易发现和访问。从网站或应用程序的任何位置,用户都可以知道他们在哪里以及他们可以去哪里。2.操作性强。简单的基于选项卡的导航意味着用户可以快速轻松地显示特定于选项卡的通知。例如,LinkedIn 使用基于选项卡的导航结构,当用户有新消息、提要更新和 LinkedIn 请求时,它可以快速通知用户。


缺点:

1.只能拥有少数导航选项,对于较大的站点,这种类型的菜单很快就变得无法使用。

2.占用屏幕空间,虽然对屏幕空间的影响相对较小,但它仍然存在。随着设备尺寸的缩小(比如穿戴设备),菜单的便利而牺牲的屏幕空间可能无法带来好的用户体验感。



2.抽屉式

它也称为列表类型菜单,抽屉式导航是当今最流行的导航模式之一。它有助于清洁主屏幕,同时保持菜单易于访问。一个紧凑的操作按钮通常放置在屏幕的顶部(通常用三个水平线定义),点击后会打开一个菜单内容列表。抽屉滑动导航很好的弥补了标签式导航切换限制的缺陷。通过垂直排列切换项,隐藏当前页面的菜单来解决的。只需轻轻一按,进入按钮就会像抽屉一样从菜单中拉出。


优点:

节省页面显示空间,让用户专注于当前页面,扩展性好。


缺点:

1.需要按钮才能触发,在操作上不方便,不同的标签页切换步骤多。2.可见性也比较差,用户无法将按钮与侧边栏联系起来,侧边栏的渗透率很低。



3.卡片式

卡片式导航原型类似生活中扑克牌,模仿切牌、换牌、翻牌等动作模式,是一种比较新颖的导航模式,在市面上应用这种导航的应用不算太多。通常用户可以通过手势操作,查看展示的页面,通过左右滑动快速选择需要仔细阅读的页面。探探中采用卡片式设计为导航和内容交互的主要模式,像卡片一样堆叠展示推荐用户,左滑表示无感,右滑表示喜欢或点赞;AcFun中采用卡片式设计展示推荐的番剧,任何方向的滑动都为切换不同的番剧。


优点:

用户可以无限制的操作下去,以最简单的方式进行自己的选择,方便快捷


缺点:

一次性获取信息量有限,长时间重复操作用户有疲惫,感觉乏味的可能




4.翻页式

翻页式导航最常见的就是利用页面控件(iOS中的标准控件),能够告诉用户打开了多少个视图,以及它们当前处在哪个视图当中,利用手势操作控制页面的位置。


优点:

用户快速知晓已打开界面数,方便进行快速筛选进行操作


缺点:

无法查看每个页面详细内容,有手误操作的可能



5.列表式

列表式导航中的每一个列表项都是进入子功能的入口,用户通过在每个页面选择一次进行导航,直至到达目标位置,并且模块之间的切换必须返回至列表主页当中。列表相当于一个一行一列的表格,列表项中既可以填充文字图片,也可以填充按钮或者展开某一项。


优点:

1.允许所有潜在目的地的清晰连接。从一开始,它就为公司提供了对客户旅程的深度控制,从而实现更好的优化,进而带来更好的旅程。

2.快速概述用户所期望的,并指引用户正确操作


缺点:

1.不利于浏览,用户只能从少了文字中提取信息进行选择

2.不支持用户直接链接到站点。用户如果无法对最终站点进行准确判断,有时需要尝试数次才能到达最终站点,浪费时间且消磨用户热情。



6.陈列式

陈列式导航可用来呈现实时内容,比如新闻、菜谱、文章或照片,可以采用网格布局或轮盘布局,还可以采用幻灯片模式进行展示。陈列式导航本质上也是另外一种层级导航结构,进入另外一个内容详情之前,必须先回到主界面重新点击进入。相较于列表导航、宫格式导航的不同在于,陈列馆式导航有更丰富的表现形式、更加随意的组合效果(瀑布流等)以及丰富的动态效果(轮盘、幻灯片形式)。


优点:

这种导航简单但不粗糙,清晰明显的导航有助于提高效率,用户明确直观感受,便于选择操作


缺点:

需要注意配色方案,过于花哨的设计会让用户感到视觉疲劳;同时要注意布局比例,将信息有效传递或筛除



7.滚动选项卡式

滚动选项卡与固定选项卡同属选项卡式,一般滚动选项卡要比固定选项卡要窄, 一个模块中可以显示多个(超过5个)类别的视图,并且还可以进行扩展以及自定义展示(多用在频道/模块定制中),同样可以左右滑动切换不同类别的视图。


滚动选项卡能通过水平滑动,定位到更多的选项卡视图中。如果应用的内容有很多视图,或者灵活的插入而不能确定有多少视图将会被展示,就是用滚动选项卡。


优点:

灵活,相比于固定选项卡具有更多的选择,且所占屏幕空间更小


缺点:

需要用户进一步学习来操作



8.跳板式

跳板式导航可以看做列表式导航的变形,同样属于层级结构导航,不同于列表导航地方在于跳板式导航是以N行N列的表格来呈现,同时表格中元素以图片为主。宫格中一个格子代表一个功能/模块入口,从一个模块到另一个模块用户必须原路返回几步(或者从头开始),然后做出不同的选择。宫格式导航曾经在APP中非常流行,主要是因为它能容纳更多的功能入口,同时跨平台不受平台限制。


优点:

用户可以快速选择,迅速跳转


缺点:

所占面积大



9.下拉式 

下拉式导航能让用户在有限的屏幕空间上做更多的动作,通常用来筛选同一信息模块下不同类别的信息,或者快速启动某些常用的功能模块,而不需要频繁的页面跳转。Android中对应的控件为spinner控件,但该控件用于同一类别下不同视图之间的切换,而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件,可以实现不同类别之间的切换。


优点:

1.方便快捷,有利于信息储存,可以适应多层级,内容庞杂的网站或app

2.占据的空间很小,很容易嵌套进其他的导航中去。


缺点:

导航栏都不常见,操作步骤也比较复杂



10.折叠式

折叠式导航通常节约了界面空间,让界面看起来更整洁,而用户通过打开折叠的方式获取更多有效信息。


优点:

1.提供的额外空间可以创建一个更干净、更美观、更具现代感的设计

2.兼容移动用户模式


缺点:

一些用户会有使用困难,一些用户对小图标不是很熟悉,当主要用户年龄层级偏大或偏向于使用PC设备,应该慎重考虑是否使用它




推荐阅读

MacBook 也加刘海太丑了吧?苹果设计师:听我解释…

B端产品C端化,抱歉我想的太简单!

原来头像这么小的设计细节,也有这么多知识点



在看是最好的肯定与鼓励

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存