最近一直在做后台项目在为数不多的项目中，大部分使用Elemnet或Ant设计
作为两个流行的组件，导航栏设计有侧向和垂直导航所以今天我们来探讨一下，为什么横向纵向导航好
01什么是导航我们为什么需要它
在我们了解横向纵向导航之前，我们需要解决两个问题什么是导航为什么我们需要导航
元素中导航的定义:导航可以解决用户访问页面时在哪里的问题你要去哪里怎么走蚂蚁对导航的定义:导航是用来显示用户在当前产品中的位置我能去哪里
从上面的回答可以知道什么是导航，那么我们就来看看现实生活中的导航是什么样子的。
当你去购物的时候，路牌，商场，地图，购物目标这三个要素构成了你的路径，你可以清晰的到达目的地，完成你的购物行为现实生活中，这样的行为每天都在重复，很常见路牌商城地图的购物目标也构成了导航
你通过路牌知道我在哪里，我通过商城地图知道我要去哪里，你通过购物目标完成了最后的购买。
现实中，因为一切都有地理对比和实物，所以你不容易迷路当然，你可能会像路痴2一样迷路但是在互联网上，当你浏览某个网页或应用时，并没有实际的产品给你，所以一旦没有导航，你可能一点就迷路，或者忘记了你当前的页面记录，导致你无法找到你想要浏览的内容
这时候导航的作用就凸显出来了它记录了你当前的位置，并告诉你应该如何到达你想去的地方
02为什么侧面纵向导航很常见，很好用。
了解了导航的定义和作用之后，我们现在需要思考一下我们有哪些共同的导航类型我们如何在正确的情况下使用它们
在B端系统中，常见的导航栏有两种:垂直导航和水平导航。如下图所示:
此外，在上述两个导航栏的基础上还有更多的导航栏，如更多目录，缩放，堆叠等，但它们的原型是上面两个导航栏，只是针对不同场景的扩展
那么B端系统的导航栏为什么选择侧边和顶部呢这里需要一个新的知识点:F模式
F形网页浏览模式源于美国网站设计工程师雅各布·纳尔逊在2006年4月发表的报告《关于眼球轨迹的研究》。
F模式是指人们在浏览网页内容时，经常跟随字母F的观察模式:
读者的眼睛先水平移动，往往扫过网页内容的上半部分，从而形成水平移动轨迹这是字母f的第一条水平线读者的眼睛稍微向下移动，通常扫描比第一步短的区域这又画出了字母F中的第二条水平线阅读器垂直扫描网页的左边部分有时候，这个移动是缓慢而系统的，以至于在字母F中画了一条垂直线
通过这个实验，我们可以得出一个结论，垂直或水平方向可以使访问者在第一时间注意到它，这也是为什么我们需要将导航放在顶部或放在侧边栏中的一个因素因为这些地方会被游客重点介绍
那么为什么侧导航比侧导航好呢可以从布局和改编两个方面探索
1.布局
从布局上看，横向导航有优势，因为横向导航栏占据的位置非常小，通常只有一行内容。
而侧面导航栏则不同，往往需要占据1/5的页面进行显示，对其他内容的影响会更大。
但是水平导航栏有一个不可避免的缺点，就是一旦导航栏内容过多，用户操作会非常不方便，后续内容需要滚动或者隐藏，造成操作成本和认知成本很高。
2.适应
从适配的角度来说，现在多终端场景越来越普遍，所以横版导航会面临一个非常大的问题从PC迁移到移动时，由于LOGO，用户头像，状态图等信息占据了头部的水平位置，导航栏的内容会被进一步压缩
此时，用户的运营成本进一步增加当导航内容过多时，用户需要来回滑动手机屏幕才能找到自己的位置，这违背了导航的初衷，即知道自己在哪里，引导用户到达自己想要的地方
虽然侧面导航栏可以避免这个问题，但是侧面导航栏通常只有两种状态:展开和折叠在迁移到不同终端时，我们只需要让侧栏合理的显示相应的内容，用户可以进行一定程度的自定义，因为侧栏往往不需要和其他元素共享位置
03摘要
无论是侧面导航还是横向导航，它们的功能都是清晰的，引导用户我们应该基于这个目的来设计导航，在合适的场景中使用合适的导航当导航内容太多，使用多终端设备时，更应该关注横向和纵向导航，因为它的兼容性和运营成本更少
当你的导航内容不多，而页面浏览内容多的时候，那么我们就要考虑横向导航，提高页面的利用率，减少导航栏占用的布局位置。
当然，不可否认的是，这两种导航条方式都是极其优秀的。
更重要的是，我们要保持一个系统中不同页面之间的导航条一致，绝不能出现A页使用垂直导航，B页使用水平导航的情况统一使用有利于用户操作，也方便我们优化
来自Unsplash的图像，基于CC0协议。
相关文章
精彩导读
热门资讯
编辑推荐
