背景导航栏怎么设计，怎么设计？

编辑 s导读在导航栏的设计中，侧面垂直导航比较常见。比如Elemnet和Ant Design这两个流行的组件，都是使用侧面垂直导航。为什么横向垂直导航好？让 让我们一起看看。

最近一直在做后台项目。在为数不多的项目中，大部分使用Elemnet或Ant设计。

作为两个流行的组件，其导航栏的设计采用侧边纵向导航。, so let ；让我们今天探索为什么是侧边纵向导航好？.

01 导航是什么？我们为什么需要它？

在我们了解横向垂直导航之前，我们需要了解两个问题。什么是导航？为什么我们需要导航？

元素中导航的定义导航可以解决用户访问页面时在哪里的问题。你要去哪里？如何到达那里。蚂蚁设计与咨询公司。导航的定义导航用于显示用户在当前产品中的位置。我能去哪里？从上面的回答，你可以明白什么是导航，所以让 让我们来看看现实生活中的导航是什么样的。

当你去购物时，路牌+商场地图+购物目标的这三个要素构成了你的路径，你可以清晰地到达目的地，完成你的购物行为。现实生活中，这样的行为每天都在重复，很常见。路牌商场地图的购物目标也构成了导航。

你通过路标知道我在哪里，通过商城地图知道我要去哪里，通过购物目标完成最终购买。

在现实中，因为一切都有地理对比和实物，你不容易迷路，你也可能像路痴一样迷路。在互联网上，当你浏览一个网页或者一个应用的时候，因为没有适合你的实际产品，一旦没有导航，你可能一点就迷路了，或者忘记了你当前的页面记录，导致你无法找到你想要浏览的内容。

这时候导航的功能就凸显出来了。它记录了你当前的位置，并告诉你如何到达你想去的地方。

02 侧边纵向导航为什么常见且好用？

了解了导航的定义和作用之后，现在需要思考一下。导航的常见类型有哪些？我们如何在正确的场景中使用它们？

在B端系统中，有两个常用的导航栏纵向导航和横向导航。,如下图所示

除此之外，还有更多基于以上两个导航栏的导航栏，比如更多目录、缩放、堆叠等等，但它们的原型都是以上两个导航栏，只是适用于不同场景的扩展而已。

那么B端系统的导航栏为什么选择侧边和顶部呢？这里我们需要一个新的知识点F模式。.

F型网页浏览模式源于美国网站设计工程师雅各布纳尔逊2006年4月发表的《眼睛轨迹的研究》报告。

F模式是指人们在浏览网页内容时，经常跟随字母F的观察模式

读者 的眼睛先水平移动，经常扫过网页内容的上半部分，从而形成水平轨迹。这是字母f的之一条水平线。的眼睛稍微向下移动，通常扫描的区域比之一步要短。这将在字母f中画出第二条水平线。读者垂直扫描网页的左边部分。有时候，这一步走得很慢，很系统，所以在字母F里画了一条竖线。通过这个实验，我们可以得出一个结论，那就是无论是垂直的还是水平的，都能在之一时间被访问者注意到，这也是我们为什么需要把导航放在最上面或者放在侧边栏的一个因素。因为这些地方，游客会重点关注。

那么为什么侧导航比侧导航好呢？我们可以从两个方面来探讨布局和适配。.

1. 布局

从布局的角度来看，水平导航是有优势的，因为水平导航栏占据的位置非常小，通常只有一行。

而侧面导航栏则往往需要占据1/5的页面进行显示，对其他内容的影响会更大。

，水平导航栏有一个不可避免的缺点，即一旦导航栏内容过多，用户 s操作会很不方便，后续内容需要滚动或者隐藏，运营成本和认知成本很高。

2. 适配

从适配的角度来说，现在多终端场景越来越普遍，所以横向导航会面临一个非常大的问题。从PC迁移到移动时，由于LOGO、用户头像、状态图等信息占据了头部的水平位置，导航栏的内容会被进一步压缩。

此时，用户 操作成本进一步增加。当导航内容过多时，用户需要来回滑动手机屏幕才能找到自己的位置，这违背了导航的初衷，即知道自己在哪里，引导用户到自己想去的地方。

侧面导航栏可以避免这个问题。侧导航通常只有两种状态展开和折叠。在移动到不同端的时候，我们只需要让侧边栏合理的显示相应的内容，用户可以进行一定程度的自定义，因为侧边栏往往不需要和其他元素分享位置。

03

无论是侧面导航还是横向导航，它们的功能都是清晰的，引导用户。我们应该基于这个目的来设计导航，并在适当的场景中使用适当的导航。当导航内容太多，使用多终端设备时，更多考虑侧面垂直导航，因为它的兼容性和运营成本更少。

当你的导航内容不多，而页面浏览内容较多的时候，那么就要考虑横向导航，提高页面的效益。

用率，降低导航栏所占据的版面位置。

无可否认的是，这两种导航栏方式都是极其好的。

更重要的一点是，我们应该保持一个系统内的不同页面之间导航栏一致，千万不能出现A页面使用纵向导航，B页面使用横向导航的情况。统一使用有利于用户操作，也方便我们做优化。

本文由 @子 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

后台导航栏 导航栏设计思路