工作的缘故，最近对于导航栏进行学习和了解，现在积累了一些心得，这里和大家分享一下。

因为大多数用户的视觉模式遵从书面文本的习惯，也就是自上而下，从左往右阅读。因此，我们很少见到导航在页面右侧或者页面底侧这两种模式。

我们常见的web导航栏往往是以下几种模式：

1.顶部导航

优势

1. 用户的主流浏览习惯是自上而下的，将导航栏放在顶部更加便于浏览和点击。

2. 由于这种设计使得导航栏条目受限，设计者必须设法减少主区域的数量、尽量缩短页面主题。这种设计往往会更加简洁有力。

3.导航置顶，对二三级导航进行隐藏，只有鼠标移动（点击）到一级导航才会出现，在往下滚动时，品牌信息和其他元素会被缩小，这样一来导航栏占屏幕空间可以更小，产生的视觉干扰也会变小，使的用户沉浸感更加强。

劣势

1. 能够放入其中的条目有限，因为导航栏的长度是有限制的（一级类目 建议 2-7 个，中文字长 2-6 个）。如果展示的条目数量很多，则导航栏上可能没有足够的空间来容纳；如果条目名称过于精简，又容易变得抽象，用户可能看不懂。

2. 由于对二三级导航做了隐藏，所以查找二三级页面的步骤变多，用户需要多次移动点击进行切换

3. 不利于进行定位（需搭配面包屑进行使用）

2.左侧导航

优势

1. 左侧导航会留有足够的空间，让后续的条目能够放进去，易于向下扩展，可配合滚动条使用，适合信息层级多、操作切换频率高的应用。

2. 相对顶部导航来说，允许条目名称适当变长。

3. 屏幕一般是长方形，导航在左侧不影响可视区域（除非是很长的报表需要查看，即字段特别多的情况，解决方法是横向移动）。

4. 条目都在左侧，可采用左对齐的方式便于阅读。                    

劣势

1. 绝大多数用户是右撇子，如果采用自适应布局的移动端，在移动端上这些用户需要横快整个屏幕去点击导航。

2. 在同等内容量之下，侧边栏导航会让用户滚动页面的时间更长。

3. 占据页面的视觉进入点，让页面显的略微拥挤，用户在阅读内容时会被迫扫描到侧边导航。

4. 如果存在三级导航的话，会使侧边导航变宽（占空间），并且不太好区分二级和三级导航。

3.混合型导航

混合型导航主流模式：一级类目在顶部，二三级导航在左侧。适用于二三级菜单使用频率高的情况。

优势

1. 可以快速定位到一级导航，可专注于高频使用的二三级菜单。

2. 相对于采用三级菜单及以上的侧边导航较省左侧空间，也更为美观整齐。                                                  

劣势

1. 切换一级菜单时，视线移动距离大。如果经常需要切换一级菜单时容易降低用户体验。

2. 顶部导航会占用空间，牺牲了一定的空间利用率。

4.总结

1.顶部导航：适用于操作不多，侧重于浏览页面的官网、门户网站。

2.侧边导航：适用于操作频繁、层级不深的管理性质系统。

3.混合导航：适用于主功能突出（一级菜单切换频率少），二三级菜单条目繁多且操作频繁的管理性质系统。

以上内容，如有错误，烦请指出，谢谢～