最近一直在做后台项目，经历了为数不多的项目，大部分项目都用过。Elemnet或者Ant Design。
作为两个流行组件，其导航栏的设计采用侧纵向导航。所以今天，让我们来探索为什么侧纵向导航很好？
在了解侧纵向导航之前，我们需要了解两个问题，什么是导航？为什么我们需要导航？
从上面的答案中，你可以知道什么是导航，那么让我们来看看现实生活中的导航是什么样的。
购物时，路牌+商场地图+购物目标构成了你的路径，你可以清楚地实现你的目的地来完成你的购物行为。在现实生活中，这种行为每天都常见的。+商场地图+购物目标构成导航。
你通过路标知道我在哪里，通过商场地图知道我要去哪里，通过购物目标完成最终的购买行为。
事实上，因为一切都有地理位置和物理对比，所以你不容易迷路，当然，道路疯狂可能会迷路。但在互联网上，当你浏览一个网页或应用程序时，因为没有实际的产品给你，一旦没有导航，你可能会在点击后丢失，或者忘记你当前的页面记录，导致你找不到你想浏览的东西。
这时，导航的作用就凸显出来了，它记录了你目前的位置，告诉你该怎么去你想去的地方。
在了解了导航的定义及其功能后，我们现在需要考虑一下我们常见的导航类型是什么？我们如何在适当的场景中使用它们？
B端系统中常见的导航栏有两种:纵向导航和横向导航。如下图所示:
此外，还有更多基于上述两个导航栏的导航栏，如更多目录、缩放、叠放等，但其原型是上述两个导航，只适用于不同场景的扩展。
那么为什么B端系统的导航栏会选择侧面和顶部呢？这里需要一个新的知识点:F模式。
F形状网页浏览模式源自美国网站设计工程师杰柯伯·2006年4月，尼尔森发表了《眼睛轨迹研究》报告。
F该模式是指人们在网页上浏览内容时，往往遵循F字母的观察模式：
那为什么侧导航比横导航好呢？我们可以从布局和适应两个方面进行探索。
横向导航在布局上有优势，因为横向导航栏占据的位置很小，通常只有一行内容。
侧导航栏不同，通常需要占据一个页面 1/5 展示会影响更多其他内容。
然而，横向导航栏的一个缺点是不可避免的，即一旦导航栏内容过多，用户的操作将非常不方便，需要滚动或隐藏后续内容，导致操作成本和认知成本过高。
从适应的角度来看，多端场景越来越普遍，因此横向导航将面临一个非常大的问题PC端迁移至移动端时，因为LOGO、用户头像、状态图等信息占据头部横向位置，导致导航栏内容进一步压缩。
此时，用户的运营成本进一步增加。当导航内容过多时，用户需要滑动手机屏幕来找到自己的位置，这违反了导航的初衷，即明确自己在哪里，引导用户去他们想去的地方。
侧导航栏可以避免这个问题，侧导航通常只有两种状态，移动到不同的端，我们只需要让侧栏合理显示相应的内容，用户可以在一定程度上定制，因为侧栏通常不需要与其他元素共享。
无论是侧导航还是水平导航，它们都起着明确的作用，引导用户。我们应该设计导航，并在适当的场景中使用适当的导航。当导航内容过多，使用多端设备时，由于其兼容性和操作成本较低，应考虑更多的侧纵向导航。
当您的导航内容不多，页面浏览内容多时，应考虑横向导航，提高页面利用率，减少导航栏占据的布局位置。
当然，不可否认的是，这两种导航栏都非常好。
更重要的是，我们应该保持系统中不同页面之间的导航栏一致，而不是使用纵向导航，B横向导航用于页面。统一使用有利于用户操作和优化。
题图来自 Unsplash，基于 CC0 协议
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至827202335@qq.com 举报，一经查实，本站将立刻删除。文章链接：https://www.eztwang.com/n/wdyy/5524.html
微信扫一扫 
