导航栏的类别有几种，在许多设计或者交互的专业网站上都会有所总结，以下是我一名同事总结的文章，供大家参考http://www.woshipm.com/pd/186928.html
这里我也再复述一遍，只是为了按照自己的思维帮助自己整理脑海中的信息，内容更多的来自于同事的文章。
导航的类型
总的来说，所有的导航都是在原始导航基础上演变而来的
简单地来说就是在原有的文字上加上链接。通过原始导航的演变可以生出以下几类导航。
一.在当前页面一屏部分展示就可以完成，不需要额外操作的
1.标签导航，也叫作选项卡导航。
标签导航
放在页面底部，一般不超过5个，常见3~4个，如果出现超过5个的现象，一般将最右边的标签换为更多，将其他不重要的标签都放在里面。此种导航适用于用户需要在标签之间进行频繁的切换，常见的案例有支付宝。
如果出现有一个标签是主要功能，运用最频繁也会出现以下的标签变式
标签导航-变式一
再进行一些尝试会有以下变式
标签导航-变式二
顶部标签在ios中一般用作二级导航，在Android中用着一级导航，但是当Google推出抽屉式导航作为一级导航后，顶部标签也默认地成为二级导航。如果将界面想象成长宽无限大的，界面作为展示的窗口可以发现此时顶部标签是可以根据需要进行左右滑动展现更多个的。
二.一屏不能完全展示，需要有些辅助页面或者切换的
2.抽屉标签
抽屉标签
可以看出抽屉标签适用于屏幕只想展示一种功能，其他的功能用的不是很多，需要的时候调出来，平时藏起来就行了，这个时候抽屉标签特别适合。需要注意的是抽屉标签需要设计过渡动画，让用户知道菜单收纳的地方。
3.下拉菜单式导航
放于顶部的一类导航还有下拉菜单式导航，如下图
下拉菜单式导航
适合有同等级切换的导航，但不适合频繁切换。
如果左右分割，会出现以下变式
下拉导航-变式一
4.点聚导航
顶部说完了再来看看底部导航
点聚导航
此种导航适合轻量级产品，展示内容不多，设计上倾向于极简风格。多用于图片展示方面。
三.需要整个单页都成为导航页的
5.宫格导航
宫格导航
多用于耳机导航，适用于存在多个平行关系的功能选择上，让用户自己选择需要的内容的，当然根据后台数据要将最频繁使用的置于前面。
宫格导航-变式一
上图风格上类似于微软的metro design
宫格导航-变式二
上图长格子与短格子穿插进行，有点短格子是长格子注释的味道
宫格导航-变式三
上图进行分类整理后更清晰明了
宫格导航-变式四
再次进入左右无线延伸的功能
6.列表导航
个人感觉这个有点像宫格导航，只是将方格子变成长条，功能上多加了一个二级下拉菜单
列表导航
如上图通常不会放在首页，结构清晰，简单粗暴，能够帮助用户快速定位想要找的东西
列表导航-变式一
如上图同样通过分类得到变形
列表导航-变式二
加上主要的数据有时候甚至可以省略下一级菜单的功能。
四.需要在多个页面之间进行切换
7.轮播导航
轮播导航
个人觉得此种导航更适合开机动画，介绍新的功能，最好不要超过5个页面。
一般来说同一个页面更多的时候是由多种导航共同组成，“同一页面怎样采用不同导航”请听下回分解。
原创文章，转载请注明出处。
网友评论