在UI界面中，导航就跟现实世界中的地图差不多，展示着已经存在的地理位置（界面功能），与到达该位置的路径（导航层级）。
TOB导航应用场景
顶部栏导航
顶部栏导航根据导航层次及功能承载量多寡主要分为以下三类，一类是常在网页中应用到的仅一级导航展示，该类型常应用于面向TOC消费者的web端产品，功能简单、层级浅。
图为站酷
第二类基本都面向商家端的TOB客户的web端产品中，呈两栏导航展示，应用于功能数量不多，且重要度都较高，或者为快捷操作等。
图为禅道（互联网产品设计测试平台）
图为微信公众平台
第三类导航多应用于拥有多个面向TOB的产品，属于平台型，承载大量服务，所以往往还有搜索及分类。以上两类主要应用于单一产品的功能导航。像阿里云、腾讯云、百度云等等官网都采用第三类。
图为腾讯云
侧边栏导航
侧边栏导航与顶部导航类似，都属于一级导航，也会根据功能层级数量有不同的呈现样式。相对于顶部栏导航，视觉所占比例更重，操作更加便捷。一般为tob产品的常用导航类型。
当功能仅两级时应用
当功能为三级时应用
当功能很多时应用
分段导航/标签页
侧边栏导航与顶部导航属于一级导航样式，分段导航在web端多叫标签页，多应用于二级或次级导航样式，且分段内容具备关联性的快捷操作。
根据不同的展现层级，标签页的UI样式有以下几类，注：不同UI样式并无明确的层级区分，设计师在设计过程中可自行通过色彩、背景填充、位置关系来区分分段导航的视觉优先级。
图片来源antdesign
树结构导航
其实在上面说过的一级导航样式也有树逻辑（由树干到分支），这里说的树结构导航应用于更加复杂的树逻辑场景（树干和分支都很多），在tob产品中常用于城市园区物业管理场景中。
TOC导航应用场景
toc产品大家在日常手机使用中就见过不少类型，这里简单的描述一下。
常用一级导航主要为标签式导航和舵式导航，标签式导航的优点是固定在底部（IOS）或顶部（安卓），可以进行快捷操作，缺点是会占据一定的垂直空间，在以前的小屏幕手机中对于信息咨询类的产品会有比较大的影响。
所以有时也会采用抽屉式导航（最早应用于安卓）来收纳功能，目前市面上的产品很少应用侧边栏导航了，因为侧边栏导航多了一次交互点击，且位置离拇指的操作区域较远，收纳在侧边栏的功能会减少用户的点击行为。
舵式导航常用来重点突出某一个功能或某个快捷操作，目前在充电产品中比较常见。
小桔充电小程序
分段导航、下拉菜单式导航可以放在一起说，分段导航最早应用于IOS，下拉菜单导航最早应用于安卓4.0，经过时间的演变，分段导航UI不局限于方框，下拉菜单导航不局限于下拉。功能和交互几乎一致，展现形式有细微差别。
现在的控件应用
早期的控件应用
目前下拉的应用
列表式导航，主要用于辅助主导航的二级导航，或者多信息的罗列展示，特点是空间利用率较高，展示内容更多。
宫格式导航，目前各大APP常用的金刚区、一些工具类产品（米家、美图秀秀等）都应用了宫格式的导航，金刚区的业务目的是流量分发，工具类产品的目的是作为快捷入口。
卡片式导航，卡片式导航多应用于视频内容、咨询内容、图片内容的缩略展示，通过图片或GIF的视觉效果来吸引用户目光，引导用户发生点击行为。
综上所述，导航的目的是基于已有功能的路径引导或快捷操作，但是不局限于以上的表现形式，以满足功能需求的前提下去思考更适用的导航样式设计，才是我们设计师的价值体现。
