顶部导航 vs 侧边导航，到底哪种更好用？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究，结论是在左侧设置导航好处多多。此外还有很多类似的研究，你可以在这里看到很多相关研究的摘要。值得注意的是，这些研究大都是 2017年之前的研究成果，而如今很多设计范式发生了变化。

1、左侧导航更容易浏览

Eyetracķ荷兰国际集团的研究表明，用户习惯于使用 F 式的浏览路径，这使得左侧导航在一般情况下有着相对更强的可用性，它不需要用户视线上的查找，因为用户会下意识注意到它们的存在。

2、顶部导航更加节省空间

如果我们经常使用笔记本电脑来浏览页面，会很容易注意到不同的导航模块对于页面空间的占用比例，左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍，因为纵向的侧边栏导航需要考虑到横向的标题占用空间，再加上搜索等功能模块的加入，这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠，这种处理方法也不总是有效的，因为这可能会隐藏相关条目的标签信息，降低了导航的可用性。

3、侧边导航更容易缩放和收纳

也正是左侧导航本身的排版逻辑，它通常可以显示比顶部导航多一倍的条目内容，如果你的信息架构本身涉及到的一级菜单条目较多的时候，采用左侧边栏导航是明显更合理的选择，而且这种导航非常适合随着时间推移逐渐增加条目的需求。

4、侧边导航支持定制化导航结构

侧边导航本身虽然占用的空间更大，但是它也有着更多的空间根据需求来定制各种不同的需求，相比于顶部导航，侧边导航甚至可以直接将分层的二级菜单直接展现出来，就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

5、侧边栏更和桌面端系统更一致

你会注意到 macOS 和 Windows 操作系统当中，系统默认的用户界面大都采用了灵活的侧边栏导航设计，很多 web 应用也是如此，它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。

6、悬停激活下级菜单在顶部导航中更好用

悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的，但是在侧边栏导航当中，这种设计可能会在一定程度上遮挡住下级菜单，如果使用在旁边展开的方式，可能会占用大量的空间，总而言之，它更贴合顶部导航的交互模式。

7、顶部导航栏适合做超级菜单

顶部导航正是因为和悬停出发下级菜单的功能很搭，所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式，这种布局也为产品展示和广告留出了足够多的空间。

8、尽量避免重设计时改变导航模式

如果一种导航模式看起来不够好用，那么是否要借助重设计的机会，切换到另外一种模式呢？根据 Jira 的用户测试，95% 的早期用户对于这种情况会感到非常迷惑，即使是再小的导航功能修改都可能直接影响到大量用户的日常使用，因此不管哪种导航模式，一旦选定，尽量不要改变。

9、不论哪种导航栏都面临响应式设计的挑战

对于没有太多条目的顶部导航，在移动端上依然可以直接在顶部呈现，不过如果太多了就需要使用汉堡菜单来承载，或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点，因为导航模式本身是一致的，但是有限的空间内如何呈现大量的导航条目同样存在挑战。

结论：用哪种导航栏取决于需求

顶部导航：占用空间小，在页面的位置最为显著，涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站，顶部导航还是很好用的，对于层级较少但是二级条目特别多的超级导航，顶部导航也是不二选择。

侧边导航：侧边导航支持一级条目较多且层级较多的导航需求，扩展性良好，对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。

更多来自 Taras Bakusevych 的文章：

这10个设计原则，是确保金融类产品体验优秀的核心要义

财务和金融相关的应用是一个相对专业的分支，在这个领域当中创造体验优异的设计并不是一件简单的事情。

九个步骤搞定！用户历程图终极制作指南（附模板）

编者按：这篇文章来自资深设计师 Taras Bakusevych ，他对于产品和体验有着非常深入的理解，这篇文章深入梳理了如何制作用户历程图才是合理和便捷的，是一篇相当给力的用户历程图终极设计指南：用户历程图（Journey Mapping）可能看起来是一个复杂的东西，尤其是当你尝试