最近一直在做后台的项目，经历为数不多的项目中，大部分项目都使用的Elemnet或者Ant Design 。
作为两大热门组件，其导航栏的设计，都使用了侧边纵向导航 。于是今天就来探究一下，为什么侧边纵向导航好？
【怎么录电话导航提示音比较清晰 现在导航哪个最好用】01 导航是什么？我们为什么需要它？
在了解侧边纵向导航之前，我们需要搞清楚两个问题，导航是什么？我们为什么需要导航？
Element中关于导航定义：导航可以解决用户在访问页面时，在哪里？去哪里？怎样去的问题 。Ant Design关于导航的定义：导航用来展示当前产品中，用户在哪儿？可以去哪儿？
从上述回答，你可以了解到什么叫做导航了，那么我们接着看看现实生活中的导航是什么样的 。
当你逛街时，路牌 商场地图 购物目标这三要素构成了你的路径，你可以清晰地达到目的地完成自己的购物行为 。在现实生活中，这样的行为每天都被重复，非常常见 。路牌 商场地图 购物目标也就构成了一个导航 。
你通过路牌知道了我在哪里，通过商场地图知道了我要去哪，通过购物目标完成了最终的购买行为 。
现实中因为一切事物都具有地理位置的对照以及实物，所以你并不容易迷失，当然路痴一样可能会迷失 。可是在网络上，在你浏览某个网页或者应用时，由于并不存在实际的产品给你，所以一旦没有导航，你可能就会迷失在一次点击之后，或是遗忘你当前的页面记录，导致你无法找到自己想要浏览的东西 。
这个时候，导航的作用就凸现出来了，它记录了你当前的位置，告诉你，你应该怎么去到自己想要去的地方 。
02 侧边纵向导航为什么常见且好用？
在了解完导航的定义及其作用之后，我们现在需要来想一想，我们常见的导航有哪些类型？我们如何在合适的场景下去使用它们？
在B端系统当中，常见的导航栏有两类：纵向导航、横向导航 。如下图所示：
除此之外还有更多基于上述两个导航栏拓展出来的导航栏，比如更多目录，缩放、叠放等等，但是它们的原型都是上述两个导航，只不过是适用于不同场景而做的的拓展 。
那么为什么B端系统的导航栏都会选用侧边和顶部呢？这里需要借助一个新的知识点：F模式 。
F形状网页浏览模式源自美国网站设计工程师杰柯伯·尼尔森在2006年4月发表的《眼睛轨迹的研究》报告 。
F模式是指人们在网页上浏览内容时，往往会遵循F字母的观察模式：
读者的眼睛首先是水平运动，常常是扫过网页内容的最上半部分，这样就形成了一条横向的运动轨迹 。这就是F字母的第一条横线 。读者的眼光略微下移，很典型地扫描比第一步范围较短的区域 。这就又画了F字母中的第二条横线 。读者朝网页左边的部分进行垂直扫描 。有时候，这个举动很慢而且很有系统性，这样就画了F字母中的一条竖线 。
通过这次实验，我们可以得出一个结论，那就是纵向或者横向，能够让浏览者第一时间注意到，这也是为什么我们需要让导航置顶，或者保持在侧边栏的一个因素 。因为这些地方，会被浏览者重点 。
那么为什么侧边导航会比横向导航要好呢？我们可以从两个方面来探究：布局和适配 。
1. 布局
从布局角度来说，横向导航有优势，因为横向导航栏占据的位置非常小，通常只有一行内容 。
而侧边导航栏则不同，往往需要占据一个页面的 1/5 来做展示，会更多影响其他的内容 。
但是这里面横向导航栏有一个缺点无法避免，那就是一旦导航栏内容过多时，用户的操作就会非常不方便，需要滚动或者隐藏后续内容，导致操作成本和认知成本过高 。
推荐阅读
- 男生都逃不过前列腺增生 男生前列腺增生是怎么回事
- 神马福利是什么？神马福利怎么样？
- 吸烟的危害手抄报 吸烟的危害手抄报怎么画
- 房间里的蛾蚋是从哪里来的 蛾蚋是怎么出现在房间里的
- CECT9898存储多个重要的电话号码技巧
- 骨髓增殖性肿瘤怎么得的 骨髓增殖性肿瘤怎么办
- 卵黄囊肿瘤是怎么回事 卵黄囊肿瘤是什么
- 癌症的肩膀疼是怎么回事 癌症的肩膀疼是怎么回事呢
- 万圣节手抄报 怎么画万圣节手抄报
- AutoCAD实体显示怎么控制参数