关于网站的顶部导航设计和侧边导航的设计指南

关于顶部导航和侧边导航的争论是每个设计师在某些时候都会面临的。关于哪个更好没有明确的共识，这通常归结为个人喜好。然而，最近的研究表明，导航的选择会对用户交互产生重大影响。

我们将探讨这项研究的结果，并就如何为您的UI界面选择正确的导航提供指导。在UI界面设计方面，用户体验至关重要。用户应该能够快速轻松地找到他们需要的东西。但是您如何确保您的导航满足这些需求呢？最近的一项研究（网页设计建设的三级菜单导航结构比较）根据导航时间、用户犹豫、光标移动和用户偏好等标准比较了各种菜单布局。这项研究的结果可以帮助您为您的界面选择正确的导航。

哪种导航更容易被看到？
人们基于眼动追踪研究以F型的视线模式扫描网页。这种模式的特点是许多注视点集中在页面的顶部和左侧。换句话说：用户首先以水平移动方式阅读，通常跨越内容区域的上部。 所以我们可以假设顶部和左侧导航在这方面似乎定位良好。在这种情况下，左侧导航会显着提高速度。

更大程度的节省空间
如果您查看普通笔记本电脑或固定计算机屏幕并比较不同导航组件占用的部分，您肯定会注意到左侧导航通常会比顶部导航占用 3 甚至 4 倍以上的空间。 最重要的是，让我们为搜索或其他元素（如通知或个人资料信息）添加一些可扩展的保留空间。

提升扩展性的规模
随着产品的增长，它需要可扩展性。这对设计师意味着什么？我们需要预测未来。回到导航选项，通常取决于设备和字体大小（因为这些指标可能会改变），您将能够在折叠上方的侧导航中显示至少两倍的导航链接数量。当您的信息架构有许多无法在逻辑上分组为多个块的顶级项目时，侧边导航栏会更好地工作。将来，随着产品的增长，您可以添加更多项目。额外的点去侧面导航。

侧边导航 = 可定制的导航
对于想要配置自己的导航的用户来说，侧边导航是最佳选择的原因有很多。一方面，它比其他选项更具可扩展性。自定义和可变菜单也很常见。侧边导航的另一个优点是它允许分层菜单，这对于组织信息非常有帮助。

与桌面的一致性
桌面应用程序中的顶部导航和侧边栏导航之间存在一些关键区别。一方面，侧边栏在 macOS 和 Windows 应用程序中的使用更为广泛。这可能是因为它对用户来说感觉更自然或原生。此外，与顶部导航相比，侧边栏通常为链接和其他信息提供更多空间。基于这些因素，如果您正在使用桌面应用程序，您可能需要考虑使用左侧边栏进行导航。

悬停激活的子菜单
左侧导航中的抽屉式子菜单可能难以与光标一起使用，尤其是在对角线移动时。此外，无论子菜单中有多少项目，侧面导航通常会阻止屏幕上的其他垂直窗格。

打造超级菜单
悬停激活的大型菜单是网站导航的流行选择，尤其是在电子商务网站上。它们提供了一种很好的方式来组织大量信息或一目了然地显示较低级别的页面。这种布局还为产品展示和广告提供了更多空间，这对于电子商务的成功至关重要。

响应式网站设计
两种版本的导航都各有利弊——这取决于您要查找的内容。如果您希望在平板电脑纵向视图上显示所有导航链接，那么顶部导航是您的最佳选择。但是，如果您想要在所有屏幕尺寸上保持一致的导航视图，那么侧边菜单是更好的选择。

在为您的产品选择导航设计系统时，需要全盘综合考量，从不同的角度看待并了解自身产品，您将能够做出正确的选择。