发布时间：2022-6-11 分类： 电商动态
在整个应用市场中，导航设计的设计总是以多种组合使用。
导航设计的目的是突出产品的核心并使用户的任务路径变得平坦。允许用户顺利浏览产品，以便用户可以随时了解他们在应用中的位置以及如何访问目标页面。
产品的导航系统是产品的信息结构在用户界面上显示的方式。移动产品导航的设计并不是最好的，只有最合适的，根据您的产品采取最合适的导航设计。
在整个应用市场中，导航设计的设计总是以多种组合使用。我们来看看一些常见的导航设计模式。
01底部标签（Tab）导航
说明：
当产品的整个体验流通过几个常用功能模块（通常不超过5个）运行时，意味着用户需要在多个标签条目之间来回切换;为了确保开关的效率，它将贯穿产品的整个体验。流量模块在Tab Bar位置平铺，确保用户路径平坦。
iOS原创App Podcast，5Tab。
优点：
良好的可视性，明显的位置，易于查找，它可以让用户直观地了解APP的核心功能;
可操作性好，用户可以轻松到达这个区域，并且可以快速切换几个标签而不会丢失方向，简单高效;
符合习惯的ios原生控件，易于开发;
优先级更高，用户经常使用，并且彼此独立。
缺点：
住宿数量有限，通常最多五个（否则需要与其他方法结合使用水平和收回）。
它占用了一点空间，通常采用文本+图标的形式。
02顶部选项卡导航
说明：
顶部标签由Google提出。为了区分导航模式和iOS，由于手指难以触及顶部，因此Google相应地提出了手势操作的解决方案：通过将标签滑动到屏幕的左侧或右侧来切换标签。
在实际项目中，顶部和底部都经常使用。
优点：
良好的可扩展性：标签数量没有上限，但如果单词太多，则页面渗透率会越低;
占地面积小：与底部标签相比，顶部标签通常占用较少的空间（因为您不需要考虑手指点击，您可以缩小区域，只需使用图标或文字），您可以为内容安排更多空间。节目。
手势操作非常方便。
缺点：
可见度略低：这是空间占用面积变小的结果。
03舵导航
说明：
点聚合方法将多个核心功能聚合到主界面进行显示，方便用户调用。将出现与其他导航样式（如选项卡）成为方向舵导航。
与标签导航类似，它是点媒体导航和标签导航的组合。一个导航标签包含更多操作选项，也可以理解为标签中的更多辅助导航标签。当页面具有相同级别的大量内容并且需要非常重要且频繁操作的门户时，可以使用该APP导航模式。
优点：
把主要功能按钮放在中间类似于制作内容，标签更加醒目醒目;
同时，主功能标签已经扩展，为设计增加了一些个性化的亮点。
缺点：
它占用了一点空间，通常采用文本+图标的形式。
04轮播导航
说明：
当您的应用信息足够平坦时，您可以尝试轮播导航;
优点：
它可以最大程度地保证应用程序页面的简单性，并且操作也是最方便的;
缺点：
无法快速找到相应的分页内容;
05宫殿导航
说明：
宫殿格式导航广泛用于每个平台系统的中心页面;
以辅助页面的图形形式用作内容列表，或作为一系列工具条目的聚合使用;
频繁用户切换的概率相对较低;
它可能在不同的文章中被称为：跳板（图标卡类型），磁性类型。
优点：
非常可扩展，易于组合不同类型的信息（操作，广告，内容块，设置等）;
可以在视野中显示许多功能，使用户可以了解整个APP提供的服务，从而选择他们需要的服务;
静态和动态集成可以在保持视觉统一的同时显示丰富的信息;
跨平台不受平台限制。
缺点：
每个盒子彼此独立，它们的信息之间没有交集，不可能相互跳跃;
当安排太多时，用户很容易眼花缭乱，压力很大;
06画廊导航
说明：
可用于呈现实时内容（例如新闻，食谱，文章或照片）的网格导航的变体可以是网格布局（例如直播和插播）或轮盘布局（例如格瓦拉电影），也可以使用幻灯片模式显示。
画廊风格的设计模型最适合呈现不断更新，视觉直观且彼此独立的内容。
优点：
与列表导航和宫廷导航相比，画廊式导航具有更丰富的表现形式，更加随意的效果组合（瀑布流等）和丰富的动态效果（旋转，幻灯片形式）; p>
可视化内容。
缺点：
不适合呈现顶部入口框架;
很容易形成太多的界面内容，这很麻烦;
设计效果很容易变得僵硬。
07抽屉导航
说明：
抽屉类型也是Google提出的导航模式。由于虚拟按钮的存在，使用Android上的底部选项卡将导致双底栏，这对视觉感知不利;
通常用于放置对用户不太常见或对产品不太敏感的功能，或者不需要频繁切换内容的应用程序，如隐藏设置，内容，个人信息等;
更多的是应用于信息流产品的设计，这类产品注重核心内容的显示，用户的任务路径比较简单，几乎都是用来浏览产品的核心内容;至于其他相对低频的模块条目将隐藏在当前界面的后面，避免冗余模块抢占用户的眼球;
它可以在不同的地方调用：扩展菜单，侧面导航，汉堡导航;
“八分之二”的法律告诉我们，80％的用户只使用那20％的功能，这20％的功能是信息流的核心功能;如果80％的常用功能也占据最重要的位置，那么用户将受到干扰，臃肿，甚至放弃使用该产品。
优点：
节省页面空间并允许用户更多地关注当前页面;
由于导航界面隐藏在屏幕外，整个页面是扩展后的导航菜单内容，因此扩展和个性化的空间非常大;
可扩展性好，导航数量没有限制。
缺点：
用户不容易找到，辅助功能需要再次点击，这会在切换功能中为用户带来运营成本;
可见性太差，用户无法将汉堡菜单按钮链接到侧边栏，因此侧边栏的渗透率较低;
不直观，不适合主导航，在频繁操作的情况下，用户在切换抽屉方面没有很好的经验。
08下拉导航/菜单导航
说明：
与抽屉导航相同的目的是突出显示内容。通常位于产品顶部，单击以调出导航菜单;
通常用于在同一信息模块下过滤不同类别的信息，或快速启动一些常用的功能模块，无需频繁跳页;
Android中的相应控件是微调控件，但此控件用于在同一类别中的不同视图之间切换，而不是跳转到完全不同的视图。 iOS中的下拉菜单是一个可以在不同类别之间切换的自定义控件;
还有一个下拉导航的变体，这意味着在下方菜单中显示两个或更多级别，由于许多类别和筛选条件，这在电子商务产品中通常更常见。
优点：
菜单和界面比抽屉更加一致，使用户可以轻松感知当前位置;
缺点：
位于屏幕顶部，相对隐蔽，无法与手势结合，不适合频繁切换功能;
考虑到导航菜单的可用区域很小，菜单内容通常以列表的形式显示。
09列表导航
说明：
作为一个信息组织框架，它是一种信息承载模型，是产品设计中不可或缺的。
适合显示较长或具有辅助文本内容的标题，每行可以包含更多信息。
与Gongge导航类似，它通常用于辅助页面，默认情况下不显示任何内容，因此通常应用程序不会在主页上使用它;
iOS开发和Android都有现成的列表布局插件和模板。
优点：
从上到下查看习惯;
结构清晰，易于理解，高效，高效，可以帮助用户快速定位相应的页面。
缺点：
太多条目或不合理的分发可能导致用户难以找到;
不适合需要频繁切换任务的情况。
总结
导航可能不仅仅是这些，而且每个人的名字都不同，每种类型的导航都有其含义，而不是它不够好，但它可能对您的产品不起作用。在实际项目中，仍有必要根据产品的实际情况进行综合应用。
本文最初由@二奥一七发表。未经许可，禁止复制。
该地图来自Pexels，基于CC0协议
