很多朋友对于制作UI时你需要了解的九种导航类型和不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
优点：可以看到当前入口位置，轻松切换入口，不迷路；还可以直接显示当前选择的界面内容；同时，底部标签也是大拇指的热区，方便操作。
缺点：的导航选项数量有限，无法显示太多入口（最多5个，考虑到手指的理想触摸尺寸）。也占据了一定的界面高度。如果是小屏手机，就会影响内容的显示面积。
NO. 2
顶部标签式导航
顾名思义，顶部选项卡导航位于界面顶部，通常使用在导航栏或状态栏下方。一般用于二级导航，因此顶部标签的样式通常直接以文字形式显示，以避免过多的视觉设计和界面中导航层次不清晰。如果再细分的话，顶部导航还可以分为两种：1.固定标签的顶部导航（有些应用在App中作为主导航，比如：QQ音乐） 2.滑动标签的顶部导航（进入App的入口） 5）中的导航不能缺少）。
优点：数量没有限制，数量可以固定也可以不固定；左右滑动可直接切换界面；方便直观地浏览实时更新的内容。
缺点：容易出现界面内容过多，占用界面一定的高度。
NO. 3
分段式导航
分段导航是iOS系统自带的标准控件。适用于开关频率较高的接口分类。导航次数通常在2-4次之间。
优点：可以看到当前入口位置，轻松切换入口，不迷路；还可以直接显示当前选择的界面内容；适用于高频开关接口，操作方便。
缺点：风格保守，灵活性不太好。无法通过左右滑动手势切换。由于字段的长度，数量将受到限制。
NO 4
抽屉式导航
从导航的名称来看，抽屉通常是用来收起和整理的，即核心功能以外的低频操作都放在这个抽屉里。可见抽屉导航的核心是【隐藏】，所以如果我们的产品要求用户有沉浸式的体验，并且其他模块的切换频率较低，抽屉导航是一个不错的选择。抽屉导航的控制手柄通常以按钮的形式出现在App的左上角。点击后，抽屉打开，左侧区域显示导航中的内容。
优点：隐藏了非主要功能，让您专注于核心功能，减少其他非核心功能的干扰，节省接口空间。
:的缺点是由于可发现性较低，一眼看不清楚。其他模块的流量会受到抑制，不利于整体产品流量的最大化。不宜频繁切换，会增加用户的学习成本。
NO 5
下拉式导航
下拉导航通常用于在统一模块下过滤不同类别的信息。下拉导航的目的和抽屉式导航一样，都是隐藏非核心操作和功能。此类导航多用于浏览的二次导航；通过点击，我们可以召唤出一个下拉菜单。下拉菜单通常以浮动窗口的形式显示在界面上层，当我们点击菜单以外的区域时，下拉菜单就会关闭。与抽屉式导航相比，下拉式导航可以让用户感知自己当前的位置。
优点：与接口的一致性比较好。用户可以感知当前位置并节省界面空间。
缺点：不适合频繁切换；不能与左右滑动操作结合，所以比较隐蔽。
NO6
舵式导航
方向舵导航是底部标签导航的变体。按钮中间有一个+号，看上去就像船上指挥用的舵。当标签导航不能满足需求时，我们可以选择舵机导航，将导航的核心功能放置在舵机的中央，并利用突出的颜色来吸引用户频繁点击。舵式导航主要将内容制作的主要功能按钮放在中间。在社区应用中，用户产生GC（用户自发上传的内容）内容的情况很常见。
优点：突出了重要且频繁的操作入口，同时也弥补了底部选项卡导航数量的不足，在设计上也能创造出灵活有趣的效果。
缺点：需要用户点击两次才能到达目标，增加了用户的操作流程。同时，隐藏功能也不宜过多，这会引起用户点击后的反感，增加用户思考和选择的压力，也不适合频繁切换。
NO.7
点聚式导航
当层次信息比较复杂，并且每个模块都有用户经常使用的核心功能时，在这些条件的约束下，我们最好的选择是点对点导航。点对点导航的特点是无论您到达App中的哪个界面，悬浮的CON始终位于界面的顶部，方便不同的用户随时选择自己需要的功能入口。
优点：占用空间小，方便不同用户进入不同模块。通常它的出现都会伴随着交互效果，从而吸引用户的点击欲望，提高产品核心功能的点击率。
缺点： 悬浮在界面上方的点对点导航会遮挡书写的文字或操作。用户需要滑动才能操作，无形中增加了用户的使用步数。通常，点击导航显示为| CON，没有文字描述，所以用户理解上会存在一定的障碍。
NO 8
列表式导航
列表导航是App中必不可少的信息承载方式。在左对齐界面中通常以图标+文字的形式排列。如果有不同类型的函数，通常采用空白分割的方法进行处理。 （如下图）列表导航中的每个列表都是一个子功能的入口，每个入口之间的切换必须返回列表首页。
优点：的列表结构扩展性强，可以不断添加信息，并且可以方便地进行分组和分类。简单、清晰、易懂，用户可以快速找到自己想要的信息。
缺点：只能通过排序来区分每个条目的重要性；太多的列表会导致用户拒绝操作，甚至增加搜索功能。切换各个入口时，只能返回列表页面。
NO 9
宫格式导航
共格导航将所有主要入口聚合到界面中，让用户可以整体了解App的服务并选择自己需要的服务。各个入口都是相互独立的，没有太多交集，也没有办法跳跃来相互交流。宫廷式导航有很多变种，比如美图秀秀、支付宝等。
优点：宫格式结构可以作为信息或平台的入口，让用户了解App中的所有服务，并快速选择自己需要的服务。它还具有很强的延展性。
缺点： 用户无法直接看到自己想要选择的服务的内容部分。他们需要点击才能看到具体的界面内容，这会增加用户的选择压力。
网汇天下科技是一家领先的综合性软件和信息服务公司，为客户提供从软件开发到营销推广全过程的互联网解决方案，目标成为行业领先的全链条信息技术服务商。公司与中国移动、平安银行、南方数码、北大青鸟、西门子等行业巨头有着全面深入的战略合作，并深度涉足汽车、金融、电商等重点行业、农业和教育。持续开拓全国市场，为客户提供全链条服务。高质量、高效率，技术服务具有综合优势和行业特色。
用户评论
这篇文章内容很实用了，我一直在学习做UI设计，这次正好能套用你的文章里的技巧！对新手特别友好呢！
有15位网友表示赞同！
其实除了这九种之外，还有很多其它导航方式值得我们去探索和尝试呢，比如基于语音交互的导航等等。我觉得随着技术的发展，导航设计会更加丰富多彩!
有15位网友表示赞同！
我最近在做一个电商APP，需要用到导航栏的设计，这篇博客内容帮助我解决了几个痛点，特别是导航层次结构部分真的要好好学习！
有10位网友表示赞同！
做UI设计最重要的就是用户体验，这篇文章总结的九种导航方式都考虑到了用户的操作习惯，很棒！希望以后能看到更多UI设计的技巧分享～
有6位网友表示赞同！
感觉有些导航设计的描述不够详细，比如视觉导航的部分，可以具体说明一下常用的视觉元素有哪些？
有18位网友表示赞同！
我更倾向于用交互式导航设计，觉得这种方式更符合用户习惯，也能引导用户快速找到所需信息！
有16位网友表示赞同！
我觉得这篇文章的重点在于如何根据不同类型的网站或应用选择合适的导航形式，这一点很重要！
有17位网友表示赞同！
做UI需要不断的学习和实践，这篇文章给我提供了一些新的思路，比如用动画来增强导航的效果，我会好好试试！
有20位网友表示赞同！
虽然文章总结了九种导航方式，但对于一些复杂的网站应用来说，或许还需要更专业的导航设计方案？
有8位网友表示赞同！
我比较认同作者的观点，导航要简洁易懂，用户才能快速找到想要的页面！不过有些网站的设计确实过于复杂，反而影响了用户体验……
有11位网友表示赞同！
做UI设计真是不容易啊，还要考虑那么多因素，例如用户的年龄、性别、文化背景等等。这篇博文让我对导航设计有了更深入的理解！
有9位网友表示赞同！
希望以后的文章能结合一些实际案例分析，这样更容易理解和掌握这些导航技巧！
有5位网友表示赞同！
这篇文章确实很有帮助，特别是对于刚开始学习做UI的学生来说，可以作为入门指南！
有10位网友表示赞同！
导航设计不仅仅是美观的问题，更重要的是要考虑用户的操作效率和体验感受！
有18位网友表示赞同！
在实际应用中，有时需要根据项目的具体需求，来灵活选择不同的导航方式，不能完全按照这篇文章的内容来套用！
有9位网友表示赞同！
个人觉得文章的讲解比较容易理解，逻辑清晰，对于新手来说很有指导意义！
有6位网友表示赞同！
我觉得很多时候用户体验比美感更重要！即使导航设计很简洁，但是功能不实用也还是没有多大意义！
有11位网友表示赞同！
这篇文章开悟了我不少，原来做UI还这么复杂，以后要多学习一些相关知识！
有6位网友表示赞同！